refactor project and talk entries in index.html, enhance styles for project cards and talks, and update footer text in template.html

Author: robertDurst

docs/index.html.pm

@@ -6,31 +6,26 @@
 
 ◊h2{Projects}
 
-◊ul{
-  ◊li{
-    ◊link["https://caffeine-lang.run/"]{Caffeine}: a programming language for generating reliability artifacts (i.e. executable Terraform for SLOs) from service expectation definitions. Grounded in assume/guarantee contracts and a hint of category theory, Caffeine helps developers and AI agents become system thinkers, asserting reasonable construction at design time and in production. Written in Gleam ❤️.
-    ◊pink{Status:} ◊em{Active Development}
-  }
-}
+◊project["https://caffeine-lang.run/" "Caffeine" "Active Development" "https://caffeine-lang.run/images/temp_caffeine_icon.png"]{A programming language for generating reliability artifacts from service expectation definitions. Grounded in assume/guarantee contracts, Caffeine helps developers and AI agents assert reasonable system construction at design time ◊em{and} in production.}
 
 ◊h2{Speaking}
 
 ◊ul{
   ◊li{
     ◊em{Mama Look, I Compiled SLOs!}
-    October 8, 2025 | Dublin, Ireland 🇮🇪
+    ◊small{October 8, 2025 | Dublin, Ireland 🇮🇪}
     ◊pink{Event:} ◊link["https://www.usenix.org/conference/srecon25emea/program"]{SRECon EMEA '25 - Lightning Talks}
     ◊pink{Media:} ◊link["slides/srecon-emea-25.pdf"]{Slides}
   }
   ◊li{
     ◊em{10,000 Lines Later: When a Tool Became a Compiler}
-    February 12, 2026 | Salt Lake City, Utah, USA 🇺🇸
+    ◊small{February 12, 2026 | Salt Lake City, Utah, USA 🇺🇸}
     ◊pink{Event:} ◊link["https://www-old.cs.utah.edu/plt/"]{University of Utah PLT Department Lecture}
     ◊pink{Media:} ◊link["slides/u-of-u-plt-lecture-26.pdf"]{Slides}
   }
   ◊li{
-    ◊em{10,000 Lines Later: When a Tool Became a Compiler (and I Became a Gleamlin)}    
-    February 21, 2026 | Bristol, UK 🇬🇧
+    ◊em{10,000 Lines Later: When a Tool Became a Compiler (and I Became a Gleamlin)}
+    ◊small{February 21, 2026 | Bristol, UK 🇬🇧}
     ◊pink{Event:} ◊link["https://gleamgathering.com/"]{Gleam Gathering '26}
     ◊pink{Media:} ◊link["slides/gleam-gathering-26.pdf"]{Slides}
   }

docs/pollen.rkt

@@ -26,6 +26,27 @@
 (define (li . text)
   `(li ,@text))
 
+;; Small/muted text
+(define (small . text)
+  `(span ((class "small")) ,@text))
+
 ;; Link helper
 (define (link url . text)
   `(a ((href ,url)) ,@text))
+
+;; Project card
+(define (project url name status img . description)
+  `(div ((class "project"))
+     (img ((src ,img) (alt ,name) (class "project-logo")))
+     (h3 (a ((href ,url)) ,name))
+     (p ((class "project-desc")) ,@description)
+     (p ((class "project-status")) (span ((class "pink")) "Status: ") (em ,status) " · Written in " (a ((href "https://gleam.run/")) "Gleam"))))
+
+;; Talk entry
+(define (talk event-url event-name date slides-url . title)
+  `(div ((class "talk"))
+     (div ((class "talk-header"))
+       (a ((href ,event-url) (class "talk-venue")) ,event-name)
+       (span ((class "talk-date")) ,date))
+     (p ((class "talk-title")) ,@title)
+     (p ((class "talk-media")) (a ((href ,slides-url)) "Slides \u2197"))))

docs/styles.css

@@ -7,7 +7,7 @@ body {
   line-height: 1.6;
   max-width: 42rem;
   margin: 0 auto;
-  padding: 3rem 2rem;
+  padding: 2rem;
 }
 
 a { color: #00CED1; text-decoration: none; }
@@ -22,9 +22,9 @@ h1 { font-size: 2em; margin-bottom: 0; }
 h1 a { color: #FF1493; }
 h1 a:hover { text-decoration: none; }
 
-h2 { font-size: 1.4em; margin-top: 3rem; margin-bottom: 0.8em; }
+h2 { font-size: 1.4em; margin-top: 1.8rem; margin-bottom: 0.6em; }
 
-header { margin-bottom: 2rem; }
+header { margin-bottom: 1.2rem; }
 
 .logo {
   float: right;
@@ -50,10 +50,80 @@ main p { margin-bottom: 1em; }
 
 .cyan { color: #00CED1; }
 .pink { color: #FF1493; }
+.small { font-size: 0.8em; color: #6a7580; }
 
 ul { margin-left: 1.5em; margin-bottom: 1em; }
 li { margin-bottom: 0.8em; }
 
+.project {
+  background: #0a0a14;
+  border: 1px solid #1a1a2e;
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.project-logo {
+  float: right;
+  width: 56px;
+  height: 56px;
+  margin: 0 0 0.5rem 1rem;
+  border-radius: 8px;
+}
+
+.project h3 { margin-bottom: 0.5rem; }
+.project h3 a { color: #E0FFFF; }
+.project h3 a:hover { color: #00CED1; }
+
+.project-desc { margin-bottom: 0.8rem; }
+
+.project-status {
+  font-size: 0.9em;
+  color: #8892a0;
+  margin-bottom: 0;
+}
+
+.project-status em { color: #00CED1; }
+
+.talk {
+  padding: 0.8rem 0;
+  border-bottom: 1px solid #1a1a2e;
+}
+
+.talk:last-of-type { border-bottom: none; }
+
+.talk-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.1rem;
+}
+
+.talk-venue {
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 600;
+  font-size: 0.95em;
+  color: #E0FFFF !important;
+}
+
+.talk-venue:hover { color: #00CED1 !important; }
+
+.talk-date {
+  font-size: 0.85em;
+  color: #6a7580;
+}
+
+.talk-title {
+  font-style: italic;
+  margin-bottom: 0.1rem;
+}
+
+.talk-media { margin-bottom: 0; }
+.talk-media a { font-size: 0.85em; color: #6a7580; }
+.talk-media a:hover { color: #00CED1; }
+
 .manifesto-comment {
   font-family: 'Monaco', 'Courier New', monospace;
   font-size: 0.85em;

docs/template.html.p

@@ -22,7 +22,7 @@
     ◊(->html doc)
   </main>
   <footer>
-    <p>Proud Gleamlins . Website powered by <a href="https://docs.racket-lang.org/pollen/">Pollen</a></p>
+    <p>Website powered by <a href="https://docs.racket-lang.org/pollen/">Pollen</a> · Proud Gleamlins</p>
   </footer>
 </body>
 </html>