feat: responsiveness

src/components/GlobalStyles.astro

@@ -24,12 +24,7 @@
       oklch(0% 0 0 / 0.3) 100%
     );
 
-    --font-sans:
-      "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
-      sans-serif;
-
-    --fs-page-title: clamp(3rem, 5vw + 1rem, 5.625rem);
+    --fs-page-title: clamp(2.5rem, 5vw + 1rem, 5.625rem);
 
     --fs-md: clamp(1.125rem, 2vw, 1.25rem);
     --fs-lg: clamp(1.25rem, 2vw, 1.5rem);
@@ -58,7 +53,7 @@
   body {
     background-color: var(--clr-dark-400);
     color: white;
-    font-family: var(--font-sans);
+    font-family: var(--font-poppins);
   }
 
   * {

src/components/Header.astro

@@ -38,19 +38,28 @@ import SkipNavLink from "./SkipNavLink.astro";
   }
 
   .header-logo {
-    grid-column: 1 / 3;
+    grid-column: 1 / 7;
+
+    /* @media screen and (min-width: 50rem) {
+      grid-column: 1 / 3;
+    } */
   }
 
   .logo {
-    width: 12.5rem;
+    width: 8rem;
     transform: translate3d(-0.75rem, 0, 0);
+    
+    @media screen and (min-width: 50rem) {
+      grid-column: 1 / 3;
+      width: 12.5rem;
+    }
   }
 
   .header-contact {
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    grid-column: -1 / -3;
+    grid-column: -7 / -1;
     justify-self: end;
 
     font-size: var(--fs-md);
@@ -58,6 +67,10 @@ import SkipNavLink from "./SkipNavLink.astro";
     text-transform: uppercase;
     letter-spacing: var(--tracking-tight);
     line-height: var(--leading-title);
+
+    /* @media screen and (min-width: 64rem) {
+      grid-column: -1 / -3;
+    } */
   }
 
   .icon {

src/components/landing/HeroSection.astro

@@ -40,17 +40,39 @@ import ArrowDown from "../icons/ArrowDown.astro";
     padding-inline: var(--padding-x);
     max-width: var(--max-content-width);
     margin-inline: auto;
-
-    @media screen (min-width: 21rem) {
-
-    }
   }
 
   .image-wrapper {
-    grid-column: -1 / -6;
+    grid-column: 4 / -1;
     grid-row: 1;
-    /* width: 100%; */
     max-height: clamp(400px, 70vh, 1000px);
+    position: relative;
+    z-index: -1;
+
+    @media screen and (min-width: 50rem) {
+      grid-column: 5 / -1;
+    }
+
+    @media screen and (min-width: 75rem) {
+      grid-column: -1 / -6;
+    }
+
+  }
+
+  .image-wrapper::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: var(--gradient-overlay);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+
+    @media screen and (max-width: 63.9375rem) {
+      backdrop-filter: blur(10px);
+    }
   }
 
   .image {
@@ -73,7 +95,7 @@ import ArrowDown from "../icons/ArrowDown.astro";
   }
 
   h1 {
-    grid-column: 2 / -2;
+    grid-column: 1 / -1;
     grid-row: 1;
     align-self: end;
 
@@ -82,18 +104,34 @@ import ArrowDown from "../icons/ArrowDown.astro";
     letter-spacing: var(--tracking-narrow);
     font-weight: 600;
 
+    @media screen and (min-width: 50rem) {
+      grid-column: 2 / -2;
+    }
+
+    @media screen and (min-width: 64rem) {
+      grid-column: 2 / -2;
+    }
+
     & span {
       display: block;
     }
   }
 
   p {
-    grid-column: 3 / -5;
+    grid-column: 2 / -1;
     grid-row: 2;
 
     max-width: 45ch;
     font-size: var(--fs-md);
     line-height: var(--leading-paragraph);
+
+    @media screen and (min-width: 50rem) {
+      grid-column: 3 / -5;
+    }
+
+    @media screen and (min-width: 64rem) {
+      grid-column: 3 / -5;
+    }
   }
 
   .down {
@@ -140,7 +178,7 @@ import ArrowDown from "../icons/ArrowDown.astro";
       tl.addLabel("arrow", 1.5);
 
       tl.from(
-        heroSection.querySelector(".image"),
+        heroSection.querySelector(".image-wrapper"),
         {
           duration: 2,
           opacity: 0,

src/components/landing/ServicesCard.astro

@@ -33,7 +33,7 @@ const { title, image, items } = Astro.props;
     .card {
         display: grid;
         grid-template-rows: auto 1fr auto;
-        min-height: 12rem;
+        max-height: 24rem;
 
         & > * {
             grid-column: 1;

src/components/landing/ServicesSection.astro

@@ -63,30 +63,41 @@ const services: Array<ComponentProps<typeof ServicesCard>> = [
     }
 
     .heading {
-        @media (min-width: 50rem) {
-            display: grid;
+        display: grid;
+        grid-column: 1 / -1;
+
+        @media screen and (max-width: 63.9375rem) {
+            row-gap: 1rem;
+        }
+
+        @media screen and (min-width: 64rem) {
             grid-template-columns: subgrid;
-            grid-column: 1 / -1;
         }
 
         & h2 {
-            grid-column: 1 / 6;
+            grid-column: 1 / -1;
             height: max-content;
 
             font-size: var(--fs-xl);
             line-height: var(--leading-title);
             letter-spacing: var(--tracking-narrow);
+
+            @media screen and (min-width: 64rem) {
+                grid-column: 1 / 7;
+            }
         }
 
         & p {
-            grid-column: -1 / -6;
-            justify-self: end;
+            grid-column: 1 / -1;
+            max-width: 46ch;
 
             font-size: var(--fs-lg);
             line-height: var(--leading-paragraph);
 
-            @media (min-width: 50rem) {
+            @media screen and (min-width: 64rem) {
+                grid-column: -7 / -1;
                 max-width: 32ch;
+                justify-self: end;
             }
         }
     }
@@ -97,10 +108,11 @@ const services: Array<ComponentProps<typeof ServicesCard>> = [
 
         grid-column: 1 / -1;
         list-style: none;
-        margin-top: 7rem;
+        margin-top: 4rem;
 
-        @media (min-width: 50rem) {
+        @media (min-width: 75rem) {
             grid-template-columns: repeat(3, 1fr);
+            margin-top: 7rem;
         }
     }
 </style>

src/components/landing/ValuesSection.astro

@@ -93,10 +93,12 @@ function formatIndex(index: number) {
     }
 
     span {
+        display: inline-block;
+        height: max-content;
         grid-row: 1;
         grid-column: 1 / 4;
 
-        font-size: 15.625rem;
+        font-size: clamp(10rem, 16vw, 15.625rem);
         font-weight: 600;
         line-height: var(--leading-tightest);
     }

src/layouts/BaseLayout.astro

@@ -3,6 +3,7 @@ import Footer from "../components/Footer.astro";
 import GlobalStyles from "../components/GlobalStyles.astro";
 import Header from "../components/Header.astro";
 import PlausibleAnalytics from "../components/PlausibleAnalytics.astro";
+import { Font } from "astro:assets";
 
 const { pageTitle } = Astro.props;
 const title = pageTitle
@@ -17,9 +18,7 @@ const title = pageTitle
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
-    <title>
-      {title}
-    </title>
+    <title>{title}</title>
     <meta
       name="description"
       content="From concept to launch - websites, apps, and digital solutions that work hard, so you can play hard. Personal sites, e‑commerce platforms, and custom web apps built by Michael Rieger in Vienna."
@@ -47,7 +46,7 @@ const title = pageTitle
       content="From concept to launch - websites, apps, and digital solutions that work hard, so you can play hard. Based in Vienna."
     />
     <meta name="twitter:image" content="/assets/img/og-image.jpg" />
-
+    <Font cssVariable="--font-poppins" preload />
     <PlausibleAnalytics />
   </head>
   <body>