diff options
| -rw-r--r-- | .eleventy.js | 16 | ||||
| -rw-r--r-- | package-lock.json | 11 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | posts/history.njk | 2 | ||||
| -rw-r--r-- | posts/tags.njk | 2 | ||||
| -rw-r--r-- | static/main.js | 2 | ||||
| -rw-r--r-- | static/style.css | 279 |
7 files changed, 283 insertions, 30 deletions
diff --git a/.eleventy.js b/.eleventy.js index 6cb78a0..e7794ce 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -55,8 +55,17 @@ module.exports = (cfg) => { const md = require("markdown-it")({ typographer: true, html: true, highlight: (str, lang) => { + let starting = 1; + let numLength; + if (lang.includes(":")) { + lang = lang.split(":"); + starting = lang[1]; + numLength = lang[2]; + lang = lang[0]; + } if (lang && hljs.getLanguage(lang)) { try { - return '<pre class="hljs"><code>' + + return '<pre class="hljs"><code'+(starting? + ' data-starting="'+starting+'"'+(numLength? ' data-num-length="'+numLength+'"' : '') : '')+'>' + hljs.highlight(str, { language: lang, ignoreIllegals: true }).value + '</code></pre>'; } catch (__) {} } @@ -66,6 +75,7 @@ module.exports = (cfg) => { }).use(require("markdown-it-anchor"), { permalink: true, permalinkBefore: true, permalinkSymbol: "#"}) .use(require("markdown-it-emoji"), {shortcuts: {}}) + .use(require("markdown-it-footnote")) .use(require("markdown-it-mark")); md.renderer.rules.emoji = (token, i) => @@ -74,6 +84,10 @@ module.exports = (cfg) => { md.renderer.rules.code_block = (tokens, i, options, env, slf) => `<pre${slf.renderAttrs(tokens[i])}><code>` + utils.escapeHtml(tokens[i].content.replace(/ /g, "\xA0"))+'</code></pre>\n'; + md.renderer.rules.footnote_block_open = () => ( + '<section class="footnotes">\n' + + '<ol class="footnotes-list">\n' + ); cfg.setLibrary("md", md); diff --git a/package-lock.json b/package-lock.json index b2029ee..55e3f4e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "highlight.js": "^11.6.0", + "markdown-it-footnote": "^4.0.0", "twemoji": "^14.0.2" }, "devDependencies": { @@ -1988,6 +1989,11 @@ "integrity": "sha512-39j7/9vP/CPCKbEI44oV8yoPJTpvfeReTn/COgRhSpNrjWF3PfP/JUxxB0hxV6ynOY8KH8Y8aX9NMDdo6z+6YQ==", "dev": true }, + "node_modules/markdown-it-footnote": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-4.0.0.tgz", + "integrity": "sha512-WYJ7urf+khJYl3DqofQpYfEYkZKbmXmwxQV8c8mO/hGIhgZ1wOe7R4HLFNwqx7TjILbnC98fuyeSsin19JdFcQ==" + }, "node_modules/markdown-it-mark": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/markdown-it-mark/-/markdown-it-mark-3.0.1.tgz", @@ -5095,6 +5101,11 @@ "integrity": "sha512-39j7/9vP/CPCKbEI44oV8yoPJTpvfeReTn/COgRhSpNrjWF3PfP/JUxxB0hxV6ynOY8KH8Y8aX9NMDdo6z+6YQ==", "dev": true }, + "markdown-it-footnote": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-4.0.0.tgz", + "integrity": "sha512-WYJ7urf+khJYl3DqofQpYfEYkZKbmXmwxQV8c8mO/hGIhgZ1wOe7R4HLFNwqx7TjILbnC98fuyeSsin19JdFcQ==" + }, "markdown-it-mark": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/markdown-it-mark/-/markdown-it-mark-3.0.1.tgz", diff --git a/package.json b/package.json index e74b89a..56f676d 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@11ty/eleventy": "^1.0.0", "@11ty/eleventy-plugin-rss": "^1.1.0", "markdown-it": "^12.3.2", + "markdown-it-footnote": "^4.0.0", "markdown-it-anchor": "^7.1.0", "markdown-it-emoji": "^2.0.0", "markdown-it-mark": "^3.0.1" diff --git a/posts/history.njk b/posts/history.njk index c3cdc50..cb18cbc 100644 --- a/posts/history.njk +++ b/posts/history.njk @@ -14,7 +14,7 @@ <h1>{{ metadata.title }} — Page {{ pagination.pageNumber + 1 }}</h1> {% for post in posts %} <hr> - <section> + <section class="post-list"> <h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2> {%- set postDate = post.date.toISOString().slice(0,10) %} <p class="post-date"><time datetime="{{ postDate }}">{{ postDate }}</time></p> diff --git a/posts/tags.njk b/posts/tags.njk index f984630..8f3f8b6 100644 --- a/posts/tags.njk +++ b/posts/tags.njk @@ -19,7 +19,7 @@ eleventyComputed: <hr> {% set taglist = collections[ tag ] -%} {% for post in taglist | reverse %} - <section> + <section class="post-list"> <h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2> {%- set postDate = post.date.toISOString().slice(0,10) %} <p class="post-date"><time datetime="{{ postDate }}">{{ postDate }}</time></p> diff --git a/static/main.js b/static/main.js index 0858183..258e260 100644 --- a/static/main.js +++ b/static/main.js @@ -17,7 +17,7 @@ document.addEventListener("DOMContentLoaded", () => { [...d[q]("pre.hljs code")].forEach(e => e.innerHTML = e.innerHTML.split("\n").slice(0,-1).map((l,i,a) => `<div class="code-line" data-line-number="${ - (i+1).toString().padStart(Math.ceil(Math.log10(a.length)), 0) + (i+(+(e.dataset.starting||1))).toString().padStart(+e.dataset.numLength||Math.ceil(Math.log10(a.length)), 0) }">${l}</div>`).join("\n")); // Disable Android Chrome "tap to search" when revealing spoiler text diff --git a/static/style.css b/static/style.css index a5c57d1..4c00c3a 100644 --- a/static/style.css +++ b/static/style.css @@ -6,20 +6,159 @@ line-height: 1.5rem; } -:root { --filter: invert(0) } +/*:root { --filter: invert(0) } html.invert { --filter: invert(1) } -/*@media (prefers-color-scheme: dark) { +@media (prefers-color-scheme: dark) { :root { --filter: invert(1) } html.invert { --filter: invert(0) } -}*/ +} html, pre.hljs, img:not(.emoji):not([alt^=Diagram]), #like-post.liked, #like-post:hover, #end, .emoji-container { filter: var(--filter) } +*/ + +html { + --page-bg: #fff; + --text-color: #000d; + --link-color: #1d73c9; + --icon-color: #bbb; + --icon-hover-color: var(--link-color); + --text-subtle-color: #999; + --redacted-bg: #444; + --code-bg: #f4f4f4; + --code-inline-bg: #eee; + --code-line-num: #0006; + --kbd-bg: #eee; + --kbd-border: #ccc; + --kbd-shadow: #ddd; + --divider-color: rgba(0,0,0,.2); + --end-marker-color: #ab4642; +} +html.invert { + --page-bg: #000; + --text-color: #fffd; + --link-color: #7ea2ce; + --icon-color: #444; + --text-subtle-color: #888; + --redacted-bg: #333; + --code-bg: #111; + --code-inline-bg: #282828; + --code-line-num: #585858; + --kbd-bg: #111; + --kbd-border: #444; + --kbd-shadow: #333; + --divider-color: rgba(255,255,255,.2); +} +@media (prefers-color-scheme: dark) { + html { + --page-bg: #000; + --text-color: #fffd; + --link-color: #7ea2ce; + --icon-color: #444; + --text-subtle-color: #888; + --redacted-bg: #333; + --code-bg: #111; + --code-inline-bg: #282828; + --code-line-num: #585858; + --kbd-bg: #111; + --kbd-border: #444; + --kbd-shadow: #333; + --divider-color: rgba(255,255,255,.2); + } + html.invert { + --page-bg: #fff; + --text-color: #000d; + --link-color: #1d73c9; + --icon-color: #bbb; + --text-subtle-color: #999; + --redacted-bg: #444; + --code-bg: #f4f4f4; + --code-inline-bg: #eee; + --code-line-num: #0006; + --kbd-bg: #eee; + --kbd-border: #ccc; + --kbd-shadow: #ddd; + --divider-color: rgba(0,0,0,.2); + } +} + +.hljs-emphasis{font-style:italic} + +html:not(.invert) { + /* Highlight.js - A11y Light */ + & .hljs{background:#f7f7f7;color:#545454} + & .hljs-comment,& .hljs-quote{color:#696969} + & .hljs-deletion,& .hljs-name,& .hljs-regexp,& .hljs-selector-class,& .hljs-selector-id,& .hljs-tag,& .hljs-template-variable,& .hljs-variable{color:#d91e18} + & .hljs-attribute,& .hljs-built_in,& .hljs-link,& .hljs-literal,& .hljs-meta,& .hljs-number,& .hljs-params,& .hljs-type{color:#aa5d00} + & .hljs-addition,& .hljs-bullet,& .hljs-string,& .hljs-symbol{color:green} + & .hljs-section,& .hljs-title{color:#007faa} + & .hljs-keyword,& .hljs-selector-tag{color:#7928a1} + & .hljs-strong{font-weight:700} +} + +@media screen and (-ms-high-contrast:active){.hljs-addition,.hljs-attribute,.hljs-built_in,.hljs-bullet,.hljs-comment,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-quote,.hljs-string,.hljs-symbol,.hljs-type{color:highlight}.hljs-keyword,.hljs-selector-tag{font-weight:700}} + +html.invert { + /* Highlight.js - Base16 Default Dark */ + & .hljs{color:#d8d8d8;background:#111} + & .hljs ::selection,& .hljs::selection{background-color:#383838;color:#d8d8d8} + & .hljs-comment{color:#585858} + & .hljs-tag{color:#b8b8b8} + & .hljs-operator,& .hljs-punctuation,& .hljs-subst{color:#d8d8d8} + & .hljs-operator{opacity:.7} + & .hljs-bullet,& .hljs-deletion,& .hljs-name,& .hljs-selector-tag,& .hljs-template-variable,& .hljs-variable{color:#ab4642} + & .hljs-attr,& .hljs-link,& .hljs-literal,& .hljs-number,& .hljs-symbol,& .hljs-variable.constant_{color:#dc9656} + & .hljs-class .hljs-title,& .hljs-title,& .hljs-title.class_{color:#f7ca88} + & .hljs-strong{font-weight:700;color:#f7ca88} + & .hljs-addition,& .hljs-code,& .hljs-string,& .hljs-title.class_.inherited__{color:#a1b56c} + & .hljs-built_in,& .hljs-doctag,& .hljs-keyword.hljs-atrule,& .hljs-quote,& .hljs-regexp{color:#86c1b9} + & .hljs-attribute,& .hljs-function .hljs-title,& .hljs-section,& .hljs-title.function_,& .ruby .hljs-property{color:#7cafc2} + & .diff .hljs-meta,& .hljs-keyword,& .hljs-template-tag,& .hljs-type{color:#ba8baf} + & .hljs-emphasis{color:#ba8baf} + & .hljs-meta,& .hljs-meta .hljs-keyword,& .hljs-meta .hljs-string{color:#a16946} + & .hljs-meta .hljs-keyword,& .hljs-meta-keyword{font-weight:700} +} + +@media (prefers-color-scheme: dark) { + html:not(.invert) { + /* Highlight.js - Base16 Default Dark */ + & .hljs{color:#d8d8d8;background:#111} + & .hljs ::selection,& .hljs::selection{background-color:#383838;color:#d8d8d8} + & .hljs-comment{color:#585858} + & .hljs-tag{color:#b8b8b8} + & .hljs-operator,& .hljs-punctuation,& .hljs-subst{color:#d8d8d8} + & .hljs-operator{opacity:.7} + & .hljs-bullet,& .hljs-deletion,& .hljs-name,& .hljs-selector-tag,& .hljs-template-variable,& .hljs-variable{color:#ab4642} + & .hljs-attr,& .hljs-link,& .hljs-literal,& .hljs-number,& .hljs-symbol,& .hljs-variable.constant_{color:#dc9656} + & .hljs-class .hljs-title,& .hljs-title,& .hljs-title.class_{color:#f7ca88} + & .hljs-strong{font-weight:700;color:#f7ca88} + & .hljs-addition,& .hljs-code,& .hljs-string,& .hljs-title.class_.inherited__{color:#a1b56c} + & .hljs-built_in,& .hljs-doctag,& .hljs-keyword.hljs-atrule,& .hljs-quote,& .hljs-regexp{color:#86c1b9} + & .hljs-attribute,& .hljs-function .hljs-title,& .hljs-section,& .hljs-title.function_,& .ruby .hljs-property{color:#7cafc2} + & .diff .hljs-meta,& .hljs-keyword,& .hljs-template-tag,& .hljs-type{color:#ba8baf} + & .hljs-emphasis{color:#ba8baf} + & .hljs-meta,& .hljs-meta .hljs-keyword,& .hljs-meta .hljs-string{color:#a16946} + & .hljs-meta .hljs-keyword,& .hljs-meta-keyword{font-weight:700} + } + html.invert { + /* Highlight.js - A11y Light */ + & .hljs{background:#f7f7f7;color:#545454} + & .hljs-comment,& .hljs-quote{color:#696969} + & .hljs-deletion,& .hljs-name,& .hljs-regexp,& .hljs-selector-class,& .hljs-selector-id,& .hljs-tag,& .hljs-template-variable,& .hljs-variable{color:#d91e18} + & .hljs-attribute,& .hljs-built_in,& .hljs-link,& .hljs-literal,& .hljs-meta,& .hljs-number,& .hljs-params,& .hljs-type{color:#aa5d00} + & .hljs-addition,& .hljs-bullet,& .hljs-string,& .hljs-symbol{color:green} + & .hljs-section,& .hljs-title{color:#007faa} + & .hljs-keyword,& .hljs-selector-tag{color:#7928a1} + & .hljs-strong{font-weight:700} + } +} html { background: #fff; - color: #000; + background: var(--page-bg); + color: #000d; + color: var(--text-color); height: 100%; overflow-x: hidden; } @@ -40,10 +179,14 @@ html { height: 1rem; width: 1rem; background: #bbb; + background: var(--icon-color); border-radius: 1rem; cursor: pointer; } -#invert:hover { background: #1d73c9 } +#invert:hover { + background: #1d73c9; + background: var(--icon-hover-color); +} #invert::before { content: ""; display: block; @@ -63,6 +206,7 @@ html { right: 1.6rem; padding-left: .6rem; background: #fff; + background: var(--page-bg); } h1 { margin: .9rem 0 1rem !important; @@ -79,6 +223,7 @@ html { margin: -.6rem 0; vertical-align: -.05rem; background: #fff; + background: var(--page-bg); overflow: hidden; outline: 0; border: .6rem solid transparent; @@ -110,14 +255,19 @@ html { transform: translate(-50%,50%); border-radius: 100%; background: #bbb; + background: var(--icon-color); box-shadow: 0 0 0 .3rem #fff, 0 0 0 .6rem #bbb; + box-shadow: 0 0 0 .3rem var(--page-bg), 0 0 0 .6rem var(--icon-color); } #feed:hover::before { background: #1d73c9; + background: var(--icon-hover-color); box-shadow: 0 0 0 .3rem #fff, 0 0 0 .6rem #1d73c9; + box-shadow: 0 0 0 .3rem var(--page-bg), 0 0 0 .6rem var(--icon-hover-color); } #message-me::before { background: #bbb; + background: var(--icon-color); height: .75rem; width: 1rem; } @@ -125,11 +275,18 @@ html { height: 0; width: .1rem; border-top: .4rem solid #bbb; + border-top: .4rem solid var(--icon-color); border-right: .6rem solid transparent; bottom: 0; } -#message-me:hover::before { background: #1d73c9 } -#message-me:hover::after { border-top-color: #1d73c9 } +#message-me:hover::before { + background: #1d73c9; + background: var(--icon-hover-color); +} +#message-me:hover::after { + border-top-color: #1d73c9; + border-top-color: var(--icon-hover-color); +} body { position: relative; @@ -155,6 +312,7 @@ p.post-date { p.post-date * { font-size: 15px; color: #999; + color: var(--text-subtle-color); } [lang=jbo], [lang=jbo] * { @@ -187,25 +345,34 @@ summary::before { width: 0; border: .4rem solid transparent; border-left: .7rem solid #bbb; + border-left: .7rem solid var(--icon-color); border-right-width: 0; float: left; margin: .35rem 0 0 -1.2rem; } -summary:hover::before { border-left-color: #1d73c9; } +summary:hover::before { + border-left-color: #1d73c9; + border-left-color: var(--icon-hover-color); +} details[open] > summary::before { border: .4rem solid transparent; border-top: .7rem solid #bbb; + border-top: .7rem solid var(--icon-color); border-bottom-width: 0; margin: .4rem 0 0 -1.3rem; } -details[open] > summary:hover::before { border-top-color: #1d73c9; } +details[open] > summary:hover::before { + border-top-color: #1d73c9; + border-top-color: var(--icon-hover-color); +} blockquote { padding-left: 1.2rem; box-shadow: 2px 0 0 rgba(0,0,0,.2) inset; + box-shadow: 2px 0 0 var(--divider-color) inset; } ul ul, ul ol, ol ul, ol ol, li { @@ -213,6 +380,14 @@ ul ul, ul ol, ol ul, ol ol, li { padding: revert; } +li p:first-child { + margin-top: .4rem; +} + +li p:last-child { + margin-bottom: .4rem; +} + ol > li:first-child:nth-last-child(n+10), ol > li:first-child:nth-last-child(n+10) ~ li { list-style-type: decimal-leading-zero; @@ -221,6 +396,7 @@ ol > li:first-child:nth-last-child(n+10) ~ li { hr { border: 0; border-top: .5px solid rgba(0,0,0,.2); + border-top: .5px solid var(--divider-color); } img:not(.emoji) { @@ -246,10 +422,11 @@ img.hero { a { text-decoration: none; color: #1d73c9; + color: var(--link-color); } a:hover, a:hover *, ins * { text-decoration: underline } -a:visited { color: #955eba } -a:active { color: #ab4642 } +/*a:visited { color: #955eba } +a:active { color: #ab4642 }*/ .irc { padding-left: 1.8rem } .irc > p { text-indent: -1.8rem } @@ -261,9 +438,11 @@ a:active { color: #ab4642 } mark { color: transparent; background: #444; + background: var(--redacted-bg); } mark:hover { - color: #000; + color: #000d; + color: var(--text-color); background: transparent; } @@ -271,18 +450,25 @@ mark:not(:hover) code, mark:not(:hover) .emoji { opacity: 0 } code { - background: #e6e6e6; margin: 0 .2rem; - box-shadow: - .2rem .08rem #e6e6e6, - .2rem -.08rem #e6e6e6, - -.2rem .08rem #e6e6e6, - -.2rem -.08rem #e6e6e6; white-space: nowrap; + line-height: 1; } -/* Highlight.js - Base16 Default Dark */ -.hljs{color:#d8d8d8;background:#181818}.hljs ::selection,.hljs::selection{background-color:#383838;color:#d8d8d8}.hljs-comment{color:#585858}.hljs-tag{color:#b8b8b8}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#d8d8d8}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#ab4642}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#dc9656}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#f7ca88}.hljs-strong{font-weight:700;color:#f7ca88}.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#a1b56c}.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#86c1b9}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#7cafc2}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#ba8baf}.hljs-emphasis{color:#ba8baf;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#a16946}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700} +p code { + background: #f4f4f4; + background: var(--code-inline-bg); + box-shadow: + .2rem .08rem #f4f4f4, + .2rem -.08rem #f4f4f4, + -.2rem .08rem #f4f4f4, + -.2rem -.08rem #f4f4f4; + box-shadow: + .2rem .08rem var(--code-inline-bg), + .2rem -.08rem var(--code-inline-bg), + -.2rem .08rem var(--code-inline-bg), + -.2rem -.08rem var(--code-inline-bg); +} p code, p code * { font-family: "Hack", monospace; @@ -306,9 +492,9 @@ pre code { box-shadow: none; } -pre.hljs:hover code { +/*pre.hljs:hover code { box-shadow: -.5px 0 #fff6; -} +}*/ pre .code-line { margin: 0; @@ -326,7 +512,8 @@ pre .code-line::before { } pre:hover .code-line::before { - color: #fff8; + color: #0006; + color: var(--code-line-num); } pre .code-line::after { @@ -336,7 +523,8 @@ pre .code-line::after { pre { margin: 1em -100%; /* old browsers fallback */ margin: 1rem calc(50% - 50vw); - background: #e6e6e6; + background: #f4f4f4; + background: var(--code-bg); overflow-x: auto; } @@ -346,17 +534,38 @@ pre.hljs { kbd { background: #eee; + background: var(--kbd-bg); margin: 0 .1rem; padding: .05rem .35rem; vertical-align: .07rem; font-family: "Hack", monospace; font-size: 15px; border: 1px solid #ccc; + border: 1px solid var(--kbd-border); border-radius: .3rem; box-shadow: 0 2px 0 #ddd; + box-shadow: 0 2px 0 var(--kbd-shadow); white-space: nowrap; } +.footnote-ref, .footnote-ref * { + margin: 0; + font-size: 12px; +} + +.footnote-ref { + display: inline-block; + margin-top: -.2rem; +} + +.post-list .footnote-ref { + display: none; +} + +.footnote-backref:not(:hover) { + opacity: .6; +} + #tags { word-spacing: .5rem; } .tag { white-space: nowrap; } @@ -364,6 +573,7 @@ nav { position: relative; margin-bottom: 0; border-top: .5px solid rgba(0,0,0,.2); + border-top: .5px solid var(--divider-color); padding-top: 1rem; } nav::after { @@ -374,6 +584,7 @@ nav::after { nav a:not(:hover) { color: #999; + color: var(--text-subtle-color); } #up, #back, #next, #prev, #first, #last { display: block } @@ -403,16 +614,24 @@ nav a:not(:hover) { #up::after { margin: .6rem 1.5rem .6rem .3rem; border-bottom: .7rem solid #bbb; + border-bottom: .7rem solid var(--icon-color); border-top-width: 0; } #back::after { border-right: .7rem solid #bbb; + border-right: .7rem solid var(--icon-color); border-left-width: 0; } -#up:hover::after { border-bottom-color: #1d73c9 } -#back:hover::after { border-right-color: #1d73c9 } +#up:hover::after { + border-bottom-color: #1d73c9; + border-bottom-color: var(--link-color); +} +#back:hover::after { + border-right-color: #1d73c9; + border-right-color: var(--link-color); +} #next, #last, #end { float: right; @@ -432,6 +651,7 @@ nav a:not(:hover) { margin-left: .5rem; border: .4rem solid transparent; border-left: .7rem solid #bbb; + border-left: .7rem solid var(--icon-color); border-right-width: 0; vertical-align: -.05rem; } @@ -445,6 +665,7 @@ nav a:not(:hover) { margin: 0 .1rem 0 .5rem; border: .4rem solid transparent; border-left: .6rem solid #bbb; + border-left: .6rem solid var(--icon-color); border-right-width: 0; vertical-align: -.05rem; } @@ -457,6 +678,7 @@ nav a:not(:hover) { height: .8rem; width: .15rem; background: #bbb; + background: var(--icon-color); } #last:hover::after { border-left-color: currentColor } #last:hover::before { background: currentColor } @@ -469,6 +691,7 @@ nav a:not(:hover) { margin: 0 .5rem 0 .1rem; border: .4rem solid transparent; border-right: .6rem solid #bbb; + border-right: .6rem solid var(--icon-color); border-left-width: 0; vertical-align: -.05rem; } @@ -481,6 +704,7 @@ nav a:not(:hover) { height: .8rem; width: .15rem; background: #bbb; + background: var(--icon-color); } #first:hover::before { border-right-color: currentColor } #first:hover::after { background: currentColor } @@ -493,6 +717,7 @@ nav a:not(:hover) { margin-right: .5rem; border: .4rem solid transparent; border-right: .7rem solid #bbb; + border-right: .7rem solid var(--icon-color); border-left-width: 0; vertical-align: -.05rem; } @@ -508,6 +733,7 @@ nav a:not(:hover) { width: .8rem; transform: rotate(45deg); box-shadow: 0 0 0 .24rem #ab4642 inset; + box-shadow: 0 0 0 .24rem var(--end-marker-color) inset; } #like-post { @@ -543,6 +769,7 @@ nav a:not(:hover) { height: .6rem; width: .6rem; background: #bbb; + background: var(--icon-color); } #like-post.liked span, #like-post.liked span::before, #like-post.liked span::after, #like-post:hover span, #like-post:hover span::before, #like-post:hover span::after { |