chore: enhance responsiveness

Author: openscript

src/content/sections/de/Services.mdx

@@ -7,7 +7,7 @@ import Sprite from '../../../components/Sprite.astro';
 
 <ServicesSection>
 
-  <h2>Was wir anbieten</h2>
+  <h2 slot="title">Was wir anbieten</h2>
 
   <Tabs>
     <TabsList>

src/content/sections/en/Services.mdx

@@ -7,7 +7,7 @@ import Sprite from '../../../components/Sprite.astro';
 
 <ServicesSection>
 
-  <h2>What we offer</h2>
+  <h2 slot="title">What we offer</h2>
 
   <Tabs>
     <TabsList>

src/layouts/Shell.css

@@ -46,11 +46,28 @@
 
 @media screen and (max-width: 400px) {
   :root {
+    --font-size: 12px;
     --size-page-padding: 1rem;
   }
 }
 
+@media screen and (min-width: 401px) {
+  :root {
+    --font-size: 12px;
+    --size-page-padding: 1rem;
+  }
+}
+
+@media screen and (min-width: 640px) {
+  :root {
+    --font-size: 12px;
+  }
+}
+
 @media screen and (min-width: 640px) {
+  :root {
+    --font-size: 14px;
+  }
 }
 
 @media screen and (min-width: 1025px) {
@@ -162,34 +179,50 @@ h6 {
 }
 
 h1 {
-  font-size: 2em;
+  font-size: 1.7rem;
   margin-top: 0;
 }
 
 h2 {
-  font-size: 1.7em;
+  font-size: 1.5rem;
 }
 
 h3 {
-  font-size: 1.5em;
+  font-size: 1.3rem;
 }
 
 h4 {
-  font-size: 1.3em;
+  font-size: 1.2rem;
 }
 
 h5 {
-  font-size: 1.2em;
+  font-size: 1.1rem;
 }
 
 h5 {
-  font-size: 1.1em;
+  font-size: 1.05rem;
 }
 
 main {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  hyphens: auto;
+
+  section {
+    &.page-padding {
+      padding-block: var(--size-gutter-massive);
+    }
+
+    header {
+      text-align: center;
+
+      > * {
+        margin: 0;
+        margin-bottom: var(--size-gutter-big);
+      }
+    }
+  }
 
   a {
     color: var(--color-primary-90);

src/layouts/sections/QuestionsSection.astro

@@ -14,7 +14,7 @@ const questions = questionsCollection.flatMap((q) => {
 questions.sort(() => Math.random() - 0.5);
 ---
 
-<section>
+<section class="page-padding">
   <Carousel>
     {
       questions.map((q) => (
@@ -33,7 +33,6 @@ questions.sort(() => Math.random() - 0.5);
 <style>
   section {
     background-color: var(--color-background);
-    padding: 8rem var(--size-page-padding);
     user-select: none;
 
     .carousel .carousel-viewport {

src/layouts/sections/ReferencesSection.astro

@@ -8,8 +8,10 @@ const companies = await getCollection("referenceCompanies", (entry) => !entry.da
 const projects = await getCollection("referenceProjects", (entry) => entry.data.locale === locale);
 ---
 
-<section>
-  <slot name="title" />
+<section class="page-padding">
+  <header>
+    <slot name="title" />
+  </header>
   <div class="references-projects">
     {
       projects.map((p) => (
@@ -35,7 +37,6 @@ const projects = await getCollection("referenceProjects", (entry) => entry.data.
 <style>
   section {
     background-color: var(--color-white);
-    padding: 8rem var(--size-page-padding);
     z-index: 1;
   }
 
@@ -48,7 +49,8 @@ const projects = await getCollection("referenceProjects", (entry) => entry.data.
 
   :where(.references-projects) {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-rows: auto auto 1fr;
     gap: var(--size-gutter-big);
     margin-block-end: var(--size-gutter-big);
 
@@ -58,28 +60,26 @@ const projects = await getCollection("referenceProjects", (entry) => entry.data.
 
     div:first-child {
       grid-column: span 2;
-
-      h3 {
-        min-height: 3rem;
-      }
     }
 
     h3 {
-      min-height: 5rem;
+      margin: 0;
     }
 
-    div {
+    > div {
+      display: grid;
+      grid-row: span 3;
+      grid-template-rows: subgrid;
       background-color: var(--color-background);
       padding: var(--size-gutter-big);
-      display: flex;
-      flex-direction: column;
-      align-items: center;
+      justify-items: center;
+      align-items: start;
     }
   }
 
   :where(.references-companies) {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: var(--size-gutter-big);
 
     a {
@@ -98,7 +98,7 @@ const projects = await getCollection("referenceProjects", (entry) => entry.data.
 
   @media screen and (max-width: 1600px) {
     .references-companies {
-      grid-template-columns: repeat(2, 1fr);
+      grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
 

src/layouts/sections/ServicesSection.astro

@@ -1,11 +1,13 @@
-<section>
+<section class="page-padding">
+  <header>
+    <slot name="title" />
+  </header>
   <slot />
 </section>
 
 <style>
   section {
     background-color: var(--color-white);
-    padding: 8rem var(--size-page-padding);
     z-index: 1;
 
     .tab {

src/layouts/sections/SpotlightSection.astro

@@ -68,6 +68,7 @@ import Carousel from "../../components/Carousel.astro";
 
       h3 {
         margin: 0;
+        font-size: 1.7rem;
       }
     }
 
@@ -89,11 +90,23 @@ import Carousel from "../../components/Carousel.astro";
         align-items: center;
         justify-content: flex-end;
         font-size: 1.2rem;
+        padding: 0;
 
         > * {
-          width: 90%;
+          width: 95%;
         }
       }
     }
+
+    @media screen and (max-width: 640px) {
+      .background-icon {
+        img {
+          margin-block-start: 20%;
+        }
+      }
+      .carousel-overlay {
+        padding-block-end: 20%;
+      }
+    }
   }
 </style>

src/layouts/sections/TechnologiesSection.astro

@@ -15,7 +15,7 @@ const technologies = await getCollection("technologies", (entry) => entry.data.l
 const randomNumber = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;
 ---
 
-<section class:list={[className]}>
+<section class:list={[className, "page-padding"]}>
   <header>
     <slot name="title" />
   </header>
@@ -43,14 +43,12 @@ const randomNumber = (min: number, max: number) => Math.floor(Math.random() * (m
     display: grid;
     grid-template-areas: "header header" "tools main";
     grid-template-columns: 2fr minmax(20rem, 1fr);
-    padding: var(--size-gutter-big) var(--size-page-padding) 8rem var(--size-page-padding);
     z-index: 1;
     gap: var(--size-gutter-big);
   }
 
   header {
     grid-area: header;
-    text-align: center;
     margin-block-end: var(--size-gutter-big);
   }