jekyll-theme-jsblog 1.0.6 → 1.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d0bfac42ca651525ad1c08b671301741e2d5839a5843db761bc6ccea68c1b7a8
-  data.tar.gz: 92066fbce6fd6cbd4f07c2443fbaf15c07047caeae01e9a377521ebed74889f2
+  metadata.gz: ea3f34bdc8828f00087f320bf34b2c83fa5ce9bc467d9a1c9fc4deafecc18bc4
+  data.tar.gz: bdfbe2b0a1927e1ff59a879075fc4dc29d3f0ca5c47d6e7c4f1e1827f976c55c
 SHA512:
-  metadata.gz: befa2cd19ac604cb226d73378b84a59866c2487b9d5c6b3dca699ce006365171b7cb6bb0a6dda62f11bf8680050ec1a7127a93f4e157f95a8acdea3c98bb6202
-  data.tar.gz: 7a17018e3cbf544082d8325a8b8b2fb475007b97064219b99b7ca0740582b2b1d84ccfcf0cd38ad5dd0521b4706ca76355861cab3189a2b2fee785a359a0e66a
+  metadata.gz: 24d3a00fc17d777d9d2bc0f0b4e270ab6e170e352cf43458565d1c4a6f67ae157bb35d708d10b6810e8907ef992020887d6863033e09ca7f8cb6aeb1fc257fd8
+  data.tar.gz: 0db4c1dca436a492df34d96303b5fc9ae2ad9fbf588284c7faa72c58f131713a69b1da33f8e760c5989e06157e2ef40b714e5493d4bf222219f357bf6f51a84d

data/_includes/head.html

@@ -18,6 +18,10 @@
   {% endif %}
 
   <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+  {% if page.layout == 'home' %}
+    <link rel="stylesheet" href="{{ "/assets/home.css" | relative_url }}">
+  {% endif %}
+
   <link rel="canonical" href="{{ canonical }}">
   {% assign feed_path = "/feed.xml" %}
   {% if site.feed and site.feed.path %}

data/_sass/jsblog.scss

@@ -41,17 +41,25 @@ $spacing-unit: 20px !default;
 $page-content-padding: 80px !default;
 
 // Colors
-$grey-color:        #828282 !default;
-$brand-color:       #2568ba !default;
-$a-color:           #0070c9 !default;
-$a-hover-opacity:   .65 !default;
+$grey-color: #828282 !default;
+$grey-color-light: lighten(#828282, 40%); // Use the $grey-color as base
+$grey-color-lighter: lighten(#828282, 45%); // Use the $grey-color as base
+$grey-color-dark: darken(#828282, 25%); // Use the $grey-color as base
+$grey-color-darker: darken(#828282, 30%); // Use the $grey-color as base
+$dm-grey-color-light: darken(#828282, 25%); // Use the $grey-color as base
+$dm-grey-color-lighter: darken(#828282, 30%); // Use the $grey-color as base
+$dm-grey-color-dark: lighten(#828282, 40%); // Use the $grey-color as base
+$dm-grey-color-darker: lighten(#828282, 45%); // Use the $grey-color as base
+
+$brand-color: #2568ba !default;
+$a-color: #0070c9 !default;
+$a-hover-opacity: .65 !default;
 
 // Width of the content area
-$content-width:     1080px !default;
-$on-palm:           692px !default;
-$on-laptop:         980px !default;
-$on-medium:         1068px !default;
-$on-small:          735px !default;
+$on-palm: 692px !default;
+$on-laptop: 980px !default;
+$on-medium: 1068px !default;
+$on-small: 735px !default;
 
 // Variables that change with dark mode
 :root {
@@ -60,10 +68,13 @@ $on-small:          735px !default;
   --background-color: #ffffff;
   --footer-background-color: #f2f2f2;
   --footer-text-color: $grey-color;
-  --grey-color-light: lighten(#828282, 40%); // Use the $grey-color as base
-  --grey-color-lighter: lighten(#828282, 50%); // Use the $grey-color as base
-  --grey-color-dark: darken(#828282, 25%); // Use the $grey-color as base
-  --grey-color-darker: darken(#828282, 35%); // Use the $grey-color as base
+  --grey-color-light: #{$grey-color-light};
+  --grey-color-lighter: #{$grey-color-lighter};
+  --grey-color-dark: #{$grey-color-dark};
+  --grey-color-darker: #{$grey-color-darker};
+
+  --content-width: 750px; // Original 980px
+  --header-content-width: 1080px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -73,10 +84,10 @@ $on-small:          735px !default;
     --background-color: #2C2C2C;
     --footer-background-color: #414141;
     --footer-text-color: lighten(#828282, 40%); // Use the $grey-color as base
-    --grey-color-light: darken(#828282, 25%); // Use the $grey-color as base
-    --grey-color-lighter: darken(#828282, 35%); // Use the $grey-color as base
-    --grey-color-dark: lighten(#828282, 40%); // Use the $grey-color as base
-    --grey-color-darker: lighten(#828282, 50%); // Use the $grey-color as base
+    --grey-color-light: #{$dm-grey-color-light};
+    --grey-color-lighter: #{$dm-grey-color-lighter};
+    --grey-color-dark: #{$dm-grey-color-dark};
+    --grey-color-darker: #{$dm-grey-color-darker};
   }
 }
 

data/_sass/jsblog/_base.scss

@@ -29,7 +29,7 @@ body {
           font-feature-settings: "kern" 1;
   font-kerning: normal;
   letter-spacing: -.022em;
-  margin-bottom: 60px;
+  margin-bottom: 110px; // 35 + Footer Height
   word-wrap: break-word;
 }
 
@@ -178,11 +178,11 @@ hr {
 /**
  * Code formatting
  */
+
 pre,
 code {
   font-family: $monospace-font-family;
   font-size: 13px;
-  background-color: var(--grey-color-lighter);
 }
 
 code {
@@ -191,11 +191,10 @@ code {
 }
 
 pre {
-  padding: 8px 12px;
+  padding: 20px 20px;
   overflow-x: auto;
   word-wrap: normal;
-  border: 1px solid var(--text-color);
-  border-radius: 5px;
+
 
   > code {
     // border: 0;
@@ -210,7 +209,7 @@ pre {
  * Wrapper
  */
 .wrapper {
-  width: $content-width;
+  width: var(--content-width);
   margin-right: auto;
   margin-left: auto;
   @extend %clearfix;
@@ -225,7 +224,6 @@ pre {
 }
 
 
-
 /**
  * Clearfix
  */

data/_sass/jsblog/_layout.scss

@@ -17,6 +17,10 @@
 
   // Positioning context for the mobile navigation icon
   position: relative;
+
+  & > .wrapper {
+    width: var(--header-content-width);
+  }
 }
 
 .site-title {
@@ -96,7 +100,7 @@
 .social-icon {
   font-size: $title-small-font-size;
   display: inline-block;
-  padding: 0 0.2em;
+  padding: 0 0.35em;
 
   &,
   &:visited {

data/_sass/jsblog/_syntax-highlighting.scss

@@ -4,10 +4,12 @@
 .highlight {
   text-align: left;
   background-color: var(--grey-color-lighter);
+  border: 0 solid var(--text-color);
+  border-radius: 20px;
   // @extend %vertical-rhythm;
 
   .highlighter-rouge & {
-    background-color: var(--grey-color-lighter);
+    background-color: var(--grey-color-light);
   }
 
   .c     { color: #998; font-style: italic } // Comment

data/assets/home.scss

@@ -0,0 +1,10 @@
+---
+# This tells Jekyll to compile this page
+---
+
+@charset "utf-8";
+
+// Override some variables on the home page
+:root {
+  --content-width: 1080px;
+}

data/assets/main.scss

@@ -3,51 +3,5 @@
 ---
 @charset "utf-8";
 
-// Our variables
-
-// $base-font-family: -apple-system-font, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
-// $monospace-font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
-// $base-font-size: 17px;
-// $nav-font-size: 16px;
-// $base-font-weight: 400;
-// $heavy-font-weight: 500;
-// $small-font-size: $base-font-size * 0.875;
-// $base-line-height: 1.5;
-//
-// $spacing-unit:     30px;
-//
-// // Link Colours
-// $a-color: #0070c9;
-// $a-hover-opacity: .65;
-//
-// // Colours
-// $text-color: #333;
-// $light-text-color: #fff;
-// $background-color: #fff;
-// $dark-background-color: #333;
-// $footer-background-color: #f2f2f2;
-// $brand-color:      #2568ba;
-// $a-color: #0070c9;
-//
-// $grey-color:       #828282;
-// $grey-color-light: lighten($grey-color, 40%);
-// $grey-color-dark:  darken($grey-color, 25%);
-//
-// // Width of the content area
-// $content-width:    980px;
-// $on-palm:          692px;
-// $on-laptop:        980px;
-
-// This theme also includes a mixin for defining media queries.
-// Use media queries like this:
-// @include media-query($on-palm) {
-//     .wrapper {
-//         padding-right: $spacing-unit / 2;
-//         padding-left: $spacing-unit / 2;
-//     }
-// }
-
-
-
 // Import partials from this theme.
 @import "jsblog";

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-jsblog
 version: !ruby/object:Gem::Version
-  version: 1.0.6
+  version: 1.0.8
 platform: ruby
 authors:
 - Julian Schiavo
@@ -107,6 +107,7 @@ files:
 - _sass/jsblog/_base.scss
 - _sass/jsblog/_layout.scss
 - _sass/jsblog/_syntax-highlighting.scss
+- assets/home.scss
 - assets/main.scss
 homepage: https://github.com/justjs/jekyll-theme-jsblog
 licenses: