From 91fc14cffcc1d81c02cea272a9eca1d5172f56ba Mon Sep 17 00:00:00 2001
From: Raphael Kabo <raphaelkabo@hey.com>
Date: Tue, 27 Feb 2024 13:43:18 +0000
Subject: housekeeping: remove unused CSS and JS

---
 views/layouts/main.handlebars | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

(limited to 'views')

diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars
index 996d35f..46973a1 100755
--- a/views/layouts/main.handlebars
+++ b/views/layouts/main.handlebars
@@ -34,25 +34,20 @@
 
     <!-- CSS -->
     <link rel="stylesheet" href="/css/bootstrap.min.css">
-    <link href="/css/datepicker.min.css" rel="stylesheet" type="text/css">
     <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="/css/style.css">
 
     <!-- JS -->
     <script src="/js/jquery-3.4.1.min.js"></script>
     <script src="/js/popper.min.js"></script>
-    <script src="/js/jquery.form-validator.js"></script>
     <script src="/js/bootstrap.min.js"></script>
-    <script src="/js/datepicker.min.js"></script>
     <script src="/js/moment.js"></script>
     <script src="/js/jquery.uploadPreview.min.js"></script>
     <script src="/js/clipboard.min.js"></script>
     <script src="/js/autosize.min.js"></script>
-    <script src="/js/i18n/datepicker.en.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
     <script src="/js/moment-timezone.js"></script>
     <script src="/js/util.js"></script>
-
     <script src="//unpkg.com/alpinejs" defer></script>
 
   </head>
-- 
cgit v1.2.3


From 54d6a826d071e8697dcbaf56e92f72e2076d91fb Mon Sep 17 00:00:00 2001
From: Raphael Kabo <raphaelkabo@hey.com>
Date: Tue, 27 Feb 2024 17:11:19 +0000
Subject: refactor: new layout and styling tweaks

---
 views/404.handlebars                  |   8 +-
 views/createEventMagicLink.handlebars |   5 +-
 views/event.handlebars                | 162 +++++++++++++++++-----------------
 views/eventgroup.handlebars           | 124 +++++++++++++-------------
 views/home.handlebars                 |   2 +
 views/layouts/main.handlebars         |  56 ++++++------
 views/newevent.handlebars             |   4 +-
 views/partials/sidebar.handlebars     |   4 +-
 views/publicEventList.handlebars      |   4 +-
 views/static.handlebars               |  19 ++--
 10 files changed, 195 insertions(+), 193 deletions(-)

(limited to 'views')

diff --git a/views/404.handlebars b/views/404.handlebars
index 832f81a..69066db 100755
--- a/views/404.handlebars
+++ b/views/404.handlebars
@@ -1,5 +1,7 @@
-<h1>404</h1>
+<main class="page">
+    <h1>404</h1>
 
-<p>Event not found!</p>
+    <p>Event not found!</p>
 
-<p>It may have never existed, or if it finished more than a week ago, it's been removed from the server. Don't despair - why not create a new one? I for one would love to come to your ocarina recital.</p>
+    <p>It may have never existed, or if it finished more than a week ago, it's been removed from the server. Don't despair - why not create a new one? I for one would love to come to your ocarina recital.</p>
+</main>
\ No newline at end of file
diff --git a/views/createEventMagicLink.handlebars b/views/createEventMagicLink.handlebars
index ab00dc5..7329801 100644
--- a/views/createEventMagicLink.handlebars
+++ b/views/createEventMagicLink.handlebars
@@ -1,5 +1,4 @@
-<article>
-
+<main class="page">
   <h2 class="mb-4">Request a link to create a new event</h2>
 
   <form
@@ -27,4 +26,4 @@
       <button type="submit" class="btn btn-primary w-50">Request magic link</button>
     </div>
   </form>
-</article>
+</main>
diff --git a/views/event.handlebars b/views/event.handlebars
index 44c2f4b..5da0330 100755
--- a/views/event.handlebars
+++ b/views/event.handlebars
@@ -1,10 +1,11 @@
+<main class="event">
 {{#if eventHasCoverImage}}
-  <div id="eventImageContainer" style="background-image: url(/events/{{eventData.image}});"></div>
+  <div class="event-header-image" id="eventImageContainer" style="background-image: url(/events/{{eventData.image}});"></div>
 {{else}}
-  <div id="genericEventImageContainer" style="background-image: url(/images/seigaiha.png);"></div>
+  <div class="event-header-image" id="genericEventImageContainer" style="background-image: url(/images/seigaiha.png);"></div>
 {{/if}}
 <div class="h-event">
-<div class="row">
+<div class="row p-0">
   <div class="col-lg">
       <h3 class="p-name" id="eventName" data-event-id="{{eventData.id}}">{{eventData.name}}</h3>
   </div>
@@ -16,95 +17,93 @@
     {{/if}}
   </div>
 </div>
-<div class="container my-4 pr-0">
-  <div class="row">
-    <div class="col-lg-9 card p-0">
-      <div class="card-body">
-        <ul class="fa-ul eventInformation">
-          <li>
+<div id="event__basics">
+  <div class="card" id="event__data">
+    <div class="card-body">
+      <ul class="fa-ul eventInformation">
+        <li>
+          <span class="fa-li">
+            <i class="fas fa-map-marker-alt"></i>
+          </span>
+          <span class="p-location">{{eventData.location}}</span>
+        </li>
+        <li>
+          <span class="fa-li">
+            <i class="fas fa-fw fa-calendar-day"></i>
+          </span>
+          <span class="dt-duration">{{{displayDate}}}</span>
+          <time class="dt-start" datetime="{{eventStartISO}}"></time>
+          <time class="dt-end" datetime="{{eventEndISO}}"></time>
+          <br>
+          <span class="text-muted">
+            {{#if eventHasBegun}}{{#unless eventHasConcluded}}Started {{else}}Ended {{/unless}}{{/if}}{{fromNow}}
+          </span>
+        </li>
+        {{#if eventHasHost}}
+          <li id="hosted-by">
             <span class="fa-li">
-              <i class="fas fa-map-marker-alt"></i>
+              <i class="fas fa-fw fa-user-circle"></i>
             </span>
-            <span class="p-location">{{eventData.location}}</span>
+            <span class="text-muted">Hosted by</span> {{eventData.hostName}}
           </li>
-          <li>
-            <span class="fa-li">
-              <i class="fas fa-fw fa-calendar-day"></i>
-            </span>
-            <span class="dt-duration">{{{displayDate}}}</span>
-            <time class="dt-start" datetime="{{eventStartISO}}"></time>
-            <time class="dt-end" datetime="{{eventEndISO}}"></time>
-            <br>
-            <span class="text-muted">
-              {{#if eventHasBegun}}{{#unless eventHasConcluded}}Started {{else}}Ended {{/unless}}{{/if}}{{fromNow}}
-            </span>
-          </li>
-          {{#if eventHasHost}}
-            <li id="hosted-by">
-              <span class="fa-li">
-                <i class="fas fa-fw fa-user-circle"></i>
-              </span>
-              <span class="text-muted">Hosted by</span> {{eventData.hostName}}
-            </li>
-          {{/if}}
-          {{#if eventData.eventGroup}}
-            <li id="event-group">
-              <span class="fa-li">
-                <i class="fas fa-fw fa-calendar-alt"></i>
-              </span>
-              <span class="text-muted">Part of</span> <a href="/group/{{eventData.eventGroup.id}}">{{eventData.eventGroup.name}}</a>
-            </li>
-          {{/if}}
-          {{#if eventData.url}}
-            <li>
-              <span class="fa-li">
-                <i class="fas fa-fw fa-link"></i>
-              </span>
-              <a href="{{eventData.url}}">
-                {{eventData.url}}
-              </a>
-            </li>
-          {{/if}}
-          <li>
+        {{/if}}
+        {{#if eventData.eventGroup}}
+          <li id="event-group">
             <span class="fa-li">
-              <i class="fas fa-fw fa-share-square"></i>
+              <i class="fas fa-fw fa-calendar-alt"></i>
             </span>
-            <a class="u-url" href="https://{{domain}}/{{eventData.id}}">https://{{domain}}/{{eventData.id}}</a>
-            <button type="button" id="copyEventLink" class="eventInformationAction btn btn-outline-secondary btn-sm" data-clipboard-text="https://{{domain}}/{{eventData.id}}">
-              <i class="fas fa-copy"></i> Copy
-            </button>
+            <span class="text-muted">Part of</span> <a href="/group/{{eventData.eventGroup.id}}">{{eventData.eventGroup.name}}</a>
           </li>
-          {{#if isFederated}}
+        {{/if}}
+        {{#if eventData.url}}
           <li>
             <span class="fa-li">
-              <i class="fas fa-fw fa-share-square"></i>
+              <i class="fas fa-fw fa-link"></i>
             </span>
-            @{{eventData.id}}@{{domain}}
-            <button type="button" id="copyAPLink" class="eventInformationAction btn btn-outline-secondary btn-sm" data-clipboard-text="@{{eventData.id}}@{{domain}}">
-              <i class="fas fa-copy"></i> Copy
-            </button>
+            <a href="{{eventData.url}}">
+              {{eventData.url}}
+            </a>
           </li>
-          {{/if}}
-        </ul>
-      </div>
-    </div>
-    <div class="col-lg-3" id="eventActions">
-      <aside class="btn-group-vertical d-flex" role="group" aria-label="Event actions">
-        <a href="http://www.google.com/calendar/event?action=TEMPLATE&dates={{parsedStart}}%2F{{parsedEnd}}&text={{escapedName}}&location={{parsedLocation}}&ctz={{timezone}}" class="btn btn-outline-secondary btn-sm">
-          <i class="far fa-calendar-plus"></i> Add to Google Calendar
-        </a>
-        <button type="button" id="exportICS" class="btn btn-outline-secondary btn-sm" data-event-id="{{eventData.id}}">
-          <i class="fas fa-download"></i> Export as ICS
-        </button>
-        <a target="_blank" href="http://maps.google.com/?q={{parsedLocation}}" class="btn btn-outline-secondary btn-sm">
-          <i class="fas fa-map-marked"></i> Show on Google Maps
-        </a>
-        <a target="_blank" href="https://www.openstreetmap.org/search?query={{parsedLocation}}" class="btn btn-outline-secondary btn-sm">
-          <i class="fas fa-map-marked"></i> Show on OpenStreetMap
-        </a>
-      </aside>
+        {{/if}}
+        <li>
+          <span class="fa-li">
+            <i class="fas fa-fw fa-share-square"></i>
+          </span>
+          <a class="u-url" href="https://{{domain}}/{{eventData.id}}">https://{{domain}}/{{eventData.id}}</a>
+          <button type="button" id="copyEventLink" class="eventInformationAction btn btn-outline-secondary btn-sm" data-clipboard-text="https://{{domain}}/{{eventData.id}}">
+            <i class="fas fa-copy"></i> Copy
+          </button>
+        </li>
+        {{#if isFederated}}
+        <li>
+          <span class="fa-li">
+            <i class="fas fa-fw fa-share-square"></i>
+          </span>
+          @{{eventData.id}}@{{domain}}
+          <button type="button" id="copyAPLink" class="eventInformationAction btn btn-outline-secondary btn-sm" data-clipboard-text="@{{eventData.id}}@{{domain}}">
+            <i class="fas fa-copy"></i> Copy
+          </button>
+        </li>
+        {{/if}}
+      </ul>
+    </div> <!-- .card-body -->
+  </div> <!-- .card#event__data -->
+  <aside id="event__actions">
+    <div class="btn-group-vertical d-flex" role="group" aria-label="Event actions">
+      <a href="http://www.google.com/calendar/event?action=TEMPLATE&dates={{parsedStart}}%2F{{parsedEnd}}&text={{escapedName}}&location={{parsedLocation}}&ctz={{timezone}}" class="btn btn-outline-secondary btn-sm">
+        <i class="far fa-calendar-plus"></i> Add to Google Calendar
+      </a>
+      <button type="button" id="exportICS" class="btn btn-outline-secondary btn-sm" data-event-id="{{eventData.id}}">
+        <i class="fas fa-download"></i> Export as ICS
+      </button>
+      <a target="_blank" href="http://maps.google.com/?q={{parsedLocation}}" class="btn btn-outline-secondary btn-sm">
+        <i class="fas fa-map-marked"></i> Show on Google Maps
+      </a>
+      <a target="_blank" href="https://www.openstreetmap.org/search?query={{parsedLocation}}" class="btn btn-outline-secondary btn-sm">
+        <i class="fas fa-map-marked"></i> Show on OpenStreetMap
+      </a>
     </div>
-  </div>
+  </aside> <!-- #event__actions -->
 </div>
 
 {{#if eventHasConcluded}}
@@ -573,3 +572,4 @@ window.eventData = {{{ json jsonData }}};
   });
 
   </script>
+</main>
\ No newline at end of file
diff --git a/views/eventgroup.handlebars b/views/eventgroup.handlebars
index 7ad3570..9fb2276 100755
--- a/views/eventgroup.handlebars
+++ b/views/eventgroup.handlebars
@@ -1,9 +1,10 @@
+<main class="event">
 {{#if eventGroupHasCoverImage}}
-  <div id="eventImageContainer" style="background-image: url(/events/{{eventGroupData.image}});"></div>
+  <div class="event-header-image" id="eventImageContainer" style="background-image: url(/events/{{eventGroupData.image}});"></div>
 {{else}}
-  <div id="genericEventImageContainer" style="background-image: url(/images/seigaiha.png);"></div>
+  <div class="event-header-image" id="genericEventImageContainer" style="background-image: url(/images/seigaiha.png);"></div>
 {{/if}}
-<div class="row">
+<div class="row p-0">
   <div class="col-lg">
     <h3 id="eventGroupName" data-event-id="{{eventGroupData.id}}">{{eventGroupData.name}}</h3>
   </div>
@@ -15,6 +16,7 @@
     {{/if}}
   </div>
 </div>
+<div class="event-group">
 {{#if firstLoad}}
 <div class="alert alert-success alert-dismissible fade show mt-4" role="alert">
   <button type="button" class="close" data-dismiss="alert" aria-label="Close">
@@ -23,73 +25,71 @@
   Welcome to your event group! We've just sent you an email with your secret editing link, which you can also see in the address bar above. Haven't got the email? Check your spam or junk folder. To share your event group, use the link you can see just below this message - that way your attendees won't be able to edit or delete your event group!
 </div>
 {{/if}}
-<div class="container my-4 pr-0">
-  <div class="row">
-    <div class="col-lg-9 card p-0">
-      <div class="card-body">
-        <ul class="fa-ul eventInformation">
-          {{#if eventGroupHasHost}}
-            <li id="hostName">
-              <span class="fa-li">
-                <i class="fas fa-fw fa-user-circle"></i>
-              </span>
-              <span class="text-muted">Hosted by</span> {{eventGroupData.hostName}}
-            </li>
-          {{/if}}
-          {{#if eventGroupData.url}}
-            <li id="eventGroupURL">
-              <span class="fa-li">
-                <i class="fas fa-link"></i>
-              </span>
-              <a href="{{eventGroupData.url}}">
-                {{eventGroupData.url}}
-              </a>
-            </li>
-          {{/if}}
-          <li>
+<div id="event__basics">
+  <div class="card" id="event__information">
+    <div class="card-body">
+      <ul class="fa-ul eventInformation">
+        {{#if eventGroupHasHost}}
+          <li id="hostName">
             <span class="fa-li">
-              <i class="fas fa-share-square"></i>
+              <i class="fas fa-fw fa-user-circle"></i>
             </span>
-            <a href="https://{{domain}}/group/{{eventGroupData.id}}">https://{{domain}}/group/{{eventGroupData.id}}</a>
-            <button type="button" id="copyEventLink" class="eventInformationAction btn btn-outline-secondary btn-sm" data-clipboard-text="https://{{domain}}/group/{{eventGroupData.id}}">
-              <i class="fas fa-copy"></i> Copy
-            </button>
+            <span class="text-muted">Hosted by</span> {{eventGroupData.hostName}}
           </li>
-          <li>
+        {{/if}}
+        {{#if eventGroupData.url}}
+          <li id="eventGroupURL">
             <span class="fa-li">
-              <i class="fas fa-rss"></i>
+              <i class="fas fa-link"></i>
             </span>
-            <a
-              href="https://{{domain}}/group/{{eventGroupData.id}}/feed.ics">https://{{domain}}/group/{{eventGroupData.id}}/feed.ics</a>&nbsp;
-            <button type="button" id="copyFeedLink"
-              class="eventInformationAction btn btn-outline-secondary btn-sm"
-              data-clipboard-text="https://{{domain}}/group/{{eventGroupData.id}}/feed.ics">
-              <i class="fas fa-copy"></i> Copy
-            </button>
-            <p class="text-muted small">Paste this URL into your calendar app
-              to subscribe to a live feed of events from this group.</p>
+            <a href="{{eventGroupData.url}}">
+              {{eventGroupData.url}}
+            </a>
           </li>
-        </ul>
-      </div> <!-- /card -->
-    </div>
-    <div class="col-lg-3" id="eventActions">
-      <aside class="btn-group-vertical d-flex" role="group" aria-label="Event actions">
-        <button type="button" class="btn btn-outline-secondary btn-sm"
-          data-event-id="{{eventGroupData.id}}" data-toggle="modal"
-          data-target="#subscribeModal">
-          <i class="fas fa-envelope"></i> Subscribe to updates
-        </button>
-        <button type="button" id="exportICS" class="btn btn-outline-secondary
-          btn-sm" data-event-id="{{eventGroupData.id}}">
-          <i class="fas fa-download"></i> Export as ICS
-        </button>
-      </aside>
-    </div>
+        {{/if}}
+        <li>
+          <span class="fa-li">
+            <i class="fas fa-share-square"></i>
+          </span>
+          <a href="https://{{domain}}/group/{{eventGroupData.id}}">https://{{domain}}/group/{{eventGroupData.id}}</a>
+          <button type="button" id="copyEventLink" class="eventInformationAction btn btn-outline-secondary btn-sm" data-clipboard-text="https://{{domain}}/group/{{eventGroupData.id}}">
+            <i class="fas fa-copy"></i> Copy
+          </button>
+        </li>
+        <li>
+          <span class="fa-li">
+            <i class="fas fa-rss"></i>
+          </span>
+          <a
+            href="https://{{domain}}/group/{{eventGroupData.id}}/feed.ics">https://{{domain}}/group/{{eventGroupData.id}}/feed.ics</a>&nbsp;
+          <button type="button" id="copyFeedLink"
+            class="eventInformationAction btn btn-outline-secondary btn-sm"
+            data-clipboard-text="https://{{domain}}/group/{{eventGroupData.id}}/feed.ics">
+            <i class="fas fa-copy"></i> Copy
+          </button>
+          <p class="text-muted small">Paste this URL into your calendar app
+            to subscribe to a live feed of events from this group.</p>
+        </li>
+      </ul>
+    </div> <!-- /card -->
   </div>
+  <aside id="event__actions">
+    <div class="btn-group-vertical d-flex" role="group" aria-label="Event group actions">
+      <button type="button" class="btn btn-outline-secondary btn-sm"
+        data-event-id="{{eventGroupData.id}}" data-toggle="modal"
+        data-target="#subscribeModal">
+        <i class="fas fa-envelope"></i> Subscribe to updates
+      </button>
+      <button type="button" id="exportICS" class="btn btn-outline-secondary
+        btn-sm" data-event-id="{{eventGroupData.id}}">
+        <i class="fas fa-download"></i> Export as ICS
+      </button>
+    </div>
+  </aside>
 </div>
 
 {{#if editingEnabled}}
-  <div class="alert alert-info">
+  <div class="alert alert-info mb-4">
     <p>To add an event to this group, copy and paste the two codes below into the 'Event Group' box when creating a new event or editing an existing event.</p>
     <div class="table-responsive">
       <table style="width:100%">
@@ -119,7 +119,7 @@
   {{#if upcomingEventsExist}}
     {{#each events}}
       {{#unless this.eventHasConcluded}}
-        <a href="/{{this.id}}" class="list-group-item list-group-item-action" target="_blank">
+        <a href="/{{this.id}}" class="list-group-item list-group-item-action">
           <i class="fas fa-fw fa-calendar-day"></i>
           <strong>{{this.name}}</strong>
           {{#if this.location}}<span class="ml-2 text-muted"><i class="fas fa-map-marker-alt"></i> {{this.location}}</span>{{/if}}
@@ -132,6 +132,7 @@
   {{/if}}
   </div>
 </div>
+</div>
 
 {{#if editingEnabled}}
 {{> editeventgroupmodal }}
@@ -338,3 +339,4 @@ window.groupData = {{{ json jsonData }}};
 
   });
 </script>
+</main>
\ No newline at end of file
diff --git a/views/home.handlebars b/views/home.handlebars
index bf92724..7b4608a 100755
--- a/views/home.handlebars
+++ b/views/home.handlebars
@@ -1,3 +1,4 @@
+<main class="page">
 <p class="lead">Gathio is a simple, federated, privacy-first event hosting platform.</p>
 
 <div class="card mb-3 border-primary">
@@ -52,3 +53,4 @@
   </div>
 </div>
 {{/if}}
+</main>
\ No newline at end of file
diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars
index 46973a1..e967019 100755
--- a/views/layouts/main.handlebars
+++ b/views/layouts/main.handlebars
@@ -53,37 +53,33 @@
   </head>
 
   <body>
-    <div class="container h-100">
-      <div class="row" id="container">
-        <div class="col-lg-2 col-md-3 col-sm-4" id="sidebar">
-          {{>sidebar}}
-        </div>
-        <div class="col-sm pt-3" id="content">
-          <div id="bodyContainer">
-            {{{body}}}
-          </div>
-          <div id="footerContainer">
-            {{#if showInstanceInformation}}
-              <p class="small text-muted">
-                <strong>{{siteName}}</strong>
-                {{#each staticPages}}
-                  {{#if @first}}
-                    &middot;
-                  {{/if}}
+    <div id="container">
+      <header id="sidebar">
+        {{>sidebar}}
+      </header>
+      <section id="content">
+        {{{body}}}
+        <footer>
+          {{#if showInstanceInformation}}
+            <p class="small text-muted">
+              <strong>{{siteName}}</strong>
+              {{#each staticPages}}
+                {{#if @first}}
+                  &middot;
+                {{/if}}
 
-                  <a href="{{this.path}}">{{this.title}}</a>
+                <a href="{{this.path}}">{{this.title}}</a>
 
-                  {{#unless @last}}
-                    &middot;
-                  {{/unless}}
-                {{/each}}
-              </p>
-            {{/if}}
-            <p class="small text-muted">
-              <strong>Gathio</strong> version {{version}} &middot; <a href="https://github.com/lowercasename/gathio">GitHub</a> &middot; Made with <i class="far fa-heart"></i> by <a href="https://raphaelkabo.com">Raphael</a> and <a href="https://github.com/lowercasename/gathio/graphs/contributors">contributors</a>
+                {{#unless @last}}
+                  &middot;
+                {{/unless}}
+              {{/each}}
             </p>
-          </div>
-        </div>
-      </div>
-    </div>
+          {{/if}}
+          <p class="small text-muted">
+            <strong>Gathio</strong> version {{version}} &middot; <a href="https://github.com/lowercasename/gathio">GitHub</a> &middot; Made with <i class="far fa-heart"></i> by <a href="https://raphaelkabo.com">Raphael</a> and <a href="https://github.com/lowercasename/gathio/graphs/contributors">contributors</a>
+          </p>
+        </footer>
+      </section>
+  </div>
 </html>
diff --git a/views/newevent.handlebars b/views/newevent.handlebars
index 5d254ca..9df69db 100755
--- a/views/newevent.handlebars
+++ b/views/newevent.handlebars
@@ -1,4 +1,4 @@
-<article>
+<main class="page">
 <div class="container mb-4">
   <div class="row">
     <div class="col-sm-4 p-2">
@@ -68,7 +68,7 @@
   </form>
 </div>
 
-</article>
+</main>
 
 <script src="/js/generate-timezones.js"></script>
 <script src="/js/modules/new.js"></script>
diff --git a/views/partials/sidebar.handlebars b/views/partials/sidebar.handlebars
index 1882aef..6aa13b3 100755
--- a/views/partials/sidebar.handlebars
+++ b/views/partials/sidebar.handlebars
@@ -1,5 +1,5 @@
-<div id="fixedContainer" class="pt-3">
-    <h1 class="mb-4"><a href="/">gathio</a></h1>
+<div class="sidebar-sticky-wrapper">
+    <h1><a href="/">gathio</a></h1>
 
     <ul id="sidebar__nav">
         <li><a class="btn btn-success" href="/new"><i class="far fa-calendar-plus"></i> New</a></li>
diff --git a/views/publicEventList.handlebars b/views/publicEventList.handlebars
index bceae58..1dbeffc 100644
--- a/views/publicEventList.handlebars
+++ b/views/publicEventList.handlebars
@@ -1,4 +1,4 @@
-<article x-data="{currentTab: 'events'}">
+<main class="page" x-data="{currentTab: 'events'}">
 <h2 class="mb-4">{{siteName}}</h2>
 <p><strong>{{siteName}}</strong> runs on <a href="/about">Gathio</a> — a simple, federated, privacy-first event hosting platform.</p>
 <ul class="nav nav-pills">
@@ -70,4 +70,4 @@
     {{/if}}
 </div>
 
-</article>
\ No newline at end of file
+</main>
\ No newline at end of file
diff --git a/views/static.handlebars b/views/static.handlebars
index d28d8f2..a05aea7 100644
--- a/views/static.handlebars
+++ b/views/static.handlebars
@@ -1,10 +1,11 @@
 
-<article class="static-page">
-    <header>
-        <h1>{{title}}</h1>
-    </header>
-    <main>
-        {{{content}}}
-    </main>
-</article>
-
+<main class="page">
+    <article class="static-page">
+        <header>
+            <h1>{{title}}</h1>
+        </header>
+        <main>
+            {{{content}}}
+        </main>
+    </article>
+</main>
-- 
cgit v1.2.3