improved mobile layout

inovex · Sep 27, 2023 · a51ace7 · a51ace7
1 parent 9ce7cf4
commit a51ace7
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 119 deletions.
diff --git 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
@@ -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
@@ -79,42 +79,6 @@ import LegalLayout from "../../layouts/LegalLayout.astro";
   </p>
 </LegalLayout>
 
-<style lang="scss">
-  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;
-  }
-
-  a {
-    color: var(--lightmode-pink);
-    text-decoration: none;
-    transition: all 0.1s ease-in-out;
-
-    &:hover {
-      filter: brightness(1.2);
-      text-decoration: underline;
-    }
-  }
-</style>
+<script>
+  import "./legal.scss";
+</script>
diff --git a/src/pages/Legal/Legal.scss 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
@@ -223,42 +223,6 @@ import LegalLayout from "../../layouts/LegalLayout.astro";
   </p>
 </LegalLayout>
 
-<style lang="scss">
-  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;
-  }
-
-  a {
-    color: var(--lightmode-pink);
-    text-decoration: none;
-    transition: all 0.1s ease-in-out;
-
-    &:hover {
-      filter: brightness(1.2);
-      text-decoration: underline;
-    }
-  }
-</style>
+<script>
+  import "./legal.scss";
+</script>
diff --git a/src/pages/Legal/Terms.astro b/src/pages/Legal/Terms.astro
@@ -573,42 +573,6 @@ import LegalLayout from "../../layouts/LegalLayout.astro";
   </p>
 </LegalLayout>
 
-<style lang="scss">
-  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;
-  }
-
-  a {
-    color: var(--lightmode-pink);
-    text-decoration: none;
-    transition: all 0.1s ease-in-out;
-
-    &:hover {
-      filter: brightness(1.2);
-      text-decoration: underline;
-    }
-  }
-</style>
+<script>
+  import "./legal.scss";
+</script>