monoholic 1.0.2 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e11f908295905935c8e78e4fad697493dcabf9d619b40bc6dc985ed773716de1
-  data.tar.gz: 753565fa695f495b4fb4c1a759c2e79f288bd1c1e59d748e9b5ce399874f2b3e
+  metadata.gz: 82d9f14b72e9e12fbd2938a1e085e139cd3a8b1de2415914ee8aede7be2363b2
+  data.tar.gz: d440773f3a4ace2da0bc9906ef8ee4a847d557eee3e4967392d0d660f8b29e2f
 SHA512:
-  metadata.gz: f2668eede554cd8a6acc2388ae0ac02a31d63cd0ad87ac181c551f17763de8550ecd90b304374bc7da1acdf9d3a149e14f12fb439f1fcb548131dde297d27ae3
-  data.tar.gz: 52dffd2dd75633cbc1b8e0226bd702ca11ac3deeb766a5ec19ade6a9f0959a6a143d782aea8c63f8db0d46be308a4d659b16057b873ac983ca4da8bd3fef7760
+  metadata.gz: 97ed2791cf9e2ec59c07724bfb7804565a0b71a02ca625f41f5b5fcfacf042def622fdec81d74245790907d2eb0b9932523819decd1589a8137d0e582ab6694c
+  data.tar.gz: 4773401bdc07a85bf3a819edeef94c9d20354c60c9d806db2a66c604f51c59f637f2e40e34cf753fe2d364415102a4953b845190d4c9b675e483cbb73f682cb8

data/README.md

@@ -142,16 +142,16 @@ Monoholic ships with a default favicon. To use your own, replace the following f
 
 ### Stylesheet
 
-Monoholic's stylesheet is written in SCSS and compiled at build time. The source lives in `_sass/` and is imported from `assets/css/style.scss`. Compilation is handled by `jekyll-sass-converter`, which is declared as a runtime dependency in the theme's `gemspec` — so no extra setup is required when you add `gem "monoholic"` to your `Gemfile`.
+Monoholic's stylesheet is written in SCSS and compiled at build time. The source lives in `_sass/` and is loaded from `assets/css/style.scss`. Compilation is handled by `jekyll-sass-converter`, which is declared as a runtime dependency in the theme's `gemspec` — so no extra setup is required when you add `gem "monoholic"` to your `Gemfile`.
 
-If you want to override or extend the styles, the recommended approach is to add your own partials in your site's `_sass/` directory and import them **after** the theme's entry point:
+If you want to override or extend the styles, the recommended approach is to add your own partials in your site's `_sass/` directory and load them **after** the theme's entry point:
 
 ```scss
 ---
 ---
 
-@import "monoholic";
-@import "your-overrides";
+@use "monoholic";
+@use "your-overrides";
 ```
 
 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`.

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

@@ -4,7 +4,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   {%- if site.fediverse_creator -%}
-    <meta name="fediverse:creator" content="{{ site.fediverse_creator }}">
+    <meta
+      name="fediverse:creator"
+      content="{{ site.fediverse_creator | escape }}"
+    >
   {%- endif -%}
 
   {%- seo -%}

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>
+      </time>
       <a href="{{ post.url | relative_url }}">
         {{ post.title | escape }}
       </a>

data/_layouts/default.html

@@ -2,11 +2,13 @@
 <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">
+      {%- include header.html -%}
+      <main id="main" class="page-content">
         {{ content }}
-      </div>
-    </main>
+      </main>
+    </div>
 
     {%- unless site.theme_config.footer == false -%}
       {%- include footer.html -%}

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

@@ -59,6 +59,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/_sass/monoholic.scss

@@ -1,6 +1,6 @@
 // monoholic.scss
-@import "variables";
-@import "base";
-@import "content";
-@import "layout";
-@import "components";
+@use "variables";
+@use "base";
+@use "content";
+@use "layout";
+@use "components";

data/assets/css/style.scss

@@ -1,4 +1,4 @@
 ---
 ---
 
-@import "monoholic";
+@use "monoholic";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: monoholic
 version: !ruby/object:Gem::Version
-  version: 1.0.2
+  version: 1.1.0
 platform: ruby
 authors:
 - Agil Mammadov
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-08-30 00:00:00.000000000 Z
+date: 2026-09-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll