hima 1.0.4 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ef3c9fc04bf537d4864657fcadc4d80dcaf0f1d2988357ed92596b3bd3f2acda
-  data.tar.gz: b547c7dd9c6f2fbeecc223730c5f43f61694597530c14b50ec103fbf3f6462f7
+  metadata.gz: 35e9395b775f9bfcd58b161fc528d29d20cd171b20247d7940a2a2204c12883b
+  data.tar.gz: c03ae78b40d8224a1d8f35bbaae2ad9f02093a5f3910c1ab59ada34b6cd23a20
 SHA512:
-  metadata.gz: 60604c04f4e26ac64cab6cb4bf931e0e7bd04619a61bdf605113987f7abaec53d9954630f4aa011819cd78e35b69c9ae0eb655d9b14889a999de391e30355307
-  data.tar.gz: 918d18d1ff54e4f886aa916402558f5fa785828f621421d4e0590428a9e613878499f42315583b08e9c85904b060a58936332560f3867d8ab41aefc97f74cfe9
+  metadata.gz: bec47d9b8590025ed0bfb7457a1cd75a4d4ac8309d705c545974183ed66049be5d6811e6de99fb66a85e0ebf132e88c0c1ef872d761942664ab7f8236b01ffe4
+  data.tar.gz: fad923ad3070c1a8581a76a89ac9ded10cfdb4fd83941003575116871558aa1f1e059be66b20fbc4a591f5348f4dcea2ae9cbffbe4cd5dc4ef4a0059d0869b83

data/README.md

@@ -1,5 +1,4 @@
 # hima
-[![Gem Version](https://badge.fury.io/rb/hima.svg)](https://badge.fury.io/rb/hima)
 
 hima is a simple Jekyll theme with the goal of being accessible to everyone, and follows [The A11y Project's accessibility guidelines](https://www.a11yproject.com/checklist/).
 
@@ -82,7 +81,7 @@ Refers to files within the `_layouts` directory, that define the markup for your
 Refers to `.scss` files within the `_sass` directory that define the theme's styles.
 
   - `hima/colourschemes/auto.scss` — An adaptive colourscheme that switches between light and dark mode depending on your site visitors' preference. *Used by default.*
-  - `minima/initialize.scss` — A component that defines the theme's *skin-agnostic* variable defaults and sass partials.
+  - `hima/initialize.scss` — A component that defines the theme's *skin-agnostic* variable defaults and sass partials.
     It imports the following components (in the following order):
     - `hima/custom-variables.scss` — A hook that allows overriding variable defaults and mixins. (*Note: Cannot override styles*)
     - `hima/main.scss` — Style rules for the theme.

data/_config.yml

@@ -1,4 +1,5 @@
-title: Your awesome title
+title: Hima Jekyll Theme
+description: A simple Jekyll theme with a focus on accessibility.
 author:
   name: Your name
   email: youremail@domain.com
@@ -9,6 +10,7 @@ header_pages:
 
 hima:
   colourscheme: auto # auto, light, dark
+  date_format: "%b. %-d, %Y"
   social:
     - { platform: github, url: 'https://www.github.com' }
     - { platform: linkedin, url: 'https://www.linkedin.com' }

data/_includes/header.html

@@ -1,6 +1,6 @@
 {%- assign default_paths = site.pages | map: "path" -%}
 {%- assign page_paths = site.header_pages | default: default_paths -%}
-{%- assign titles_size = site.pages | map: 'title' | join: '' | size -%}
+{%- assign titles_size = site.pages | where_exp: 'page', 'page.title.size > 0' | size -%}
 
 <header class="header">
   <div class="header__container">
@@ -14,17 +14,34 @@
 
     {%- if titles_size > 0 -%}
     <nav class="header__nav">
-      <input class="header__nav-toggle" id="nav-toggle" type="checkbox" />
+      <input
+        class="header__nav-toggle"
+        id="nav-toggle"
+        type="checkbox"
+        aria-checked="false"
+        tabindex="0"
+        onclick="updateCheckedAria(event)"
+        onkeydown="updateCheckedAria(event)"
+      />
       <label for="nav-toggle" aria-label="show/hide the navigation menu">
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/></svg>
+        <!-- unicode trigram -->
+        &#9776;
       </label>
 
       <ul class="header__links">
       {%- for path in page_paths -%}
-        {%- assign page = site.pages | where: "path", path | first -%}
-        {%- if page.title -%}
+        {%- assign header-link = site.pages | where: "path", path | first -%}
+        {%- if header-link.title -%}
         <li class="header__link">
-          <a href="{{ page.url | relative_url }}" aria-label="{{ page.title }}">{{ page.title | escape }}</a>
+          <a
+            href="{{ header-link.url | relative_url }}"
+            aria-label="{{ header-link.title }}"
+            {% if header-link.url == page.url %}
+            class="active"
+            {% endif %}
+            >
+            {{ header-link.title | escape }}
+          </a>
         </li>
         {%- endif -%}
       {%- endfor -%}
@@ -46,4 +63,14 @@
       header.classList.remove('header--pinned')
     }
   })
+
+  function updateCheckedAria(event) {
+    const spacebarKeyCode = 32
+    const checkbox = event.target
+
+    if (event.keyCode && event.keyCode !== spacebarKeyCode) {
+      return
+    }
+    checkbox.setAttribute('aria-checked', checkbox.checked)
+  }
 </script>

data/_layouts/home.html

@@ -11,7 +11,7 @@ layout: default
 <ol class="post-list">
   {%- for post in site.posts -%}
   <li class="post-list__post">
-    {%- assign date_format = site.hima.date_format | default: "%b %-d, %Y" -%}
+    {%- assign date_format = site.hima.date_format | default: "%b. %-d, %Y" -%}
     <span class="post-list__date">{{ post.date | date: date_format }}</span>
     <h3 class="post-list__title">
       <a href="{{ post.url | relative_url }}">{{ post.title }}</a>

data/_layouts/post.html

@@ -5,12 +5,16 @@ layout: default
 <div class="post">
   <div class="post__header">
     <h1 class="post__title">{{ page.title | escape }}</h1>
-    {%- assign date_format = site.hima.date_format | default: "%b %-d, %Y" -%}
+    {%- assign date_format = site.hima.date_format | default: "%b. %-d, %Y" -%}
     {%- if page.author -%}
-    <span class="post__author">by {{ page.author | join: ", " }} </span>
+    <span class="post__author">
+      by {{ page.author | array_to_sentence_string }}
+    </span>
     {%- endif -%}
     {%- if page.date -%}
-    <span class="post__date">on {{ page.date | date: date_format }}</span>
+    <span class="post__date">
+      on {{ page.date | date: date_format }}
+    </span>
     {%- endif -%}
   </div>
 

data/_sass/hima/colourschemes/_base.scss

@@ -14,10 +14,12 @@ $post-meta-colour: var(--hima-post-meta-colour);
 
 $quote-background: var(--hima-quote-background);
 $quote-border: var(--hima-quote-border);
+$quote-border-accent: var(--hima-quote-border-accent);
 
 $codeblock-border: var(--hima-codeblock-border);
 $codeblock-border-accent: var(--hima-codeblock-border-accent);
-$code-border: var(--hima-code-border);
+$codeblock-background: var(--hima-codeblock-background);
+$inline-code-border: var(--hima-inline-code-border);
 $inline-code-background: var(--hima-inline-code-background);
 
 $table-background: var(--hima-table-background);

data/_sass/hima/colourschemes/_gruvbox-dark-theme.scss

@@ -19,11 +19,13 @@ $white: #faf6e8;
   --hima-post-meta-colour: #{$white0s};
 
   --hima-quote-background: #{$black0h};
-  --hima-quote-border: #{$yellow};
+  --hima-quote-border: #{$black0};
+  --hima-quote-border-accent: #{$yellow};
 
-  --hima-codeblock-border: #{$black3};
+  --hima-codeblock-background: #{$black0h};
+  --hima-codeblock-border: #{$black0};
   --hima-codeblock-border-accent: #{$aqua};
-  --hima-code-border: #{$aqua};
+  --hima-inline-code-border: #{$aqua};
   --hima-inline-code-background: #{$black0h};
 
   --hima-table-background: #{$black1};

data/_sass/hima/colourschemes/_gruvbox-light-theme.scss

@@ -19,12 +19,14 @@ $white: #faf6e8;
   --hima-post-meta-colour: #{$black2};
 
   --hima-quote-background: #{$white};
-  --hima-quote-border: #{$yellow-light};
+  --hima-quote-border: #{$white0h};
+  --hima-quote-border-accent: #{$yellow-light};
 
-  --hima-codeblock-border: #{$white2};
+  --hima-codeblock-border: #{$white0h};
   --hima-codeblock-border-accent: #{$aqua-light};
-  --hima-code-border: #{$aqua-light};
-  --hima-inline-code-background: #{$white0};
+  --hima-codeblock-background: #{$white};
+  --hima-inline-code-border: #{$aqua-light};
+  --hima-inline-code-background: #{$white};
 
   --hima-table-background: #{$white};
   --hima-table-header-background: #{$white0};

data/_sass/hima/custom-styles.scss

@@ -0,0 +1,2 @@
+// override this file to define custom css styles
+// to override variables use `_sass/hima/custom-variables.scss`

data/_sass/hima/custom-variables.scss

@@ -0,0 +1 @@
+// override hima's scss variables here

data/_sass/hima/fonts.scss

@@ -1,20 +1,23 @@
 @font-face {
   font-family: 'Oswald';
+  font-display: swap;
   src:
     local('Oswald'),
-    url('../fonts/Oswald.ttf') format('truetype');
+    url('../fonts/Oswald.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'OpenSans';
+  font-display: swap;
   src:
     local('Open Sans'),
-    url('../fonts/OpenSans.ttf') format('truetype');
+    url('../fonts/OpenSans.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'FiraCode';
+  font-display: swap;
   src:
     local('Fira Code'),
-    url('../fonts/FiraCode.ttf') format('truetype');
+    url('../fonts/FiraCode.woff2') format('woff2');
 }

data/_sass/hima/initialize.scss

@@ -0,0 +1,18 @@
+@charset "utf-8";
+
+$content-padding: 2rem;
+$content-padding-mobile: 1rem;
+$content-width: 60rem;
+
+$header-margin-top: 4rem;
+$header-height: 8rem;
+$header-pinned-height: 4rem;
+
+$on-mobile: 425px;
+$on-tablet: 800px;
+
+$block-border-radius: .25rem;
+
+@import "hima/custom-variables";
+@import "hima/main";
+@import "hima/custom-styles";

data/_sass/hima/main.scss

@@ -1,17 +1,6 @@
 @charset "utf-8";
 @import './fonts';
 
-$content-padding: 2rem;
-$content-padding-mobile: 1rem;
-$content-width: 60rem;
-
-$header-margin-top: 4rem;
-$header-height: 8rem;
-$header-pinned-height: 4rem;
-
-$on-mobile: 425px;
-$on-tablet: 800px;
-
 html {
   overflow-y: scroll;
 }
@@ -28,7 +17,7 @@ body {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: Oswald;
+  font-family: Oswald, Arial, sans-serif;
   margin-top: 2rem;
   font-weight: normal;
 }
@@ -85,21 +74,30 @@ a {
   align-items: end;
   margin-bottom: 2rem;
   position: sticky;
+  -webkit-font-smoothing: antialiased;
   top: -($header-height + $header-margin-top - $header-pinned-height);
   height: $header-height + $header-margin-top;
-  -webkit-font-smoothing: antialiased;
+
+  @media (max-width: $on-mobile) {
+    top: -($header-height + ($header-margin-top/2) - $header-pinned-height);
+    height: $header-height + ($header-margin-top/2);
+  }
 
   &__title {
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 2.5rem;
-    font-family: Oswald;
-    font-variation-settings: "wght" 800;
+    font-family: Oswald, Arial, sans-serif;
+    font-variation-settings: "wght" 700;
     text-transform: uppercase;
     text-align: center;
     line-height: 1.2;
 
+    @media (max-width: $on-mobile) {
+      font-size: 2rem;
+    }
+
     a {
       text-decoration: none;
       color: $foreground;
@@ -122,7 +120,11 @@ a {
     display: none;
     margin-top: 0;
     height: 24px;
-    fill: $nav-menu-icon-fill;
+    width: 24px;
+    color: $nav-menu-icon-fill;
+    font-size: 1.33rem;
+    cursor: pointer;
+    user-select: none;
   }
 
   &__links {
@@ -138,6 +140,10 @@ a {
     margin: 0 2rem;
   }
 
+  a.active {
+    border-bottom: .15rem solid $foreground;
+  }
+
   &--pinned {
     background: $header-pinned-background;
     box-shadow: 0 -1rem 2rem 0 $header-pinned-boxshadow;
@@ -154,6 +160,12 @@ a {
 
     &__title {
       font-size: 1.67rem;
+
+      &:only-child {
+        margin-left: auto;
+        margin-right: auto;
+      }
+
       @media (max-width: $on-mobile) {
         font-size: 1.33rem;
       }
@@ -170,7 +182,7 @@ a {
         align-items:end;
         position: absolute;
         border: .2rem solid $nav-pinned-border;
-        border-radius: .25rem;
+        border-radius: $block-border-radius;
         right: $content-padding;
         top: .67rem;
         padding: .5rem;
@@ -181,6 +193,19 @@ a {
       }
     }
 
+    &__nav-toggle {
+      display: block;
+      opacity: 0;
+      height: 0;
+      margin: 0;
+    }
+
+    &__nav-toggle:focus-visible + label {
+      border: .15rem solid $foreground;
+      border-radius: $block-border-radius;
+      box-sizing: border-box;
+    }
+
     &__link {
       margin: 0;
       margin-left: 3rem;
@@ -194,7 +219,9 @@ a {
 
     &__nav label[for="nav-toggle"] {
       @media (max-width: $on-tablet) {
-        display: block;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
     }
 
@@ -251,6 +278,11 @@ a {
   margin-top: 4rem;
   margin-bottom: 8rem;
 
+  @media (max-width: $on-mobile) {
+    margin-bottom: 4rem;
+  }
+
+
   &__author {
     display: flex;
     align-items: center;
@@ -311,8 +343,9 @@ blockquote {
   background: $quote-background;
   margin: 0;
   padding: 1rem 2rem 1rem;
-  border-left: .3rem solid $quote-border;
-  border-radius: .25rem;
+  border: .1rem solid $quote-border;
+  border-left: .3rem solid $quote-border-accent;
+  border-radius: $block-border-radius;
   font-style: italic;
 
   p {
@@ -331,14 +364,19 @@ pre {
   &.highlight {
     border: none;
   }
+
+  .highlight > & {
+    margin: 0;
+  }
 }
 
 .highlight {
   margin: 0;
   border: .1rem solid $codeblock-border;
   border-left: .3rem solid $codeblock-border-accent;
-  border-radius: .25rem;
+  border-radius: $block-border-radius;
   overflow-x: auto;
+  background: $codeblock-background;
 
   code {
     padding: 0;
@@ -346,12 +384,15 @@ pre {
   }
 }
 
+code {
+  font-family: FiraCode, monospace;
+}
+
 :not(pre) > code {
   background: $inline-code-background;
   padding: .2rem .25rem;
-  border-radius: .25rem;
-  border: .15rem solid $code-border;
-  font-family: FiraCode;
+  border-radius: $block-border-radius;
+  border: .15rem solid $inline-code-border;
   overflow-x: auto;
 }
 
@@ -359,6 +400,7 @@ table {
   width: 100%;
   border-collapse: collapse;
   background: $table-background;
+  border-radius: $block-border-radius;
 
   @media (max-width: $on-tablet) {
     display: block;

data/assets/css/style.scss

@@ -2,4 +2,4 @@
 ---
 
 @import "hima/colourschemes/{{ site.hima.colourscheme | default: 'auto' }}";
-@import 'hima/main';
+@import 'hima/initialize';

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hima
 version: !ruby/object:Gem::Version
-  version: 1.0.4
+  version: 1.1.0
 platform: ruby
 authors:
 - Brandon Cardoso
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-12-14 00:00:00.000000000 Z
+date: 2022-12-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -84,12 +84,15 @@ files:
 - _sass/hima/colourschemes/auto.scss
 - _sass/hima/colourschemes/dark.scss
 - _sass/hima/colourschemes/light.scss
+- _sass/hima/custom-styles.scss
+- _sass/hima/custom-variables.scss
 - _sass/hima/fonts.scss
+- _sass/hima/initialize.scss
 - _sass/hima/main.scss
 - assets/css/style.scss
-- assets/fonts/FiraCode.ttf
-- assets/fonts/OpenSans.ttf
-- assets/fonts/Oswald.ttf
+- assets/fonts/FiraCode.woff2
+- assets/fonts/OpenSans.woff2
+- assets/fonts/Oswald.woff2
 - assets/hima-social-icons.html
 homepage: https://www.github.com/brandoncardoso/hima
 licenses: