Change main part

assets/uno.css

@@ -210,9 +210,10 @@
 .-ml-6{margin-left:-1.5rem;}
 .-mr-6{margin-right:-1.5rem;}
 .mb-4{margin-bottom:1rem;}
+.mb-6{margin-bottom:1.5rem;}
 .mt-4{margin-top:1rem;}
 .size-10{width:2.5rem;height:2.5rem;}
-.size-16{width:4rem;height:4rem;}
+.size-20{width:5rem;height:5rem;}
 .h-auto{height:auto;}
 .h-full{height:100%;}
 .min-h-\[94vh\]{min-height:94vh;}
@@ -237,6 +238,7 @@
 .items-center{align-items:center;}
 .justify-center{justify-content:center;}
 .justify-between{justify-content:space-between;}
+.justify-around{justify-content:space-around;}
 .gap-2{gap:0.5rem;}
 .gap-4{gap:1rem;}
 .gap-x-2{column-gap:0.5rem;}
@@ -249,15 +251,13 @@
 .bg-white{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity)) /* #fff */;}
 .bg-white\/0{background-color:rgb(255 255 255 / 0) /* #fff */;}
 .selection\:bg-engineering-light ::selection{--un-bg-opacity:1;background-color:rgb(218 84 81 / var(--un-bg-opacity)) /* #DA5451 */;}
-.p-2{padding:0.5rem;}
 .p-6{padding:1.5rem;}
 .px-4{padding-left:1rem;padding-right:1rem;}
 .px-6{padding-left:1.5rem;padding-right:1.5rem;}
 .px-auto{padding-left:auto;padding-right:auto;}
 .py-4{padding-top:1rem;padding-bottom:1rem;}
 .pb-6{padding-bottom:1.5rem;}
 .pt-12{padding-top:3rem;}
-.text-2xl{font-size:1.5rem;line-height:2rem;}
 .text-3xl{font-size:1.875rem;line-height:2.25rem;}
 .text-4xl{font-size:2.25rem;line-height:2.5rem;}
 .text-sm{font-size:0.875rem;line-height:1.25rem;}

index.html.pm

@@ -1,11 +1,11 @@
 #lang pollen
 
 ◊div[#:class "flex bg-prussian"]{
-  ◊div[#:class "flex flex-col justify-between mx-auto min-h-screen max-w-screen-md px-4 pt-12 md:px-8 md:pt-20 lg:px-16 text-zinc-300"]{
+  ◊div[#:class "flex flex-col justify-around mx-auto min-h-screen max-w-screen-md px-4 pt-12 md:px-8 md:pt-20 lg:px-16 text-zinc-300"]{
     ◊div[#:class "my-6 mx-2 sm:mx-4 md:mx-auto"]{
-      ◊h1[#:class "my-4 text-4xl text-engineering-light font-mono tracking-tighter leading-snug"]{Politik nervt —}
+      ◊h1[#:class "my-4 text-4xl text-engineering-light font-mono tracking-tighter leading-snug"]{Die Stadt macht Zeug, das keinen Sinn ergibt —}
       ◊p[#:class "sm:text-lg leading-relaxed"]{
-        Wir sind (zu Recht) unglücklich. Es laufen Dinge falsch:
+        Wir sind (zu Recht) unglücklich.
       }
       ◊p[#:class "sm:text-lg leading-relaxed"]{
         Im Großen, aber auch im ganz Kleinen.
@@ -25,8 +25,17 @@
       }
     }
 
-    ◊div[#:class "my-6 mx-2 sm:mx-4 md:mx-auto"]{
-      ◊h1[#:class "my-4 text-4xl text-engineering-light font-mono tracking-tighter leading-snug"]{
+    ◊div[#:class "px-auto"]{
+      ◊a[#:href "#projekt-container" #:class "flex flex-col gap-2 items-center hover:text-engineering-light focus-visible:text-engineering-light duration-300"]{
+        ◊; ◊span[#:class "text-2xl text-engineering-light font-mono tracking-tighter leading-snug"]{Klingt gut?}
+        ◊span[#:class "text-4xl text-engineering-light font-mono tracking-tighter leading-snug"]{Mach' was dagegen!}
+        ◊svg[#:xmlns "http://www.w3.org/2000/svg" #:fill "none" #:viewBox "0 0 24 24" #:stroke-width "1" #:stroke "currentColor" #:class "size-20"]{
+          ◊path[#:stroke-linecap "round" #:stroke-linejoin "round" #:d "m19.5 8.25-7.5 7.5-7.5-7.5"]
+        }
+      }
+    }
+    ◊div[#:class "mb-6 mx-2 sm:mx-4 md:mx-auto"]{
+      ◊h1[#:class "mb-4 text-4xl text-engineering-light font-mono tracking-tighter leading-snug"]{
         aber ◊span[#:class "italic"]{muss} das so sein?
       }
       ◊p[#:class "my-4 sm:text-lg leading-relaxed"]{
@@ -42,15 +51,6 @@
         Und das führt langfristig dazu, dass wir eine Stadt haben, die wir mitgestaltet haben – wir sind glücklicher, und fühlen uns hier noch mehr zu Hause.
       }
     }
-
-    ◊div[#:class "px-auto"]{
-      ◊a[#:href "#projekt" #:class "p-2 flex flex-col gap-2 items-center hover:text-engineering-light focus-visible:text-engineering-light duration-300"]{
-        ◊span[#:class "text-2xl text-engineering-light font-mono tracking-tighter leading-snug"]{Klingt gut?}
-        ◊svg[#:xmlns "http://www.w3.org/2000/svg" #:fill "none" #:viewBox "0 0 24 24" #:stroke-width "1" #:stroke "currentColor" #:class "size-16"]{
-          ◊path[#:stroke-linecap "round" #:stroke-linejoin "round" #:d "m19.5 8.25-7.5 7.5-7.5-7.5"]
-        }
-      }
-    }
   }
 }
 ◊div[#:class "bg-white"]{

pollen.rkt

@@ -42,7 +42,7 @@
         ,@body)))
 
 (define (projekte . body)
-  `(div ([class "scroll-container mb-4 -mx-6 md:-mx-12 lg:-mx-24 md:gap-4 lg:gap-8 relative"])
+  `(div ([id "projekt-container"][class "scroll-container mb-4 -mx-6 md:-mx-12 lg:-mx-24 md:gap-4 lg:gap-8 relative"])
     (div ([class "flex justify-between"])
       (button ([id "projekte-scroll-left"] [class "
               sticky -mr-6 sm:-mr-2 md:mr-0 left-0 top-0 transform