Merge pull request 'fix-mobile-ascii-banners' (#1) from fix-mobile-ascii-banners into main

Reviewed-on: #1

.gitignore

@@ -42,5 +42,8 @@ yarn-error.log*
 # Hugo cache
 /.hugo_build.lock
 
+# Hugo dev server logs
+hugo.log
+
 # Claude Code directories
 .claude/

layouts/_partials/footer.html

@@ -1,8 +1,4 @@
-<div class="ascii-border">
+<div class="footer-divider"></div>
-<pre>
-+===================================================================+
-</pre>
-</div>
 <p class="prompt">NERDER.LAND {{ now.Year }} - Connecting the tech underground</p>
 <p style="margin-top: 1rem; font-size: 0.8rem;">
   <a href="{{ "events/feed.xml" | absURL }}">📡 RSS Feed</a> | 

layouts/_partials/header.html

@@ -1,10 +1,6 @@
 {{ if .IsHome }}
 <h1>{{ site.Title }}</h1>
-<div class="ascii-border">
+<div class="header-divider"></div>
-<pre>
-+===================================================================+
-</pre>
-</div>
 {{ else }}
 <h2><a href="{{ "/" | relURL }}">{{ site.Title }}</a></h2>
 {{ end }}

layouts/events/single.html

@@ -1,11 +1,7 @@
 {{ define "main" }}
 <article class="event-detail">
-  <div class="ascii-border">
+  <div class="section-header">
-<pre>
+    <h2>EVENT DETAILS</h2>
-+==================================================================+
-|                        EVENT DETAILS                            |
-+==================================================================+
-</pre>
   </div>
   
   <h1>{{ .Title }}</h1>
@@ -63,12 +59,8 @@
   
   {{ if .Params.registration_url }}
   <div class="registration">
-    <div class="ascii-border">
+    <div class="section-header">
-<pre>
+      <h3>REGISTRATION</h3>
-+--------------------------------------------------------------+
-|                       REGISTRATION                          |
-+--------------------------------------------------------------+
-</pre>
     </div>
     <p class="prompt"><a href="{{ .Params.registration_url }}">Register for this event</a></p>
   </div>
@@ -82,12 +74,8 @@
   {{ end }}
   
   <div class="calendar-actions">
-    <div class="ascii-border">
+    <div class="section-header">
-<pre>
+      <h3>ADD TO CALENDAR</h3>
-+--------------------------------------------------------------+
-|                    ADD TO CALENDAR                          |
-+--------------------------------------------------------------+
-</pre>
     </div>
     <p class="prompt">
       <a href="{{ .RelPermalink }}calendar.ics" download>📅 Download Event (.ics)</a>

layouts/home.html

@@ -3,12 +3,8 @@
   <p class="prompt">{{ .Site.Params.description | default "Welcome to the underground tech scene." }}</p>
 </div>
 
-<div class="ascii-border">
+<div class="section-header">
-<pre>
+  <h2>UPCOMING EVENTS</h2>
-+==================================================================+
-|                         UPCOMING EVENTS                         |
-+==================================================================+
-</pre>
 </div>
 
 {{ $futureEvents := where .Site.RegularPages "Section" "events" }}

layouts/single.html

@@ -1,9 +1,7 @@
 {{ define "main" }}
 <article class="event-detail">
-  <div class="ascii-border">
+  <div class="section-header">
-+==================================================================+
+    <h2>EVENT DETAILS</h2>
-|                        EVENT DETAILS                            |
-+==================================================================+
   </div>
   
   <h1>{{ .Title }}</h1>
@@ -56,10 +54,8 @@
   
   {{ if .Params.registration_url }}
   <div class="registration">
-    <div class="ascii-border">
+    <div class="section-header">
-+--------------------------------------------------------------+
+      <h3>REGISTRATION</h3>
-|                       REGISTRATION                          |
-+--------------------------------------------------------------+
     </div>
     <p class="prompt"><a href="{{ .Params.registration_url }}">Register for this event</a></p>
   </div>

static/css/style.css

@@ -162,13 +162,62 @@ a:hover {
   font-weight: bold;
 }
 
-/* ASCII art borders */
+/* Section headers */
+.section-header {
+  text-align: center;
+  margin: 2rem 0;
+  position: relative;
+}
+
+.section-header h2 {
+  color: var(--neon-green);
+  text-shadow: 0 0 10px var(--neon-green);
+  font-size: 1.8rem;
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  border: 2px solid var(--neon-green);
+  padding: 1rem 2rem;
+  background: rgba(0, 255, 65, 0.1);
+  border-radius: 5px;
+  margin: 0;
+}
+
+.section-header h3 {
+  color: var(--neon-blue);
+  text-shadow: 0 0 10px var(--neon-blue);
+  font-size: 1.4rem;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  border: 2px solid var(--neon-blue);
+  padding: 0.8rem 1.5rem;
+  background: rgba(0, 212, 255, 0.1);
+  border-radius: 5px;
+  margin: 0;
+}
+
+/* Header and footer dividers */
+.header-divider, .footer-divider {
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--neon-green), transparent);
+  margin: 1rem 0;
+  box-shadow: 0 0 10px var(--neon-green);
+}
+
+/* ASCII art borders - fallback for existing usage */
 .ascii-border {
   font-family: monospace;
   color: var(--neon-green);
   text-align: center;
   margin: 1rem 0;
   font-size: 0.8rem;
+  overflow-x: auto;
+}
+
+.ascii-border pre {
+  margin: 0;
+  white-space: pre;
+  overflow-x: auto;
+  min-width: fit-content;
 }
 
 /* Event detail page styles */
@@ -227,4 +276,29 @@ a:hover {
   .event-meta {
     grid-template-columns: 1fr;
   }
+  
+  /* Mobile-friendly section headers */
+  .section-header h2 {
+    font-size: 1.2rem;
+    letter-spacing: 1px;
+    padding: 0.8rem 1rem;
+  }
+  
+  .section-header h3 {
+    font-size: 1rem;
+    letter-spacing: 1px;
+    padding: 0.6rem 0.8rem;
+  }
+  
+  /* Mobile-friendly ASCII borders */
+  .ascii-border {
+    font-size: 0.6rem;
+    margin: 0.5rem 0;
+  }
+  
+  .ascii-border pre {
+    padding: 0.5rem;
+    transform: scale(0.8);
+    transform-origin: center;
+  }
 }