Font sizes

src/components/ExpandButton.astro

@@ -29,10 +29,10 @@ const { buttonText, buttonLink, id } = Astro.props;
 <style>
   .read-more {
     display: flex;
-    margin-bottom: 1rem;
   }
 
   .more-text {
+    padding-top: 1rem;
     font-size: 1.5rem;
     line-height: 1.2;
     height: 0;
@@ -44,14 +44,12 @@ const { buttonText, buttonLink, id } = Astro.props;
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 1.8rem;
-    height: 1.8rem;
-    font-size: 1.8rem;
+    width: 1.7rem;
+    height: 1.7rem;
+    font-size: 1.6rem;
     background-color: var(--text-main);
     color: var(--background-body);
     border-radius: 50%;
-    padding: 0;
-    margin: 0;
     margin-right: 1rem;
     cursor: pointer;
     border: 0;
@@ -61,4 +59,21 @@ const { buttonText, buttonLink, id } = Astro.props;
     background-color: var(--background-body);
     color: var(--text-main);
   }
+
+  @media (max-width: 1280px) {
+  }
+  @media (max-width: 1100px) {
+  }
+  @media (max-width: 920px) {
+  }
+  @media (max-width: 625px) {
+    .more-text {
+      font-size: 1.2rem;
+    }
+  }
+  @media (max-width: 420px) {
+    .more-text {
+      font-size: 1rem;
+    }
+  }
 </style>

src/pages/index.astro

@@ -33,11 +33,15 @@ const posts = await getAllPosts();
     loading="eager"
   />
 
-  <div class="frame primary-font-size primary-height primary-margin-top">
-    <h2 class="sticky">
-      gestaltet Systeme, Prozesse und Räume – für lebenswerte Städte und
-      klimafreundliche Gebäude.
-    </h2>
+  <div
+    class="frame primary-font-size primary-height primary-margin-top primary-margin-bottom"
+  >
+    <div class="sticky">
+      <h2>
+        gestaltet Systeme, Prozesse und Räume – für lebenswerte Städte und
+        klimafreundliche Gebäude.
+      </h2>
+    </div>
   </div>
   <div class="frame msg-secondary">
     <p>
@@ -61,9 +65,11 @@ const posts = await getAllPosts();
     <ThreePillarsVertical />
   </div>
 
-  <div class="frame primary-font-size primary-height primary-margin-top">
+  <div
+    class="frame primary-font-size primary-height primary-margin-top primary-margin-bottom"
+  >
     <div class="sticky">
-      <h2 class="">
+      <h2>
         ist als technologiegestützte Nachhaltigkeitsberatung Ihr
         Sparringspartner auf dem Weg zur Klimaneutralität – mit
         interdisziplinärer Kompetenz und einem ganzheitlichen Ansatz.
@@ -326,6 +332,7 @@ const posts = await getAllPosts();
 
     .animation02 {
       margin: 0;
+      padding: 0;
     }
 
     .svg-action-card {
@@ -340,6 +347,8 @@ const posts = await getAllPosts();
     }
 
     .workshop-cards {
+      flex-direction: column;
+      gap: 1rem;
       width: calc(
         100% - var(--left-padding-mobile) - var(--right-padding-mobile)
       );
@@ -349,7 +358,7 @@ const posts = await getAllPosts();
     }
 
     .svg-action-card {
-      width: clamp(80px, 30svw, 300px);
+      width: clamp(80px, 60svw, 300px);
     }
   }
 </style>

src/pages/ourwork/index.astro

@@ -2,7 +2,6 @@
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import { formatDate } from "../../utils/getPostData.ts";
 import { Image } from "astro:assets";
-
 import { getAllPosts } from "../../lib/notion/client.ts";
 import { importCoverImage } from "../../lib/blog-helpers.ts";
 
@@ -17,8 +16,6 @@ const publicImage = `/images/heroRendering.webp`;
 const images = await Astro.glob(
   "/src/assets/notion/**/*.{png,jpg,jpeg,avif,webp}"
 );
-// console.dir(posts);
-// console.dir(images);
 ---
 
 <BaseLayout

src/styles/global.css

@@ -621,7 +621,7 @@ input[name="theme-toggle"] {
     }
   }
 
-  .sticky::before {
+  .sticky h2::before {
     content: "BuildSystems";
     letter-spacing: 0.06rem;
     opacity: 0;
@@ -658,7 +658,11 @@ input[name="theme-toggle"] {
     margin-top: 30svh;
   }
 
-  .sticky::before {
+  .primary-margin-bottom {
+    margin-bottom: 3svh;
+  }
+
+  .sticky h2::before {
     content: "BuildSystems";
     letter-spacing: 0.08rem;
     opacity: 0;