Skip to content
GitLab
Commit 9c831090 authored by Michał Woźniak's avatar Michał Woźniak
Browse files

even more style, yo

parent ff7d0515
Pipeline #83 passed with stage
in 0 seconds
Hide whitespace changes
Inline Side-by-side
covid.js
View file @ 9c831090
...@@ -445,14 +445,14 @@ document.addEventListener('DOMContentLoaded', (e)=>{ ...@@ -445,14 +445,14 @@ document.addEventListener('DOMContentLoaded', (e)=>{
getSitePopulation(site) getSitePopulation(site)
.then((population)=>{ .then((population)=>{
siteData.innerHTML = ` siteData.innerHTML = `
<div><span class="label">Population: </span><span class="value">${population}</span></div> <h2>${site}</h2>
<div><span class="label">Cases: </span><span class="value">${cases}</span></div> <div><span class="label">Population:</span><span class="value">${population}</span></div>
<div><span class="label">Infected as percent of population: </span><span class="value">${Math.round((cases/population)*10000)/100}%</span></div> <div><span class="label">Cases:</span><span class="value">${cases}</span></div>
<div><span class="label">Day to day infection rate: </span><span class="value">${Math.round((ratio - 1) * 10000) / 100}%</span></div> <div><span class="label">% infected:</span><span class="value">${Math.round((cases/population)*10000)/100}%</span></div>
<div><span class="label">Cases double every: </span><span class="value">${Math.round(Math.log(2)/Math.log(ratio))} days</span></div> <div><span class="label">Rate:</span><span class="value">${Math.round((ratio - 1) * 10000) / 100}%</span></div>
<div><span class="label">Half of population infected in: </span><span class="value">${Math.round(Math.log(population*0.5/cases)/Math.log(ratio))} days</span></div> <div><span class="label">Doubles every:</span><span class="value">${Math.round(Math.log(2)/Math.log(ratio))} days</span></div>
<div><span class="label">90% of population infected in: </span><span class="value">${Math.round(Math.log(population*0.90/cases)/Math.log(ratio))} days</span></div>` <div><span class="label">Half infected in:</span><span class="value">${Math.round(Math.log(population*0.5/cases)/Math.log(ratio))} days</span></div>
//<div><span class="label">Source: </span><span class="value"><a href="${wikiData.source_link}">${wikiData.source_title}</a></span></div>` <div class="sources"><a href="${wikiData.source_link}">source</a></div>`
}) })
}) })
.catch((e)=>{ .catch((e)=>{
......
index.html
View file @ 9c831090
...@@ -18,22 +18,27 @@ ...@@ -18,22 +18,27 @@
padding:0px; padding:0px;
margin:0px; margin:0px;
font-size: 16pt; font-size: 16pt;
padding-top:5vw; display: flex;
flex-direction: column;
min-height:100vh;
} }
body > * { body > * {
padding-left:5vw; padding-left:5vw;
padding-right:5vw; padding-right:5vw;
text-shadow:-1px -1px 1px black, 1px 1px 0px #888;
} }
body > * > * { body > * > * {
text-shadow: none; text-shadow: none;
} }
h1 { h1 {
text-align:center; text-align:center;
padding-top:1em; padding-top:2em;
padding-bottom:1em; padding-bottom:0.7em;
font-family: "Play Regular";
font-weight: normal;
font-size: 260%;
text-shadow:-1px -1px 1px black, 1px 1px 0px #888;
} }
h1, h2, h3, h4, h5, h6, h7, strong { h2, h3, h4, h5, h6, h7, strong {
font-family: "Play Bold"; font-family: "Play Bold";
} }
a { a {
...@@ -55,16 +60,19 @@ ...@@ -55,16 +60,19 @@
font-weight: bold; font-weight: bold;
font-family: "Play Bold"; font-family: "Play Bold";
} }
#covid-stats h2 { #covid-stats h2,
#site-data h2 {
font-size: 140%; font-size: 140%;
color: #444;
font-family: "Play Regular"; font-family: "Play Regular";
opacity: 0.4; opacity: 0.4;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
align-self:center; align-self:center;
} }
#sources { #covid-stats h2 {
color: #444;
}
.sources {
font-size: 80%; font-size: 80%;
font-style: italic; font-style: italic;
margin-top: 0.4em; margin-top: 0.4em;
...@@ -72,22 +80,41 @@ ...@@ -72,22 +80,41 @@
opacity: 0.5; opacity: 0.5;
} }
#site-data { #site-data {
flex-grow:1;
display: grid; display: grid;
grid-template-columns: auto auto auto auto; grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto; grid-template-rows: auto auto auto;
grid-template-areas:
"header auto auto auto"
"header auto auto auto"
"sources sources sources sources";
grid-auto-flow: row; grid-auto-flow: row;
grid-column-gap:0.5em;
grid-column-gap:0.5em;
padding-top:1em; padding-top:1em;
padding-bottom:1em; padding-bottom:1em;
} }
#site-data > * { #site-data > * {
display: grid; display: grid;
margin:0px;
padding:0.5em;
}
#site-data > h2 {
grid-area: header;
}
#site-data > .sources {
grid-area: sources;
} }
#site-data > * .value { #site-data > * .value {
font-weight: bold; font-weight: bold;
font-family: "Play Bold"; font-family: "Play Bold";
} }
footer {
font-size: 70%;
text-align:center;
opacity:0.8;
line-height:150%;
font-family: Monospace;
background: black;
}
</style> </style>
</head> </head>
<body> <body>
...@@ -100,7 +127,7 @@ ...@@ -100,7 +127,7 @@
<div id="recovered"><span class="label">Recovered:</span> <span class="value"></span></div> <div id="recovered"><span class="label">Recovered:</span> <span class="value"></span></div>
<div id="mortality"><span class="label">Mortality rate:</span> <span class="value"></span></div> <div id="mortality"><span class="label">Mortality rate:</span> <span class="value"></span></div>
</div> </div>
<p id="sources">data sourced directly <a href="https://en.wikipedia.org/wiki/2019%E2%80%9320_coronavirus_pandemic">from Wikipedia</a></p> <div class="sources"><a href="https://en.wikipedia.org/wiki/2019%E2%80%9320_coronavirus_pandemic">source</a></div>
<div> <div>
<label for="sites">Choose an infection site/area:</label> <label for="sites">Choose an infection site/area:</label>
<select id="sites" tabindex="1"> <select id="sites" tabindex="1">
...@@ -108,9 +135,10 @@ ...@@ -108,9 +135,10 @@
</select> </select>
</div> </div>
<div id="site-data"></div> <div id="site-data"></div>
<hr/>
<footer> <footer>
<p><a href="https://git.rys.io/rysiek/covid/">Code</a>. License: <a href="./LICENSE">Affero GPL</a>; uses <a href="https://github.com/spencermountain/wtf_wikipedia"><code>wtf_wikipedia</code></a>, licensed under the MIT license. Data from Wikipedia.</p> <p>cobbled together by <a href="https://mastodon.social/@rysiek/">@rysiek</a>; <a href="https://git.rys.io/rysiek/covid/">code is here</a>; license: <a href="./LICENSE">Affero GPL</a><br/>
uses <a href="https://github.com/spencermountain/wtf_wikipedia"><code>wtf_wikipedia</code></a> (<a href="./LICENSE.wtf_wikipedia.txt">MIT-licensed</a>) and the Play font (licensed under the <a href="./Play/OFL.txt">OFL</a>)<br/>
data from Wikipedia</p>
</footer> </footer>
</body> </body>
</html> </html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment