diff options
| -rw-r--r-- | _css/style.css | 89 | ||||
| -rw-r--r-- | _layout/hair.html | 1 |
2 files changed, 24 insertions, 66 deletions
diff --git a/_css/style.css b/_css/style.css index 5eb5926..354e65e 100644 --- a/_css/style.css +++ b/_css/style.css @@ -1,49 +1,15 @@ /* Variables */ :root { - --black: #1c1b19; - --red: #ef2f27; - --green: #519f50; - --yellow: #fbb829; - --blue: #2c78bf; - --magenta: #e02c6d; - --cyan: #0aaeb3; - --white: #d0bfa1; - --bright-black: #918175; - --bright-red: #f75341; - --bright-green: #98bc37; - --bright-yellow: #fed06e; - --bright-blue: #68a8e4; - --bright-magenta: #ff5c8f; - --bright-cyan: #53fde9; - --bright-white: #fce8c3; - - --block-bg: var(--black); - --fade-fg: var(--bright-black); - --link-fg: var(--green); - --overlay-bg: #8881; - --text-bg: #121212; - --text-fg: var(--bright-white); -} - -@media (prefers-color-scheme: light) { - :root { - --block-bg: #eeeeec; - --fade-fg: #888a85; - --link-fg: #436e58; - --text-bg: #ffffff; - --text-fg: #2e3436; - } + --overlay-bg: #8882; + --overlay-border: #8884; } /* Default font and layout */ html { - background-color: var(--text-bg); box-sizing: border-box; - color: var(--text-fg); font-size: clamp(100%, 2vw, 150%); margin: auto; max-width: 36rem; - scrollbar-color: var(--fade-fg) var(--overlay-bg); } body { margin: 0 1rem } @@ -64,7 +30,7 @@ p, details { .franklin-content h4 a, .franklin-content h5 a, .franklin-content h6 a { - color: var(--text-fg); + color: CanvasText; } .franklin-content h1 a:hover, @@ -83,19 +49,13 @@ p, details { /* General formatting */ .franklin-content li p { margin: 0 } -.franklin-content a { - color: var(--link-fg); - text-decoration: none; -} +.franklin-content a { text-decoration: none } .franklin-content a:hover { text-decoration: underline; } /* Hyperrefs and footnotes */ -.franklin-content .bibref a, -.franklin-content .eqref a { color: var(--link-fg) } - .franklin-content .fndef { border: none; margin: 1ex 0; @@ -132,12 +92,10 @@ p, details { .note p:first-child { font-weight: bold } .franklin-content blockquote { background: var(--overlay-bg); - border-left: 0.25rem solid #8884; -} -.note { - background-color: #51affe25; - border-left: 0.25rem solid var(--blue); + color: ButtonText; + border-left: 0.25rem solid var(--overlay-border); } +.note { background-color: var(--overlay-bg) } /* Header */ header { @@ -150,19 +108,16 @@ header { header a { border-bottom: solid; - color: var(--link-fg); font-weight: bold; margin: 0 0.5rem; text-decoration: none; - transition: color 0.3s ease; } -header a:hover { color: var(--text-fg) } nav, nav li { display: inline-block } nav ul { margin: 0 } footer, .tags, .right { - color: var(--fade-fg); + color: GrayText; font-size: 80%; } @@ -172,7 +127,7 @@ footer { } footer a, .tags a { - color: var(--fade-fg)!important; + color: GrayText; text-decoration: underline!important; } @@ -185,9 +140,9 @@ footer a, .tags a { /* Table */ table { - border-bottom: 0.15em solid var(--text-fg); + border-bottom: 0.15em solid; border-collapse: collapse; - border-top: 0.15em solid var(--text-fg); + border-top: 0.15em solid; line-height: 1em; margin-bottom: 1.5em; margin-left: auto; @@ -195,12 +150,13 @@ table { text-align: center; } -tr:first-of-type > th { border-bottom: 0.08em solid var(--text-fg) } +tr:first-of-type > th { border-bottom: 0.08em solid } tr, th, td { padding: 0.5em } /* highlight.js */ code, .hljs { - background-color: var(--block-bg); + background-color: ButtonFace; + color: CanvasText; font-size: inherit; padding: 0.1em 0.2em; } @@ -211,22 +167,22 @@ code, .hljs { overflow-x: auto; } -.hljs-built_in .hljs-name, .hljs-title, .hljs-type { color: var(--cyan) } -.hljs-code, .hljs-selector-class { color: var(--bright-blue) } -.hljs-comment, .hljs-deletion, .hljs-meta { color: var(--fade-fg) } +.hljs-built_in .hljs-name, .hljs-title, .hljs-type { color: Teal } +.hljs-code, .hljs-selector-class { color: LinkText } +.hljs-comment, .hljs-deletion, .hljs-meta { color: GrayText } .hljs-comment, .hljs-emphasis { font-style: italic; } -.hljs-string { color: var(--bright-green) } +.hljs-string { color: Green } .hljs-strong { font-weight: bold; } .hljs-bullet, .hljs-quote, .hljs-link, .hljs-number, -.hljs-regexp, .hljs-literal { color: var(--bright-magenta) } +.hljs-regexp, .hljs-literal { color: VisitedText } .hljs-keyword, .hljs-selector-tag, .hljs-section, -.hljs-attribute, .hljs-variable { color: var(--red) } +.hljs-attribute, .hljs-variable { color: ActiveText } .hljs-subst, .hljs-symbol, .hljs-selector-id, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-template-tag, .hljs-template-variable, -.hljs-addition { color: var(--red) } +.hljs-addition { color: Olive } .comment { background-color: var(--overlay-bg); @@ -244,7 +200,8 @@ code, .hljs { } .fead h3 { margin: 0 0 1ex } .fead article { - background: var(--overlay-bg); + background: ButtonFace; + color: ButtonText; display: flex; flex-direction: column; flex: 1 1 0; diff --git a/_layout/hair.html b/_layout/hair.html index ffebb85..07821e4 100644 --- a/_layout/hair.html +++ b/_layout/hair.html @@ -1,6 +1,7 @@ <!DOCTYPE html> <html lang=en> <meta charset=utf-8> +<meta name=color-scheme content='dark light'> <meta name=viewport content='width=device-width, initial-scale=1'> <link rel='alternate' type='application/rss+xml' title='{{website_title}}' href='/{{ispage /tag/*}}tag/{{fd_tag}}/{{end}}{{rss_file}}.xml'> |