From a51ace7a14e62e8ae86052d95ba90e50e336c825 Mon Sep 17 00:00:00 2001 From: Resaki1 Date: Wed, 27 Sep 2023 11:28:55 +0200 Subject: [PATCH] improved mobile layout --- src/layouts/Layout.astro | 1 + src/layouts/LegalLayout.astro | 53 ++++++++++++++++++++++- src/pages/Legal/Cookies.astro | 42 ++----------------- src/pages/Legal/Legal.scss | 79 +++++++++++++++++++++++++++++++++++ src/pages/Legal/Privacy.astro | 42 ++----------------- src/pages/Legal/Terms.astro | 42 ++----------------- 6 files changed, 140 insertions(+), 119 deletions(-) create mode 100644 src/pages/Legal/Legal.scss diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index b7b54e1..532048d 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -93,6 +93,7 @@ const { title } = Astro.props; display: flex; flex-direction: column; align-items: center; + min-height: 100vh; } main { diff --git a/src/layouts/LegalLayout.astro b/src/layouts/LegalLayout.astro index 51c42d5..8bc164e 100644 --- a/src/layouts/LegalLayout.astro +++ b/src/layouts/LegalLayout.astro @@ -63,10 +63,11 @@ const navItems = [ .legal { display: flex; flex-direction: row; - padding: 128px 80px; + padding: 128px 8vw; position: relative; background: linear-gradient(90deg, #fff 0%, rgba(107, 156, 255, 0.03) 100%); - gap: 80px; + gap: 8vw; + justify-content: center; } aside { @@ -126,6 +127,11 @@ const navItems = [ } } + section { + max-width: 1440px; + text-wrap: balance; + } + .legal_bg { position: absolute; top: 0; @@ -143,6 +149,49 @@ const navItems = [ opacity: 0.2; } + @media screen and (max-width: 948px) { + .legal { + flex-direction: column-reverse; + + aside { + position: unset; + top: 32px; + flex-direction: row; + flex-wrap: wrap; + gap: 32px; + + > nav { + gap: 16px; + position: absolute; + top: 128px; + } + + > address { + margin-top: 32px; + } + + > address > p:first-child, + > p { + margin-top: 0; + } + + > address > p:first-child { + font-weight: 700; + font-size: 20px; + } + + * { + font-size: 16px; + line-height: 24px; + } + } + + section { + margin-top: 96px; + } + } + } + @media screen and (prefers-color-scheme: dark) { .legal { background: #242c3d; diff --git a/src/pages/Legal/Cookies.astro b/src/pages/Legal/Cookies.astro index 7844590..d4bf3ef 100644 --- a/src/pages/Legal/Cookies.astro +++ b/src/pages/Legal/Cookies.astro @@ -79,42 +79,6 @@ import LegalLayout from "../../layouts/LegalLayout.astro";

- + diff --git a/src/pages/Legal/Legal.scss b/src/pages/Legal/Legal.scss new file mode 100644 index 0000000..f617593 --- /dev/null +++ b/src/pages/Legal/Legal.scss @@ -0,0 +1,79 @@ +h1 { + font-size: 62px; + line-height: 70px; + font-weight: 700; + margin: 64px 0 96px 0; +} + +h2 { + font-size: 40px; + line-height: 48px; + font-weight: 700; +} + +h3 { + font-size: 24px; + line-height: 28px; + font-weight: 700; + margin: 48px 0 16px 0; +} + +p, +li { + font-size: 20px; + line-height: 28px; + font-weight: 400; +} + +li { + margin-bottom: 16px; +} + +a { + color: var(--lightmode-pink); + text-decoration: none; + transition: all 0.1s ease-in-out; + + &:hover { + filter: brightness(1.2); + text-decoration: underline; + } +} + +@media screen and (max-width: 948px) { + h1 { + font-size: 34px; + line-height: 36px; + margin-bottom: 0; + } + + h2 { + font-size: 18px; + line-height: 24px; + margin-top: 64px; + } + + h3 { + font-size: 16px; + line-height: 22px; + margin-top: 32px; + } + + p, + li { + font-size: 14px; + line-height: 20px; + } + + li { + margin-bottom: 8px; + } +} + +@media (prefers-color-scheme: dark) { + .legal { + a { + color: var(--darkmode-pink); + } + } +} diff --git a/src/pages/Legal/Privacy.astro b/src/pages/Legal/Privacy.astro index e4aac39..d5999be 100644 --- a/src/pages/Legal/Privacy.astro +++ b/src/pages/Legal/Privacy.astro @@ -223,42 +223,6 @@ import LegalLayout from "../../layouts/LegalLayout.astro";

- + diff --git a/src/pages/Legal/Terms.astro b/src/pages/Legal/Terms.astro index b59a9b4..07d538e 100644 --- a/src/pages/Legal/Terms.astro +++ b/src/pages/Legal/Terms.astro @@ -573,42 +573,6 @@ import LegalLayout from "../../layouts/LegalLayout.astro";

- +