From 45926db9caed33062ab491df63f33ee3b3f5c468 Mon Sep 17 00:00:00 2001
From: Matt Singleton <matt@xcolour.net>
Date: Fri, 21 Apr 2017 22:33:40 -0400
Subject: rewrite css to use flexbox for responsive display

---
 unbiased/html_template/unbiased.css        | 276 ++++++++++++-----------------
 unbiased/html_template/unbiased.jinja.html |  83 +++++----
 2 files changed, 156 insertions(+), 203 deletions(-)

diff --git a/unbiased/html_template/unbiased.css b/unbiased/html_template/unbiased.css
index 24b1959..caf4691 100755
--- a/unbiased/html_template/unbiased.css
+++ b/unbiased/html_template/unbiased.css
@@ -1,220 +1,166 @@
-/*body{
-    width:900px;
-    margin-left:auto;
-    margin-right:auto;
-}*/
+body {
+    margin: 0;
+}
 
+a:link, a:visited, a:hover, a:active, a {
+    color: #00f;
+    text-decoration:none;
+}
 
-body{
-    margin:0;
+a:hover {
+    cursor:pointer;
 }
 
-a:link, a:visited, a:hover, a:active {
-			color: #00f;
-			text-decoration:none;
-			    }
+hr {
+  max-width: 890px;
+  margin: 5px auto;
+  border: 0;
+  height: 3px;
+  background-color: #BB133E;
+}
 
-a:hover{
-    cursor:pointer;
+#page-header {
+    width: 100%;
+    text-align: center;
+    padding: .5em 0 1em;
+    margin-bottom: 1em;
+    border-bottom: 3px solid #BB133E;
+    background: #002147;
 }
 
-#page-header{
-    width:100%;
-    text-align:center;
-    padding:.5em 0 1em;
-    margin-bottom:1em;
-    border-bottom:3px solid #BB133E;
-    background:#002147;
+.title {
+    font-size: 3em;
 }
 
-.title{
-    font-size:3em;
+#title-1 {
+    font-style: italic;
+    color: #fff;
 }
 
-#title-1{
-    font-style:italic;
-    color:#fff;
+#title-2 {
+    color: #fff;
 }
 
-#title-2{
-    color:#fff;
+#subtitle {
+    font-size: 1.25em;
+    color: #ccc;
 }
 
-#subtitle{
-    font-size:1.25em;
-    color:#ccc;
+#timestamp {
+    margin: .5em 0 0 0;
+    font-size: .8em;
+    color: #cc6;
 }
 
-#timestamp{
-    margin:.5em 0 0 0;
-    font-size:.8em;
-    color:#cc6;
+#top-stories {
+    max-width: 900px;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 5px auto;
 }
 
-#page-container{
-    width:900px;
-    margin-left:auto;
-    margin-right:auto;
+.top-story {
+    flex: 1 0 350px;
+    margin: 5px;
+    padding: 10px;
+    border:2px solid #eee;
 }
 
-@media only screen and (max-width:900px){
-    #page-container{
-	width:100%
-    }
+.top-stories-img {
+  width: 100%;
+  padding-bottom: 57%;
+  background-size: 100%;
+  background-position: center center;
 }
 
-#top-stories{
-    width:95%;
-    display:block;
-    overflow:auto;
-    padding:10px;
-    margin-left:auto;
-    margin-right:auto;
-    text-align:center;
-    border-bottom: 3px solid #BB133E;
-    margin-bottom: 10px;
-}
-
-.row{
-    display:flex;
-}
-
-.top-story{
-    display:inline-block;
-    vertical-align:top;
-    text-align:left;
-    width:360px;
-    height:350px;
-    overflow:hidden;
-    background:#fff;
-    margin:10px;
-    padding:10px;
-    border:2px solid #ccc;
-    flex:1;
-}
-
-@media only screen and (max-width:500px){
-    .row{
-	display:block;
-    }
-    .top-story{
-	display:block;
-	width:auto;
-	height:auto;
-    }
-}
-
-.top-stories-img{
-    width:350px;
-    height:200px;
-    overflow:hidden;
-    background-size: 100%;
-    background-position: center center;
-    margin:0 auto;
+.top-stories-hed {
+    font-size: 1.3em;
+    margin: 10px 0;
+    color: #00f;
 }
 
-@media only screen and (max-width:500px){
-    .top-stories-img{
-        width:inherit;
-        height:inherit;
-        max-width:350px;
-        padding-top:57.14%;
-    }
+.top-stories-desc {
+    font-size: 1em;
 }
 
-.top-stories-hed{
-    font-weight:bold;
-    font-size:1.35em;
-    margin:10px 10px 0;
-    color:#00f;
+.c2 {
+  max-width: 900px;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 5px auto;
 }
 
-.top-stories-desc{
-    font-size:1em;
-    padding-top:.5em;
-    margin:0 .75em;
+.c2 hr {
+  display: none;
 }
 
-#middle-stories{
-    clear:both;
-    width:500px;
-    margin:0 auto;
-    padding:0;
-    display:block;
-    overflow:auto;
-    float:left;
+#middle-stories {
+    flex: 7 0 200px;
 }
 
-@media only screen and (max-width:500px){
-    #middle-stories{
-	width:100%;
-	float:none;
-    }
+.middle-story {
+    margin: 5px;
+    border: 2px solid #eee;
 }
 
-.middle-story{
-    margin:5px 10px;
-    padding:10px;
-    background:#fff;
-    border:2px solid #ddd;
-    width:460px;
-    float:left;
+.middle-story a {
+    padding: 10px;
+    display: inline-block;
 }
 
-@media only screen and (max-width:500px){
-    .middle-story{
-	width:auto;
-    }
+.middle-story a p {
+    margin: 0;
 }
 
 .middle-stories-img{
-    width:150px;
-    height:100px;
-    overflow:hidden;
+    width: 150px;
+    height: 100px;
     background-size: 100%;
     background-position: center center;
-    float:left;
+    float: left;
+    margin-right: 10px;
 }
 
-.middle-stories-hed{
-    font-size:1.2em;
-    margin-left:10px;
-    color:#00f;
-    padding-left:150px;
+#middle-stories a {
+    font-size: 1.1em;
+    color: #00f;
 }
 
-@media only screen and (max-width:500px){
-    .middle-stories-hed{
-    max-width:60%;
-    }
+#bottom-stories {
+  flex: 3 0 200px;
+  border: 2px solid #eee;
+  margin: 5px;
 }
 
-#bottom-stories{
-    margin:0 10px;
-    padding:10px;
-    display:block;
-    overflow:auto;
-    float:left;
-    width:350px;
-    border:5px solid #ddd;
+.bottom-story {
+    padding: 10px;
+    color: #00f;
 }
 
-@media only screen and (max-width:900px){
-    #bottom-stories{
-	width:auto;
-	border-width:3px;
-	float:none;
-    }
+#sources {
+    margin: 2em 5px 0 5px;
+    font-size: .8em;
 }
 
-.bottom-story{    color:#00f;
-
-    padding:15px 0;
-    color:#00f;
+@media (max-width: 900px) {
+  hr {
+    width: inherit;
+    margin: 5px;
+  }
 }
 
-#sources{
-    clear:both;
-    padding-top:4em;
-    font-size:.8em;
+@media (max-width: 767px) {
+  .top-stories {
+    flex-wrap: nowrap;
+    flex-direction: column;
+  }
+  .top-story {
+    flex: 1 0 250px;
+  }
+  .c2 {
+    flex-direction: column;
+  }
+  .c2 hr {
+    display: inherit;
+  }
 }
diff --git a/unbiased/html_template/unbiased.jinja.html b/unbiased/html_template/unbiased.jinja.html
index 40c9582..fcca97f 100644
--- a/unbiased/html_template/unbiased.jinja.html
+++ b/unbiased/html_template/unbiased.jinja.html
@@ -9,64 +9,71 @@
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <title>UnBiased</title>
   </head>
-<body>
 
-<div id="page-header">
-  <span id="title-1" class="title">un</span><span id="title-2" class="title">biased</span><br />
-  <span id="subtitle">a different way to read the news</span>
-  <p id="timestamp">Last updated: {{ timestamp }}</p>
-</div>
+  <body>
 
-<div id="page-container">
+    <div id="page-header">
+      <span id="title-1" class="title">un</span><span id="title-2" class="title">biased</span><br />
+      <span id="subtitle">a different way to read the news</span>
+      <p id="timestamp">Last updated: {{ timestamp }}</p>
+    </div>
+
+    <div id="top-stories">
+
+      {% for story in top_stories %}
 
-  <div id="top-stories">
+      <div class="top-story">
+        <a target="_blank" onclick="window.open('{{ story.url }}', '_blank')">
+          <div class="top-stories-img" style="background-image: url('{{ story.img }}');" /></div>
+          <div class="top-stories-hed">{{ story.title|safe }}</div>
+        </a>
+        <div class="top-stories-desc">{{ story.description|safe|truncate(140) }}</div>
+      </div>
 
-    {% for story in top_stories %}
+      {% endfor %}
 
-    <div class="top-story">
-      <a target="_blank" onclick="window.open('{{ story.url }}', '_blank')">
-        <div class="top-stories-img" style="background-image: url('{{ story.img }}');" /></div>
-        <div class="top-stories-hed">{{ story.title|safe }}</div>
-      </a>
-      <div class="top-stories-desc">{{ story.description|safe|truncate(140) }}</div>
     </div>
 
-    {% endfor %}
+    <hr/>
 
-  </div>
+    <div class="c2">
 
-  <div id="middle-stories">
+      <div id="middle-stories">
 
-    {% for story in middle_stories %}
+        {% for story in middle_stories %}
 
-    <a target="_blank" onclick="window.open('{{ story.url }}', '_blank')">
-      <div class="middle-story">
-        <div class="middle-stories-img" style="background-image: url('{{ story.img }}');">
+        <div class="middle-story">
+          <a target="_blank" onclick="window.open('{{ story.url }}', '_blank')">
+            <p>
+              <div class="middle-stories-img" style="background-image: url('{{ story.img }}');"></div>
+              {{ story.title|safe }}
+            </p>
+          </a>
         </div>
-        <div class="middle-stories-hed">{{ story.title|safe }}</div>
+
+        {% endfor %}
+
       </div>
-    </a>
 
-    {% endfor %}
+      <hr/>
 
-  </div>
+      <div id="bottom-stories">
 
-  <div id="bottom-stories">
+        {% for story in bottom_stories %}
 
-    {% for story in bottom_stories %}
+        <div class="bottom-story">
+          <a target="_blank" onclick="window.open('{{ story.url }}', '_blank')">{{ story.title|safe }}</a>
+        </div>
 
-    <div class="bottom-story">
-      <a target="_blank" onclick="window.open('{{ story.url }}', '_blank')">{{ story.title|safe }}</a>
-    </div>
+        {% endfor %}
 
-    {% endfor %}
+      </div>
 
-  </div>
+    </div>
 
-</div>
+    <div id="sources">
+      Sources: {{ sources }}
+    </div>
 
-<div id="sources">
-  Sources: {{ sources }}
-</div>
-</body>
+  </body>
 </html>
-- 
cgit v1.2.3