diff --git a/assets/uno.css b/assets/uno.css index 06dddb6..11c90f3 100644 --- a/assets/uno.css +++ b/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,7 +251,6 @@ .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;} @@ -257,7 +258,6 @@ .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;} diff --git a/index.html.pm b/index.html.pm index cee7e58..94dcc86 100644 --- a/index.html.pm +++ b/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"]{ diff --git a/pollen.rkt b/pollen.rkt index 0ccdac2..11ae598 100644 --- a/pollen.rkt +++ b/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