make some changes

bin/add-quip

@@ -1,8 +1,11 @@
 #!/bin/bash -e
 
 UUID=$(uuidgen)
-printf "content: |\n   ...\nid: $UUID\n" >quips/$UUID
-if [ ! $EDITOR quotes/$UUID ]; then
-   rm quips/$UUID
+TGT="quips/${UUID}"
+printf "content: |\n   ...\nid: $UUID\n" >$TGT
+if ! $EDITOR $TGT; then
+   rm $TGT
 fi
-rm -f "quips/${UUID}~"
+rm -f "${TGT}~"
+git add $TGT
+git commit -m "added new quip"

bin/add-quote

@@ -2,7 +2,7 @@
 
 UUID=$(uuidgen)
 printf "content: |\n   ...\nauthor: ...\nid: $UUID\n" >quotes/$UUID
-if [ ! $EDITOR quotes/$UUID ]; then
+if ! $EDITOR quotes/$UUID; then
    rm quotes/$UUID
 fi
 rm -f "quotes/${UUID}~"

main.py

@@ -100,6 +100,7 @@ class Template:
     main = load_template("main")
     quote = load_template("quote")
     list = load_template("list")
+    textpage = load_template("textpage")
 
 
 def main():
@@ -156,7 +157,7 @@ def main():
             'opengraph': {
                 'title': f'quote:{short_hash}',
                 'url': f'/quote/{short_hash}/',
-                'description': f'{q.content}\n—{q.author}',
+                'description': f'{q.content}\n—{q.author}',
             },
         })
         with Path.write('quotes', uuid, 'index.html') as f:
@@ -201,7 +202,7 @@ def main():
             with open(Path.data('works', slug, work, 'metadata.yaml')) as f:
                 meta = yaml.safe_load(f)
             with open(Path.data('works', slug, work, 'text')) as f:
-                text = markdown.markdown(f.read(), extensions=['footnotes'])
+                text = Template.textpage({'contents': markdown.markdown(f.read(), extensions=['footnotes'])})
             w = Work(
                 slug=meta.get('slug', work),
                 category=meta.get('category', slug),

static/main.css

@@ -3,10 +3,85 @@
     src: url("/static/leaguespartan-bold.ttf");
 }
 
-body {
-    background-color: #eeeeee;
+body, html {
+    width: 100%;
+    margin: 0em;
+    background-color: #eee;
     font-family: league-spartan, sans-serif;
-    font-size: 14pt;
+    font-size: 18pt;
+}
+
+@media (orientation: landscape) {
+    .all {
+        display: grid;
+        grid-template-columns: 16em auto;
+        grid-template-rows: 1fr auto 1fr;
+        text-align: justify;
+    }
+
+    .header {
+        grid-column: 1 / span 2;
+    }
+
+    .menu {
+        grid-column: 1;
+        display: flex;
+        flex-direction: column;
+        font-size: 20pt;
+    }
+
+    .menu > a {
+        padding: 0.5em 0em;
+    }
+
+    .contents {
+        grid-column: 2;
+        display: flex;
+        justify-content: center;
+    }
+
+    .footer {
+        grid-column: 1 / span 2;
+    }
+
+    .maintext {
+        width: 80%;
+    }
+
+    .work {
+        font-size: 24pt;
+    }
+}
+
+@media (orientation: portrait) {
+    body {
+        font-size: 24pt;
+    }
+
+    .all {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .menu {
+        width: 90%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .maintext {
+        padding: 1em 2em;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .work {
+        font-size: 28pt;
+        padding: 0.5em 0em;
+    }
 }
 
 .header {
@@ -32,27 +107,15 @@ body {
 }
 
 .contents {
-    text-align: justify;
     line-height: 1.5;
-    padding: 40px;
     font-family: "Helvetica", "Arial", sans-serif;
-    margin: 40px;
-    width: 80%;
-    background-color: #e8e8e8;
-    margin-left: auto;
-    margin-right: auto;
 }
 
 .menu {
     text-transform: uppercase;
     letter-spacing: 2px;
-    text-align: center;
-    border-top-style: solid;
-    border-bottom-style: solid;
     padding-top: 5px;
     padding-bottom: 5px;
-    border-width: 1px;
-    width: 60%;
     margin-left: auto;
     margin-right: auto;
 }
@@ -78,17 +141,15 @@ pre {
 }
 
 .quote {
-    border-top-style: solid;
-    border-bottom-style: solid;
-    border-width: 1px;
     padding: 20px;
     margin-top: 20px;
     margin-bottom: 20px;
     width: 75%;
     margin-left: auto;
     margin-right: auto;
-    background-color: #eee;
+    border-bottom: 2px solid #000;
 }
+
 .quotelink {
     margin-top: 10px;
     text-align: right;
@@ -96,17 +157,14 @@ pre {
 }
 
 .link {
-    border-top-style: solid;
-    border-bottom-style: solid;
-    border-width: 1px;
     padding: 20px;
     margin-top: 20px;
     margin-bottom: 20px;
     width: 75%;
     margin-left: auto;
     margin-right: auto;
-    background-color: #eee;
 }
+
 .permalink {
     margin-top: 10px;
     text-align: right;

templates/list.mustache

@@ -1,4 +1,3 @@
-{{! (pgnum, maxpg, works, show_cat, page='recent') }}
 <div class="maintext">
   {{#works}}
     <div class="work">

templates/main.mustache

@@ -18,26 +18,26 @@
   <body>
     <div class="all">
       <div class="header">
-    <div class="sitename">
-      <h1>Librarian of Alexandria</h1>
-    </div>
-    <div class="title">
-      <h2>{{title}}</h2>
-    </div>
+        <div class="sitename">
+          <h1>Librarian of Alexandria</h1>
+        </div>
+        <div class="title">
+          <h2>{{title}}</h2>
+        </div>
       </div>
       <div class="menu">
-    <a href="/">Index</a>&nbsp;&nbsp;&nbsp;
-    <a href="/category/">Collections</a>&nbsp;&nbsp;&nbsp;
-    <a href="/quotes/">Quotes</a>&nbsp;&nbsp;&nbsp;
-    <a href="/quips/">Quips</a>&nbsp;&nbsp;&nbsp;
-    <a href="http://journal.infinitenegativeutility.com/">Blog</a>&nbsp;&nbsp;&nbsp;
-    <a href="/about/">About</a>
+        <a href="/">Index</a>
+        <a href="/category/">Collections</a>
+        <a href="/quotes/">Quotes</a>
+        <a href="/quips/">Quips</a>
+        <a href="http://journal.infinitenegativeutility.com/">Blog</a>
+        <a href="/about/">About</a>
       </div>
       <div class="contents">
-    {{{contents}}}
+        {{{contents}}}
       </div>
       <div class="footer">
-    {{copy}}{{^copy}}&copy;2022 Getty Ritter{{/copy}}
+        {{copy}}{{^copy}}&copy;2024 Getty Ritter{{/copy}}
       </div>
     </div>
   </body>