use custom style instead of headings

calc() doesnt work with attr(rel), so this is probably simpler
master
lub 2 days ago
parent e50db84629
commit 679d683642

@ -9,10 +9,10 @@
<link rel="stylesheet" type="text/css" href="main.css?1602704189">
<h1>∞∞ Days</h1><br>
<h1>∞∞ Hours</h1><br>
<h1>∞∞ Minutes</h1><br>
<h1>∞∞ Seconds</h1><br>
∞∞ Days<br>
∞∞ Hours<br>
∞∞ Minutes<br>
∞∞ Seconds<br>
<script src="main.js?1602704189"></script>

@ -2,4 +2,5 @@ body {
background-color: black;
color: #0f0;
font-family: monospace;
font-size: 3rem;
}

@ -22,10 +22,12 @@ const countdown = (target, heading) => {
if (heading === 1 || formatted.filter(timespan => timespan.substr(0, 1) == '-').length === 0) {
return `
<h${heading}>${formatted[0]} Days</h${heading}>
<h${heading}>${formatted[1]} Hours</h${heading}>
<h${heading}>${formatted[2]} Minutes</h${heading}>
<h${heading}>${formatted[3]} Seconds</h${heading}>
<span style="font-size:${Math.round(100 - 60 * (4 - 4 / heading) / 4)}%">
${formatted[0]} Days<br>
${formatted[1]} Hours<br>
${formatted[2]} Minutes<br>
${formatted[3]} Seconds<br>
</span>
`;
}
};

Loading…
Cancel
Save