barebones theme added

.gitignore

@@ -1,2 +1,3 @@
 output/
 __pycache__/
+*.code-workspace

pelicanconf.py

@@ -2,12 +2,12 @@ AUTHOR = 'Tobias Radloff'
 SITENAME = 'Tobias Radloff'
 SITESUBTITLE = "Schriftsteller"
 SITETAG = "Schriftsteller"
-SITEURL = ""
+SITEURL = "tobias-radloff.de"
 
 PATH = "content"
+ARTICLE_PATHS = ["posts"]
 
 TIMEZONE = 'Europe/Berlin'
-
 DEFAULT_LANG = 'de'
 
 # Feed generation is usually not desired when developing
@@ -34,8 +34,14 @@ SOCIAL = (
 DEFAULT_PAGINATION = 5
 
 # Uncomment following line if you want document-relative URLs when developing
-# RELATIVE_URLS = True
+RELATIVE_URLS = True
-
 
 THEME = "theme/"
+DISPLAY_PAGES_ON_MENU = True
 
+
+###############################################################################
+#                         Self-defined Settings                               #
+###############################################################################
+
+STYLESHEET_FILES = ("pico.amber.css", "custom.css")

theme/static/css/custom.css

@@ -0,0 +1,61 @@
+/*
+ * Additional fonts
+ */
+/* LinBiolinum is sans-serif; see linuxlibertine.org */
+@font-face {
+  font-family: "LinBiolinum";
+  src: url("../fonts/LinLibertine/LinBiolinum_R.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "LinBiolinum";
+  font-weight: bold;
+  src: url("../fonts/LinLibertine/LinBiolinum_RB.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "LinBiolinum";
+  font-style: italic;
+  src: url("../fonts/LinLibertine/LinBiolinum_RI.otf") format("opentype");
+}
+
+/*
+ * Modified Pico settings 
+ */
+:root {
+  --pico-font-family-sans-serif: LinBiolinum, system-ui, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif,
+    var(--pico-font-family-emoji);
+}
+
+a {
+  --pico-text-decoration: none;
+}
+
+
+/*
+ * Regular CSS
+ */
+
+/* Jumbotron (site name and subtitle) */
+#jumbotron-title {
+  border-bottom: thin solid black;
+}
+
+#jumbotron {
+  #jumbotron-title h1 {
+    font-size: 3rem;
+    font-weight: 500;
+    margin-bottom: 10px;
+
+    a {
+      color: var(--pico-h1-color);
+    }
+  }
+
+  #jumbotron-subtitle h2 {
+    font-size: 2.2rem;
+    font-weight: 500;
+    margin-top: 10px;
+  }
+}

theme/static/css/pico.amber.css

@@ -217,7 +217,7 @@ details summary[role=button]:not(.outline)::after {
 }
 
 [aria-busy=true]:not(input, select, textarea):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
-  filter: brightness(0) invert(1);
+  filter: brightness(0) invert(0);
 }
 
 /**
@@ -227,19 +227,19 @@ details summary[role=button]:not(.outline)::after {
 :root:not([data-theme=dark]) {
   --pico-background-color: #fff;
   --pico-color: #373c44;
-  --pico-text-selection-color: rgba(244, 93, 44, 0.25);
+  --pico-text-selection-color: rgba(183, 136, 0, 0.25);
   --pico-muted-color: #646b79;
   --pico-muted-border-color: #e7eaf0;
-  --pico-primary: #bd3c13;
+  --pico-primary: #876400;
-  --pico-primary-background: #d24317;
+  --pico-primary-background: #ffbf00;
   --pico-primary-border: var(--pico-primary-background);
-  --pico-primary-underline: rgba(189, 60, 19, 0.5);
+  --pico-primary-underline: rgba(135, 100, 0, 0.5);
-  --pico-primary-hover: #942d0d;
+  --pico-primary-hover: #694d00;
-  --pico-primary-hover-background: #bd3c13;
+  --pico-primary-hover-background: #e8ae01;
   --pico-primary-hover-border: var(--pico-primary-hover-background);
   --pico-primary-hover-underline: var(--pico-primary-hover);
-  --pico-primary-focus: rgba(244, 93, 44, 0.5);
+  --pico-primary-focus: rgba(183, 136, 0, 0.5);
-  --pico-primary-inverse: #fff;
+  --pico-primary-inverse: #000;
   --pico-secondary: #5d6b89;
   --pico-secondary-background: #525f7a;
   --pico-secondary-border: var(--pico-secondary-background);
@@ -299,7 +299,7 @@ details summary[role=button]:not(.outline)::after {
   --pico-switch-background-color: #bfc7d9;
   --pico-switch-checked-background-color: var(--pico-primary-background);
   --pico-switch-color: #fff;
-  --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  --pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
   --pico-range-border-color: #dfe3eb;
   --pico-range-active-border-color: #bfc7d9;
   --pico-range-thumb-border-color: var(--pico-background-color);
@@ -347,19 +347,19 @@ details summary[role=button]:not(.outline)::after {
   :root:not([data-theme]) {
     --pico-background-color: #13171f;
     --pico-color: #c2c7d0;
-    --pico-text-selection-color: rgba(245, 107, 61, 0.1875);
+    --pico-text-selection-color: rgba(199, 148, 0, 0.1875);
     --pico-muted-color: #7b8495;
     --pico-muted-border-color: #202632;
-    --pico-primary: #f56b3d;
+    --pico-primary: #c79400;
-    --pico-primary-background: #d24317;
+    --pico-primary-background: #ffbf00;
     --pico-primary-border: var(--pico-primary-background);
-    --pico-primary-underline: rgba(245, 107, 61, 0.5);
+    --pico-primary-underline: rgba(199, 148, 0, 0.5);
-    --pico-primary-hover: #f8a283;
+    --pico-primary-hover: #e8ae01;
-    --pico-primary-hover-background: #e74b1a;
+    --pico-primary-hover-background: #fecc63;
     --pico-primary-hover-border: var(--pico-primary-hover-background);
     --pico-primary-hover-underline: var(--pico-primary-hover);
-    --pico-primary-focus: rgba(245, 107, 61, 0.375);
+    --pico-primary-focus: rgba(199, 148, 0, 0.375);
-    --pico-primary-inverse: #fff;
+    --pico-primary-inverse: #000;
     --pico-secondary: #969eaf;
     --pico-secondary-background: #525f7a;
     --pico-secondary-border: var(--pico-secondary-background);
@@ -419,7 +419,7 @@ details summary[role=button]:not(.outline)::after {
     --pico-switch-background-color: #333c4e;
     --pico-switch-checked-background-color: var(--pico-primary-background);
     --pico-switch-color: #fff;
-    --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    --pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
     --pico-range-border-color: #202632;
     --pico-range-active-border-color: #2a3140;
     --pico-range-thumb-border-color: var(--pico-background-color);
@@ -470,19 +470,19 @@ details summary[role=button]:not(.outline)::after {
 [data-theme=dark] {
   --pico-background-color: #13171f;
   --pico-color: #c2c7d0;
-  --pico-text-selection-color: rgba(245, 107, 61, 0.1875);
+  --pico-text-selection-color: rgba(199, 148, 0, 0.1875);
   --pico-muted-color: #7b8495;
   --pico-muted-border-color: #202632;
-  --pico-primary: #f56b3d;
+  --pico-primary: #c79400;
-  --pico-primary-background: #d24317;
+  --pico-primary-background: #ffbf00;
   --pico-primary-border: var(--pico-primary-background);
-  --pico-primary-underline: rgba(245, 107, 61, 0.5);
+  --pico-primary-underline: rgba(199, 148, 0, 0.5);
-  --pico-primary-hover: #f8a283;
+  --pico-primary-hover: #e8ae01;
-  --pico-primary-hover-background: #e74b1a;
+  --pico-primary-hover-background: #fecc63;
   --pico-primary-hover-border: var(--pico-primary-hover-background);
   --pico-primary-hover-underline: var(--pico-primary-hover);
-  --pico-primary-focus: rgba(245, 107, 61, 0.375);
+  --pico-primary-focus: rgba(199, 148, 0, 0.375);
-  --pico-primary-inverse: #fff;
+  --pico-primary-inverse: #000;
   --pico-secondary: #969eaf;
   --pico-secondary-background: #525f7a;
   --pico-secondary-border: var(--pico-secondary-background);
@@ -542,7 +542,7 @@ details summary[role=button]:not(.outline)::after {
   --pico-switch-background-color: #333c4e;
   --pico-switch-checked-background-color: var(--pico-primary-background);
   --pico-switch-color: #fff;
-  --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  --pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
   --pico-range-border-color: #202632;
   --pico-range-active-border-color: #2a3140;
   --pico-range-thumb-border-color: var(--pico-background-color);

theme/templates/base.html

@@ -1,19 +1,28 @@
 <!DOCTYPE html>
-<html lang="{{ DEFAULT_LANG }}">
+<html data-theme="light" lang="{{ DEFAULT_LANG }}">
-  <head>
+
+<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="color-scheme" content="light dark" />
-    <link rel="stylesheet" href="css/pico.orange.min.css" />
+  {% for css in STYLESHEET_FILES %}
-    <link rel="stylesheet" href="css/custom.css" />
+  <link rel="stylesheet" href="{{ SITEURL }}/theme/css/{{ css }}" />
+  {% endfor %}
   <title>
     {% block title %}{{ SITENAME }}{% if SITETAG %} - {{ SITETAG|escape }}{%
     endif %}{% endblock %}
   </title>
-  </head>
+</head>
-  <body>
+
-    <main class="container">
+<body>
-      <h1>Hello world!</h1>
+  <header>
-    </main>
+    <div id="jumbotron">{% include "includes/jumbotron.html" %}</div>
-  </body>
+    <nav id="navbar" class="container">{% include "includes/navbar.html" %}</nav>
+  </header>
+
+  <main class="container"></main>
+
+  <footer class="container">{% include "includes/footer.html" %}</footer>
+</body>
+
 </html>

theme/templates/includes/footer.html

@@ -0,0 +1 @@
+<p>Dies ist der Footer. Trololol.</p>

theme/templates/includes/jumbotron.html

@@ -0,0 +1,10 @@
+<div id="jumbotron-title">
+  <div class="container">
+    <h1><a href="{{ SITEURL }}/">{{ SITENAME }}</a></h1>
+  </div>
+</div>
+{% if SITESUBTITLE %}
+<div class="container" id="jumbotron-subtitle">
+  <h2>{{ SITESUBTITLE }}</h2>
+</div>
+{% endif %}

theme/templates/includes/navbar.html

@@ -0,0 +1,19 @@
+<ul>
+  <li><strong>Start</strong></li>
+</ul>
+<ul>
+  {% for title, link in MENUITEMS %}
+  <li><a href="{{ link }}">{{ title }}</a></li>
+  {% endfor %}
+  {% if DISPLAY_PAGES_ON_MENU %}
+  {% for item in pages %}
+  {% if page is defined and page.url == item.url %}
+  <li class="active">
+    {% else %}
+  <li>
+    {% endif %}
+    <a href="{{ item.link }}">{{ item.title }}</a>
+  </li>
+  {% endfor %}
+  {% endif %}
+</ul>