diary is more responsive; motd

src/static/css/diary.css

@@ -1,14 +1,29 @@
 .content-grid {
-    max-width: MAX(50em, 50%);
-    display: grid;
-    grid-template-columns: 2fr 1fr; /*repeat(auto-fit, minmax(200px,1fr));*/
-    grid-template-rows: 40px auto 40px;
-    grid-column-gap: 0em;
-    grid-row-gap: 0em;
+    display: column;
+    align-content: flex-start;
     margin: auto;
 }
+.diary-grid {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: stretch;
+    margin-right: 2em;
+    margin-left: 2em;
+}
+    .diary-pages {
+        max-width: 55ch;
+        margin: auto;
+        margin-top: 0em;
+/*        margin-right: 1.5em;*/
+    }
+    .sidebar {
+    max-width: 30ch;
+    margin: auto;
+    }
 
     .diary-dir {
+  flex-shrink: 0;  display: flex;
+        justify-content: center;
         background-color: transparent;
         font-size: 1.5em;
         color: #AAA39D;
@@ -36,15 +51,6 @@
             -1px  2px 1px #080410,
             -1px  0   1px #080410;
     }
-    .diary-dir.top {
-        grid-area: 1 / 1 / 2 / 3;
-        padding-top: 0em;
-        margin: auto;
-    }
-    .diary-dir.bottom {
-        grid-area: 3 / 1 / 4 / 3;
-        margin: auto;
-    }
     .diary-dir-left {
         display: inline-block;
         vertical-align: middle;
@@ -53,6 +59,8 @@
         height: 0em;
         display: inline-block;
         white-space: nowrap;
+        margin-left: .3em;
+        margin-right: .3em;
     }
     .diary-dir-number {
         background-color: #886488; 
@@ -67,10 +75,6 @@
         vertical-align: middle;
     }
 
-    .diary-pages {
-        grid-area: 2 / 1 / 3 / 2;
-        margin-right: 2em;
-    }
     .title {
         color: white;
     }
@@ -169,5 +173,3 @@
         background-color: #585c88;
         height: 1em;
     }
-
-    .sidebar {grid-area: 2 / 2 / 2 / 3;}