Adjust styling for different screen sizes

Author: haglobah

index.html.pm

@@ -3,16 +3,16 @@
 ◊(require string-interpolation)
 
 ◊`(div ([class ,"flex bg-[@{raisin-black}]"])
-    (div ([class "hidden my-2 lg:flex flex-col items-center shrink-0 justify-around ml-12 xl:ml-36"])
+    (div ([class "hidden my-2 md:flex flex-col items-center shrink-0 justify-around ml-6 lg:ml-12 xl:ml-36"])
         ,(badge "Locality of Behavior")
         (a ([href "https://nixos.org"]) 
-            (img ([src "assets/logos/nix.png"] [class "aspect-auto w-24"])))
+            (img ([src "assets/logos/nix.png"] [class "aspect-auto w-16 lg:w-24"])))
         ,(badge "Simplicity")
         (a ([href "https://clojure.org"]) 
-            (img ([src "assets/logos/clojure.svg"] [class "aspect-auto w-24"])))
+            (img ([src "assets/logos/clojure.svg"] [class "aspect-auto w-16 lg:w-24"])))
         ,(badge "Lenses")
         (a ([href "https://rust-lang.org"]) 
-            (img ([src "assets/logos/ferris.svg"] [class "aspect-auto w-24"])))
+            (img ([src "assets/logos/ferris.svg"] [class "aspect-auto w-16 lg:w-24"])))
         ,(badge "Reproducibility")
     )
     (div ([class ,"flex flex-col justify-between mx-auto min-h-screen max-w-screen-xl px-4 pt-12 md:px-8 md:pt-20 lg:px-16 text-zinc-300"])
@@ -44,22 +44,22 @@
                     (path ([stroke-linecap "round"] [stroke-linejoin "round"] [d "m19.5 8.25-7.5 7.5-7.5-7.5"]))))
         )
     )
-    (div ([class "hidden my-2 lg:flex flex-col items-center shrink-0 justify-around mr-12 xl:mr-36"])
+    (div ([class "hidden my-2 md:flex flex-col items-center shrink-0 justify-around mr-6 lg:mr-12 xl:mr-36"])
         ,(badge "Functional Data Structures")
         (a ([href "https://www.haskell.org/"]) 
-            (img ([src "assets/logos/haskell.svg"] [class "aspect-auto w-28"])))
+            (img ([src "assets/logos/haskell.svg"] [class "aspect-auto w-16 lg:w-28"])))
         ,(badge "Category Theory")
         (a ([href "https://elixir-lang.org"]) 
-            (img ([src "assets/logos/elixir.svg"] [class "aspect-auto w-24"])))
+            (img ([src "assets/logos/elixir.svg"] [class "aspect-auto w-16 lg:w-24"])))
         ,(badge "Distributed Systems")
         (a ([href "https://racket-lang.org"]) 
-            (img ([src "assets/logos/racket.svg"] [class "aspect-auto w-24"])))
+            (img ([src "assets/logos/racket.svg"] [class "aspect-auto w-16 lg:w-24"])))
         ,(badge "Low Coupling")
     )
 )
 
 ◊`(div ([class "bg-white"])
-    (div ([id "meetup"] [class "min-h-screen my-4 text-zinc-700 mx-auto h-full max-w-screen-md px-6 py-12 md:px-12 md:py-20 lg:px-24"])
+    (div ([id "meetup"] [class "min-h-screen text-zinc-700 mx-auto h-full max-w-screen-md px-6 pt-12 md:px-12 md:pt-20 lg:px-24"])
         ,(heading "About")
         (p ([class "my-4 sm:text-lg leading-relaxed"])
             "Hi 👋")
@@ -71,6 +71,30 @@
         (p ([class "my-4 sm:text-lg leading-relaxed"])
             "The first event will take place at the dd.mm.yy at the " (a ([href "https://ki-maker.space/"]) "KI Makerspace Tübingen") ", Wöhrdstraße 25.")
         ,(heading "Schedule")
+        (ul ([class "list-disc list-inside mx-2 my-4 sm:text-lg leading-relaxed"])
+            (li "18.30 Doors open")
+            (li "18.45 Welcome")
+            (li "First talk: Simple development environments with Nix")
+            (li "Short break")
+            (li "Second talk: ")
+            (li "Food, talking, coding, whatever")
+            (li "22.00 End")
+        )
+
+        (div ([class "mt-8"])
+            (p ([class "my-4 sm:text-lg leading-relaxed"])
+                "Want to keep posted about the next event?")
+            (a ([href "https://matrix.to/#/#functional-coders-tuebingen:matrix.org"]
+                    [class ,"ml-4 inline-flex gap-4 items-center hover:text-[@{jordy}] focus-visible:text-[@{jordy}] duration-300"])
+                    (svg ([xmlns "http://www.w3.org/2000/svg"] [fill "none"] [viewBox "0 0 24 24"] [stroke-width "1"] [stroke "currentColor"] [class "size-8"])
+                        (path ([stroke-linecap "round"] [stroke-linejoin "round"] [d "M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"]))
+                    (span ([class "text-xl text-[@{jordy}] font-fira-code tracking-tighter leading-snug"]) "Join our Matrix Room")))
+            (p ([class "my-4 sm:text-lg leading-relaxed"])
+                "And with that..."
+                (br)
+                "Looking forward to see you at our next meetup!")
+        )
+        
     )
 )
 

pollen.rkt

@@ -13,7 +13,7 @@
 
 (define (badge topic)
   `(div ([class "mr-1.5 mb-2"])
-		(div ([class ,"flex items-center rounded-full bg-[@{celadon}]/10 px-4 py-2 text-sm font-medium leading-5 text-[@{celadon}]"]) ,topic)))
+		(div ([class ,"flex items-center rounded-full bg-[@{celadon}]/10 px-3 lg:px-4 py-1 lg:py-2 text-xs lg:text-sm font-medium leading-5 text-[@{celadon}]"]) ,topic)))
 
 ; (->badges "Haskell, Nix, Racket")
 (define (->badges topics)