summaryrefslogtreecommitdiff
path: root/static/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'static/style.css')
-rw-r--r--static/style.css279
1 files changed, 253 insertions, 26 deletions
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 {