diff --git a/site/_includes/-taglist.njk b/site/_includes/-taglist.njk new file mode 100644 index 0000000..2d191c0 --- /dev/null +++ b/site/_includes/-taglist.njk @@ -0,0 +1,7 @@ +
+ {%- for tag, data in collections.categories -%} + {{ tag }} + {{ data.count }} + + {%- endfor -%} +
diff --git a/site/_includes/collection.njk b/site/_includes/collection.njk index bb55b40..cfa0e23 100644 --- a/site/_includes/collection.njk +++ b/site/_includes/collection.njk @@ -3,6 +3,7 @@ layout: "base.njk" eleventyComputed: title: "{{ page.fileSlug | capitalize }}" --- + {%- from "components/collectionList.njk" import collectionList with context -%}
@@ -10,6 +11,9 @@ eleventyComputed:
{% set tag = page.fileSlug %} {% if collections[tag] %} + {% if tag === "posts" %} + {% include "-taglist.njk" %} + {% endif %} {{ collectionList(tag) }} {% endif %} -
+ \ No newline at end of file diff --git a/site/_includes/css/site.css b/site/_includes/css/site.css index 0ba0881..bd24854 100644 --- a/site/_includes/css/site.css +++ b/site/_includes/css/site.css @@ -19,9 +19,9 @@ body { --c-bg1: oklch(15% 0.05 calc(var(--hue-main) + 30)); --c-bg2: oklch(15% 0.05 calc(var(--hue-main) - 30)); --c-dark: oklch(19.1% 0.005 var(--hue-main)); - --c-text-background-light: oklch(45% 0.135 var(--hue-main) / 0.3); - --c-text-light: oklch(94% 0.045 calc(var(--hue-main) + 180)); - --c-text-dark: oklch(94% 0.045 calc(var(--hue-main) + 180)); + --c-text-background: oklch(45% 0.135 var(--hue-main) / 0.3); + --c-text: oklch(94% 0.045 calc(var(--hue-main) + 180)); + --c-text-dim: oklch(94% 0.045 calc(var(--hue-main) + 180) / 0.67); --tag-luminance: 0.85; --ratio: 1.333; @@ -55,7 +55,7 @@ body { "Inter", "Inter Variable", Ubuntu, "Noto Sans", "Fira Sans", Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif; background-color: var(--c-body-background); - color: var(--c-text-dark); + color: var(--c-text); background-image: url(/noise.png), radial-gradient(ellipse at -20% 20vmin, var(--c-bg1), transparent 90%), @@ -68,7 +68,7 @@ body { ::selection { background: var(--c-highlight); - color: var(--c-text-dark); + color: var(--c-text); } mark { @@ -105,7 +105,7 @@ a[href] { nav label:has(input:focus-visible), nav label:has(input:checked) { outline: none; - color: var(--c-text-dark); + color: var(--c-text); background-color: var(--glowColor); box-shadow: 0 0 0.5rem var(--glowColor), @@ -121,18 +121,7 @@ nav label:has(input:checked) { :is(a[href], button, nav label):focus-visible, nav label:has(input:focus-visible) { z-index: 1; - outline: 2px solid var(--c-text-dark); -} - -.tag { - &::before { - content: "#"; - } - --glowColor: oklch(var(--tag-luminance) 0.25 calc(25 + 360 * var(--tagIndex, 0) / var(--totalTags, 1)) / 0.3); - color: oklch(var(--tag-luminance) 0.25 calc(25 + 360 * var(--tagIndex, 0) / var(--totalTags, 1)) / 0.8); - &:hover { - color: var(--c-text-dark); - } + outline: 2px solid var(--c-text); } main p img { @@ -269,6 +258,7 @@ ul.collection { &::before { content: none; } + color: var(--c-text-dim); width: 100%; } + li { @@ -312,7 +302,7 @@ sup { } body > header { - color: var(--c-text-dark); + color: var(--c-text); padding: 0 var(--inset) 0; border-radius: 0.5rem 0.5rem 0 0; padding-top: env(safe-area-inset-top, 0); @@ -371,8 +361,7 @@ body > header > nav { --c-accent: black; --c-body-background: white; - --c-text-light: black; - --c-text-dark: black; + --c-text: black; --content-width: 100vw; } @@ -444,7 +433,7 @@ body > footer { padding: 0.1rem 0.25rem; margin: 0; border-radius: 0 !important; - background-color: var(--c-text-background-light); + background-color: var(--c-text-background); > input[type="radio"] { z-index: -2; position: absolute; @@ -587,7 +576,7 @@ a.header-anchor { :not(pre) > code, pre { font-family: "Commit Mono", monospace; - background-color: var(--c-text-background-light); + background-color: var(--c-text-background); padding: 0.1em; border-radius: 0.5em; } @@ -662,17 +651,20 @@ body .isso-preview { -45deg, transparent, transparent 10px, - var(--c-text-background-light) 10px, - var(--c-text-background-light) 20px + var(--c-text-background) 10px, + var(--c-text-background) 20px ); } +body .isso-post-action > input, button { + color: inherit; +} body .isso-post-action > input, button, a.button { - color: inherit; + display: inline-block; text-decoration: none; - background-color: var(--c-text-background-light); + background-color: var(--c-text-background); font-size: 1rem; - padding: calc(0.5rem + 1px) 0.5rem; + padding: 0.5rem; border-radius: 0.2rem; border: none; cursor: pointer; @@ -682,8 +674,33 @@ button, a.button { &:focus-visible { background-color: var(--c-accent); box-shadow: - 0 0 0.5rem var(--c-accent), - 0 0 1rem var(--c-accent); + 0 0 0.5rem var(--c-accent), + 0 0 1rem var(--c-accent); + } +} +.button.tag { + margin: 0 0.2em 0.2em 0; +} +.tag { + display: inline-flex; + &::before { + content: "#"; + } + --tagLCH: var(--tag-luminance) 0.25 calc(25 + 360 * var(--tagIndex, 0) / var(--totalTags, 1)); + --glowColor: oklch(var(--tagLCH) / 0.3); + --c-text-background: color-mix(in oklch, oklch(var(--tagLCH) / 0.4), #000A 50%); + --c-accent: color-mix(in oklch, oklch(var(--tagLCH) / 0.8), #000A 50%); + color: oklch(var(--tagLCH) / 0.8); + &:hover { + color: var(--c-text); + } + .tagCount { + display: inline-flex; + justify-content: center; + align-items: center; + font-size: calc(1em / var(--ratio)); + color: var(--c-text); + width: 2em; } } diff --git a/site/_includes/home.njk b/site/_includes/home.njk index 9998cfb..5a4bcee 100644 --- a/site/_includes/home.njk +++ b/site/_includes/home.njk @@ -7,6 +7,7 @@ layout: "base.njk" {%- for name, collection in collections -%} {%- if name in ["posts"] -%}

{{name | capitalize }}

+ {% include "-taglist.njk" %} {{ collectionList(name, limit=5) }} {%- endif -%} {%- endfor -%} diff --git a/site/pages/tags.njk b/site/pages/tags.njk deleted file mode 100644 index 08cd3b6..0000000 --- a/site/pages/tags.njk +++ /dev/null @@ -1,16 +0,0 @@ ---- -layout: base.njk -title: Tags -permalink: /tags/ ---- - -
- -
\ No newline at end of file