diff --git a/_includes/new.css b/_includes/new.css
index 1fda3ca..236f88c 100644
--- a/_includes/new.css
+++ b/_includes/new.css
@@ -139,6 +139,11 @@
}
}
+/*
+note: minimum supported width 360px matching the smallest preset in Firefox,
+which is Galaxy S10/S10+ Android 11
+*/
+
@layer base {
:root {
/* see https://utopia.fyi/ */
@@ -170,6 +175,8 @@
--space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
--space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
+ --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
+
/* https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIAqB1AwgAgMYHsAOAniADQgAWArjAM4IDaoksCIAChQE54A2cpu3HB1rw6IAMQATAGYwAzNOkkJWAEaSAjIuXiI01QDZtpcQE4ATKdPGJAdnMGsN8QFYAHHJfO5bjbawaOuaqAAzuSiYaBiFuLuY6IRAhIZ4gALoAvsSM0HCIAEowksoCQiJi4oqSWJKmOopYACxYIfXS1lZttlF8EtLRpnJyOljRIeYuOqa2yRoQOgaNIY0arSZykslhQeZb8ZnZ4LksAOIcEET8OILC9BIwLg8POpKNr6866l-FJhAuf38dLFgZMTAZTODwTpGtIYTCdENEcNIgFUQlNhj0lkcsxEAAZCAANxgYEkMA4JWuZTu4hgBhgWl6UkcTgiKkSijZuka0xgqiBjVs-jcC1MLlUEDqJjhMX560a5gccokWmWjSZq2SclaBxxeWQMAg3EpN3KEghnK5IS05lhCRCkjctR0UVUah%2BEmSpjcnRMyVs03mfrCqhcWHtclUkft5g0sYSGkTqyxaVIABccGAaHcXGsQJrlLs89q80s87m82NlDM825kspTPXMkA */
/* todo(maximsmol): these are sRGB, we should try upgrading to P3/Rec2020 */
/* todo(maximsmol): maybe use https://harmonizer.evilmartians.com*/
@@ -370,13 +377,36 @@
body {
display: flex;
flex-direction: column;
+ align-items: center;
+
+ .header-padding {
+ display: flex;
+ justify-content: center;
- > header {
+ padding: var(--space-s) var(--space-s-l);
+ inline-size: 100%;
+ }
+
+ header {
display: flex;
- padding: var(--space-s) var(--space-l);
+ gap: var(--space-xs) var(--space-s-m);
+ align-items: center;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+
+ max-inline-size: 1440px;
+ inline-size: 100%;
+
+ @media (max-width: 600px) {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ }
> h1 {
+ flex-grow: 1;
+ padding-right: var(--space-s);
+
display: flex;
align-items: center;
gap: var(--space-s);
@@ -384,35 +414,74 @@
font-size: inherit;
> .logo {
- block-size: 100%;
- aspect-ratio: 1/1;
+ height: 2lh;
}
}
- > nav {
- flex-grow: 1;
-
- display: flex;
- justify-content: flex-end;
+ nav {
+ display: contents;
> ul {
- display: flex;
- align-items: center;
- gap: var(--space-m);
+ display: contents;
list-style: none;
+ text-wrap: nowrap;
+
+ @media (max-width: 600px) {
+ li {
+ grid-column: span 2;
+
+ display: flex;
+ justify-content: flex-end;
+ }
+ }
+ }
+ }
+
+ @media (max-width: 600px) {
+ > nav {
+ display: none;
+ }
+ }
+
+ > details {
+ @media (min-width: 600px) {
+ display: none;
+ }
+
+ &[open] {
+ display: contents;
+ }
+
+ &::details-content {
+ content-visibility: visible;
+ }
+
+ > summary {
+ list-style: none;
+
+ @media (min-width: 600px) {
+ display: none;
+ }
+
+ svg {
+ width: 2em;
+ }
}
}
}
> main {
+ max-inline-size: 1440px;
+
.banner {
- block-size: calc(1.5 * var(--space-3xl));
- overflow: hidden;
+ block-size: calc(min(30vw, 1.5 * var(--space-3xl)));
+ overflow: clip;
}
.hero {
- padding: var(--space-s) var(--space-l);
+ overflow-x: clip;
+ padding: var(--space-xs);
padding-top: var(--space-l);
h2 {
@@ -421,10 +490,20 @@
display: flex;
gap: var(--space-s);
+ font-size: min(9vw, var(--step-4));
+
+ @media (max-width: 800px) {
+ justify-content: center;
+ }
+
> svg {
color: var(--color-red-400);
width: 2lh;
+
+ @media (max-width: 600px) {
+ display: none;
+ }
}
> .title {
@@ -432,9 +511,12 @@
flex-direction: column;
text-align: justify;
+ text-wrap: nowrap;
.h4 {
line-height: 1.5;
+
+ font-size: min(6vw, var(--step-2));
}
}
@@ -449,6 +531,10 @@
flex-direction: column;
gap: var(--space-2xs);
+ @media (max-width: 800px) {
+ display: none;
+ }
+
div {
flex-grow: 1;
flex-basis: 0;
@@ -457,6 +543,85 @@
display: flex;
gap: var(--space-2xs);
justify-content: flex-end;
+
+ /*> svg {
+ width: 24px;
+ height: 24px;
+ }*/
+
+ @media (max-width: 1200px) {
+ > svg:nth-child(10) {
+ display: none;
+ }
+ }
+
+ @media (max-width: 1100px) {
+ > svg:nth-child(9) {
+ display: none;
+ }
+ }
+
+ @media (max-width: 1050px) {
+ > svg:nth-child(8) {
+ display: none;
+ }
+ }
+
+ @media (max-width: 1000px) {
+ > svg:nth-child(7) {
+ display: none;
+ }
+
+ &:nth-child(2) > svg:nth-child(6) {
+ display: none;
+ }
+
+ &:nth-child(3) > svg:nth-child(5) {
+ display: none;
+ }
+ }
+
+ @media (max-width: 950px) {
+ > svg:nth-child(6) {
+ display: none;
+ }
+
+ &:nth-child(2) > svg:nth-child(5) {
+ display: none;
+ }
+
+ &:nth-child(3) > svg:nth-child(4) {
+ display: none;
+ }
+ }
+
+ @media (max-width: 900px) {
+ > svg:nth-child(5) {
+ display: none;
+ }
+
+ &:nth-child(2) > svg:nth-child(4) {
+ display: none;
+ }
+
+ &:nth-child(3) > svg:nth-child(3) {
+ display: none;
+ }
+ }
+
+ @media (max-width: 850px) {
+ > svg:nth-child(4) {
+ display: none;
+ }
+
+ &:nth-child(2) > svg:nth-child(3) {
+ display: none;
+ }
+
+ &:nth-child(3) > svg:nth-child(2) {
+ display: none;
+ }
+ }
}
}
}
@@ -470,12 +635,15 @@
> .cards {
list-style: none;
- display: grid;
- grid-template-columns: repeat(3, 1fr);
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
gap: var(--space-s);
li {
padding: var(--space-s);
+ flex-basis: 330px;
+ flex-grow: 1;
border: 2px solid var(--color-red-400);
box-shadow: var(--color-red-400) -4px 6px;
diff --git a/index.11ty.tsx b/index.11ty.tsx
index c82cdb5..8ae79e0 100644
--- a/index.11ty.tsx
+++ b/index.11ty.tsx
@@ -28,6 +28,38 @@ const renderCss = async () => {
};
export const render = async () => {
+ const nav = (
+
+ );
+
return {
type: "root",
children: [
@@ -65,13 +97,14 @@ export const render = async () => {
{/* todo(maximsmol): WebMention? */}
- 