diff options
Diffstat (limited to 'served/bits')
| -rwxr-xr-x | served/bits/bits.html | 5 | ||||
| -rwxr-xr-x | served/bits/time.html | 62 |
2 files changed, 39 insertions, 28 deletions
diff --git a/served/bits/bits.html b/served/bits/bits.html index 0e8f501..1a6aaaa 100755 --- a/served/bits/bits.html +++ b/served/bits/bits.html @@ -1,6 +1,6 @@ --- template=post -title=Bits +title=Bits of my world. style=/styles/post.css style=poem.css style=bits.css @@ -11,8 +11,9 @@ style=bits.css </p> <ol class="list"> - <li><a href="__.html">__.html</a> — briefly, on names. maybe.</li> <li><a href="ramen-bowl.html">ramen-bowl.html</a> — a poem about my ramen noodel bowl</li> + <li><a href="time.html">time.html</a> — days of life</li> + <li><a href="__.html">__.html</a> — briefly, on names. maybe.</li> <li><a href="touching-grass/">touching-grass.html</a> — a short video with an exciteable description</li> <li><a href="smoems.html">smoems.html</a> — transplanted poems from twitter</li> <li><a href="sillygifs/">sillygifs.html</a> — various sillily long counting gif</li> 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'); |