jekyll-theme-gruv-poole 1.0.2 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5d62b1e4438155d8e2e064ccd61733e50bee6d2cb8d7fc8b228ad970d069eec9
-  data.tar.gz: 86d11738e846973164faae77bed6ca27c93841e4ce1b7c285dacbd31f486c2a2
+  metadata.gz: daa72d72b57e5ea8b0d0bac646a04e32c727462c51906ce32fc03012d03e5fd8
+  data.tar.gz: f8e8f80918f86910618a2216b96c562381b016a14f7d9c602d983ecd095ab4fa
 SHA512:
-  metadata.gz: 457fd84503fc37089fefd99720c5189e1561e508ec8322e1b01555dc976624374c921a1e49457a0b4ac8f26e7ddc9a0815bad7edd2eb3e73dd046828b83ab231
-  data.tar.gz: b1b68af4cedc75a3a8f723cfecb101481e4bb3718d6ff3f0a776f9b35c110545e5894b7fede9a0f03434cc220e38f59cb8bfde874a3bcfd48e53d1bd88103bdf
+  metadata.gz: d9b98a4a6fab6683907a5dfb9988f7421e7f898598342d45ed379bbffaa097f5b3e7b1b94ab89027b869b9ca5288f97ef6af211a6c2badec328e092b10207552
+  data.tar.gz: eb3d8b0620de1f7247dbf49f94ca7586987e030965afa58c9ea7ac5cfb8063a1bc6584526baa662d5121cab42acca51ebdedcd7e420087d51e866ebff2a383ce

data/README.md

@@ -74,6 +74,19 @@ All of the site's styling resides in the `_sass` directory. The most noteworthy
 
 The theme's main style file that ultimately gets imported to the site's base HTML layout is `/assets/main.scss`. This `main.scss` file imports all of the Sass files in the `_sass` directory and Jekyll's Sass compilation outputs a single `main.css` similar to Webpack.
 
+#### Highlights
+
+Some highlights include [Bootstrap-inspired](https://getbootstrap.com/docs/5.3/utilities/spacing/) spacing utility classes:
+```
+m-x, mt-x, mb-x, p-x, pt-x, pb-x
+```
+As well as a couple of simple responsive grid classes for two column support on desktop:
+```
+.row-md-1-1, .row-md-1-2, .row-md-2-1
+```
+
+**Want to add your own styles?** Create a file entitled `_sass/_custom.scss` and add them there.
+
 ## Configuration Options
 
 All the options and content in this section are configured in your site's `_config.yml` file. Note that [YAML](https://yaml.org/) syntax is very specific about spacing.

data/_sass/_custom.scss

@@ -0,0 +1,3 @@
+/**
+ * Silence is golden
+ */

data/_sass/_grid.scss

@@ -0,0 +1,28 @@
+@use 'variables';
+@use 'mixins' as *;
+
+/*
+ * Simple responsive grids for
+ * side-by-side content
+ */
+.row-md-1-1, .row-md-1-2, .row-md-2-1 {
+  display: grid;
+  gap: 1em;
+}
+
+@media (min-width: variables.$breakpoint-md) {
+  .row-md-1-1 {
+    @include grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .row-md-1-2 {
+    @include grid;
+    grid-template-columns: 1fr 2fr;
+  }
+
+  .row-md-2-1 {
+    @include grid;
+    grid-template-columns: 2fr 1fr;
+  }
+}

data/_sass/_home.scss

@@ -59,9 +59,8 @@ section {
 
 @media (min-width: variables.$breakpoint-md) {
     .home {
-        display: grid;
+        @include grid;
         grid-template-columns: repeat(3, 1fr);
-        grid-gap: 1.75rem
     }
 
     .archive {

data/_sass/_mixins.scss

@@ -23,3 +23,8 @@
   overflow: auto;
   scrollbar-color: var(--scrollbar-color);
 }
+
+@mixin grid {
+  display: grid;
+  grid-gap: 1.75rem;
+}

data/_sass/_posts.scss

@@ -102,7 +102,7 @@
 // on elements of a post
 @media (min-width: variables.$breakpoint-md) {
   .post {
-    p, ul, ol, blockquote,.highlighter-rouge {
+    p, ul, ol, blockquote, table, .highlighter-rouge, figure.highlight  {
       max-width: variables.$max-content-width;
     } 
   }

data/_sass/_utilities.scss

@@ -0,0 +1,26 @@
+@use 'sass:list';
+
+@mixin generateUtilityClasses($prefix, $property) {
+  $scales: [0, .25, .5, 1, 1.5, 3];
+
+  @for $i from 1 through list.length($scales) {
+    // scale of current index
+    $scale: list.nth($scales, $i);
+    $space: var(--spacer);
+
+    // create property
+    .#{$prefix}-#{$i - 1} {
+      #{$property}: calc(var(--spacer) * $scale);
+    }
+  }
+}
+
+// Margin utilities (ex: m-0, mt-1, mb-5)
+@include generateUtilityClasses(m, margin);
+@include generateUtilityClasses(mt, margin-top);
+@include generateUtilityClasses(mb, margin-bottom);
+
+// Padding utilities (ex: p-0, pt-1, pb-5)
+@include generateUtilityClasses(p, padding);
+@include generateUtilityClasses(pt, padding-top);
+@include generateUtilityClasses(pb, padding-bottom);

data/_sass/_variables.scss

@@ -75,7 +75,6 @@ $wcag-code-on-dark: color.scale(#fb4934, $lightness: 8%);
   --quote-color: var(--blue-dark);
   --quote-accent: var(--blue);
   --code-color: var(--red-dark);
-  --code-color-wcag: var(--red-dark);
 }
 
 /* Dark theme specific contrast and colors */
@@ -94,7 +93,6 @@ $wcag-code-on-dark: color.scale(#fb4934, $lightness: 8%);
     --alert: var(--yellow);
     --quote-color: var(--blue-light);
     --quote-accent: var(--blue);
-    --code-color: var(--red-light);
-    --code-color-wcag: #{$wcag-code-on-dark};
+    --code-color: #{$wcag-code-on-dark};
   }
 }

data/_sass/code/_wrappers.scss

@@ -11,7 +11,13 @@ pre {
 
 code {
   font-size: 85%;
-  color: var(--code-color-wcag);
+}
+
+// Only apply code color to inline
+// code elements. Multiline are handled
+// through Rouge (and applies gruvbox.scss styles)
+code:not(pre>code) {
+  color: var(--code-color);
 }
 
 pre {
@@ -32,10 +38,6 @@ pre {
     margin-bottom: 0;
   }
 
-  code {
-    color: var(--code-color);
-  }
-
   // Triple backticks (code fencing) doubles the .highlight elements
   .highlight {
     padding: 0;

data/assets/main.scss

@@ -23,8 +23,11 @@
 @use "components";
 @use "base";
 @use "typography/typography";
+@use "grid";
+@use "utilities";
 @use "code/gruvbox";
 @use "code/wrappers";
 @use "masthead";
 @use "posts";
 @use "home";
+@use "custom";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-gruv-poole
 version: !ruby/object:Gem::Version
-  version: 1.0.2
+  version: 1.1.0
 platform: ruby
 authors:
 - Jamison Griffith
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-11-20 00:00:00.000000000 Z
+date: 2024-11-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -59,10 +59,13 @@ files:
 - _layouts/privacy-policy.html
 - _sass/_base.scss
 - _sass/_components.scss
+- _sass/_custom.scss
+- _sass/_grid.scss
 - _sass/_home.scss
 - _sass/_masthead.scss
 - _sass/_mixins.scss
 - _sass/_posts.scss
+- _sass/_utilities.scss
 - _sass/_variables.scss
 - _sass/code/_gruvbox.scss
 - _sass/code/_wrappers.scss