improve display of nav on narrow displays

theme/sass/hoa.scss

@@ -27,6 +27,8 @@ body {
 }
 header {
     text-align: center;
+    margin-top: 2em;
+    margin-bottom: 2em;
     margin-left: auto;
     margin-right: auto;
     max-width: 50em;
@@ -60,13 +62,14 @@ header {
 .nav li {
     display: inline;
     padding-right: 2em;
+    line-height: 3em;
 }
 .nav li a {
     color: $primary;
     font-size: 20pt;
 }
 .nav li a img {
-    height: 28px;
+    height: 20pt;
 }
 .main img {
     max-width: 80vw;

theme/static/css/hoa.css

-@font-face{font-family:"Geo";src:url("/static/fonts/Geo-Regular.ttf")}@font-face{font-family:"Fira Sans";src:url("/static/fonts/FiraSans-Regular.ttf")}body{font-family:'Geo', sans-serif;background:#000;color:#d9d9d9;margin-left:auto;margin-right:auto;max-width:50em}#specht{max-height:50vh}.headers{font-size:28pt}header{text-align:center;margin-left:auto;margin-right:auto;max-width:50em;margin-left:2em;margin-right:2em}.nav{list-style:none}.main{font-family:"Fira Sans";font-size:16pt;margin-left:2em;margin-right:2em}.main h4{font-family:"Geo";font-size:20pt}.main h3{font-family:"Geo";font-size:24pt}.main h2{font-family:"Geo";font-size:28pt}.main a:link,.main a:visited{color:#979797}.nav li{display:inline;padding-right:2em}.nav li a{color:#d9d9d9;font-size:20pt}.nav li a img{height:28px}.main img{max-width:80vw;max-height:100vh;display:block;margin-left:auto;margin-right:auto;margin-top:1em;margin-bottom:1em}iframe{width:400px;height:300px;max-width:100%}#footnote{border-top:1px solid #d9d9d9;padding-top:0.5em;text-align:center}ul{list-style-type:"+  ";padding-left:21px}

theme/static/css/neutral.css

-@font-face{font-family:"Geo";src:url("/static/fonts/Geo-Regular.ttf")}@font-face{font-family:"Fira Sans";src:url("/static/fonts/FiraSans-Regular.ttf")}html{min-height:100vh;background:url("/static/img/background.svg");background-attachment:fixed;font-family:'Geo', sans-serif;color:#c1a92b}body{margin:0}#specht{height:70vh}.headers{font-size:200%}.headers{position:fixed;top:0px;border:1px solid #555;border-top:none;background-color:#000;width:750px;height:99px}.headers h1,.headers h3{margin-top:10px;margin-bottom:0.3em}h2{margin-bottom:0.6em}.nav{list-style:none;margin:0}.main{max-width:750px;font-family:"Fira Sans";font-size:130%}.main h4{font-family:"Geo";font-size:120%}.main h3{font-family:"Geo";font-size:180%}.main h2{font-family:"Geo";font-size:240%}.main a:link,.main a:visited{color:#f2da58}#top{position:absolute}.nav li a{color:#c1a92b;font-size:200%}.nav li a img{height:30px;margin-bottom:-6px}iframe{width:400px;height:300px;max-width:100%}#footnote{border-top:1px solid #c1a92b;padding-top:0.5em;text-align:center}@media (max-width: 1009px){.main{margin:0 auto;padding-top:108px}.headers{left:50%;margin-left:-375px}.nav-container{position:fixed;left:50%;margin-left:-375px;max-width:750px;width:750px;top:100px;height:40px;border:1px solid #555;background-color:#000}.nav{margin:auto auto;padding:0}.nav li{display:inline;margin:0 10px}.main>div>h2,.main>article>div>h2{padding-top:140px}}@media (max-width: 749px){.main{margin:0 10px}#footnote{font-size:32px}}@media (max-width: 600px){body{font-size:smaller}.headers{font-size:17px;height:59px}.nav-container{top:60px;font-size:smaller;height:30px;padding-top:3px}.main{padding-top:78px}.main>div>h2,.main>article>div>h2{padding-top:100px}.nav li a img{height:20px}ul{padding-left:17px !important}#footnote{font-size:19px}}@media (max-width: 390px){.nav li{margin:0 4px}}@media (min-width: 1010px){.main{margin:0 0 0 250px;padding-top:70px}.nav{position:fixed;top:0;left:0}.headers{margin-left:250px}.nav{padding:0;width:250px;margin-top:50px}.nav li{padding:1.2em 40px;border:1px solid #555;background-color:#000;margin:10px 10px 0 10px;max-width:190px}.main>div>h2,.main>article>div>h2{padding-top:100px}}@media (min-width: 1250px){.main{margin:0 auto}.nav{left:calc(50% - 625px)}.headers{left:50%;margin-left:-375px}}ul{list-style-type:"+  ";padding-left:21px}