Add mobile reachability header

internal/assets/static/main.css

@@ -497,7 +497,7 @@ body {
     animation-delay: 150ms;
 }
 
-.mobile-navigation {
+.mobile-navigation, .mobile-reachability-header {
     display: none;
 }
 
@@ -1027,6 +1027,15 @@ body {
     .hide-on-mobile {
         display: none
     }
+
+    .mobile-reachability-header {
+        display: block;
+        font-size: 3rem;
+        padding: 10vh 1rem;
+        text-align: center;
+        color: var(--color-text-highlight);
+        animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards;
+    }
 }
 
 .size-h1   { font-size: var(--font-size-h1); }

internal/assets/templates/content.html

@@ -1,3 +1,7 @@
+{{ if .Page.ShowMobileHeader }}
+<div class="mobile-reachability-header">{{ .Page.Title }}</div>
+{{ end }}
+
 <div class="page-columns">
 {{ range .Page.Columns }}
     <div class="page-column page-column-{{ .Size }}">

internal/glance/glance.go

@@ -55,10 +55,11 @@ type templateData struct {
 }
 
 type Page struct {
-	Title   string   `yaml:"name"`
-	Slug    string   `yaml:"slug"`
-	Columns []Column `yaml:"columns"`
-	mu      sync.Mutex
+	Title            string   `yaml:"name"`
+	Slug             string   `yaml:"slug"`
+	ShowMobileHeader bool     `yaml:"show-mobile-header"`
+	Columns          []Column `yaml:"columns"`
+	mu               sync.Mutex
 }
 
 func (p *Page) UpdateOutdatedWidgets() {