From 0288f6976a347d73e2778d4900f7d54c346c3e16 Mon Sep 17 00:00:00 2001
From: Brendan Howell <brendan@howell-ersatz.com>
Date: Tue, 2 May 2017 18:21:38 +0200
Subject: [PATCH] styling for news template

---
 screenless/bureau/publications/news.html | 80 ++++++++++++++++--------
 1 file changed, 53 insertions(+), 27 deletions(-)
diff --git a/screenless/bureau/publications/news.html b/screenless/bureau/publications/news.html
index 542496a..6dc8d7e 100644
--- a/screenless/bureau/publications/news.html
+++ b/screenless/bureau/publications/news.html
@@ -1,13 +1,12 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <title>${title}</title>
   <meta charset="utf-8">
   <style type="text/css">
     body {
-      font-family: Junicode;
-      font-size: 10pt;
+      font-family: "CMU Serif";
+      font-size: 11pt;
       line-height: 1;
-      counter-reset: sidenote-counter;
     }
     h1 {
       font-variant: small-caps;
@@ -19,43 +18,70 @@
       text-decoration: none;
       color: inherit;
     }
-    a::after {
-      counter-increment: sidenote-counter;
-      content: counter(sidenote-counter);
-      font-size: smaller;
-      vertical-align: super;
+    #columns {
+      column-count: 4;
+      text-align: justify;
+      clear: both;
+    }
+    #masthead {
+      font-family: "Fold";
+      font-weight: 400;
+      text-transform: uppercase;
+      font-size: 9vw;
+      text-align: center;
+      margin: 0;
+    }
+    #edition {
+      border-top: 2px solid black;
+      border-bottom: 2px solid black;
+      padding: 5px;
+      clear: both;
+      font-variant: small-caps;
+    }
+    #motto {
+      float: left;
+      width: 40%;
+      height: 1em;
+    }
+    #date {
+      float: right;
+      width: 40%;
+      height: 1em;
+      text-align: right;
     }
-    #twocol {
-      -moz-column-count: 2;
-      -webkit-column-count: 2;
-      column-count: 2;
+    .clearfloats {
+      clear: both;
+    }
+    .entry .title{
+      font-weight: bold;
+      font-variant: small-caps;
       text-align: justify;
     }
-    #date #article-src {
-      padding-bottom: 10%;
+    .entry .source{
       font-style: italic;
     }
-    .footnote {
-      font-size: smaller;
-      padding-bottom: 0.5em;
-    }
-    .footnote svg {
-      width: 50%;
-      height: 50%;
+    .entry .barcode{}
+    .entry .summary{
+      text-align: justify;
+      hyphens: auto;
     }
   </style>
 <body>
-  <h1>Yesterday's Tomorrows</h1>
-  <hr />
-  <h6>Semper Contemporarius DATE_HERE</h6>
+  <h1 id="masthead">Yesterday's Tomorrows</h1>
+  <div id="edition">
+    <div id="motto">Semper Contemporarius</div>
+    <div id="date"> DATE_HERE</div>
+    <div class="clearfloats"></div>
+  </div>
   <div id="columns">
     % for entry in news:
   <div class="entry">
     % if entry.img != " ":
     <img src="${entry.img}" alt="img" />
+    % endif
     <div class="title">${entry.title}</div>
-    <div class="source">${entry.title}</div>
-    <div class="summary">${entry.title}</div>
+    <div class="source">${entry.source}</div>
+    <div class="summary">${entry.summary}</div>
     <div class="barcode">${entry.dbhash}</div>
   </div>
     % endfor
