You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

236 lines
5.2 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="en">
<head>
<title>NEWS</title>
<meta charset="utf-8">
<style type="text/css">
@media print {
@page {
size: A4;
margin: 0.5cm 1cm 1cm 1cm;
@bottom-left {
content: counter(page);
font-family: "Cormorant SC";
}
@bottom-center {
content: "Yesterday's Tomorrows";
font-family: "Cormorant SC";
}
@bottom-right {
content: '${date}';
font-family: "Cormorant SC";
}
}
@page first {
@top-left {
content: none; }
@top-center {
content: none; }
@top-right {
content: none; }
}
}
html {
font-size: 100%;
}
body {
font-family: "Cormorant";
font-size: 14px;
line-height: 1;
}
img {
max-width: 100%;
}
a {
text-decoration: none;
color: inherit;
}
#columnspacer {
width: 100%;
height: 1em;
}
#columns {
column-count: 4;
clear: both;
}
#masthead {
font-family: "Fold";
font-weight: 400;
text-transform: uppercase;
font-size: 5em;
text-align: center;
margin: 0;
}
#edition {
font-family: "Cormorant SC";
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 5px;
clear: both;
font-weight: 400;
}
#motto {
float: left;
width: 40%;
height: 1em;
}
#date {
float: right;
width: 40%;
height: 1em;
text-align: right;
}
.clearfloats {
clear: both;
}
.entry {
margin-bottom: 1em;
font-size: 12px;
line-height: 1.05;
}
.entry .title{
font-family: "Cormorant SC";
font-weight: 400;
/* text-align: justify; */
}
.entry .source{
font-family: "Cormorant Garamond";
font-style: italic;
}
.entry .barcode{
text-align: left;
margin-top: 0.25em;
}
.entry .barcode img {
/*width: 100%;
height: auto;*/
/*width: 130%;
margin-left: -15%;*/
}
.entry .summary{
font-family: "Cormorant Garamond";
text-align: justify;
hyphens: auto;
}
.forecast {
clear: both;
}
.weatherday {
float: left;
width: 25%;
}
.weatherperiod img {
width: 50%;
}
.mail {
clear: both;
}
.mail div {
float: left;
}
.mail .mailsender {
width: 25%;
}
.mail .mailsubject {
width: 50%;
}
.mail .maildate {
width: 25%;
}
.mail div.mailact {
width: 25%;
float: right;
font-family: "Cormorant SC";
font-weight: 400;
}
.mail div.actname {
height: 10px;
}
.mail div.mailact svg {
width: 100%;
height: auto;
}
.mail .mailrow {
width: 100%;
clear: both;
}
.mail .mailheader {
padding-top: 3pt;
border-top: 0.1pt solid black;
width: 100%;
clear: both;
}
</style>
</head>
<body>
<h1 id="masthead">Yesterday's Tomorrows</h1>
<div id="edition">
<div id="motto">Semper Contemporarius</div>
<div id="date">${date}</div>
<div class="clearfloats"></div>
</div>
<div id="columnspacer"> </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.source}</div>
<div class="summary">${entry.summary}</div>
<div class="barcode">${entry.svg}</div>
</div>
% endfor
</div>
<div id="forecast">
<h2>Weather</h2>
<%!
daycount = 0
curr_day = "Today"
%>
<div class="weatherday">
<h6>Today</h6>
% for period in forecast:
% if daycount <= 4:
% if period["day"] != curr_day:
</div>
<div class="weatherday">
<h6>${period["day"]}</h6>
% endif
<%!
if period["day"] != curr_day:
daycount += 1
curr_day = period["day"]
%>
<div class="weatherperiod">
<img src="${period['symbol']}" />
<p class="weathertime">${period["period"]}</p>
<p class="weathertemp">${period["mintemp"]} ${period["maxtemp"]}</p>
</div>
% endif
% endfor
</div>
</div>
% if len(inbox) > 0:
<div id="email">
<h2>Post</h2>
% for msg in inbox:
<div class="mail">
<div class="mailheader">
<div class="mailsender">${msg["fromname"]} ${msg["fromaddr"]}</div>
<div class="mailsubject">${msg["subject"]}</div><div class="maildate">${msg["date"]}</div>
</div>
<div class="mailrow">
<div class="mailact actname" style:>read</div><div class="mailact actname">delete</div><div class="mailact actname">mark as spam</div>
</div>
<div class="mailrow">
<div class="mailact">${msg["sp_bc"]}</div><div class="mailact">${msg["d_bc"]}</div><div class="mailact">${msg["r_bc"]}</div>
</div>
</div>
% endfor
</div>
% endif
</body>
</html>