site layout

build.py

@@ -42,12 +42,12 @@ def build_page(page_meta):
 def build_index(page_metas):
   page_metas = filter(lambda page_meta: not page_meta[1].get("ishome", False), page_metas)
   page_metas = sorted(page_metas, key = lambda page_meta: page_meta[1].get("date", [0,0,0]), reverse=True)
-  index = '<ul>\n<li><a href="/">home</a></li>'
+  index = '<ul>\n<h1>☰</h1>\n<div id="navhide"><li><a href="/">home</a></li>'
   for page, meta in page_metas:
     page_dir = path.dirname(page)
     page_name = path.basename(page_dir)
     index += f'\n<li><a href="/{page_name}">{page_name}</a></li>'
-  index += '\n</ul>'
+  index += '\n</div></ul>'
   return index
 
 def build_rss(page_metas):

src/main_layout.html

@@ -10,17 +10,29 @@
     <meta property="article:published_time" content="[[DATE]]"/>
     <meta property="og:url" content="[[URL]]"/>
     <style>
-      body { font: 1rem Arial, Helvetica, sans-serif; }
-      #sitelayout { display: flex; max-width: min(1000px, calc(100vw - 100px)); }
-      nav { border-right: 1px solid black; padding: 15px; max-width: 150px; }
-      nav { ul {position: sticky; top: 40px} }
-      main { padding: 15px; max-width: inherit; }
+      body {
+        font: 1rem Arial, Helvetica, sans-serif;
+        display: flex;
+        justify-content: center;
+      }
+      #sitelayout { display: flex; max-width: min(900px, calc(100vw - 100px)); }
+      nav { padding: 15px; max-width: 150px; }
+      nav {
+        ul {
+          list-style: circle;
+          position: sticky;
+          top: 50px;
+        }
+        h1 { position: relative; right: 40px; visibility: hidden; color: gray; }
+      }
+      main { padding: 15px; width: 100%}
       blockquote { background-color: #d0c0fe7f; padding: 10px; }
       pre { white-space: pre-wrap; overflow-wrap: anywhere; }
       pre { background-color: #d0c0fe7f; }
+      #nowrap { text-wrap: nowrap; overflow: scroll; width: 100%;}
       @media (max-width: 900px) {
-        nav { width: 15px; ul { visibility: hidden; } }
-        nav:hover { width: inherit; ul { visibility: visible; } }
+        nav { width: 15px; #navhide { visibility: hidden; } h1 { visibility: visible; } }
+        nav:hover { width: inherit; #navhide { visibility: visible; } h1 { visibility: hidden; } }
       }
     </style>
 [[MATH]]