new style, dark style

html/style.css

@@ -1,8 +1,26 @@
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-color: #111;
+    --fg-color: #fff;
+    --link-color: dodgerblue;
+  }
+}
+
+* {
+  color: var(--fg-color);
+  text-decoration: none;
+}
+
+a {
+  color: var(--link-color);
+}
+
 html {
      font-size: 20px;
      font-family: "Charter","Georgia",'Times New Roman',serif;
 }
  body {
+     background-color: var(--bg-color);
      line-height: 1.3;
 }
  article, .container {
@@ -29,7 +47,7 @@ html {
      margin: 0.9em 0px 0.9em;
 }
  pre, code {
-     background-color: #eeeeff;
+     background-color: var(--bg-color);
      line-height: normal;
      overflow: auto;
      font-size: 0.8em;
@@ -46,7 +64,7 @@ html {
      flex-direction: row;
      flex-wrap: nowrap;
      font-size: 0.8em;
-     background-color: #f0f0f0;
+     background-color: var(--bg-color);
      border: 1px solid #bbbbdd;
 }
  nav li:first-child {
@@ -66,10 +84,10 @@ html {
      background-color: #e0e0e0;
 }
  nav a:link {
-     color: #44d;
+     color: var(--link-color);
 }
  nav a:visited {
-     color: #44d;
+     color: var(--link-color);
 }
  nav a.here {
      background-color: #e0e0e0;

tools/page_shares.py

@@ -2,8 +2,7 @@
 HEAD_EMBED = """
 
 <div class="container">
-<header>
+<nav class="custom-nav">
-<nav>
 <ul>
 <li><a href="/"><strong>mjestečko</strong></a></li>
 <li><a href="https://git.poto.cafe/veclavtalica/mjestecko">source</a></li>
@@ -11,14 +10,14 @@ HEAD_EMBED = """
 <li><a href="/articles/mjestečko.html">about</a></li>
 </ul>
 </nav>
-</header>
 
 """
 
 NOTICE = """
 <footer>
-<a href="#top">Back to top ↑</a>
+<a href="#top">Take me home ↑</a>
 </footer>
+
 """
 
 TAIL_EMBED = """
@@ -54,5 +53,11 @@ WEEKDAYS = {
     6: "Sunday"
 }
 
+def mixin_tag(content: str, tag: str) -> str:
+    return f"""<{tag}>
+{content}</{tag}>
+
+"""
+
 def wrap_page(page: str) -> str:
-    return HEAD_EMBED + page + NOTICE + TAIL_EMBED
+    return HEAD_EMBED + mixin_tag(page, "main") + NOTICE + TAIL_EMBED