From 74bdcd2a150603fb51a9f040cc9afa22c2ab09f6 Mon Sep 17 00:00:00 2001
From: Aaron Ball <nullspoon@oper.io>
Date: Tue, 25 Jan 2022 14:44:40 -0700
Subject: Update styles so header sticks to top on mobile

Also update post-receive to install verbose for res files.
---
 hooks/post-receive |  2 +-
 res/style.css      | 64 +++++++++++++++++++++++++++++++++---------------------
 2 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/hooks/post-receive b/hooks/post-receive
index 6269af4..9394af9 100755
--- a/hooks/post-receive
+++ b/hooks/post-receive
@@ -25,7 +25,7 @@ for i in ${FILES_E[*]} ${FILES_A[*]} ${FILES_M[*]}; do
   else
     # Don't want to use dest for this, as we don't want to change file
     # extentions
-    install -D "${i}" "${_web}/${i}"
+    install -v -D "${i}" "${_web}/${i}"
   fi
 done
 
diff --git a/res/style.css b/res/style.css
index 52e8f45..df5c998 100644
--- a/res/style.css
+++ b/res/style.css
@@ -3,7 +3,7 @@ body {
    color:#3f3b33;
    font-family:"Iosevka Aile", "Dejavu Sans", sans-serif;
    background-color:#292929;
-   font-size:17px;
+   font-size:1.1em;
    margin:0px;
    padding:0px;
 }
@@ -123,35 +123,33 @@ div#nav-header {
   background:linear-gradient(#0000, #0000, #0000, #0000, #221), #333;
   box-shadow:0px 0px 4px #4f4b43;
   color:#eee;
-  display:grid;
-  grid-template-columns:49% 50%;
+  display:flex;
 }
 
-div#nav-header div#nav-header-logo img {
-  margin:2px;
-  width:100%;
-  max-width:240px;
+div#nav-header div#nav-header-logo {
+  width:30%;
 }
 
-
 /**
  * Nav header link bar
  */
 div#nav-header-links {
   border:none;
-  padding:0px 2px 10px 0px;
+  padding:2px 1px 7px 0px;
   text-align:right;
+  vertical-align:top;
+  width:70%;
 }
 
 div#nav-header-links ul {
-  padding:0px;
+  padding:4px;
   margin:0px;
 }
 
 div#nav-header-links ul li {
   list-style:none;
   display:inline;
-  padding:0px 8px;
+  padding:0px 7px;
   border-right:1px solid #999;
 }
 
@@ -454,17 +452,19 @@ img#piwik-img {
 }
 
 
+/**
 .grid-container-left {
-  display:grid;
-  grid-template-columns:39% 60%;
-  grid-column-gap: 15px;
+display:grid;
+grid-template-columns:39% 60%;
+grid-column-gap: 15px;
 }
 
 .grid-container-right {
-  display:grid;
-  grid-template-columns:60% 39%;
-  grid-column-gap: 15px;
+display:grid;
+grid-template-columns:60% 39%;
+grid-column-gap: 15px;
 }
+ **/
 
 
 span.docutils.literal {
@@ -480,16 +480,30 @@ span.docutils.literal {
  */
 /* Smaller mobile displays with a lower resolution */
 @media only screen and (orientation: portrait) and (max-width: 850px) {
-  html, body { font-size: 15px; }
-  div#nav-header, .grid-container-left, .grid-container-right {
-    grid-template-columns:100%;
-  }
+  /*html, body { font-size: 15px; }*/
+  /*div#nav-header, .grid-container-left, .grid-container-right {
+  grid-template-columns:100%;
+  }*/
 }
 
 /* More modern mobile displays with a higher resolution */
-@media only screen and (orientation: portrait) and (min-resolution: 220dpi) {
-  html, body { font-size: 19px; }
-  div#nav-header, .grid-container-left, .grid-container-right {
-    grid-template-columns:100%;
+@media screen and (orientation: portrait) {
+  html, body { font-size: 1em; }
+  div#nav-header {
+    position:fixed;
+    width:100%;
+    font-size:.9em;
+  }
+  div#nav-header div#nav-header-logo img {
+    padding:4px;
+  }
+  div#nav-header div#nav-header-logo {
+    display:inline-block;
+  }
+  div#nav-header-links {
+    display:inline-block;
+  }
+  div#body-wrapper {
+    padding-top:30px;
   }
 }
-- 
cgit v1.2.3