diff options
Diffstat (limited to 'served/bits/time.html')
| -rwxr-xr-x | served/bits/time.html | 62 |
1 files changed, 36 insertions, 26 deletions
diff --git a/served/bits/time.html b/served/bits/time.html index dc0ea0f..1a60a33 100755 --- a/served/bits/time.html +++ b/served/bits/time.html @@ -1,50 +1,59 @@ --- -Template post -Title +template=post +title=Time +#published=2023-09-14 10:22pm CDT --- +[@paragraphs off] <style> - @font-face { - font-family: 'Dosis'; - font-weight: 200; - src: url('/Dosis-ExtraLight.otf'); + #counter h1, + #counter h2 { + text-align: center; + font-family: 'Recursive', sans-serif; + font-variation-settings: + "MONO" 1, + "CASL" 0, + "wght" 200, + "slnt" 0, + "CRSV" 0; } #counter { - margin: 96px auto; - width: 15rem; + width: 100%; + } + + @media (min-width: 50rem) { + #counter-repad { + /* body is offset */ + margin-left: calc(-1 * var(--left-pad)); + } - font-weight: normal; - font-family: 'Dosis', sans-serif; + #counter { + /* it looks weird perfectly center. the div-2 helps that */ + padding-left: calc(var(--left-pad) / 2); + } } #days { - width: min-content; - font-weight: 200; font-size: 5rem; - font-family: inherit; } #time { - width: min-content; - font-weight: 200; font-size: 4rem; - font-family: inherit; - } - - #dates { - display: none !important; } </style> <!-- Dosis: https://github.com/impallari/Dosis --> -<section id="counter"> - <h1 id="days"></h1> - <h2 id="time"><span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span></h2> -</section> +<div id="counter-repad"> + <section id="counter"> + <h1 id="days"></h1> + <h2 id="time"><span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span></h2> + </section> +</div> <script> + // don't misuse this, love. const BIRTH = Date.parse("2001-04-13T02:56:00-05:00"); const SEC_DAY = 60 * 60 * 24; @@ -55,7 +64,7 @@ Title let day = Math.floor(lif / SEC_DAY); let sub_day = lif % (60 * 60 * 24); let hou = Math.floor(sub_day / (60 * 60)); - let min = Math.floor( (sub_day % (60 * 60)) / 60 ); + let min = Math.floor((sub_day % (60 * 60)) / 60); let sec = sub_day % 60; return { @@ -80,7 +89,8 @@ Title minute.innerText = human(time.minutes); second.innerText = human(time.seconds); - if (days_reposition % 60 == 0) { + // We're using a monospace font now. Keep the code, though, but always fail the condition. + if (false && days_reposition % 60 == 0) { let time_width = document.getElementById('time').clientWidth; let days = document.getElementById('days'); |