mobile fixes

README.md

@@ -1,16 +1,16 @@
-# Shadharon
+# Tiskifer Theme
 
-Simple blog theme powered by [Zola](getzola.org). See a live preview [here](https://syedzayyan.github.io/shadharon).
-
-> Name derived from the Bengali Word - সাধারণ which translates to "generic"
+Originaly forked from [Shadharon](https://syedzayyan.github.io/shadharon).
 
 <details open>
   <summary>Dark theme</summary>
+
   ![blog-dark](https://raw.githubusercontent.com/syedzayyan/shadharon/main/screenshot.png)
 </details>
 
 <details close>
   <summary>Light theme</summary>
+
   ![light-dark](https://raw.githubusercontent.com/syedzayyan/shadharon/main/screenshot-light.png)
 </details>
 
@@ -27,26 +27,41 @@ Simple blog theme powered by [Zola](getzola.org). See a live preview [here](http
 
 1. Download the theme
 ```
-git submodule add https://github.com/syedzayyan/shadharon themes/shadharon
+git submodule add https://git.sr.ht/~koehr/tiskifer-theme themes/tiskifer
 ```
 
-2. Add `theme = "shadharon"` to your `config.toml`
+2. Add `theme = "tiskifer"` to your `config.toml`
 
 3. Copy the example content
 
 ```
-cp themes/shadharon/content content
+cp -R themes/tiskifer/content/. content
 ```
-4. For customization refer to config.toml files, which has comments.
 
-5. For customizing the banner on the homepage the content/posts/_index.md needs modification. The desc variable under `extra`, specifically. You could delete this as well to remove banner. For an about page or any aditional page an .md file in the "content" directory will do.
+## Customization
+
+1. For customization refer to config.toml files, which has comments.
+
+2. For customizing the banner on the homepage the content/posts/_index.md needs modification. The desc variable under `extra`, specifically. You could delete this as well to remove banner. For an about page or any aditional page an .md file in the "content" directory will do.
+
+You can add stylesheets to override the theme:
+
+```toml
+[extra]
+stylesheets = [
+    "override.css",
+]
+```
 
-## Options
 These filenames are relative to the root of the site. In this example, the two CSS files would be in the `static` folder.
 
+
 ## References
 
-This theme is takes inspiration from 
-- [apollo](https://github.com/not-matthias/apollo).  
+This theme is a fork of
+  [Shadharon](https://syedzayyan.github.io/shadharon)
+
+which originally takes inspiration from
+- [apollo](https://github.com/not-matthias/apollo).
 - [Tania's Website](https://tania.dev/)
-- [Anpu Zola Theme](https://github.com/zbrox/anpu-zola-theme)
+- [Anpu Zola Theme](https://github.com/zbrox/anpu-zola-theme)

config.toml

@@ -1,8 +1,8 @@
 #The nexessary stuff/decessary stuff
 
-base_url = "https://syedzayyan.github.io/shadharon"
-title = "Heisenberg"
-description = "Walter is kind, caring and timid, but also demanding, calculating, and ruthless. His invented pseudonym, Heisenberg, becomes an alter ego – a fantasy for him to live out a love of power. Beneath both sides of his dual personality, he views the world in the rarefied scientific terms of chemistry."
+base_url = "https://tiskifer.dk"
+title = "Dan Tiskifer"
+description = "Dan Tiskifer writes stories, adventures and settings for tabletop roleplaying games, as well as leads regular rounds. His favorite system is Mothership."
 generate_feed = true
 compile_sass = true
 minify_html = true
@@ -16,7 +16,7 @@ highlight_code = true
 highlight_theme = "ayu-dark"
 
 [extra]
-toc = true
+toc = false
 use_cdn = false
 
 #Full path after the base URL required. So if you were to place it in "static" it would be "/favicon.ico"
@@ -27,9 +27,12 @@ headerImage = ""
 
 # The icon is display besides the menu text but is not necessary. It needs to be placed under "menu_icon" in the static "folder"
 menu = [
+    { name = "Campaign Log", url = "/tags/campaign", weight = 1, icon = "campaign.png" },
     { name = "Projects", url = "/projects", weight = 1, icon = "projects.png" },
+    { name = "About", url = "/about", weight = 2, icon = "avatar.png" },
 ]
 #The icons available can be found in "social_icons" in the "static" folder
 socials = [
-    { name = "github", url = "https://github.com/syedzayyan/", icon = "github" },
-]
+    { name = "fediverse", url = "https://m.k0r.in/@rpg", icon = "mastodon" },
+    { name = "discord", url = "https://discord.gg/fGqa8JCqZM", icon = "discord" },
+]

sass/main.scss

@@ -24,30 +24,29 @@
   --bg-0: #121212;
   --bg-1: rgba(255, 255, 255, 5%);
   --bg-2: rgba(23, 23, 23, 100%);
-  --primary-color: #ef5350;
+  --primary-color: #5053ef;
   --hover-color: white;
   --background-color:#29292e;
   --navbar-color:#222226;
   --secondary-color:#1b1b20;
   --highlights: #b35a5a;
-  --links: #449cf8;
+  --links: #7de1ff;
   --text-color: #f2f2f2;
   --code: #ef476f;
   --border-color: #111;
   --light-border-color: rgba(255, 255, 255, 0.1);
   --input-back: #4b4a4a;
   --input-color: #294797;
+  --meta-color: rgb(198, 197, 197);
 }
 
 [data-theme="light"] {
   --bg-0: #fff;
   --bg-1: #f2f2f2;
   --bg-2: #fefefe;
-  --primary-color: #ef5350;
   --hover-color: white;
   --background-color:#fff;
   --navbar-color:#e3e3e3;
-  --secondary-color:rgb(158, 158, 158);
   --text-color: #222226;
   --border-color: rgb(114, 114, 114);
   --light-border-color: rgba(255, 255, 255, 0.1);
@@ -55,6 +54,7 @@
   --input-color: #294797;
   --input-back: rgb(158, 158, 158);
   --input-color: #fbec48;
+  --meta-color: rgb(53, 53, 53);
 }
 
 html {
@@ -68,10 +68,10 @@ body{
 }
 .content {
   max-width: var(--max-layout-width);
-  margin: 0 auto;
+  margin: 3rem auto 1rem;
   padding: 0 24px;
   word-wrap: break-word;
-  min-height: 80vh;
+  min-height: calc(100vh - 10rem - 1px);
 }
 @media only screen and (max-width:1000px) {
   .content{
@@ -104,4 +104,4 @@ body{
   html {
     font-size: 18px;
   }
-}
+}

sass/parts/_footer.scss

@@ -1,19 +1,8 @@
 footer {
-    background-color: var(--navbar-color);
-    border-top: 1px solid var(--light-border-color);
-    padding: 3rem 0;
-    font-family: var(--post-font-family);
-    margin-top: 1rem;
-  }
-  
-  footer section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1.25rem;
-  }
-  footer nav {
-    display: flex;
-    gap: 0.25rem;
-    margin: 0 1rem;
-  }
+  height: 3rem;
+  border-top: 1px solid var(--light-border-color);
+  background-color: var(--navbar-color);
+  font-family: var(--post-font-family);
+  text-align: center;
+  line-height: 3;
+}

sass/parts/_header.scss

@@ -1,8 +1,8 @@
 .page-header {
+  margin: 4rem 0px 1rem 0px;
   font-size: 3em;
   line-height: 100%;
   font-family: var(--header-font);
-  margin: 4rem 0px 1rem 0px;
 }
 
 .centered-header {
@@ -16,8 +16,9 @@
   font-size: 1em;
 }
 
-header {
+body > header {
   width: 100%;
+  height: 3rem;
   background-color: var(--navbar-color);
 }
 .navbar{
@@ -27,9 +28,12 @@ header {
   flex-wrap: wrap;
   justify-content: space-between;
   padding: 1em 0;
-  margin:0 auto;
+  margin: 0 auto;
 }
 @media only screen and (max-width:1000px) {
+  body > header {
+    height: 6rem;
+  }
   .navbar{
     max-width: var(--normal-layout-width);
   }
@@ -53,13 +57,14 @@ header {
 .nav-links{
   text-decoration: none;
   color: var(--text-color);
-  padding:5px;
-  border-radius:5px;
-  transition:100ms;
+  padding: 5px;
+  border-radius: 5px;
+  transition: transform .2s ease-out, background .3s ease, color .3s ease;
 }
 .nav-links:hover {
   color: var(--links);
-  background-color:var(--secondary-color);
+  background-color: var(--secondary-color);
+  transform: translateY(.5em);
 }
 header .main {
   display: flex;
@@ -73,12 +78,15 @@ header .main {
   /* Otherwise header and menu is too close on small screens*/
   margin-bottom: 10px;
 }
-.nav-navs img{
+.nav-navs img {
   border: none;
 }
-.home-title{
+.home-title {
+  display: inline-block;
+  padding: .25em 1em;
   font-size: 1.6em;
-  color:#ff3344;
+  color: var(--links);
+  background-color: var(--secondary-color);
 }
 .socials {
   /* flex-child */
@@ -90,6 +98,7 @@ header .main {
   justify-content: flex-start;
   align-items: flex-end;
   gap: 6px;
+  height: 2em;
 }
 
 .social {
@@ -98,20 +107,22 @@ header .main {
   padding: 2px;
 }
 
-.social>img {
+.social > img {
   border: unset;
   width: 24px;
   height: 24px;
-
 }
 
 .meta {
-  color: #999;
+  color: var(--meta-color);
   letter-spacing: -0.5px;
 }
 
+[data-theme="dark"] .social > img {
+  filter: invert(1);
+}
 @media (prefers-color-scheme: dark) {
-  .social>img {
+  .social > img {
     filter: invert(1);
   }
-}
+}

sass/parts/_misc.scss

@@ -39,25 +39,20 @@ blockquote {
   padding-left: 1em;
 }
 
-a{
-  color:var(--text-color);
+a {
+  color: var(--text-color);
   text-decoration-color: var(--links);
-  font-weight:1000;
+  font-weight: 600;
 }
 
 a:hover {
   background-color: var(--primary-color);
   color: var(--hover-color);
 }
-
-time {
-  color: grey;
-}
-
 /* Remove post list padding */
 @media screen and (max-width: 600px) {
   .list>ul {
     margin: 0;
     padding: 0;
   }
-}
+}

templates/404.html

@@ -1,8 +1,8 @@
 {% extends "page.html" %}
 
 {% block main_content %}
-    <main class="centered-header">
-        {{ post_macros::page_header(title="404")}}
-        <span>You have reached somewhere I do not know, or I knew and I have hidden it to preserve my sanity</span>
-    </main>
-{% endblock main_content %}
+  <main class="centered-header">
+    <h2>404</h2>
+    <span>You have reached somewhere I do not know, or I knew and I have hidden it to preserve my sanity</span>
+  </main>
+{% endblock main_content %}

templates/base.html

@@ -1,7 +1,7 @@
 {% import "macros/macros.html" as post_macros %}
 
 <!DOCTYPE html>
-<html>
+<html lang = "en">
 {% include "partials/header.html" %}
 
 <body>

templates/cards.html

@@ -5,7 +5,7 @@
         {% set section = get_section(path=section.extra.section_path) %}
     {% endif -%}
 
-    {{ post_macros::page_header(title=section.title) }}
+    <h2>{{ section.title }}</h2>
 
     <main>
         {%- if paginator %}
@@ -32,4 +32,4 @@
             {% endif %}
         </ul>
     {% endif %}
-{% endblock main_content %}
+{% endblock main_content %}

templates/macros/macros.html

@@ -56,13 +56,6 @@
 {% endif -%}
 {% endmacro tags %}
 
-{% macro page_header(title) %}
-<h2>
-    {{ title }}
-</h2>
-{% endmacro content %}
-
-
 {% macro page_desc(desc) %}
 <div id="banner-container-home">
     <div id="home-banner-text">
@@ -72,85 +65,82 @@
         <p id="banner-home-subtitle">{{ desc.text }}</p>
     </div>
     <div class="image-container-home">
-        <img class="banner-home-img" src="{{ desc.img }}" />
+        <img alt = "the owner" class="banner-home-img" src="{{ desc.img }}" />
     </div>
 </div>
 {% endmacro content %}
 
 {% macro content(page) %}
 <main>
-    <article>
-        <div class="title">
-            {#<h1 class="title">{{ page.title }}</h1>#}
-            {{ post_macros::page_header(title=page.title) }}
-
-            <div class="meta">
-                {% if page.date %}
-                Posted on <time>{{ page.date | date(format="%Y-%m-%d") }}</time>
-                {% endif %}
-
-                {% if page.draft %}
-                <span class="draft-label">DRAFT</span>
-                {% endif %}
-
-                {% if page.taxonomies and page.taxonomies.tags %}
-                <div class="post-tags">
-                    <nav class="nav tags">
-                        {% for tag in page.taxonomies.tags %}
-                        🏷: <a href={{ get_taxonomy_url(kind='tags' , name=tag) | safe }}>{{ tag }}</a>
-                        {% endfor %}
-                    </nav>
-                </div>
-                {% endif %}
-                ||<span> {{ page.reading_time }} minute read</span>
-            </div>
-        </div>
-
-        {% if page.extra.tldr %}
-        <div class="tldr">
-            <strong>tl;dr:</strong>
-            {{ page.extra.tldr }}
+  <article>
+    <header class="title">
+      <h1>{{ page.title }}</h1>
+
+      <div class="meta">
+        {% if page.taxonomies and page.taxonomies.tags %}
+        <div class="post-tags">
+          <nav class="nav tags">
+            {% for tag in page.taxonomies.tags %}
+            🏷: <a href={{ get_taxonomy_url(kind='tags' , name=tag) | safe }}>{{ tag }}</a>
+            {% endfor %}
+          </nav>
         </div>
         {% endif %}
-
-        {# Optional table of contents #}
-        {% if config.extra.toc | default(value=false) %}
-        {% if page.toc %}
-        <h1>Table of Contents</h1>
+        <span>
+          {% if page.draft %}
+          <span class="draft-label">DRAFT</span>
+          {% endif %}
+          {{ page.word_count }} words ({{ page.reading_time }} minute read)
+          {% if page.date %}posted on <time>{{ page.date | date(format="%Y-%m-%d") }}</time>{% endif %}
+        </span>
+      </div>
+    </header>
+
+    {% if page.extra.tldr %}
+    <div class="tldr">
+      <strong>tl;dr:</strong>
+      {{ page.extra.tldr }}
+    </div>
+    {% endif %}
+
+    {# Optional table of contents #}
+    {% if config.extra.toc | default(value=false) %}
+    {% if page.toc %}
+    <h1>Table of Contents</h1>
+    <ul>
+      {% for h1 in page.toc %}
+      <li>
+        <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
+        {% if h1.children %}
         <ul>
-            {% for h1 in page.toc %}
+          {% for h2 in h1.children %}
+          <li>
+            <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
+          </li>
+
+          {% if h2.children %}
+          <ul>
+            {% for h3 in h2.children %}
             <li>
-                <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
-                {% if h1.children %}
-                <ul>
-                    {% for h2 in h1.children %}
-                    <li>
-                        <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
-                    </li>
-
-                    {% if h2.children %}
-                    <ul>
-                        {% for h3 in h2.children %}
-                        <li>
-                            <a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
-                        </li>
-                        {% endfor %}
-                    </ul>
-                    {% endif %}
-                    {% endfor %}
-                </ul>
-                {% endif %}
+              <a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
             </li>
             {% endfor %}
+          </ul>
+          {% endif %}
+          {% endfor %}
         </ul>
         {% endif %}
-        {% endif %}
-
-        <section class="body">
-            {{ page.content | safe }}
-        </section>
+      </li>
+      {% endfor %}
+    </ul>
+    {% endif %}
+    {% endif %}
+
+    <section class="body">
+      {{ page.content | safe }}
+    </section>
 
-    </article>
+  </article>
 </main>
 {% endmacro content %}
 
@@ -211,4 +201,4 @@
     </li>
     {% endfor %}
 </ul>
-{% endmacro list_title %}
+{% endmacro list_title %}

templates/partials/footer.html

@@ -1,10 +1,5 @@
 <footer>
-    <section>
-        <nav>
-            <span className="desktop-only">Made by 
-                <a href = "https://syedzayyan.com/" rel="noopener noreferrer" target="_blank">SZM</a> and powered by 
-                <a href = "https://getzola.org/" rel="noopener noreferrer" target="_blank">Zola</a></span>
-        </nav>
-    </section>
-    <script src="{{ get_url(path='js/main.js', trailing_slash=false) | safe }}"/></script>
-</footer>
+  ©2023 Dan Tiskifer | Powered by
+  <a href = "https://getzola.org/" rel="noopener noreferrer" target="_blank">Zola</a>
+  <script src="{{ get_url(path='js/main.js', trailing_slash=false) | safe }}"/></script>
+</footer>

templates/partials/header.html

@@ -60,4 +60,6 @@
     <meta property="og:description" content="{{ config.description }}">
     <meta property="og:site_name" content="{{ config.title }}">
 
+    <meta http-equiv="Content-Security-Policy" 
+    content="default-src 'self' ws://127.0.0.1:1024/; img-src 'self' https://*; script-src 'self'; style-src 'self'; font-src 'self'" />
 </head>

templates/partials/nav.html

@@ -21,7 +21,7 @@
         <nav class="socials nav-navs">
             {%- if config.extra.socials %}
             {% for social in config.extra.socials %}
-            <a rel="noopener noreferrer" target="_blank" class="nav-links" href="{{ social.url }}" class="social">
+            <a rel="noopener noreferrer" target="_blank" class="nav-links social" href="{{ social.url }}">
                 <img alt={{ social.name }} title={{ social.name }} src="/social_icons/{{ social.icon }}.svg">
             </a>
             {% endfor %}
@@ -30,8 +30,8 @@
                 <div class="background"></div>
                 <input type="checkbox" id="themeswitch">
                 <div class="switch">
-                    <img class="moon" src="/menu_icon/moon.png">
-                    <img class="sun" src="/menu_icon/sun.png">
+                    <img alt = "theme switch to dark" class="moon" src="/menu_icon/moon.png">
+                    <img alt = "theme switch to light" class="sun" src="/menu_icon/sun.png">
                 </div>
             </label>
         </nav>

templates/section.html

@@ -9,7 +9,7 @@
     {{ post_macros::page_desc(desc=section.extra.desc) }}
 {% endif -%}
 
-{{ post_macros::page_header(title=section.title) }}
+<h2>{{ section.title }}</h2>
 
 <main class="list">
     {%- if paginator %}
@@ -37,4 +37,4 @@
     {% endif %}
 </ul>
 {% endif %}
-{% endblock main_content %}
+{% endblock main_content %}

theme.toml

@@ -0,0 +1,20 @@
+name = "tiskifer"
+description = "Simple blog theme powered by Zola"
+license = "MIT"
+homepage = "https://git.sr.ht/~koehr/tiskifer-theme"
+# The minimum version of Zola required
+min_version = "0.4.0"
+# An optional live demo URL
+demo = "https://tiskifer.dk"
+
+# Any variable there can be overridden in the end user `config.toml`
+# You don't need to prefix variables by the theme name but as this will
+# be merged with user data, some kind of prefix or nesting is preferable
+# Use snake_casing to be consistent with the rest of Zola
+[extra]
+
+# The theme author info: you!
+[author]
+name = "Dan Tiskifer"
+homepage = "https://tiskifer.dk"
+