monoholic 1.0.2 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e11f908295905935c8e78e4fad697493dcabf9d619b40bc6dc985ed773716de1
-  data.tar.gz: 753565fa695f495b4fb4c1a759c2e79f288bd1c1e59d748e9b5ce399874f2b3e
+  metadata.gz: 7ee37aea1bd4ecf60b33567d582c4363961f49364bd2176f42e8b0de8aaa12ce
+  data.tar.gz: a00389e09ed54a0d268694fc002614cd0eca0820555d6f888d4442d22e353a34
 SHA512:
-  metadata.gz: f2668eede554cd8a6acc2388ae0ac02a31d63cd0ad87ac181c551f17763de8550ecd90b304374bc7da1acdf9d3a149e14f12fb439f1fcb548131dde297d27ae3
-  data.tar.gz: 52dffd2dd75633cbc1b8e0226bd702ca11ac3deeb766a5ec19ade6a9f0959a6a143d782aea8c63f8db0d46be308a4d659b16057b873ac983ca4da8bd3fef7760
+  metadata.gz: 47a614360018402b6e397fb4e8f6d16cb267919176a479dbb3c6ac58c68d4c605af839e84379fc84eca2ffb36ab77ab77c546521cd5e77cb3366ac1e561fa868
+  data.tar.gz: cd0c4518e8d0e39ddfe00c56a8311c63d375c5ee749313e15be1ad4a29316ec36321fd4219b2900b7475b9287a5e57811e8f2c685a4f3d2fbfeec85a8ffde0be

data/README.md

@@ -6,7 +6,7 @@
 [![Gem Version](https://img.shields.io/gem/v/monoholic?color=black)](https://rubygems.org/gems/monoholic)
 [![GitHub Pages](https://img.shields.io/badge/GitHub_Pages-ready-black?logo=github&logoColor=white)](https://stiermid.github.io/monoholic)
 
-A minimal, monochrome dark Jekyll theme🧪
+A minimal, monochrome dark Jekyll theme
 
 ## Features
 
@@ -38,14 +38,27 @@ theme: monoholic
 $ bundle install
 ```
 
-### Manual Installation
+### Manual Installation (GitHub Pages)
 
 If you're running Jekyll without RubyGems or prefer to use GitHub Pages remote themes, update your `_config.yml`:
 
 ```yaml
 remote_theme: stiermid/monoholic
+plugins:
+  - jekyll-remote-theme
+  - jekyll-feed
+  - jekyll-seo-tag
 ```
 
+`jekyll-remote-theme` fetches the theme on Pages; `jekyll-feed` and `jekyll-seo-tag` are required by the theme's `head.html` (`{% feed_meta %}`, `{% seo %}`). For project sites, also set `baseurl` (e.g. `/your-repo`) and `url` (e.g. `https://<user>.github.io`). To pin a release: `remote_theme: stiermid/monoholic@v1.2.0`.
+
+> **Pages note:** Native GitHub Pages builds run Jekyll 3.9. The `monoholic` RubyGem requires Jekyll 4.4, so on GitHub Pages use `remote_theme` only (not `theme:` + `gem "monoholic"`). SCSS intentionally uses `@import` for 3.9 compatibility.
+
+| Install method                                           | Jekyll        | How                         |
+| -------------------------------------------------------- | ------------- | --------------------------- |
+| RubyGems (`theme: monoholic`)                            | 4.4           | local / CI / non-Pages host |
+| GitHub Pages (`remote_theme: stiermid/monoholic@v1.2.0`) | 3.9 via Pages | Pages only                  |
+
 Or, simply fork this repository, adapt the `_config.yml` according to your needs, and you're good to go!
 
 ## Usage
@@ -60,8 +73,8 @@ Override the default settings in your `_config.yml`. Key theme configuration opt
 
 ```yaml
 theme_config:
-  back: ".." # Text for backlink on post pages
-  date_format: "%Y%m%d" # Date format for post metadata
+  back: "Back" # Text for backlink on post pages
+  date_format: "%Y-%m-%d" # Date format for post metadata
   monochrome_images: true # Apply grayscale filter to images (default: true)
   footer: true # Show/hide site footer (default: true)
 ```
@@ -77,7 +90,7 @@ fediverse_creator: "@username@social.example.com"
 Setting `fediverse_creator` tag appends following tag to the site's header:
 
 ```html
-<meta name="fediverse:creator" content="@username@social.example.com">
+<meta name="fediverse:creator" content="@username@social.example.com" />
 ```
 
 [See Also](https://docs.joinmastodon.org/user/profile/#attribution)
@@ -154,6 +167,8 @@ If you want to override or extend the styles, the recommended approach is to add
 @import "your-overrides";
 ```
 
+Note: the theme uses `@import` (not `@use`) to stay compatible with GitHub Pages' Sass stack.
+
 To override CSS custom properties (colors, spacing, fonts) without touching SCSS, redeclare the variables in your own stylesheet — they are exposed under `:root` in `_sass/_variables.scss`.
 
 ### Per-Page JavaScript

data/_includes/footer.html

@@ -1,10 +1,11 @@
 <footer class="site-footer h-card">
-  <data class="u-url" href="{{ "/" | relative_url }}"></data>
   <div class="wrapper">
     <div class="footer-col">
       <p>
         &copy; {{ 'now' | date: '%Y' }}
-        {{ site.title | upcase }}
+        <a class="u-url" href="{{ '/' | relative_url }}">
+          {{- site.title | upcase | escape -}}
+        </a>
       </p>
     </div>
   </div>

data/_includes/head.html

@@ -2,9 +2,14 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="theme-color" content="#030303">
+  <meta name="color-scheme" content="dark">
 
   {%- if site.fediverse_creator -%}
-    <meta name="fediverse:creator" content="{{ site.fediverse_creator }}">
+    <meta
+      name="fediverse:creator"
+      content="{{ site.fediverse_creator | escape }}"
+    >
   {%- endif -%}
 
   {%- seo -%}
@@ -36,6 +41,7 @@
   >
   <link
     rel="apple-touch-icon"
+    sizes="180x180"
     href="{{ "/assets/apple-touch-icon.png" | relative_url }}"
   >
   {%- feed_meta -%}

data/_includes/header.html

@@ -1,5 +1,15 @@
-<header class="site-header" role="banner">
-  <a class="site-title" rel="author" href="{{ "/" | relative_url }}">
-    {{ site.title | escape }}
-  </a>
+<header class="site-header">
+  {%- if page.layout == "home" -%}
+    <h1 class="site-title">
+      <a rel="author" href="{{ "/" | relative_url }}">
+        {{ site.title | escape }}
+      </a>
+    </h1>
+  {%- else -%}
+    <p class="site-title">
+      <a rel="author" href="{{ "/" | relative_url }}">
+        {{ site.title | escape }}
+      </a>
+    </p>
+  {%- endif -%}
 </header>

data/_includes/menu.html

@@ -1,6 +1,69 @@
+{%- assign _level = include.level | default: 2 | plus: 0 -%}
+{%- if _level < 2 -%}
+  {%- assign _level = 2 -%}
+{%- elsif _level > 6 -%}
+  {%- assign _level = 6 -%}
+{%- endif -%}
+{%- assign _next_level = _level | plus: 1 -%}
+{%- if _next_level > 6 -%}
+  {%- assign _next_level = 6 -%}
+{%- endif -%}
 {%- for item in include.collection -%}
-  <section>
-    <h2 class="section-title">## {{ item.title }}</h2>
+  {%- assign _title_stripped = item.title | strip -%}
+  {%- assign _has_title = true -%}
+  {%- if item.title == nil or _title_stripped == empty -%}
+    {%- assign _has_title = false -%}
+  {%- endif -%}
+  {%- assign _title_slug = item.title | slugify -%}
+  {%- if _title_slug == empty or _title_slug == nil -%}
+    {%- assign _title_slug = 'section' -%}
+  {%- endif -%}
+  {%- if include.parent_id -%}
+    {%- assign _heading_id = include.parent_id
+      | append: '-'
+      | append: _title_slug
+      | append: '-'
+      | append: forloop.index
+    -%}
+  {%- elsif include.id_prefix -%}
+    {%- assign _heading_id = include.id_prefix
+      | append: '-'
+      | append: _title_slug
+      | append: '-'
+      | append: forloop.index
+    -%}
+  {%- else -%}
+    {%- assign _heading_id = _title_slug
+      | append: '-'
+      | append: forloop.index
+    -%}
+  {%- endif -%}
+  {%- if _has_title -%}
+    <section aria-labelledby="{{ _heading_id }}">
+      {%- if _level == 3 -%}
+        <h3 class="section-title" id="{{ _heading_id }}">
+          {{ item.title | escape }}
+        </h3>
+      {%- elsif _level == 4 -%}
+        <h4 class="section-title" id="{{ _heading_id }}">
+          {{ item.title | escape }}
+        </h4>
+      {%- elsif _level == 5 -%}
+        <h5 class="section-title" id="{{ _heading_id }}">
+          {{ item.title | escape }}
+        </h5>
+      {%- elsif _level >= 6 -%}
+        <h6 class="section-title" id="{{ _heading_id }}">
+          {{ item.title | escape }}
+        </h6>
+      {%- else -%}
+        <h2 class="section-title" id="{{ _heading_id }}">
+          {{ item.title | escape }}
+        </h2>
+      {%- endif -%}
+  {%- else -%}
+    <section>
+  {%- endif -%}
     {%- if item.content_file -%}
       {%- assign _menu_page = site.pages
         | where: 'path', item.content_file
@@ -13,8 +76,12 @@
       {{ item.content }}
     {%- endif -%}
     {%- if item.post_list -%}{%- include post_list.html -%}{%- endif -%}
+    {%- if item.entries -%}
+      {%- include menu.html
+        collection=item.entries
+        level=_next_level
+        parent_id=_heading_id
+      -%}
+    {%- endif -%}
   </section>
-  {%- if item.entries -%}
-    {%- include menu.html collection = item.entries -%}
-  {%- endif -%}
 {%- endfor -%}

data/_includes/post_list.html

@@ -1,12 +1,15 @@
 <ul class="post-list">
   {%- for post in site.posts -%}
     <li>
-      <span class="post-meta">
+      <time
+        class="post-meta dt-published"
+        datetime="{{ post.date | date_to_xmlschema }}"
+      >
         {% assign _date_fmt = site.theme_config.date_format
           | default: '%Y-%m-%d'
         %}
-        * {{ post.date | date: _date_fmt }}
-      </span>
+        {{ post.date | date: _date_fmt }}
+      </time>
       <a href="{{ post.url | relative_url }}">
         {{ post.title | escape }}
       </a>

data/_layouts/default.html

@@ -2,11 +2,15 @@
 <html lang="{{ page.lang | default: "en" }}">
   {%- include head.html -%}
   <body class="{% if site.theme_config.monochrome_images != false %}images-monochrome{% endif %}">
-    <main class="page-content" aria-label="Content">
-      <div class="wrapper">
+    <a class="skip-link" href="#main">Skip to content</a>
+    <div class="wrapper">
+      {%- unless page.layout == 'post' -%}
+        {%- include header.html -%}
+      {%- endunless -%}
+      <main id="main" class="page-content">
         {{ content }}
-      </div>
-    </main>
+      </main>
+    </div>
 
     {%- unless site.theme_config.footer == false -%}
       {%- include footer.html -%}
@@ -15,7 +19,7 @@
     {% if page.custom_js %}
       {% for js_file in page.custom_js %}
         <script
-          type="text/javascript"
+          defer
           src="{{ '/assets/js/' | append: js_file | append: '.js' | relative_url }}"
         ></script>
       {% endfor %}

data/_layouts/home.html

@@ -1,5 +1,6 @@
 ---
 layout: default
 ---
-{%- include header.html -%}
-{%- include menu.html collection=site.data.menu.entries -%}
+<nav aria-label="Site sections">
+  {%- include menu.html collection=site.data.menu.entries level=2 -%}
+</nav>

data/_layouts/post.html

@@ -4,16 +4,19 @@ layout: default
 <article>
   <div class="post-header">
     <a href="{{ '/' | relative_url }}">
-      {{ site.theme_config.back | default: 'Back' }}
+      {{ site.theme_config.back | default: 'Back' | escape }}
     </a>
-    <span class="post-meta">
+    <time
+      class="post-meta dt-published"
+      datetime="{{ page.date | date_to_xmlschema }}"
+    >
       {% assign _date_fmt = site.theme_config.date_format
         | default: '%Y-%m-%d'
       %}
       {{ page.date | date: _date_fmt }}
-    </span>
+    </time>
   </div>
-  <h1>{{ page.title }}</h1>
+  <h1>{{ page.title | escape }}</h1>
 
   {{ content }}
 </article>

data/_sass/_base.scss

@@ -33,8 +33,30 @@ a {
   text-decoration: underline;
 }
 
+:focus-visible {
+  outline: 2px solid var(--text-color);
+  outline-offset: 2px;
+}
+
+.skip-link {
+  position: absolute;
+  top: -1000px;
+  left: var(--space-md);
+  z-index: 100;
+  background-color: var(--text-color);
+  color: var(--bg-color);
+  padding: var(--space-sm) var(--space-md);
+  text-decoration: none;
+}
+
+.skip-link:focus,
+.skip-link:focus-visible {
+  top: var(--space-sm);
+}
+
 img {
   max-width: 100%;
+  height: auto;
   display: block;
   margin: 0 auto;
 }
@@ -42,3 +64,13 @@ img {
 .images-monochrome img {
   filter: grayscale(1);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

data/_sass/_components.scss

@@ -9,6 +9,13 @@
     align-items: baseline;
     gap: var(--space-md);
     flex-wrap: wrap; // Mobile safety
+
+    &::before {
+      content: "*";
+      color: var(--meta-color);
+      // Keep marker snug to the date (flex `gap` would push it too far).
+      margin-right: calc(1ch - var(--space-md));
+    }
   }
 
   .post-meta {
@@ -59,6 +66,10 @@
   font-size: var(--font-size-sm);
   color: var(--meta-color);
 
+  a {
+    color: inherit;
+  }
+
   .footer-col {
     display: flex;
     justify-content: space-between;

data/_sass/_content.scss

@@ -1,5 +1,5 @@
 .highlighter-rouge,
-highlight {
+.highlight {
   background-color: var(--text-color);
   color: var(--bg-color);
 }

data/_sass/_layout.scss

@@ -11,6 +11,18 @@
     font-size: var(--font-size-site-title);
     font-weight: 700;
     letter-spacing: 0.5px;
+    margin: 0;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    a:hover,
+    a:focus-visible {
+      text-decoration: underline;
+      text-underline-offset: 3px;
+    }
   }
 }
 
@@ -18,8 +30,17 @@
   font-size: var(--font-size-section);
   font-weight: 700;
   margin-bottom: var(--space-lg);
+
+  &::before {
+    content: "## ";
+    color: var(--meta-color);
+  }
 }
 
 section {
   margin-bottom: var(--space-xl);
 }
+
+section section:last-child {
+  margin-bottom: 0;
+}

data/_sass/_variables.scss

@@ -3,7 +3,7 @@
   --bg-color: #030303;
   --text-color: #e0e0e0;
   --meta-color: #888888;
-  --border-color: #222222;
+  --border-color: #666666;
 
   // Typography
   --font-family: "JetBrains Mono", monospace;

data/assets/favicon.svg

@@ -1,58 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="32"
-   height="32"
-   viewBox="0 0 32 32"
-   version="1.1"
-   id="svg1"
-   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
-   sodipodi:docname="icon.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview1"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:document-units="px"
-     inkscape:zoom="16"
-     inkscape:cx="8.125"
-     inkscape:cy="19.59375"
-     inkscape:window-width="1918"
-     inkscape:window-height="1052"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs1" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <path
-       style="font-size:48px;font-family:Monospace;-inkscape-font-specification:Monospace"
-       d="M 4.4799998,27.981593 V 4.4984075 h 3.744 c 0,0 0.72,1.36 1.488,0.624 0.8000002,-0.736 1.8080002,-1.104 3.0240002,-1.104 1.152,0 2.128,0.336 2.928,1.008 0.8,0.672 2.496,0.672 3.264,0 0.8,-0.672 1.808,-1.008 3.024,-1.008 1.696,0 3.04,0.64 4.032,1.92 1.024,1.248 1.536,2.88 1.536,4.8960005 V 27.981593 H 23.488 V 10.786408 c 0,-1.0560005 -0.256,-1.8880005 -0.768,-2.4960005 -0.512,-0.64 -1.216,-0.96 -2.112,-0.96 -0.864,0 -1.552,0.304 -2.064,0.912 -0.512,0.608 -0.768,1.44 -0.768,2.4960005 V 27.981593 H 14.224 V 10.786408 c 0,-1.0560005 -0.256,-1.8880005 -0.768,-2.4960005 -0.512,-0.64 -1.2,-0.96 -2.064,-0.96 -0.896,0 -1.6000002,0.304 -2.1120002,0.912 -0.512,0.608 -0.768,1.44 -0.768,2.4960005 v 17.243185 z"
-       id="text2"
-       aria-label="m"
-       sodipodi:nodetypes="ccccsscscsccscsssccscssscc" />
-    <text
-       xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:48px;font-family:Monospace;-inkscape-font-specification:Monospace;writing-mode:lr-tb;direction:ltr;fill:#000000"
-       x="-171.11984"
-       y="24.041632"
-       id="text3"><tspan
-         sodipodi:role="line"
-         id="tspan2"
-         x="-171.11984"
-         y="24.041632" /></text>
-  </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img"><title>m</title><path fill="#fff" d="M 4.4799998,27.981593 V 4.4984075 h 3.744 c 0,0 0.72,1.36 1.488,0.624 0.8000002,-0.736 1.8080002,-1.104 3.0240002,-1.104 1.152,0 2.128,0.336 2.928,1.008 0.8,0.672 2.496,0.672 3.264,0 0.8,-0.672 1.808,-1.008 3.024,-1.008 1.696,0 3.04,0.64 4.032,1.92 1.024,1.248 1.536,2.88 1.536,4.8960005 V 27.981593 H 23.488 V 10.786408 c 0,-1.0560005 -0.256,-1.8880005 -0.768,-2.4960005 -0.512,-0.64 -1.216,-0.96 -2.112,-0.96 -0.864,0 -1.552,0.304 -2.064,0.912 -0.512,0.608 -0.768,1.44 -0.768,2.4960005 V 27.981593 H 14.224 V 10.786408 c 0,-1.0560005 -0.256,-1.8880005 -0.768,-2.4960005 -0.512,-0.64 -1.2,-0.96 -2.064,-0.96 -0.896,0 -1.6000002,0.304 -2.1120002,0.912 -0.512,0.608 -0.768,1.44 -0.768,2.4960005 v 17.243185 z"/></svg>

data/assets/js/.keep

@@ -0,0 +1,5 @@
+# Placeholder to keep assets/js/ in version control.
+# Per-page scripts referenced via `custom_js` front matter live here,
+# e.g. `assets/js/my-script.js` loaded with:
+#   custom_js:
+#     - my-script

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: monoholic
 version: !ruby/object:Gem::Version
-  version: 1.0.2
+  version: 1.2.0
 platform: ruby
 authors:
 - Agil Mammadov
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-08-30 00:00:00.000000000 Z
+date: 2026-09-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -93,10 +93,9 @@ files:
 - _sass/monoholic.scss
 - assets/apple-touch-icon.png
 - assets/css/style.scss
-- assets/favicon-16x16.png
-- assets/favicon-32x32.png
 - assets/favicon.ico
 - assets/favicon.svg
+- assets/js/.keep
 homepage: https://github.com/stiermid/monoholic
 licenses:
 - GPL-3.0-only