diary is more responsive; motd

src/diary/hold/motd1

@@ -0,0 +1,44 @@
+<!---->
+<h1>makeup of the day </h1>
+august 11, 2022<br>
+#fashion #makeup #motd <br>
+<br>
+<p>Sometimes, I feel like sharing my makeup. <br></p>
+<br>
+<h2>red eyeshadow-as-eyeliner </h2>
+<p>Red eyeshadow! I wanted to match my makeup to my outfit ~ a black t-shirt with a vibrant orange tiger print and rich tan fall coat with red and black plaid. Red is a forever favorite to wear in igari style, but it's bordering on socially irresponsible to try to look ill during a pandemic. Maybe my red can come back with more conventional styles, though navy and bronze are far superior liner colors for brown eyes. <br></p>
+<br>
+<p>I applied a red metallic eyeshadow with an eyeliner brush along the outer third of the upper lashline and blended into the inner third. Up to my brow, I used a base shade to even out my tone. The outer third of the lower lash line was lined with deep burgundy and flicked out and up with my finger to form a subtle wing. <br></p>
+<br>
+<p>Photo is after 8 hours of wear. I think the pencil got a little messy, but the red could last forever. <br></p>
+<img src="/static/img/mu/221106.png" alt="(photo: metallic red eyeshadow-as-eyeliner look)"><br>
+<br>
+<p>Specific shades: <br></p>
+    <p><ul>
+        <li>Base: Stila One Step Correct primer </li>
+        <li>Brow pencil: Ulta Ultra Slim Brow Pencil (Dark Brown) </li>
+        <li>Eyeshadow: Sydney Grace Queen of Hearts, ABH Base (Norvina palette) </li>
+        <li>Eyeliner: Urban Decay (Alkaline) </li>
+        <li>Setting spray: Urban Decay All-Nighter (Ultra Matte) </li>
+    </ul></p>
+<br>
+<h2>red eyeshadow-as-eyeliner </h2>
+<p>Red eyeshadow! I wanted to match my makeup to my outfit ~ a black t-shirt with a vibrant orange tiger print and rich tan fall coat with red and black plaid. Red is a forever favorite to wear in igari style, but I dropped it because it's plain rude to intentionally look ill and unapproachable during a pandemic. Maybe red can come back with more conventional styles, though navy and bronze are the supreme liner colors for dark brown eyes. <br></p>
+<br>
+<p>I applied a red metallic eyeshadow with an eyeliner brush along the outer third of the upper lashline and blended into the inner third. Up to my brow, I used a base shade to even out my tone. The outer third of the lower lash line was lined with deep burgundy and flicked out and up with my finger to form a subtle wing. <br></p>
+<br>
+<p>Photo is after 8 hours of wear. I think the pencil got a little messy, but the red is unmoved. <br></p>
+<img src="/static/img/mu/221106.png" alt="(photo: metallic red eyeshadow-as-eyeliner look)"><br>
+<br>
+<p>Specific shades: <br></p>
+    <p><ul>
+        <li>Base: Stila One Step Correct primer </li>
+        <li>Brow pencil: Ulta Ultra Slim Brow Pencil (dark brown) </li>
+        <li>Eyeshadow: Sydney Grace Queen of Hearts, ABH Base (Norvina palette) </li>
+        <li>Eyeliner: Urban Decay Alkaline </li>
+        <li>Setting spray: Urban Decay All-Nighter Ultra Matte </li>
+    </ul></p>
+<br>
+<br>
+Last updated July 31, 2022 <br>
+<br>

src/static/css/diary.css

@@ -1,14 +1,29 @@
 .content-grid {
-    max-width: MAX(50em, 50%);
+    display: column;
-    display: grid;
+    align-content: flex-start;
-    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;
     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;}

src/views/bf-setting.tpl

@@ -5,3 +5,16 @@
     <p>Blessfrey takes place in Lucrest, Nickajack, a small town unknowingly situated over an abyssal dungeon. <br></p>
 </div>
 
+
+% import random
+% rebase('frame.tpl')
+    <div class="content-grid"><div class="center">
+<h1>blessfrey setting </h1>
+    <p>Blessfrey's world starts in Lucrest, an economic boomtown in the rural South, and expands deep through the pockets and tunnels of the earth until another world is discovered. <br></p>
+    <br>
+    <ul>
+        % for i in [["csa","blessfrey-csa"],["castaway kingdom","blessfrey-castaway-kingdom"],["huntsville","blessfrey-huntsville"],["Lucrest","blessfrey-lucrest"],["usa","blessfrey-usa"]]:
+        <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<a href=/{{i[1]}}>{{i[0]}}</a></li>
+        % end
+    </ul>
+    </div></div>

src/views/diary.tpl

@@ -1,7 +1,8 @@
 % rebase('frame.tpl')
 % import re
     <div class="content-grid"> 
-            <div class="diary-dir top">
+<!-- DIRECTORY -->
+            <div class="diary-dir">
                 % max_pages = int((total - 1) / limit)
     <%
                 # page never below 0
@@ -86,7 +87,8 @@
                 </a>
                 </div>
             </div>
-
+<div class="diary-grid">
+<!-- DIARY PAGES -->
             <div class="diary-pages">
 
     <span class=title><h1>diary</h1></span>
@@ -125,10 +127,11 @@
                 </div>
             % end
             </div>
-
+<!-- SIDEBAR -->
     % include diary-boxes.tpl
-
+</div>
-            <div class="diary-dir bottom">
+<!-- DIRECTORY -->
+            <div class="diary-dir">
             % max_pages = int((total - 1) / limit)
     <%
             # page never below 0

src/views/frame.tpl

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
-<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
 
-<head>
 % include('header.tpl')
-</head>
+
 
 <body>