From 97ec7bbbfd88f67a3d38fac2096b6b2d533f4d0c Mon Sep 17 00:00:00 2001 From: Birk Date: Fri, 10 Apr 2026 06:19:16 +0000 Subject: [PATCH] first commit --- README.md | 1 + layouts/404.html | 0 layouts/_default/baseof.html | 66 +++ layouts/_default/list.html | 45 +++ layouts/_default/single.html | 33 ++ layouts/index.html | 45 +++ layouts/shortcodes/notice.html | 11 + static/css/styles.css | 646 ++++++++++++++++++++++++++++++ static/css/themes/dark-chroma.css | 64 +++ static/css/themes/dark.css | 132 ++++++ static/images/chain-link.svg | 81 ++++ static/images/exclamation.svg | 70 ++++ static/images/hamburger.svg | 3 + 13 files changed, 1197 insertions(+) create mode 100644 README.md create mode 100644 layouts/404.html create mode 100644 layouts/_default/baseof.html create mode 100644 layouts/_default/list.html create mode 100644 layouts/_default/single.html create mode 100644 layouts/index.html create mode 100644 layouts/shortcodes/notice.html create mode 100644 static/css/styles.css create mode 100644 static/css/themes/dark-chroma.css create mode 100644 static/css/themes/dark.css create mode 100644 static/images/chain-link.svg create mode 100644 static/images/exclamation.svg create mode 100644 static/images/hamburger.svg diff --git a/README.md b/README.md new file mode 100644 index 0000000..5878aa8 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +Modifed version of [no-js-hugo-theme](https://github.com/stevenengler/no-js-hugo-theme) used for my blog [birk.blog](https://birk.blog) diff --git a/layouts/404.html b/layouts/404.html new file mode 100644 index 0000000..e69de29 diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html new file mode 100644 index 0000000..eb85f0d --- /dev/null +++ b/layouts/_default/baseof.html @@ -0,0 +1,66 @@ +{{ $themeStyleDefault := "light.css" -}} + + + + + + +{{- if isset .Site.Params "onionlocation" }} + +{{- end }} + {{ block "title" . }}{{ .Site.Title }}{{ end }} + + +{{- if .Site.Params.ThemeStyleSwitcher }} + +{{- end }} + + + + +
+
+
+
+ {{ .Site.Title }} +
+
+
+{{- if .Site.Params.ThemeStyleSwitcher }} + +{{- end }} + +
+{{- if .Site.Menus.main }} +
+

+ Links: +

+
+
    +{{- range .Site.Menus.main.ByWeight }} +
  • {{ .Name }}
    • +{{- end }} +
+{{- end }} +
+
+
+
+
+ {{- block "main" . }}{{ end }} +
+
+
+{{- if .Site.Params.FooterText }} +
+ +{{- end }} + + diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..256ee5d --- /dev/null +++ b/layouts/_default/list.html @@ -0,0 +1,45 @@ +{{ define "title" }}{{ .Title }} – {{ .Site.Title }}{{ end }} +{{ define "main" }} + {{ .Content }} +
+

{{ .Title }}

+
+ {{- if gt (len .Sections) 0 }} +

Categories

+ +

All Posts

+ {{- end }} + {{- $cs := .CurrentSection }} + {{- with $cs }} + {{- range (where .Site.RegularPages "Section" .Section) }} + {{- if .IsDescendant $cs }} +
+
+

{{ if .Draft }}(Draft) {{ end }}{{ .Title }}

+
+ {{- if eq .Date.IsZero false }} + + {{- end }} + {{- if (and (eq .Lastmod.IsZero false) (ne .Lastmod .Date)) }} + (updated) + {{- end }} +
+
+
+

{{/* Spacing is weird if we don't include this */}} +

+ {{ .Summary }} +

+ {{- if .Truncated }} + Read More… + {{- end }} +
+
+ {{- end }} + {{- end }} + {{- end }} +{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..64320a7 --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,33 @@ +{{ define "title" }}{{ .Title }} – {{ .Site.Title }}{{ end }} +{{ define "main" }} +
+

{{ if .Draft }}(Draft) {{ end }}{{ .Title }}

+
+ {{- if eq .Date.IsZero false }} + + {{- end }} + {{- if (and (eq .Lastmod.IsZero false) (ne .Lastmod .Date)) }} + — last updated + {{- end }} +
+ {{ if or (.Params.toc) (and (ne .Params.toc false) (isset .Site.Params "tocwordthreshold") (ge .Site.Params.TocWordThreshold 0) (gt .WordCount .Site.Params.TocWordThreshold)) }} + {{/* If the front matter parameter is true, show the toc */}} + {{/* Elif the front matter parameter is false, don't show the toc */}} + {{/* Elif the front matter parameter is not set, show the toc if the site parameter is set, non-negative, and less than the word count */}} +

+
+
+ + Table of Contents + + {{ $toc := .TableOfContents -}} + {{/* Workaround for an extra layer of indentation (https://discourse.gohugo.io/t/2303) */}} + {{- $toc := replaceRE `(\s*)
    \s*
  • \s*
      ` `${2}
        ` $toc -}} + {{- $toc := replaceRE `
      \s*\s*
    (\s*)` `
${1}` $toc -}} + {{- safeHTML $toc }} +
+
+ {{ end }} +
+ {{ .Content | replaceRE "()" (printf "${1}${3}" ("images/chain-link.svg" | relURL)) | safeHTML }} +{{ end }} diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..256ee5d --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,45 @@ +{{ define "title" }}{{ .Title }} – {{ .Site.Title }}{{ end }} +{{ define "main" }} + {{ .Content }} +
+

{{ .Title }}

+
+ {{- if gt (len .Sections) 0 }} +

Categories

+ +

All Posts

+ {{- end }} + {{- $cs := .CurrentSection }} + {{- with $cs }} + {{- range (where .Site.RegularPages "Section" .Section) }} + {{- if .IsDescendant $cs }} +
+
+

{{ if .Draft }}(Draft) {{ end }}{{ .Title }}

+
+ {{- if eq .Date.IsZero false }} + + {{- end }} + {{- if (and (eq .Lastmod.IsZero false) (ne .Lastmod .Date)) }} + (updated) + {{- end }} +
+
+
+

{{/* Spacing is weird if we don't include this */}} +

+ {{ .Summary }} +

+ {{- if .Truncated }} + Read More… + {{- end }} +
+
+ {{- end }} + {{- end }} + {{- end }} +{{ end }} diff --git a/layouts/shortcodes/notice.html b/layouts/shortcodes/notice.html new file mode 100644 index 0000000..3e24915 --- /dev/null +++ b/layouts/shortcodes/notice.html @@ -0,0 +1,11 @@ +{{- .Scratch.Set "type" "note" -}} +{{- with .Get 0 }}{{ $.Scratch.Set "type" . }}{{ end -}} + diff --git a/static/css/styles.css b/static/css/styles.css new file mode 100644 index 0000000..1889039 --- /dev/null +++ b/static/css/styles.css @@ -0,0 +1,646 @@ + +.body-content figure.wide-image { + max-width: 100% !important; +} + +img { + background-color: transparent !important; +} + + +.large-image img { + height: 1000px; + width: auto; +} + +.small-image img { + height: 680px; + width: auto; + transform: rotate(270deg); +} + + +:root { + --document-margin: 15pt; +} + +h1 { font-size: 1.50em; } +h2 { font-size: 1.40em; } +h3 { font-size: 1.20em; } +h4 { font-size: 1.00em; } +h5 { font-size: 0.85em; } +h6 { font-size: 0.75em; } + +h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + text-decoration: none; +} + +h1, h2, h3, h4, h5, h6 { + margin-top: 1.5em; +} + +@media (hover: hover) { + /* For devices which support hover, hide the heading URL fragment + link/icon until the mouse hovers over the heading */ + + h1:hover .heading-anchor, + h2:hover .heading-anchor, + h3:hover .heading-anchor, + h4:hover .heading-anchor, + h5:hover .heading-anchor, + h6:hover .heading-anchor { + visibility: visible; + } + + h1 .heading-anchor, + h2 .heading-anchor, + h3 .heading-anchor, + h4 .heading-anchor, + h5 .heading-anchor, + h6 .heading-anchor { + visibility: hidden; + } +} + +.heading-anchor { + /* this is used on an "aside" tag so that it's not shown in the browser's reader mode */ + display: inline; + color: grey; + margin-left: 0.5em; + font-size: 0.75em; +} + +.heading-anchor a:hover { + text-decoration: none; +} + +.heading-anchor img { + height: 1em; +} + +a { + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +.dont-show { + display: none; +} + +/* Improvements to Hugo Chroma syntax highlighting */ + +.highlight { + margin-top: 1em; + margin-bottom: 1em; + /* set the tab size for browsers that support it */ + tab-size: 4; + -moz-tab-size: 4; + /* needed for the iPhone so that the two columns (line numbers and code) don't have different font sizes */ + -webkit-text-size-adjust: 100%; +} + +.highlight > * { + padding: 0.5em; + border-width: 2px; + border-style: solid; +} + +.highlight pre { + margin: 0px; + overflow-x: auto; + word-wrap: normal; +} + +.highlight td.lntd pre { + /* needed to fix an iPhone scrolling bug */ + overflow-x: hidden; +} + +.highlight td.lntd:last-child { + /* needed until this bug is fixed: https://github.com/alecthomas/chroma/issues/225 */ + width: 100%; +} + +/* Improvements to inline code blocks */ + +code { + font-size: 98%; +} + +:not(pre) > code { + /* inline code elements */ + background-color: rgba(25, 25, 25, 0.05); + border-radius: 5px; + font-size: 80%; + padding-top: 0.2em; + padding-bottom: 0.2em; + padding-left: 0.4em; + padding-right: 0.4em; +} + +/* Formatting for "notice" shortcodes */ + +.notice { + margin: 1.5em 0; + width: 70%; + margin-left: auto; + margin-right: auto; + background-color: #E9E9E9; +} + +@media only screen and (max-width: 500pt) { + .notice { + width: 100%; + } +} + +.notice > hr { + display: none; /* only want the child hr elements to appear if css is disabled */ +} + +.notice .notice-title { + margin: 0; + padding: 0.4em; + line-height: 1em; + background-color: #D5D5D5; +} + +.notice .notice-title span { + vertical-align: -10%; /* we don't want the font descender space to be centered as well */ +} + +.notice .notice-title .notice-title-icon { + display: inline-block; + vertical-align: middle; + margin-left: 0.15em; + margin-right: 0.25em; + height: 0.85em; +} + +.notice .notice-body { + padding: 0.6em; +} + +.notice .notice-body p:first-child { + margin-top: 0; +} + +.notice .notice-body p { + margin: 0.8em 0; +} + +/* ************************ */ + +blockquote { + color: #404040; + border-left: 0.25em solid #CCC; + padding-left: 0.5em; + margin-left: 1.5em; +} + +.title-header { + margin-top: 1.5em; + margin-bottom: 1.5em; +} + +.title-header > h1{ + margin-top: 0; + margin-bottom: 0.3em; +} + +.title-header-date { + color: rgb(90, 90, 90); + font-size: 80%; +} + +.title-list > h2, .title-list > h3, .title-list > h4, .title-list > h5, .title-list > h6{ + margin-bottom: 0.1em; +} + +.body-list p { + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +.title-list-date { + color: rgb(90, 90, 90); + font-size: 80%; +} + +.table-of-contents { + border-width: 2px; + border-style: solid; + padding: 1em; + margin-bottom: 2em; + font-size: 0.9em; +} + +.table-of-contents nav > ul { + /* only the most-parent ul element */ + margin-bottom: 0; +} + +.table-of-contents ul { + list-style: none; + padding-left: 0; +} + +.table-of-contents li { + margin-top: 0.5em; +} + +.table-of-contents ul ul { + list-style: none; + padding-left: 1.0em; +} + +.table-of-contents-title { + font-size: 1.2em; + font-weight: bold; +} + +.section-list { + padding-left: 0; +} + +.section-list li { + display: inline-block; + margin-right: 0.5em; +} + +.section-list li:last-child { + margin-right: 0em; +} + +.section-list li > * { + background-color: rgba(25, 25, 25, 0.05); + border-radius: 5px; + font-size: 90%; + padding-top: 0.2em; + padding-bottom: 0.2em; + padding-left: 0.4em; + padding-right: 0.4em; +} + +.links { + font-size: 120%; + list-style-type: none; + line-height: 1; + padding: 0; + margin: 0; + margin-top: 9pt; + display: flex; + flex-direction: row; + /* Not sure what we can do other than continue the links on the next line. + * It's ugly, but probably better than hiding them altogether. */ + flex-wrap: wrap; + row-gap: 0.3em; +} + +.links li { + margin-right: 1em; +} + +.links li > * { + display:inline-block; +} + +.links li:last-child { + margin-right: 0; +} + +.links a { + text-decoration: none; + color: inherit; +} + +.links a:hover { + color: #505050; +} + +.overlay { + position: fixed; + visibility: hidden; + opacity: 0; + width: 100%; + height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.7); + z-index: 2; + /* for iOS: https://stackoverflow.com/a/11885330 */ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.header-right { + /* want the images to have padding to make them easier to click, but we still want them aligned correctly */ + --label-padding: 0.3em; + + position: absolute; + top: calc(var(--document-margin) - var(--label-padding)); + right: calc(var(--document-margin) - var(--label-padding)); + display: flex; +} + +.header-right > * { + margin-left: 0.4em; +} + +.clickable-header-label { + cursor: pointer; + padding: var(--label-padding); +} + +.clickable-header-label img { + height: 1em; + width: auto; /* to override the attribute when css is supported */ +} + +#show-hide-menu-label { + display: none; +} + +#show-hide-menu-label * { + /* duration for the rotation transition of the hamburger image */ + transition-duration: 100ms; +} + +body { + font-size: 13pt; + font-family: Lato, Arial, Helvetica, "Liberation Sans", sans-serif; + line-height: 1.45; + margin: 0; +} + +.title { + font-weight: bold; + font-size: 140%; + line-height: 1em; +} + +.title a { + text-decoration: none; + color: inherit; +} + +.header { + background-color: lightgray; + background-size: cover; + background-position: bottom; + width: 100%; + /* header must be above the overlay */ + /* this also prevents images with css filters from appearing above the header when in portrait mode */ + z-index: 3; + /* z-index doesn't apply to the default 'static' position */ + position: relative; +} + +.header-content { + padding: var(--document-margin); + position: relative; /* so that "position: absolute" works for the menu label */ +} + +.body { + display: inline-block; + width: 100%; +} + +.body-content { + margin: var(--document-margin); + word-wrap: break-word; +} + +/* Image/Figure formatting */ + +.body-content :not(figure) img { + /* regular image elements should be inline elements */ + max-width: 100%; + max-height: 60vw; /* if the image is really tall, we don't want the width to be 100% */ +} + +.body-content figure { + margin-left: auto; + margin-right: auto; + max-width: 70%; +} + +.body-content figure img { + display: block; + margin-left: auto; + margin-right: auto; + margin-bottom: 0.5em; + max-width: 100%; + max-height: 40vw; /* if the image is really tall, we don't want the width to be 70% */ +} + +.body-content figure:not(.color-adapting-image) img { + /* if the image is designed to adapt to the theme, then don't use a background */ + background-color: rgb(255, 255, 255); /* images with transparent backgrounds typically assume a light background */ +} + +.body-content figure figcaption { + font-size: 90%; + line-height: 1.5em; + padding-bottom: 0.3em; + border-bottom: 2px solid lightgray; +} + +.body-content figure figcaption * { + margin: 0; +} + +@media only screen and (orientation: portrait) { + .body-content :not(figure) img, + .body-content figure img { + /* need to target both so that they're more specific */ + max-height: 100vw; + } +} + +@media only screen and (max-width: 400pt) { + .body-content figure { + max-width: 100%; + } + + .body-content figure figcaption { + margin-left: 5%; + margin-right: 5%; + } +} + +/* ************************ */ + +.main { + width: 700pt; /* make sure to also change this in the media query */ + margin: 0 auto; + margin-top: 10pt; + margin-bottom: 10pt; + box-sizing: border-box; + box-shadow: 0 0 10px rgba(50, 50, 50, .17); +} + +.footer { + text-align: center; + font-size: 80%; +} + + +@media only screen and (orientation: portrait) { + .header { + top: 0; + position: sticky; + position: -webkit-sticky; /* needed for iOS */ + box-shadow: 0 0 1em rgba(30, 30, 30, .3); + } + + .body-content :target::before { + /* When linking to tags with 'id's (example: + 'website.com/post/#heading'), make them + appear lower down the page so that they + don't appear under the sticky header set + above. + See: https://stackoverflow.com/a/24298427 + Note that this causes the cursor text + selection of the target to behave + undesirably. + */ + content: ''; + display: block; + height: 3em; + margin-top: -3em; + visibility: hidden; + pointer-events: none; + } +} + + +@media only screen and (max-width: 700pt) { + .main { + width: 100%; + margin-top: 0; + margin-bottom: 0; + } + + body { + font-size: 12pt; + background-color: white; + } +} + +@media only screen and (max-width: 400pt) { + :root { + --document-margin: 10pt; + } + + .header-right { + top: 0; + height: 100%; + align-items: center; + } + + .clickable-header-label { + display: inline-flex; + } + + .clickable-header-label * { + vertical-align: middle; + } + + #show-hide-menu-label { + display: inherit; + } + + .show-hide-menu-input:checked ~ .main .links { + display: inherit; + } + + .show-hide-menu-input:checked ~ .main #show-hide-menu-label > img { + transform: rotate(90deg); + } + + .show-hide-menu-input:checked ~ .overlay { + visibility: visible; + opacity: 1; + } + + /* prevent scrolling the main body; must be on html element and not body for iOS */ + html:has(.show-hide-menu-input:checked) { + overflow: hidden; + height: 100%; + /* prevent scrolling (of everything) on iOS */ + /* any element with 'overflow-y: scroll' will allow the body to scroll for some reason */ + /* use 'pan-zoom' to allow users to zoom if they need to, even though it makes scrolling weird */ + touch-action: pan-zoom; + } + + .links { + /* vertical padding between list items */ + --entry-padding: 9pt; + + display: none; + position: absolute; + left: 0; + right: 0; + padding-left: var(--document-margin); + padding-right: var(--document-margin); + padding-top: calc(var(--document-margin) - var(--entry-padding)); + padding-bottom: calc(var(--document-margin) - var(--entry-padding)); + + font-size: 100%; + background-color: rgb(247, 247, 247); + border-top: solid 1px; + border-bottom: solid 1px; + } + + .links li { + border-bottom: solid 1px; + /* override all previously set margins */ + margin: 0; + } + + .links li:last-child { + border-bottom: none; + } + + .links li > * { + /* make the links easily clickable */ + width: 100%; + padding-top: var(--entry-padding); + padding-bottom: var(--entry-padding); + } +} + +@media print { + :root { + --document-margin: 0pt; + } + + body { + background-color: initial !important; + } + + .main { + margin-top: 0; + margin-bottom: 0; + width: 100%; + box-shadow: none !important; + } + + .header { + background-color: initial !important; + background-image: none !important; + } + + .header-right { + display: none; + } + + .links { + display: none; + } +} diff --git a/static/css/themes/dark-chroma.css b/static/css/themes/dark-chroma.css new file mode 100644 index 0000000..444fd0d --- /dev/null +++ b/static/css/themes/dark-chroma.css @@ -0,0 +1,64 @@ +/* Background */ .chroma { color: #d0d0d0; background-color: #1a1a1a } +/* Error .chroma .err { color: #a61717; background-color: #e3d2d2 } * +/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } +/* LineHighlight */ .chroma .hl { display: block; width: 100%; background-color: #404040 } +/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; } +/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; } +/* Keyword */ .chroma .k { color: #6ab825; font-weight: bold } +/* KeywordConstant */ .chroma .kc { color: #6ab825; font-weight: bold } +/* KeywordDeclaration */ .chroma .kd { color: #6ab825; font-weight: bold } +/* KeywordNamespace */ .chroma .kn { color: #6ab825; font-weight: bold } +/* KeywordPseudo */ .chroma .kp { color: #6ab825 } +/* KeywordReserved */ .chroma .kr { color: #6ab825; font-weight: bold } +/* KeywordType */ .chroma .kt { color: #6ab825; font-weight: bold } +/* NameAttribute */ .chroma .na { color: #bbbbbb } +/* NameBuiltin */ .chroma .nb { color: #24909d } +/* NameClass */ .chroma .nc { color: #447fcf } +/* NameConstant */ .chroma .no { color: #447fcf } +/* NameDecorator */ .chroma .nd { color: #ffa500 } +/* NameException */ .chroma .ne { color: #bbbbbb } +/* NameFunction */ .chroma .nf { color: #447fcf } +/* NameNamespace */ .chroma .nn { color: #447fcf } +/* NameTag */ .chroma .nt { color: #6ab825; font-weight: bold } +/* NameVariable */ .chroma .nv { color: #447fcf } +/* LiteralString */ .chroma .s { color: #ed9d13 } +/* LiteralStringAffix */ .chroma .sa { color: #ed9d13 } +/* LiteralStringBacktick */ .chroma .sb { color: #ed9d13 } +/* LiteralStringChar */ .chroma .sc { color: #ed9d13 } +/* LiteralStringDelimiter */ .chroma .dl { color: #ed9d13 } +/* LiteralStringDoc */ .chroma .sd { color: #ed9d13 } +/* LiteralStringDouble */ .chroma .s2 { color: #ed9d13 } +/* LiteralStringEscape */ .chroma .se { color: #ed9d13 } +/* LiteralStringHeredoc */ .chroma .sh { color: #ed9d13 } +/* LiteralStringInterpol */ .chroma .si { color: #ed9d13 } +/* LiteralStringOther */ .chroma .sx { color: #ffa500 } +/* LiteralStringRegex */ .chroma .sr { color: #ed9d13 } +/* LiteralStringSingle */ .chroma .s1 { color: #ed9d13 } +/* LiteralStringSymbol */ .chroma .ss { color: #ed9d13 } +/* LiteralNumber */ .chroma .m { color: #3677a9 } +/* LiteralNumberBin */ .chroma .mb { color: #3677a9 } +/* LiteralNumberFloat */ .chroma .mf { color: #3677a9 } +/* LiteralNumberHex */ .chroma .mh { color: #3677a9 } +/* LiteralNumberInteger */ .chroma .mi { color: #3677a9 } +/* LiteralNumberIntegerLong */ .chroma .il { color: #3677a9 } +/* LiteralNumberOct */ .chroma .mo { color: #3677a9 } +/* OperatorWord */ .chroma .ow { color: #6ab825; font-weight: bold } +/* Comment */ .chroma .c { color: #999999; font-style: italic } +/* CommentHashbang */ .chroma .ch { color: #999999; font-style: italic } +/* CommentMultiline */ .chroma .cm { color: #999999; font-style: italic } +/* CommentSingle */ .chroma .c1 { color: #999999; font-style: italic } +/* CommentSpecial */ .chroma .cs { color: #e50808; background-color: #520000; font-weight: bold } +/* CommentPreproc */ .chroma .cp { color: #cd2828; font-weight: bold } +/* CommentPreprocFile */ .chroma .cpf { color: #cd2828; font-weight: bold } +/* GenericDeleted */ .chroma .gd { color: #d22323 } +/* GenericEmph */ .chroma .ge { font-style: italic } +/* GenericError */ .chroma .gr { color: #d22323 } +/* GenericHeading */ .chroma .gh { color: #ffffff; font-weight: bold } +/* GenericInserted */ .chroma .gi { color: #589819 } +/* GenericOutput */ .chroma .go { color: #cccccc } +/* GenericPrompt */ .chroma .gp { color: #aaaaaa } +/* GenericStrong */ .chroma .gs { font-weight: bold } +/* GenericSubheading */ .chroma .gu { color: #ffffff } +/* GenericTraceback */ .chroma .gt { color: #d22323 } +/* TextWhitespace */ .chroma .w { color: #666666 } diff --git a/static/css/themes/dark.css b/static/css/themes/dark.css new file mode 100644 index 0000000..a128f08 --- /dev/null +++ b/static/css/themes/dark.css @@ -0,0 +1,132 @@ +@import url("dark-chroma.css"); + +a { + color: #A1A1EA; +} + +.highlight > * { + border-color: #505050; +} + +:not(pre) > code { + /* inline code elements */ + background-color: rgba(90, 90, 90, 0.25); +} + +a > code { + background-color: rgba(65, 65, 170, 0.3); +} + +.section-list li > * { + background-color: rgba(90, 90, 90, 0.25); +} + +.section-list li > a { + background-color: rgba(65, 65, 170, 0.3); +} + +/* +body { + color: rgb(210, 210, 210); + background-color: rgb(27, 27, 27); +} +*/ +body { + color: rgb(210, 210, 210); + background-color: rgb(14, 14, 14); +} + + +blockquote { + color: rgb(170, 170, 170); + border-left: 0.25em solid #444; +} + +hr { + border: 1px solid rgb(110, 110, 110); +} + +img.color-adapting-image, +figure.color-adapting-image img { + filter: invert(85%) hue-rotate(180deg); + /* hue rotate trick from: https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955a */ +} + +.header { + background-color: rgb(31, 51, 31); /* still want a background color before the image loads */ +} + +.links, .links li { + border-color: #383838; +} +/* +.main { + background-color: rgb(14, 14, 14); + box-shadow: none; +} +*/ +.main { + background-color: rgb(26, 28, 28); + box-shadow: none; +} + + +.footer { + color: rgb(160, 160, 160); +} + +.title-header-date { + color: rgb(150, 150, 150); +} + +.title-list-date { + color: rgb(150, 150, 150); +} + +.table-of-contents { + border-color: #505050; + background-color: #1A1A1A; +} + +.notice { + border-width: 2px; + border-style: solid; + border-top: 0; +} + +.notice .notice-title .notice-title-icon { + filter: invert(80%); +} + +.notice.note { + background-color: #001320; + border-color: #00487B; +} + +.notice.note .notice-title { + background-color: #00487B; +} + +.notice.tip { + background-color: #132000; + border-color: #105600; +} + +.notice.tip .notice-title { + background-color: #105600; +} + +.notice.warning { + background-color: #200000; + border-color: #700000; +} + +.notice.warning .notice-title { + background-color: #700000; +} + +@media only screen and (max-width: 400pt) { + .links { + background-color: rgb(23, 23, 23); + } +} diff --git a/static/images/chain-link.svg b/static/images/chain-link.svg new file mode 100644 index 0000000..a9947b2 --- /dev/null +++ b/static/images/chain-link.svg @@ -0,0 +1,81 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/static/images/exclamation.svg b/static/images/exclamation.svg new file mode 100644 index 0000000..c575fc5 --- /dev/null +++ b/static/images/exclamation.svg @@ -0,0 +1,70 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/static/images/hamburger.svg b/static/images/hamburger.svg new file mode 100644 index 0000000..880e9f7 --- /dev/null +++ b/static/images/hamburger.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file