Skip to content

Instantly share code, notes, and snippets.

@WaffleLapkin

WaffleLapkin/binary-counting-chost.html

Created April 13, 2024 17:31
Show Gist options
  • Save WaffleLapkin/8fd4f134867e895f5f46887c8ac77435 to your computer and use it in GitHub Desktop.
Save WaffleLapkin/8fd4f134867e895f5f46887c8ac77435 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
binary-counting-chost.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='lists.css'>
<style>
/* I tried replicating cohost style as much as possible */
/* latin-ext */
@font-face {
font-family: 'Atkinson Hyperlegible';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/atkinsonhyperlegible/v11/9Bt23C1KxNDXMspQ1lPyU89-1h6ONRlW45G07JIoSwQ.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Atkinson Hyperlegible';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/atkinsonhyperlegible/v11/9Bt23C1KxNDXMspQ1lPyU89-1h6ONRlW45G04pIo.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html {
font-family: 'Atkinson Hyperlegible', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-feature-settings: normal;
font-variation-settings: normal;
font-size: 1rem;
line-height: 1.75;
}
body {
background-color: rgb(255, 255, 255);
color: rgb(25, 25, 25);
}
@media (prefers-color-scheme: dark) {
body {
background-color: rgb(0, 0, 0);
color: rgb(255, 249, 242);
}
}
ol {
padding-left: 1.625em;
}
ol>li {
font-weight: 400;
padding-left: 0.375em;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
p {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
body>p:first-of-type {
margin-top: 0;
}
/* my styles */
@font-face {
font-family: 'binary-lh';
/*src:url("./binary-lh.woff2") format("woff2");*/
src: url('data:@file/octet-stream;base64,d09GMgABAAAAAAKgAA4AAAAABlwAAAJJAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGhwGYACCQggEEQgKgTCBKgsMAAE2AiQDEgQgBYQNBywbVAUInoexMyKUqUYoFxa/Ew9P+307d2bemqfF3kctm2QRD5FNWMLzlgDerASqeqR9sWJt+xIiiXQR+/eESfuOtDdFvARKgZAgJBqZ6ZqJVBKt8bhw/n2+m3qDjuADeHPTAuml5VGUy7RogQUUaEQBSaKUuY0mLk+GnA8fT7PajOIiBHzchwA+r3/cktO/wwIwYAKPhECgaMZ9FelmeoHb9O+I+GhNJJKqF0AAwM7zAwdXqym57jDJNSAAUGOQkTETA9bhBGbi1aAoAms6sbqz80YA0UUAIiEBAAIAgFzIBRvpMohOCVSgDwU1WAigYCUWhChlYKC/Giz7+6u+A1df33rJlRc3X8UJxMuMxnTv9I/6dvCVzc9kX+/nT16B5kfrHs0gAI/DqnWX7uLf2nNX9daJnKQwy6ySktKuaCIR6dFgECz4N9WJ4XX/e/rzz/38Fg2IpbkGPRIIcg0O+0MsxQAAiqYGoImmjVoYVAYkkBACm4gAhjwQgIY+BoReUxiQJDcFyBruAhS90S1AZTjWYECX3tiHE6UXWwAhjPGQFDeQbXFAMeaHyuwYfY8uY7FZz9TM3kLIF1ghBbYiopKpdBVkyOTxJFzEYJqJhTL4DDSxi2+0nDo0PS9xyTBncZgBp4UypoU9QSKA05cyc7EXkgBYkfoOU5kV313wuUgV1WGkx9sKhUAnjOzgelPSjYXvUpV6EZJRpSiCLszYh6YhCtYA+7kWlkJTGSKTKUSy8nGOlbKsiDJ3WnGbBHSeWwsCAECFyM7H5QAA') format("woff2");
}
@counter-style binary {
system: numeric;
symbols: "0" "1";
suffix: " ";
}
@counter-style binary_pad1 {
system: extends binary;
pad: 1 "0"
}
@counter-style binary_pad2 {
system: extends binary;
pad: 2 "0"
}
@counter-style binary_pad3 {
system: extends binary;
pad: 3 "0"
}
@counter-style binary_pad4 {
system: extends binary;
pad: 4 "0"
}
ol.binary>li::marker,
ol.binary_pad>li::marker {
font-family: binary-lh
}
ol.binary {
list-style: binary
}
/* compatibility for browsers without :has */
ol.binary_pad {
list-style: binary
}
/*
* Apply different binary_pad{N} depending on the number of list elements.
*
* In general, apply binary_pad{N} if there are at least 2^(N-1) children
* Or, in other words, apply `binary_pad{round_down(log2(children))+1}`.
*
* This makes it so all list numbers have the same width.
*
* Assumption: list numbers start with 1 and increment by 1 every list item.
* (I have no idea how to get "maximum counter value")
*
* Ideally I could just `pad: max "0"` and it'd just pad to the maximum width, but here we are.
*
* Implementation based on this SO answer: <https://stackoverflow.com/a/74016670>.
* A post with a similar idea: <https://www.matuzo.at/blog/2022/counting-children>.
*/
ol.binary_pad:has(> li:nth-child(1)) {
list-style: binary_pad1
}
/* 1 element or more */
ol.binary_pad:has(> li:nth-child(2)) {
list-style: binary_pad2
}
/* 2 element or more */
ol.binary_pad:has(> li:nth-child(4)) {
list-style: binary_pad3
}
/* 4 element or more */
ol.binary_pad:has(> li:nth-child(8)) {
list-style: binary_pad4
}
/* 8 element or more */
/*
* (no one needs more than 15 elements in a list)
* ((if you do, it's trivial to add binary_pad6 and a rule to apply it if there are at least 32
* children, just copy paste, increment pad by 1, increment nth-child by a factor of 2))
*/
</style>
</head>
<body>
<p>I made a lil thingy,,,</p>
<p>Behold, a list with binary counting:</p>
<ol class="binary">
<li>First list entry</li>
<li>Second list entry</li>
<li>Third list entry</li>
<li>Fourth list entry</li>
<li>Fifth list entry</li>
<li>Sixth list entry</li>
<li>Seventh list entry</li>
</ol>
<p>Or, if you prefer zero-padded indices:</p>
<ol class="binary_pad">
<li>First list entry</li>
<li>Second list entry</li>
<li>Third list entry</li>
<li>Fourth list entry</li>
<li>Fifth list entry</li>
<li>Sixth list entry</li>
<li>Seventh list entry</li>
</ol>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment