Add some better logic to the resizing, add a better contacts page. sidebar hiding still in the works

config.toml

@@ -3,6 +3,7 @@ compile_sass = true
 build_search_index = true
 
 taxonomies = [
+  {name = "authors", feed = true, rss = true },
   {name = "tags", feed = true, rss = true },
 ]
 

content/art/_index.md

@@ -0,0 +1,6 @@
++++
+title = "art and doodles"
+sort_by = "date"
+template = "blog.html"
+page_template = "blog-page.html"
++++

content/blog/about_me.md

@@ -1,10 +1,10 @@
 +++
-authors = [ "aubun" ]
+title = "about me, the aubun creature"
-title = "about me"
 date = 2025-07-02
 
 description = "a page all about me!"
 
 [taxonomies]
+authors = [ "aubun" ]
 tags = [ "info", "personal" ]
 +++

content/blog/contact.md

@@ -1,10 +1,26 @@
 +++
-authors = [ "aubun" ]
+title = "contact info and socials"
-title = "contact info"
 date = 2025-07-02
 
-description = "a page with all my contact details"
+description = "all my contact details"
 
 [taxonomies]
+authors = [ "aubun" ]
 tags = [ "info", "personal" ]
 +++
+
+i'm not on too many platforms,  
+but the best way to reach me today is email and matrix!
+
+#### main platforms
+- **✉️ email:** [bun@nixfox.ca](mailto:bun@nixfox.ca)
+- **💬 matrix:** [@bun:nixfox.ca](https://matrix.to/#/@bun:nixfox.ca)
+
+here are my other socials,  
+which i'm active on from time to time.
+
+#### social platforms
+- **💬 discord:** [viceebun](https://discordapp.com/users/1324248157307146290)
+- **🖼️ instagram:** [viceebun](https://www.instagram.com/viceebun)
+- **🐦 twitter:** [viceebun](https://x.com/viceebun)
+- **🎵 spotify:** [bun](https://open.spotify.com/user/31vdhyhqi3kw7f6n6hgddu44mm5a)

content/blog/defense.md

@@ -1,11 +1,11 @@
 +++
-authors = [ "aubun" ]
 title = "defense / priorities"
 date = 2025-06-26
 
 description = "a little rant about my own defense mechanisms"
 
 [taxonomies]
+authors = [ "aubun" ]
 tags = [ "rants", "personal" ]
 +++
 

content/nixfox/julywebsite.md

@@ -1,11 +1,11 @@
 +++
-authors = [ "aubun" ]
 title = "new website!"
 date = 2025-07-02
 
 description = "rebuilding the nixfox site"
 
 [taxonomies]
+authors = [ "aubun" ]
 tags = [ "software", "nixfox" ]
 +++
 

sass/sidebar.scss

@@ -22,6 +22,8 @@
   padding: 0;
   font-size: 1.6em;
 
+  transition: 0.3s;
+
   background-color: var(--sb-color);
 }
 
@@ -75,7 +77,6 @@
   display: inline-block;
 }
 
-
 .personal { color:#fc3f5b; }
 .nixfox { color:#2abafc; }
 

sass/style.scss

@@ -61,21 +61,43 @@ h1 {
   font-size: 16px;
 }
 
+.sidebar-toggle-button {
+  position: fixed;
+  bottom: 1rem;
+  right: .8rem;
+  z-index: 9;
+  width: 25px;
+  height: 25px;
+
+  cursor: crosshair;
+  z-index: 2;
+
+  font-size: 18px;
+}
+
 @media (max-width: 980px) {
   html, body {
     margin: 0;
-    height: 100%;
+    padding: 1.5em;
   }
 
   #main {
     width: 70%;
     min-height: 100%;
-    padding-left: 7em;
+    padding: 0;
     top: 0;
   }
 
   .container {
-    max-width: 30em;
+    max-width: 35em;
+  }
+
+  [data-theme="light"] {
+    --bg-color: #EFF1F5;
+  }
+  
+  [data-theme="dark"] {
+    --bg-color: #1F2223;
   }
 }
 

static/darkmode.js

@@ -11,7 +11,7 @@ function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark })
   return "light";
 }
 
-function updateButton({ buttonEl, isDark }) {
+function updateThemeButton({ buttonEl, isDark }) {
   const newCta = isDark ? "toggle light" : "toggle dark";
   buttonEl.setAttribute("aria-label", newCta);
   buttonEl.innerText = newCta;
@@ -22,20 +22,20 @@ function updateThemeOnHtmlEl({ theme }) {
 }
 
 
-const button = document.querySelector("[data-theme-toggle]");
+const themeToggleButton = document.querySelector("[data-theme-toggle]");
 const localStorageTheme = localStorage.getItem("theme");
 const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
 
 let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark });
 
-updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
+updateThemeButton({ buttonEl: themeToggleButton, isDark: currentThemeSetting === "dark" });
 updateThemeOnHtmlEl({ theme: currentThemeSetting });
 
-button.addEventListener("click", (event) => {
+themeToggleButton.addEventListener("click", () => {
   const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
 
   localStorage.setItem("theme", newTheme);
-  updateButton({ buttonEl: button, isDark: newTheme === "dark" });
+  updateThemeButton({ buttonEl: themeToggleButton, isDark: newTheme === "dark" });
   updateThemeOnHtmlEl({ theme: newTheme });
 
   currentThemeSetting = newTheme;

templates/authors/list.html

@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+
+{%- block title -%}
+{{ title_macros::title(page_title="Tags", main_title=config.title) }}
+{%- endblock -%}
+
+{% block content %}
+  <div class="post">
+    <h1 class="post-title">all tags</h1>
+
+    <ul>
+      {% for term in terms %}
+      <li class="tag-list">
+        <a href="{{ term.permalink | safe }}">
+          {{ term.name }} ({{ term.pages | length }} post{{ term.pages | length | pluralize }})
+        </a>
+      </li>
+      {% endfor %}
+    </ul>
+  </div>
+{% endblock content %}

templates/authors/single.html

@@ -0,0 +1,18 @@
+{% extends "base.html" %}
+
+{% block content %}
+  <h2>
+    author: {{ term.name }}
+    ({{ term.pages | length }} post{{ term.pages | length | pluralize }})
+  </h2>
+
+  <div class="page-intro">
+    <p class="larger">view all <a href="/authors">authors</a>.</p>
+  </div>
+
+  <ul class="postlist">
+    {% for page in term.pages | sort(attribute="date") | reverse %}
+      {% include "blog-entry.html" %}
+    {% endfor %}
+  </ul>
+{% endblock content %}

templates/base.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="light">
+<html lang="en" data-theme="light" data-sidebar="shown">
   <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <meta charset="UTF-8">
@@ -12,36 +12,7 @@
   </head>
   
   <body>
-    <div id="sidebar" class="column">
+    {% include "sidebar.html" %}
-      <a href="/" class="sb_img"><img src="https://art.pixilart.com/sr2a62fc9ed2173.png" alt="teto creature"></a>
-      
-      <button type="button" class="theme-toggle-button" data-theme-toggle aria-label="Toggle to dark"></button>
-      <script src="/darkmode.js"></script>
-
-      <div class="sb_header personal"><b>personal</b></div>
-      <a href="/blog" class="sb_link pers">📰 blog</a><br>
-      <a href="/images" class="sb_link pers">🖼️ images</a><br>
-      <a href="/hardware" class="sb_link pers">🖥️ hardware</a><br>
-      <a href="/software" class="sb_link pers">💾 software</a><br>
-      <a href="/tags" class="sb_link pers">🔎 all tags</a><br>
-      
-      <br>
-  
-      <div class="sb_header nixfox"><b>nixfox</b></div>
-      <a href="/nixfox" class="sb_link pers">📰 nixfox</a><br>
-      <a href="https://uptime.nixfox.ca/status/nixfox" class="sb_link fox">⬆️ uptime</a><br>
-      <a href="https://mail.nixfox.ca" class="sb_link fox">📧 email</a><br>
-      <a href="https://files.nixfox.ca" class="sb_link fox">☁️ nextcloud</a><br>
-      <a href="https://pass.nixfox.ca" class="sb_link fox">🔒 vaultwarden</a><br>
-      <a href="https://git.nixfox.ca" class="sb_link fox">🗄️ forgejo</a><br>
-      <a href="https://hedgedoc.nixfox.ca" class="sb_link fox">🗒️ hedgedoc</a><br>
-      <a href="https://jelly.nixfox.ca" class="sb_link fox">📼 jellyfin</a><br>
-      <a href="https://live.nixfox.ca" class="sb_link fox">📹 owncast</a><br>
-      <a href="https://radio.nixfox.ca" class="sb_link fox">📻 icecast</a><br> 
-      <a href="https://chat.nixfox.ca" class="sb_link fox">💬 matrix</a><br>
-      <a href="https://tor.nixfox.ca" class="sb_link fox">🗃️ transmission</a><br>
-      <a href="https://git.nixfox.ca/Bun/nixfox-reborn.git" class="sb_link fox">💽 page code</a><br>
-    </div>
 
     <div id="main" class="column">
       <div class="container">

templates/blog-entry.html

@@ -0,0 +1,15 @@
+<li class="postlist-item">
+  <a href="{{ page.permalink | safe }}">{{ page.title }}</a>
+  <br>
+  {{ page.description }}
+  <br>
+  authors: {%- for tag in page.taxonomies.authors | sort | unique(case_sensitive=false) %}
+    <a class="post-author" href="{{ get_taxonomy_url(kind='authors', name=tag) | safe }}">{{ tag }}</a>
+  {% endfor -%}
+  <br>
+  written: {{ page.date }}
+  <br>
+  tags: {%- for tag in page.taxonomies.tags | sort | unique(case_sensitive=false) %}
+    <a class="post-tag" href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}">#{{ tag }}</a>
+  {% endfor -%}
+</li>

templates/blog-page.html

@@ -1,14 +1,14 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1 class="title">
+  <h1 class="title">
     {{ page.title }}
-</h1>
+  </h1>
-<p class="subtitle"><strong>
+  <p class="subtitle"><strong>
     {{ page.date }},
     tags: {%- for tag in page.taxonomies.tags | sort | unique(case_sensitive=false) %}
       <a class="post-tag" href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}">#{{ tag }}</a>
     {% endfor -%}
-</strong></p>
+  </strong></p>
-{{ page.content | safe }}
+  {{ page.content | safe }}
 {% endblock content %}

templates/blog.html

@@ -1,27 +1,17 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1 class="title">
+  <h1 class="title">
     {{ section.title }}
-</h1>
+  </h1>
   
-<p class="larger">sort by <a href="/tags">tags</a>.</p>
+  <p class="larger">sort by <a href="/tags">tags</a>.</p>
   
-<ul>
+  <ul>
     <!-- If you are using pagination, section.pages will be empty.
          You need to use the paginator object -->  
     {% for page in section.pages %}
-  <li>
+      {% include "blog-entry.html" %}
-    <a href="{{ page.permalink | safe }}">{{ page.title }}</a> - by {{ page.authors }}
-    <br>
-    {{ page.description }}
-    <br>
-    written: {{ page.date }}
-    <br>
-    tags: {%- for tag in page.taxonomies.tags | sort | unique(case_sensitive=false) %}
-      <a class="post-tag" href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}">#{{ tag }}</a>
-    {% endfor -%}
-  </li>
     {% endfor %}
-</ul>
+  </ul>
 {% endblock content %}

templates/generic.html

@@ -1,8 +1,7 @@
 {% extends "base.html" %}
-
+  {% block content %}
-{% block content %}
+    <h1 class="title">
-<h1 class="title">
       {{ section.title }}
-</h1>
+    </h1>
-{{ section.content | safe }}
+  {{ section.content | safe }}
 {% endblock content %}

templates/sidebar.html

@@ -0,0 +1,31 @@
+<div id="sidebar" class="column">
+  <a href="/" class="sb_img"><img src="https://art.pixilart.com/sr2a62fc9ed2173.png" alt="teto creature"></a>
+  
+  <button type="button" class="theme-toggle-button" data-theme-toggle aria-label="Toggle to dark"></button>
+  <script src="/darkmode.js"></script>
+
+  <div class="sb_header personal"><b>personal</b></div>
+  <a href="/blog" class="sb_link pers">📰 blog</a><br>
+  <a href="/art" class="sb_link pers">🎨 art</a><br>
+  <a href="/images" class="sb_link pers">🖼️ images</a><br>
+  <a href="/hardware" class="sb_link pers">🖥️ hardware</a><br>
+  <a href="/software" class="sb_link pers">💾 software</a><br>
+  <a href="/tags" class="sb_link pers">🔎 all tags</a><br>
+  
+  <br>
+
+  <div class="sb_header nixfox"><b>nixfox</b></div>
+  <a href="/nixfox" class="sb_link pers">📰 news</a><br>
+  <a href="https://uptime.nixfox.ca/status/nixfox" class="sb_link fox">⬆️ uptime</a><br>
+  <a href="https://mail.nixfox.ca" class="sb_link fox">📧 email</a><br>
+  <a href="https://files.nixfox.ca" class="sb_link fox">☁️ nextcloud</a><br>
+  <a href="https://pass.nixfox.ca" class="sb_link fox">🔒 vaultwarden</a><br>
+  <a href="https://git.nixfox.ca" class="sb_link fox">🗄️ forgejo</a><br>
+  <a href="https://hedgedoc.nixfox.ca" class="sb_link fox">🗒️ hedgedoc</a><br>
+  <a href="https://jelly.nixfox.ca" class="sb_link fox">📼 jellyfin</a><br>
+  <a href="https://live.nixfox.ca" class="sb_link fox">📹 owncast</a><br>
+  <a href="https://radio.nixfox.ca" class="sb_link fox">📻 icecast</a><br> 
+  <a href="https://chat.nixfox.ca" class="sb_link fox">💬 matrix</a><br>
+  <a href="https://tor.nixfox.ca" class="sb_link fox">🗃️ transmission</a><br>
+  <a href="https://git.nixfox.ca/Bun/nixfox-reborn.git" class="sb_link fox">💽 page code</a><br>
+</div>

templates/tags/list.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {%- block title -%}
-{{ title_macros::title(page_title="Tags", main_title=config.title) }}
+  {{ title_macros::title(page_title="Tags", main_title=config.title) }}
 {%- endblock -%}
 
 {% block content %}

templates/tags/single.html

@@ -12,17 +12,7 @@
 
   <ul class="postlist">
     {% for page in term.pages | sort(attribute="date") | reverse %}
-    <li class="postlist-item">
+      {% include "blog-entry.html" %}
-      <a href="{{ page.permalink | safe }}">{{ page.title }}</a> - by {{ page.authors }}
-      <br>
-      {{ page.description }}
-      <br>
-      written: {{ page.date }}
-      <br>
-      tags: {%- for tag in page.taxonomies.tags | sort | unique(case_sensitive=false) %}
-	<a class="post-tag" href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}">#{{ tag }}</a>
-      {% endfor -%}
-    </li>
     {% endfor %}
   </ul>
 {% endblock content %}