diff --git a/content/blog/blog.css b/content/blog/blog.css index 8d99e9e..8ca2fb0 100644 --- a/content/blog/blog.css +++ b/content/blog/blog.css @@ -3,10 +3,19 @@ :root { --post-item-highlight-color: #efefef; + + --tag-text-color: #666; + --tag-background-color: #eee; + --tag-hover-background-color: #bbb; } @media (prefers-color-scheme: dark) { :root { --post-item-highlight-color: #121212; + + --tag-text-color: #888; + --tag-background-color: rgb(40, 40, 40); + --tag-hover-background-color: rgb(73, 73, 73); + --tag-hover-foreground-color: #666; } } @@ -84,3 +93,37 @@ .post-list a { color: inherit; } + +.blog footer .tags { + display: flex; + padding-inline-start: 0; +} + +.blog footer .tags li { + background-color: var(--tag-background-color); + border-radius: 4px; + display: inline-block; + font-size: 75%; + letter-spacing: 2px; +} + +.blog footer .tags li:hover { + background-color: var(--tag-hover-background-color); +} + +.blog footer .tags li a { + color: var(--tag-text-color); + display: block; + height: 100%; + width: 100%; + padding: 0.75rem 1rem; +} + +.blog footer .tags li a:hover { + color: var(--tag-hover-foreground-color); + text-decoration: none; +} + +.blog footer .tags li + li { + margin-inline-start: 1rem; +} diff --git a/static/styles/main.css b/static/styles/main.css index d563607..2385c9e 100644 --- a/static/styles/main.css +++ b/static/styles/main.css @@ -344,39 +344,6 @@ pre { margin-block-start: 3.5rem; } -ul.post-tags { - display: flex; - padding-inline-start: 0; -} - -ul.post-tags li { - background-color: var(--tag-background-color); - border-radius: 4px; - display: inline-block; - letter-spacing: 2px; -} - -ul.post-tags li:hover { - background-color: var(--tag-hover-background-color); -} - -ul.post-tags li a { - color: var(--tag-text-color); - display: block; - font-size: 1.75rem; - height: 100%; - width: 100%; - padding: 0.75rem 1rem; -} - -ul.post-tags li a:hover { - text-decoration: none; -} - -ul.post-tags li + li { - margin-inline-start: 1rem; -} - .post-title { align-items: baseline; display: flex;