diff options
| -rwxr-xr-x | unbiased/html_template/unbiased.css | 276 | ||||
| -rw-r--r-- | 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> |