styling for news template

workspace
Brendan Howell 7 years ago
parent 6a8cba2851
commit 0288f6976a

@ -1,13 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<title>${title}</title> <title>${title}</title>
<meta charset="utf-8"> <meta charset="utf-8">
<style type="text/css"> <style type="text/css">
body { body {
font-family: Junicode; font-family: "CMU Serif";
font-size: 10pt; font-size: 11pt;
line-height: 1; line-height: 1;
counter-reset: sidenote-counter;
} }
h1 { h1 {
font-variant: small-caps; font-variant: small-caps;
@ -19,43 +18,70 @@
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
a::after { #columns {
counter-increment: sidenote-counter; column-count: 4;
content: counter(sidenote-counter); text-align: justify;
font-size: smaller; clear: both;
vertical-align: super; }
#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 { .clearfloats {
-moz-column-count: 2; clear: both;
-webkit-column-count: 2; }
column-count: 2; .entry .title{
font-weight: bold;
font-variant: small-caps;
text-align: justify; text-align: justify;
} }
#date #article-src { .entry .source{
padding-bottom: 10%;
font-style: italic; font-style: italic;
} }
.footnote { .entry .barcode{}
font-size: smaller; .entry .summary{
padding-bottom: 0.5em; text-align: justify;
} hyphens: auto;
.footnote svg {
width: 50%;
height: 50%;
} }
</style> </style>
<body> <body>
<h1>Yesterday's Tomorrows</h1> <h1 id="masthead">Yesterday's Tomorrows</h1>
<hr /> <div id="edition">
<h6>Semper Contemporarius DATE_HERE</h6> <div id="motto">Semper Contemporarius</div>
<div id="date"> DATE_HERE</div>
<div class="clearfloats"></div>
</div>
<div id="columns"> <div id="columns">
% for entry in news: % for entry in news:
<div class="entry"> <div class="entry">
% if entry.img != " ": % if entry.img != " ":
<img src="${entry.img}" alt="img" /> <img src="${entry.img}" alt="img" />
% endif
<div class="title">${entry.title}</div> <div class="title">${entry.title}</div>
<div class="source">${entry.title}</div> <div class="source">${entry.source}</div>
<div class="summary">${entry.title}</div> <div class="summary">${entry.summary}</div>
<div class="barcode">${entry.dbhash}</div> <div class="barcode">${entry.dbhash}</div>
</div> </div>
% endfor % endfor

Loading…
Cancel
Save