diff --git a/apps/website/src/pages/Donate/Donate.css b/apps/website/src/pages/Donate/Donate.css index fbb869310..c0de48c9e 100644 --- a/apps/website/src/pages/Donate/Donate.css +++ b/apps/website/src/pages/Donate/Donate.css @@ -5,8 +5,16 @@ section.donate { section.donate ul { list-style-type: none; display: flex; - gap: 0 1em; + gap: 1em; padding: 0; + flex-direction: column; +} + +@media (min-width: 720px) { + section.donate ul { + gap: 0 1em; + flex-direction: row; + } } section.donate ul a { diff --git a/apps/website/src/pages/Download/download.css b/apps/website/src/pages/Download/download.css index 06359fdd5..da6505894 100644 --- a/apps/website/src/pages/Download/download.css +++ b/apps/website/src/pages/Download/download.css @@ -36,11 +36,6 @@ .download-server .download-card:first-of-type { --accent-color: var(--brand-1); } .download-server .download-card:last-of-type { --accent-color: var(--brand-3); } -.download-server { - width: 75%; - margin: auto; -} - .architecture-switch { display: flex; gap: 1em; @@ -67,4 +62,11 @@ .architecture-switch a.active { background-color: var(--brand-1); color: var(--brand-foreground-color); +} + +@media (min-width: 720px) { + .download-server { + width: 75%; + margin: auto; + } } \ No newline at end of file diff --git a/apps/website/src/style.css b/apps/website/src/style.css index de47055b3..d4ebcca1a 100644 --- a/apps/website/src/style.css +++ b/apps/website/src/style.css @@ -31,7 +31,7 @@ body { } main { - min-height: calc(100vh - 80px); + min-height: calc(100vh - 80px - 90px); display: flex; flex-direction: column; } @@ -53,18 +53,21 @@ a { } section { - padding: 3em 0; - flex-grow: 1; - display: flex; + padding: 1em 0; justify-content: center; align-items: stretch; } +section.fill { + flex-grow: 1; + display: flex; +} + section h2 { text-align: center; font-weight: 100; margin-top: 0; - margin-bottom: 2em; + margin-bottom: 1em; } img { @@ -107,6 +110,14 @@ img { } @media (min-width: 720px) { + section { + padding: 3em 0; + } + + section h2 { + margin-bottom: 2em; + } + .grid-3-cols { display: grid; grid-template-columns: 1fr 1fr 1fr;