🎨 fixed header

Make the header fixed position.  This required a slight change in background color from stone at 60% opacity to grey 100 otherwise content showed under it.

Issue: #287

static/css/styles.css

@@ -1445,6 +1445,10 @@ input[type=file] {
   max-width: 42rem;
 }
 
+.max-w-7xl {
+  max-width: 80rem;
+}
+
 .flex-auto {
   flex: 1 1 auto;
 }
@@ -1892,6 +1896,16 @@ input[type=file] {
   background-color: rgb(90 213 153 / 0.7);
 }
 
+.bg-stone {
+  --tw-bg-opacity: 1;
+  background-color: rgb(221 231 236 / var(--tw-bg-opacity));
+}
+
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-70 {
   --tw-bg-opacity: 0.7;
 }
@@ -2692,6 +2706,22 @@ input[type=file] {
 }
 
 @media (min-width: 768px) {
+  .md\:fixed {
+    position: fixed;
+  }
+
+  .md\:top-0 {
+    top: 0px;
+  }
+
+  .md\:left-0 {
+    left: 0px;
+  }
+
+  .md\:right-0 {
+    right: 0px;
+  }
+
   .md\:order-last {
     order: 9999;
   }
@@ -2760,6 +2790,14 @@ input[type=file] {
     margin-bottom: 1.5rem;
   }
 
+  .md\:mt-20 {
+    margin-top: 5rem;
+  }
+
+  .md\:mt-32 {
+    margin-top: 8rem;
+  }
+
   .md\:block {
     display: block;
   }

templates/base.html

@@ -43,8 +43,8 @@
             if (m !== 'dark' && m !== 'light') return;
             mode = m;
         }"
-        class="h-screen dark:bg-black bg-stone/60 font-cairo" {% block body_id %}{% endblock %}>
-    <div class="md:mx-auto lg:container">
+        class="h-screen dark:bg-black bg-gray-200 font-cairo" {% block body_id %}{% endblock %}>
+    <div class="md:mx-auto lg:container md:mt-32">
       {% include "includes/_header.html" %}
 
 

templates/includes/_header.html

@@ -2,8 +2,8 @@
 {% load account socialaccount %}
 
 
-<div class="relative">
-  <div class="relative pb-11 md:pb-3">
+<div class="relative md:fixed md:top-0 md:left-0 md:right-0 dark:bg-black bg-gray-200 z-50">
+  <div class="relative max-w-7xl mx-auto">
     <div>
       <div class="hidden items-center pt-2 pb-4 border-b-2 border-gray-300 md:flex dark:border-charcoal">
         <div class="w-[130px]">