update style from the original bear blog repository[1]

[1]: https://github.com/HermanMartinus/bearblog/blob/639edff3781bd1e66723a4584ba3bbff32aaac0b/templates/styles/blog/default.css

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);
   }