integrate theme with acefox.life

.gitignore

@@ -1,5 +1,6 @@
 config/_default/params.toml
 public/*
+resources/
 .hugo_build.lock
 .*.sw?
 .DS_Store

assets/css/custom.css

@@ -0,0 +1,26 @@
+.theme--dark .body,
+.theme--dark .post,
+.theme--dark .nav__list {
+	background-color: #2C1438;
+}
+.theme--dark .post__content a:link,
+.theme--dark .post__content a:visited {
+	color: #BAB1ED;
+}
+.theme--dark a:hover,
+.theme--dark .post__content a:hover {
+	color: hsl(249, 62%, 61%);
+}
+@font-face {
+	font-family: 'Inclusive Sans';
+	src: url(/font/InclusiveSans-Regular.ttf);
+}
+@font-face {
+	font-family: 'Inclusive Sans';
+	src: url('/font/InclusiveSans-Italic.ttf');
+	font-style: italic;
+}
+body {
+	font-family: 'Inclusive Sans', sans-serif;
+	font-size: 16pt;
+}

config/_default/config.toml

@@ -1,9 +1,45 @@
 baseURL = 'https://vulpine.house'
 languageCode = 'en-us'
-title = 'The Fridge'
+title = "A Vulpine House"
-author = 'Síle Ekaterin Liszka'
+theme = 'anatole'
-theme = 'clean'
 disableKinds = ['RSS', 'sitemap']
 
-[Params]
+[params]
-Fediverse = ['https://social.treehouse.systems/@VulpineAmethyst']
+title = "A Vulpine House"
+author = 'Síle Ekaterin Liszka'
+info = 'Ace arctic fox kit'
+description = "A vulpine system's den"
+displayMode = 'dark'
+profilePicture = 'img/logo.png'
+disableThemeSwitcher = true
+singleDateFormat = '2006 Jan 2'
+indexDateFormat = '2006 Jan 2'
+listDateFormat = '2 Jan'
+customCss = ["css/custom.css"]
+contentRatio = 0.65
+mainSections = []
+
+[[params.socialIcons]]
+title = 'Mastodon'
+icon = 'fab fa-mastodon'
+url = 'https://social.treehouse.systems/@VulpineAmethyst'
+
+[[params.socialIcons]]
+title = 'Gitea'
+icon = 'fab fa-git'
+url = 'https://gitea.treehouse.systems/VulpineAmethyst'
+
+[[params.socialIcons]]
+title = 'Discord'
+icon = 'fab fa-discord'
+url = 'https://discordapp.com/users/165317317138317313'
+
+[[params.socialIcons]]
+title = 'Tumblr'
+icon = 'fab fa-tumblr'
+url = 'https://vulpineamethyst.tumblr.com/'
+
+[[params.socialIcons]]
+title = 'AO3'
+icon = 'fas fa-book-open-reader'
+url = 'https://archiveofourown.org/users/VulpineAmethyst/'

config/_default/menu.toml

@@ -2,53 +2,62 @@
 identifier = 'home'
 name       = 'Home'
 url        = '/'
-weight     = 1
+weight     = 10
 
 [[main]]
 identifier = 'blog'
 name       = 'Blog'
 url        = 'https://acefox.life'
-weight     = 2
+weight     = 20
 
 [[main]]
 identifier = 'about'
 name       = 'About'
 url        = '/about'
-weight     = 3
+weight     = 30
+
+[[main]]
+identifier = 'projects'
+name       = 'Projects'
+weight     = 40
 
 [[main]]
 identifier = 'programs'
 name       = 'Programs'
 url        = '/programs'
-weight     = 4
+weight     = 41
+parent     = 'projects'
 
 [[main]]
 identifier = 'translations'
 name       = 'Translations'
 url        = '/translations'
-weight     = 5
+weight     = 42
+parent     = 'projects'
 
 [[main]]
 identifier = 'recipes'
 name       = 'Recipes'
 url        = '/recipe'
-weight     = 6
+weight     = 43
+parent     = 'projects'
 
 [[main]]
 identifier = 'commissions'
 name       = 'Commissions'
 url        = '/commissions'
-weight     = 7
+weight     = 44
+parent     = 'projects'
 
 [[main]]
 identifier = 'system'
 name       = 'System Reference'
 url        = '/system'
-weight     = 8
+weight     = 50
 
 [[main]]
 identifier = 'links'
 name       = 'Links'
 url        = '/links'
-weight     = 9
+weight     = 60
 

content/_index.md

@@ -1,7 +1,7 @@
 ---
 title: Home
-description: A deafblind, autistic/ADHD fox family's den.
+description: A deafblind, autistic/ADHD fox system's den.
 ---
 Welcome! This site is a handy collection of links to my various accounts, as well as information about us and our endeavors.
 
-We are primarily nonverbal; we prefer to communicate in text unless verbal communication is required. We are deafblind, which is maintained in all of our facets; we use hearing aids and a white cane where possible.
+We are primarily non-speaking; we prefer to communicate in text unless verbal communication is required. We are deafblind, which is maintained in all of our facets. We wear hearing aids, and we are a power chair user. If we need to walk, which we are capable of doing for short distances, we navigate with a white cane.

content/programs/py-xbc.md

@@ -0,0 +1,7 @@
+---
+title: py-xbc
+---
+py-xbc is a Python library for reading and writing documents written in the 'eXtra Boot Configuration' format used by the Linux kernel. It can be found on [PyPI] and the [Treehouse Gitea].
+
+[PyPI]: https://pypi.org/project/py-xbc/
+[Treehouse Gitea]: https://gitea.treehouse.systems/VulpineAmethyst/py-xbc

layouts/_default/list.html

@@ -0,0 +1,102 @@
+{{ define "main" }}
+  <div
+    class="post {{ with .Site.Params.doNotLoadAnimations }}
+      .
+    {{ else }}
+      animated fadeInDown
+    {{ end }}"
+  >
+    {{ if .Params.thumbnail }}
+      <div class="post__thumbnail-wrapper">
+        <img class="post__thumbnail" src="{{ .Params.thumbnail | relURL }}" alt="Thumbnail image" />
+      </div>
+    {{ end }}
+    <div class="post__content">
+      <h1>{{ title .Title }}</h1>
+      {{ if or (eq .Type "post") (eq .Type .Site.Params.postSectionName) }}
+        <ul class="post__meta">
+          <li class="post__meta-item">
+            <em class="fas fa-calendar-day post__meta-icon"></em>
+            <span class="post__meta-text"
+              >{{ if isset .Site.Params "singledateformat" }}
+                {{ if .Site.Params.localizedDates }}
+                  {{ time.Format .Site.Params.singleDateFormat .Date }}
+                {{ else }}
+                  {{ .Date.Format .Site.Params.singleDateFormat }}
+                {{ end }}
+
+              {{ else }}
+                {{ if .Site.Params.localizedDates }}
+                  {{ time.Format "Mon, Jan 2, 2006" .Date }}
+                {{ else }}
+                  {{ .Date.Format "Mon, Jan 2, 2006" }}
+                {{ end }}
+
+              {{ end }}
+            </span>
+          </li>
+          <li class="post__meta-item">
+            <em class="fas fa-stopwatch post__meta-icon"></em>
+            <span class="post__meta-text">{{ i18n "reading_time" .ReadingTime }}</span>
+          </li>
+        </ul>
+      {{ end }}
+
+      {{- partial "expirationnote.html" . -}}
+
+      {{- if (eq .Params.toc true) -}}
+        {{- partial "toc.html" . -}}
+      {{- end -}}
+
+      {{ .Content }}
+
+        <ul>{{ range .Pages.ByTitle }}
+            <li><a href="{{.Permalink}}">{{.Title}}</a></li>{{ end }}
+        </ul>
+
+    </div>
+    <div class="post__footer">
+      {{ with .Page.Params.Categories }}
+        {{ partial "taxonomy/categories.html" . }}
+      {{ end }}
+
+      {{ with .Page.Params.Tags }}
+        {{ partial "taxonomy/tags.html" . }}
+      {{ end }}
+    </div>
+
+    {{ if and (or (eq .Type "post") (eq .Type .Site.Params.postSectionName)) (ne .Page.Params.disableComments true) }}
+      {{- if .Site.DisqusShortname -}}
+        <div id="comment">
+          <h2>{{ i18n "comments" }}</h2>
+          {{ template "_internal/disqus.html" . }}
+        </div>
+      {{- end -}}
+      {{- if .Site.Params.utterances.repo -}}
+        <div id="comment">
+          <h2>{{ i18n "comments" }}</h2>
+          {{ partial "comments/utterances.html" . }}
+        </div>
+      {{- end -}}
+      {{- if .Site.Params.giscus.repo -}}
+        <div id="comment">
+          <h2>{{ i18n "comments" }}</h2>
+          {{ partial "comments/giscus.html" . }}
+        </div>
+      {{- end -}}
+      {{- if .Site.Params.CommentoURL -}}
+        <div id="comment">
+          <h2>{{ i18n "comments" }}</h2>
+          {{ partial "comments/commento.html" . }}
+        </div>
+      {{- end -}}
+      {{- if .Site.Params.gitalk.repo -}}
+        <div id="comment">
+          <h2>{{ i18n "comments" }}</h2>
+          {{ partial "comments/gitalk.html" . }}
+        </div>
+      {{- end -}}
+
+    {{ end }}
+  </div>
+{{ end }}

layouts/shortcodes/fftq-footer.html

@@ -0,0 +1 @@
+</table>

layouts/shortcodes/fftq-header.html

@@ -0,0 +1,4 @@
+<table>
+	<thead><tr>
+		<th>Lang</th><th>Text</th>
+	</tr></thead>

layouts/shortcodes/fftq.html

@@ -0,0 +1,9 @@
+<tr>
+	<td colspan="2">{{ .Get "name" }} ({{ .Get "jpname" }})</td>
+</tr><tr>
+	<th>Japanese</th><td>{{ .Get "japanese" }} {{ .Get "jpname" }}!</td>
+</tr><tr>
+	<th>Romaji</th><td>{{ .Get "romaji" }}</td>
+</tr><tr>
+	<th>Síle</th><td>{{ .Get "sheila" }} {{ .Get "name" }}!</td>
+</tr>

layouts/shortcodes/me.html

@@ -0,0 +1 @@
+<a href="{{ .Get "href" }}" rel="me">{{ .Get "text" }}</a>

themes/clean/layouts/_default/baseof.html

@@ -16,11 +16,7 @@
     </head>
     <body>
         <header>
-            <nav>
+            {{ partial "nav.html" . }}
-                <ul>{{ range .Site.Menus.main }}
-                    <li><a href="{{ .URL | relURL }}">{{ .Name }}</a></li>{{ end }}
-                </ul>
-            </nav>
         </header>
         {{ block "main" . }} {{ end }}
         <hr/>

themes/clean/layouts/partials/nav.html

@@ -0,0 +1,17 @@
+<script src="/js/clicky-menus.js"></script>
+<nav id="navigation">
+	<ul class="clicky-menu no-js">
+		<li><a href="/">Home</a></li>
+		<li><a href="/about">About</a></li>
+		<li><a href="https://acefox.life" rel="me">Blog</a></li>
+		<li><a href="#">Projects</a>
+			<ul>
+				<li><a href="/commissions">Art</a></li>
+				<li><a href="/programs">Programs</a></li>
+				<li><a href="/recipe">Recipes</a></li>
+				<li><a href="/translations">Translations</a></li>
+			</ul></li>
+		<li><a href="/system">System Reference</a></li>
+		<li><a href="/links">Links</a></li>
+	</ul>
+</nav>

themes/clean/static/css/clean.css

@@ -2,6 +2,9 @@ html {
     font-family: var(--font);
 }
 article, hr, footer {
-    max-width: 40em;
+    width: 48em;
-    margin: 0 auto;
+    margin-left: var(--char-width);
+}
+article p {
+    text-indent: calc(var(--char-width) * 5);
 }

themes/clean/static/css/common.css

@@ -2,6 +2,8 @@
 :root {
     --font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
     --font-size: 14pt;
+    /* for whatever reason, this is how wide a character is. 1em is wider. */
+    --char-width: calc(3em / 5);
     
     /* colours */
     --normal-red:    #B00;
@@ -21,24 +23,28 @@
     --bright-black:  #555;
     --bright-white:  #FFF;
 
-    --terminal-fg: var(--normal-white);
+    --accent-main: #BAB1ED;
-    --terminal-bg: var(--normal-black);
+    --accent-second: #639;
-    --link-normal: var(--normal-cyan);
+    
-    --link-active: var(--normal-red);
+    --terminal-fg: #B5ABBF;
-    --link-visited: var(--normal-cyan);
+    --terminal-bg: #2C1438;
+    --link-normal: var(--accent-main);
+    --link-active: var(--accent-second);
     --bold: var(--bright-white);
-    --italic: var(--normal-purple);
+    --italic: var(--normal-cyan);
 }
-body {
+html {
     background-color: var(--terminal-bg);
     color: var(--terminal-fg);
     font-size: var(--font-size);
+}
+body {
     margin: 0;
 }
 h1, h2, h3, h4, h5, h6 {
     font-size: var(--font-size);
     font-weight: normal;
-    color: var(--bright-white);
+    color: var(--accent-main);
 }
 b, strong {
     color: var(--bold);
@@ -49,55 +55,78 @@ i, em {
     font-style: normal;
 }
 a {
-    text-decoration: underline;
+    text-decoration: none;
 }
-a:link {
+a:link, a:visited {
     color: var(--link-normal);
 }
 a:hover, a:active, a:visited:hover {
-    color: var(--link-active);
+    color: var(--terminal-bg);
+    background-color: var(--terminal-fg);
 }
-a:visited {
+nav {
-    color: var(--link-visited);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 1ex;
 }
 nav a {
     text-decoration: none;
 }
-nav a:link, nav a:visited, nav {
+nav button {
-    color: var(--normal-black);
+    font-family: var(--font);
-    background-color: var(--normal-white);
+    font-size: var(--font-size);
+    border: none;
+    padding: 0;
 }
-nav a:hover, nav a:active, nav a:visited:hover {
+nav a:link, nav a:visited, nav, nav button {
     color: var(--bright-white);
-    background-color: var(--normal-black);
+    background-color: var(--accent-second);
+}
+nav a:hover, nav a:active, nav a:visited:hover, nav button:hover {
+    color: var(--accent-second);
+    background-color: var(--normal-white);
 }
 nav > ul {
     list-style-type: none;
     margin: 0;
-    padding-left: 0;
+    padding: 0;
 }
 nav li {
     display: inline-block;
-    margin-left: 1em;
+    margin: 0 var(--char-width);
-    margin-right: 1em;
-    padding-left: 0;
-    padding-right: 0;
-}
-article, hr, footer {
-    margin: 0 auto;
     padding: 0;
-    margin-top: 2ex;
+}
-    margin-bottom: 2ex;
+nav li > ul {
-    margin-left: 2em;
+    position: absolute;
-    margin-right: 2em;
+    padding: 12px 0;
+    background-color: var(--accent-second);
+    visibility: hidden;
+}
+nav li > ul li {
+    display: block;
+}
+nav li:hover.no-js > ul {
+    visibility: visible;
+}
+nav li:focus-within.no-js > ul { /* separate from above for older browsers. */
+    visibility: visible;
+}
+/* JavaScript menus */
+nav ul[aria-hidden="false"] {
+    visibility: visible;
+}
+article {
+    margin-top: 2.5em;
 }
 article ul {
     list-style-type: '- ';
     padding-left: 0;
-    margin-left: 3em;
+    margin-left: calc(var(--char-width) * 5);
 }
 article ol {
-    padding-left: 3em;
+    padding-left: calc(var(--char-width) * 5);
 }
 article li {
     margin-bottom: 2ex;

themes/clean/static/js/clicky-menus.js

@@ -0,0 +1,166 @@
+/**
+ * Object for creating click-triggered navigation submenus
+ *
+ * Thanks for the inspiration:
+ * 		- https://www.lottejackson.com/learning/a-reusable-javascript-toggle-pattern
+ * 		- https://codepen.io/lottejackson/pen/yObQRM
+ *
+ * from https://github.com/mrwweb/clicky-menus
+ */
+
+( function() {
+	'use strict';
+
+	const ClickyMenus = function( menu ) {
+		// DOM element(s)
+		const container = menu.parentElement;
+		let currentMenuItem,
+			i,
+			len;
+
+		this.init = function() {
+			menuSetup();
+			document.addEventListener( 'click', closeOpenMenu );
+		};
+
+		/*===================================================
+		=            Menu Open / Close Functions            =
+		===================================================*/
+		function toggleOnMenuClick( e ) {
+			const button = e.currentTarget;
+
+			// close open menu if there is one
+			if ( currentMenuItem && button !== currentMenuItem ) {
+				toggleSubmenu( currentMenuItem );
+			}
+
+			toggleSubmenu( button );
+		}
+
+		function toggleSubmenu( button ) {
+			const submenu = document.getElementById( button.getAttribute( 'aria-controls' ) );
+
+			if ( 'true' === button.getAttribute( 'aria-expanded' ) ) {
+				button.setAttribute( 'aria-expanded', false );
+				submenu.setAttribute( 'aria-hidden', true );
+				currentMenuItem = false;
+			} else {
+				button.setAttribute( 'aria-expanded', true );
+				submenu.setAttribute( 'aria-hidden', false );
+				preventOffScreenSubmenu( submenu );
+				currentMenuItem = button;
+			}
+		}
+
+		function preventOffScreenSubmenu( submenu ) {
+			const 	screenWidth =	window.innerWidth ||
+									document.documentElement.clientWidth ||
+									document.body.clientWidth,
+				parent = submenu.offsetParent,
+				menuLeftEdge = parent.getBoundingClientRect().left,
+				menuRightEdge = menuLeftEdge + submenu.offsetWidth;
+
+			if ( menuRightEdge + 32 > screenWidth ) { // adding 32 so it's not too close
+				submenu.classList.add( 'sub-menu--right' );
+			}
+		}
+
+		function closeOnEscKey( e ) {
+			if (	27 === e.keyCode ) {
+				// we're in a submenu item
+				if ( null !== e.target.closest( 'ul[aria-hidden="false"]' ) ) {
+					currentMenuItem.focus();
+					toggleSubmenu( currentMenuItem );
+
+				// we're on a parent item
+				} else if ( 'true' === e.target.getAttribute( 'aria-expanded' ) ) {
+					toggleSubmenu( currentMenuItem );
+				}
+			}
+		}
+
+		function closeOpenMenu( e ) {
+			if ( currentMenuItem && ! e.target.closest( '#' + container.id ) ) {
+				toggleSubmenu( currentMenuItem );
+			}
+		}
+
+		/*===========================================================
+		=            Modify Menu Markup & Bind Listeners            =
+		=============================================================*/
+		function menuSetup() {
+			menu.classList.remove( 'no-js' );
+			const submenuSelector = 'clickySubmenuSelector' in menu.dataset ? menu.dataset.clickySubmenuSelector : 'ul';
+
+			menu.querySelectorAll( submenuSelector ).forEach( ( submenu ) => {
+				const menuItem = submenu.parentElement;
+
+				if ( 'undefined' !== typeof submenu ) {
+					const button = convertLinkToButton( menuItem );
+
+					setUpAria( submenu, button );
+
+					// bind event listener to button
+					button.addEventListener( 'click', toggleOnMenuClick );
+					menu.addEventListener( 'keyup', closeOnEscKey );
+				}
+			} );
+		}
+
+		/**
+		 * Why do this? See https://justmarkup.com/articles/2019-01-21-the-link-to-button-enhancement/
+		 *
+		 * @param {HTMLElement} menuItem An element representing a link to be converted to a button
+		 */
+		function convertLinkToButton( menuItem ) {
+			const 	link = menuItem.getElementsByTagName( 'a' )[ 0 ],
+				linkHTML = link.innerHTML,
+				linkAtts = link.attributes,
+				button = document.createElement( 'button' );
+
+			if ( null !== link ) {
+				// copy button attributes and content from link
+				button.innerHTML = linkHTML.trim();
+				for ( i = 0, len = linkAtts.length; i < len; i++ ) {
+					const attr = linkAtts[ i ];
+					if ( 'href' !== attr.name ) {
+						button.setAttribute( attr.name, attr.value );
+					}
+				}
+
+				menuItem.replaceChild( button, link );
+			}
+
+			return button;
+		}
+
+		function setUpAria( submenu, button ) {
+			const submenuId = submenu.getAttribute( 'id' );
+
+			let id;
+			if ( null === submenuId ) {
+				id = button.textContent.trim().replace( /\s+/g, '-' ).toLowerCase() + '-submenu';
+			} else {
+				id = submenuId + '-submenu';
+			}
+
+			// set button ARIA
+			button.setAttribute( 'aria-controls', id );
+			button.setAttribute( 'aria-expanded', false );
+
+			// set submenu ARIA
+			submenu.setAttribute( 'id', id );
+			submenu.setAttribute( 'aria-hidden', true );
+		}
+	};
+
+	/* Create a ClickMenus object and initiate menu for any menu with .clicky-menu class */
+	document.addEventListener( 'DOMContentLoaded', function() {
+		const menus = document.querySelectorAll( '.clicky-menu' );
+
+		menus.forEach( ( menu ) => {
+			const clickyMenu = new ClickyMenus( menu );
+			clickyMenu.init();
+		} );
+	} );
+}() );