diff --git a/src/components/Contact.astro b/src/components/Contact.astro index e90a134..6e02a97 100644 --- a/src/components/Contact.astro +++ b/src/components/Contact.astro @@ -128,4 +128,18 @@ const links = [ text-align: center; } } + + /* Phones: one button per row, all the same width. */ + @media (max-width: 480px) { + .links { + flex-direction: column; + max-width: 320px; + margin-inline: auto; + } + + .links a { + width: 100%; + justify-content: center; + } + } diff --git a/src/components/Figures.astro b/src/components/Figures.astro index 4255d53..d80ef26 100644 --- a/src/components/Figures.astro +++ b/src/components/Figures.astro @@ -70,4 +70,40 @@ import { figures } from '../data/profile'; font-size: 34px; } } + + /* Phones: one figure per row, the number beside its label. */ + @media (max-width: 560px) { + .figures { + grid-template-columns: 1fr; + gap: 0; + padding-block: 24px; + } + + .figure, + .figure:first-child, + .figure:nth-child(3) { + flex-direction: row-reverse; + justify-content: start; + align-items: center; + gap: 20px; + padding: 16px 0; + border-left: 0; + border-top: 1px solid var(--border); + } + + .figure:first-child { + border-top: 0; + } + + dd { + flex: none; + width: 88px; + font-size: 32px; + } + + dt { + margin-top: 0; + max-width: none; + } + } diff --git a/src/components/Hero.astro b/src/components/Hero.astro index 85f7716..bfbdba0 100644 --- a/src/components/Hero.astro +++ b/src/components/Hero.astro @@ -146,4 +146,12 @@ import Download from './icons/Download.astro'; max-width: 320px; } } + + /* Phones: the two buttons share the row, or stack at full width. */ + @media (max-width: 480px) { + .actions .btn { + flex: 1 1 auto; + justify-content: center; + } + } diff --git a/src/components/Nav.astro b/src/components/Nav.astro index 1411fc2..1f031b6 100644 --- a/src/components/Nav.astro +++ b/src/components/Nav.astro @@ -134,6 +134,20 @@ const links = [ font-size: 13px; } } + + /* The smallest phones: the name and the button must still fit side by side. */ + @media (max-width: 380px) { + .logo { + font-size: 13px; + letter-spacing: 0; + } + + .small { + padding: 7px 12px; + font-size: 12.5px; + } + } + @media (prefers-reduced-motion: reduce) { .logo, .small, diff --git a/src/styles/global.css b/src/styles/global.css index be4802c..0987824 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -257,3 +257,10 @@ h2 { font-size: 32px; } } + +/* Phones: a narrower gutter leaves the content room to breathe. */ +@media (max-width: 480px) { + .wrap { + padding: 0 20px; + } +}