rewrite css to use flexbox for responsive display

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>