diff options
| -rw-r--r-- | config.toml | 2 | ||||
| -rw-r--r-- | netlify.toml | 2 | ||||
| -rw-r--r-- | templates/style.css.html | 183 |
3 files changed, 86 insertions, 101 deletions
diff --git a/config.toml b/config.toml index d8caa45..147f75f 100644 --- a/config.toml +++ b/config.toml @@ -41,7 +41,7 @@ table_of_contents = "Inhaltsverzeichnis" [markdown] # Whether to do syntax highlighting # Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola -highlight_code = true +highlight_code = false [extra] date_format = "%Y-%m-%d" diff --git a/netlify.toml b/netlify.toml index 6e9486a..ad921ed 100644 --- a/netlify.toml +++ b/netlify.toml @@ -24,4 +24,4 @@ X-Content-Type-Options = "nosniff" X-XSS-Protection = "1; mode=block" Referrer-Policy = "strict-origin-when-cross-origin" Strict-Transport-Security = "max-age=63072000; includeSubdomains" -Content-Security-Policy = "default-src 'none'; img-src 'self'; object-src 'none'; script-src 'none'; style-src 'sha256-iJQfPEEzY1fjDE/sJElXzaTdtJI+vxkKM//fXwJj/cI='; form-action 'none'; base-uri 'self'; frame-ancestors 'none'" +Content-Security-Policy = "default-src 'none'; img-src 'self'; object-src 'none'; script-src 'none'; style-src 'sha256-KOMZEackHZgE4VhODEG7gEiJLdQZogO6BfMk+c0NWoM='; form-action 'none'; base-uri 'self'; frame-ancestors 'none'" diff --git a/templates/style.css.html b/templates/style.css.html index 716880d..2196ce5 100644 --- a/templates/style.css.html +++ b/templates/style.css.html @@ -1,14 +1,43 @@ + :root { + --width: 800px; + --font-main: Verdana, sans-serif; + --font-secondary: Verdana, sans-serif; + --font-scale: 1em; + --background-color: #fff; + --heading-color: #222; + --text-color: #444; + --link-color: #3273dc; + --visited-color: #8b6fcb; + --code-background-color: #f2f2f2; + --code-color: #222; + --blockquote-color: #222; + } + + @media (prefers-color-scheme: dark) { + :root { + --background-color: #01242e; + --heading-color: #eee; + --text-color: #ddd; + --link-color: #8cc2dd; + --visited-color: #8b6fcb; + --code-background-color: #000; + --code-color: #ddd; + --blockquote-color: #ccc; + } + } + body { - font-family: Verdana, sans-serif; + font-family: var(--font-secondary); + font-size: var(--font-scale); margin: auto; padding: 20px; - max-width: 720px; + max-width: var(--width); text-align: left; - background-color: #fff; + background-color: var(--background-color); word-wrap: break-word; overflow-wrap: break-word; line-height: 1.5; - color: #444; + color: var(--text-color); } h1, @@ -16,52 +45,40 @@ h3, h4, h5, - h6, - strong, - b { - color: #222; + h6 { + font-family: var(--font-main); + color: var(--heading-color); } a { - color: #3273dc; - } - - .title { + color: var(--link-color); + cursor: pointer; text-decoration: none; - border: 0; - } - - .title h1 { - font-size: 1.5em; } - .title span { - font-weight: 400; - } - - .filter { - margin-bottom: 0; + a:hover { + text-decoration: underline; } nav a { - margin-right: 10px; + margin-right: 8px; } nav active { font-weight: bold; margin-right: 10px; } - - textarea { - width: 100%; - font-size: 1rem; + strong, + b { + color: var(--heading-color); } - input { - font-size: 1rem; + button { + margin: 0; + cursor: pointer; } - main,article { + main { line-height: 1.6; } @@ -69,17 +86,18 @@ width: 100%; } - img { - max-width: 100%; + hr { + border: 0; + border-top: 1px dashed; } - code { - padding: 2px 5px; - background-color: #f2f2f2; + img { + max-width: 100%; } pre code { - color: #222; + background-color: var(--code-background-color); + color: var(--code-color); display: block; padding: 20px; white-space: pre-wrap; @@ -87,39 +105,50 @@ overflow-x: auto; } - div.highlight pre { - background-color: initial; - color: initial; - } - - div.highlight code { - background-color: unset; - color: unset; + code { + font-family: monospace; + padding: 2px; + background-color: var(--code-background-color); + color: var(--code-color); + border-radius: 3px; } blockquote { border-left: 1px solid #999; - color: #222; + color: var(--code-color); padding-left: 20px; font-style: italic; } footer { - padding: 25px; + padding: 25px 0; text-align: center; } - .helptext { - color: #777; - font-size: small; + .title:hover { + text-decoration: none; + } + + .title h1 { + font-size: 1.5em; + } + + .inline { + width: auto !important; } - .errorlist { - color: #eba613; - font-size: small; + .highlight, + .code { + padding: 1px 15px; + background-color: var(--code-background-color); + color: var(--code-color); + border-radius: 3px; + margin-block-start: 1em; + margin-block-end: 1em; + overflow-x: auto; } - /* blog posts */ + /* blog post list */ ul.blog-posts { list-style-type: none; padding: unset; @@ -134,49 +163,5 @@ } ul.blog-posts li a:visited { - color: #8b6fcb; - } - - @media (prefers-color-scheme: dark) { - body { - background-color: #333; - color: #ddd; - } - - h1, - h2, - h3, - h4, - h5, - h6, - strong, - b { - color: #eee; - } - - a { - color: #8cc2dd; - } - - code { - background-color: #777; - } - - pre code { - color: #ddd; - } - - blockquote { - color: #ccc; - } - - textarea, - input { - background-color: #252525; - color: #ddd; - } - - .helptext { - color: #aaa; - } + color: var(--visited-color); } |