now we're stylin'

server/src/main.rs

@@ -144,8 +144,8 @@ async fn main() {
         .route(paths::PROTECTED, get(protected))
         .route(paths::LOGOUT, get(logout))
         //.route(paths::Profile::NEW, get(routes::profiles::create_form))
-        .nest(paths::STATIC, axum_static::static_router("static").with_state(())) // static_router uses different state than with_state
         .merge(manage_profiles_router())
+        .nest(paths::STATIC, axum_static::static_router("static").with_state(())) // must be below manage_profiles_router fsr static_router uses different state than with_state
         .nest(paths::ADMIN, admin_router())
         .fallback(fallback_handler)
         .layer(session_layer)

server/static/font.css

@@ -0,0 +1,28 @@
+@font-face {
+    font-family: sourcesans3;
+    src: url('/static/sourcesans3/SourceSans3-Italic.ttf') format('truetype');
+    font-weight: normal;
+    font-display: swap;
+    font-style: italic;
+}
+@font-face {
+    font-family: sourcesans3;
+    src: url('/static/sourcesans3/SourceSans3-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-display: swap;
+    font-style: normal;
+}
+@font-face {
+    font-family: sourcesans3;
+    src: url('/static/sourcesans3/SourceSans3-Medium.ttf') format('truetype');
+    font-weight: 500;
+    font-display: swap;
+    font-style: normal;
+}
+@font-face {
+    font-family: sourcesans3;
+    src: url('/static/sourcesans3/SourceSans3-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-display: swap;
+    font-style: normal;
+}

server/static/style.css

@@ -1,6 +1,34 @@
+:root {
+    /* page backdrop */
+    --fg-backdrop: white;
+    --bg-backdrop: #4a6550;
+    --link-backdrop: #d0f9d9;
 
-.box {
-    border: 1px solid black;
+    /* page content blocks */
+    --fg-contentbox: black;
+    --bg-contentbox: white;
+
+    --link-contentbox: #48654d;
+
+    /* header and footer 'sticky boxes' */
+    --fg-stickybox: white;
+    --bg-stickybox: #618268;
+    --bg-highlight-stickybox: #7da285;
+    --bg-highlight-approach-stickybox: #1c2d1f;
+    --border-stickybox: #3a5540;
+    --link-stickybox: #d0f9d9;
+
+}
+
+.contentbox {
+    border: 1px solid var(--border-stickybox);
+    padding: 0.2em;
+    margin: 0.2em;
+    border-radius: 0px 10px 0px 10px;
+    color: var(--fg-contentbox);
+    background-color: var(--bg-contentbox);
+
+    box-shadow: 2px 2px 30px black; /* drop shadow */
 }
 
 #page-grid {
@@ -12,22 +40,108 @@
         / 1fr 3fr;
 }
 
+body {
+    color: var(--fg-backdrop);
+    background-color: var(--bg-backdrop);
+    margin: 0px;
+
+    font-family: sourcesans3, sans-serif;
+
+}
+
+a {
+    color: var(--link-backdrop);
+}
+
+.contentbox a {
+    color: var(--link-contentbox);
+}
+
+.stickybox a {
+    color: var(--link-stickybox);
+}
+
+.stickybox {
+    position: sticky;
+    top: 0;
+    display:box;
+
+    color: var(--fg-stickybox);
+    background-color: var(--bg-stickybox);
+
+    border: 1px solid var(--border-stickybox);
+}
+
+
 .header {
-    grid-area: header;
+    top: 0;
+    padding: 0.2em;
+    margin-bottom: 10px;
+    border-radius: 0px 0px 10px 10px;
+    padding-bottom: 8px;
+    box-shadow: 
+        0px 3px 10px black, /* drop shadow */
+        inset 0px -5px 2px var(--bg-highlight-stickybox),
+        inset 0px -15px 20px var(--bg-highlight-approach-stickybox);
 }
 
 .body {
     grid-area: body;
 }
 
-.sidebar {
-    grid-area: sidebar;
-}
-
 .footer {
-    grid-area: footer;
+    bottom: 0;
+    padding: 0.2em;
+    margin-top: 10px;
+    border-radius: 10px 10px 0px 0px;
+    padding-top: 8px;
+    box-shadow: 
+        0px -3px 10px black, /* drop shadow */
+        inset 0px 5px 2px var(--bg-highlight-stickybox),
+        inset 0px 15px 20px var(--bg-highlight-approach-stickybox);
 }
 
 .alert {
     grid-area: alert;
+}
+
+div.menu-horizontal {
+
+    display: flex;
+    gap: 0.5em;
+}
+
+div.menu-horizontal a {
+    display: block;
+    line-height: 1.33em;
+    min-height: 1.5rem;
+
+    padding: 0.5rem;
+
+    text-decoration: none;
+}
+
+div.menu-horizontal a.link-button {
+    color: var(--fg-stickybox);
+    background-color: var(--bg-stickybox);
+    border: 2px solid var(--border-stickybox);
+
+    text-decoration: none;
+
+    border-radius: 10px 10px 10px 10px;
+    box-shadow: 
+        inset 0px 5px 2px var(--bg-highlight-stickybox),
+        inset 0px 0px 20px var(--bg-highlight-approach-stickybox);
+}
+
+div.menu-horizontal a.link-button:hover {
+    box-shadow: 
+        inset 0px 5px 2px var(--bg-highlight-stickybox),
+        inset 0px 10px 20px var(--bg-highlight-approach-stickybox);
+}
+
+div.menu-horizontal a.link-button:active {
+    box-shadow: 
+        inset 0px -5px 2px var(--bg-highlight-approach-stickybox),
+        inset 0px 10px 20px var(--bg-highlight-approach-stickybox);
 }

server/templates/admin/board_add.html

@@ -2,7 +2,7 @@
 {% include "header/user_control.html" %}
 {% include "form_macros.html" %}
 
-<div class="body box">
+<div class="contentbox">
   <div>
     {{help_text}}
   </div>

server/templates/error.html

@@ -1,4 +1,4 @@
-<div class="body box">
+<div class="contentbox">
 <h1>oh no!</h1>
 <pre>{{error_debug_repr}}</pre>
 </div>

server/templates/footer.html

@@ -1,16 +1,6 @@
-  </div>
-  {% if hide_header_controls %}
-  {% else %}
-  <div class="sidebar box">
-    <nav class="drawer-side">
-      <label for="my-drawer-3" class="drawer-overlay"></label> 
-      <ul class="menu p-4 w-80 h-full bg-base-200">
-        {% include "header/user_control_links.html" %}
-      </ul>
-      
-    </nav>
-  </div>
-  {% endif %}
-  </div>
+    <div class="footer stickybox">
+      powered by three crabs in a trenchcoat 🦀🦀🦀
+    </div>
+  </div> <!-- body -->
   </body>
 </html>

server/templates/generic_forms/item_create_modify.html

@@ -1,7 +1,7 @@
 {% include "header.html" %}
 {% include "header/user_control.html" %}
 
-<div class="body box">
+<div class="contentbox">
   <form method="post">
   <div>
     {{help_text}}

server/templates/generic_forms/table.html

@@ -10,13 +10,13 @@
 
 -->
 
-<div class="body box">
+<div class="contentbox">
   <div>
     {{table_help_text}}
   </div>
-  <div class="join">
+  <div class="menu-horizontal">
   {% for action_button in action_buttons %}
-    <a href="{{action_button.url}}" class="btn join-item">{{action_button.label}}</a>
+    <a href="{{action_button.url}}" class="link-button">{{action_button.label}}</a>
   {% endfor %}
   </div>
   <table class="table table-zebra">

server/templates/header.html

@@ -5,6 +5,7 @@
     <title>another forum</title>
     <meta name="description" content="it's another forum!">
 
+    <link href="/static/font.css" rel="stylesheet" type="text/css" />
     <link href="/static/style.css" rel="stylesheet" type="text/css" />
 
   </head>

server/templates/header/user_control.html

@@ -1,21 +1,18 @@
-      <div class="header box">
-        <div class="flex-1 px-2 mx-2"><a href="#top" class="link link-primary">Untitled Forum Zone</a></div>
+      <div class="header stickybox">
+          <div class="menu menu-horizontal">
+          <a href="/" class="link" id="home">📯 Untitled Forum Zone</a>
+          <div style="flex: 1"></div>
           {% if hide_header_controls %}
           {% else %}
-          <nav class="flex-none hidden lg:block">
-            <ul class="menu menu-horizontal">
               {% include "header/user_control_links.html" %}
-            </ul>
-          </nav>
           {% endif %}
-        </div>
-
-        {% if alert_text %}
-        <!-- Todo: choose appropriate semantic html tags so that the contents of this are apparent -->
-        <div class="alert">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-          <span>{{alert_text}}</span>
-        </div>
-        {% endif %}
+          </div>
       </div>
-    <a id="top" />
+
+      {% if alert_text %}
+      <!-- Todo: choose appropriate semantic html tags so that the contents of this are apparent -->
+      <div class="alert">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+        <span>{{alert_text}}</span>
+      </div>
+      {% endif %}

server/templates/header/user_control_links.html

@@ -1,11 +1,11 @@
 {% if header_data.current_profile %}
-<li><a href="/profiles/{{ header_data.current_profile.id }}" class="link link-primary">{{ header_data.current_profile.display_name }}</a></li>
-<li><a href="/my_profiles" class="link link-primary">Switch profiles</a></li>
+<a href="/profiles/{{ header_data.current_profile.id }}" class="link link-button">{{ header_data.current_profile.display_name }}</a>
+<a href="/my_profiles" class="link link-button">Switch profiles</a>
 {% else %}
-<li><a href="/my_profiles" class="link link-primary">Create a profile</a></li>
+<a href="/my_profiles" class="link link-button">Create a profile</a>
 {% endif %}
 {% if header_data.current_user.user_id %}
-<li><a href="/logout" class="link link-primary">Log out</a></li>
+<a href="/logout" class="link link-button">Log out</a>
 {% else %}
-<li><a href="/login" class="link link-primary">log in</a></li>
+<a href="/login" class="link link-button">log in</a>
 {% endif %}

server/templates/navigation/board_index.html

@@ -1,7 +1,7 @@
 {% include "header.html" %}
 {% include "header/user_control.html" %}
 
-<div class="body box">
+<div class="contentbox">
   <table class="table table-zebra">
     <!-- head -->
     <thead>
@@ -28,6 +28,4 @@
   </table>
 </div>
 
-</div>
-
 {% include "footer.html" %}