jekyll-theme-jsblog 1.0.16 → 1.0.18

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 85b3cb0452f9c4653fd19a52c3d0975fc378239ad51000e25a586fc1023f635e
-  data.tar.gz: 60390633a0324865cff008e08fd41b329f1cf1b67eb3122cfd4572de4f739899
+  metadata.gz: ac819a6190d0444a2592768b29c28013d06647ddd413d1c040b5ed9f45410140
+  data.tar.gz: 34721408a13e60c69e346d9ee162b01f38b9ddf167cf6f2f574589c0f5437252
 SHA512:
-  metadata.gz: e046d5cdf21b3b9db4767c14deae060ed72c93a9a13a01520c2bb18c709c9451a3c88210f8b9ce2b3114263fd56a362672d65308d4330ae247ea7f89a78fb3c5
-  data.tar.gz: ad77c4a2aa5a5fb16f920f9f1df89dceff386ee121d1b223789585e65b09b2c5915d33e2e3283f1b27f072f2379572a6482054d76a8ca743a95d7e3449028b92
+  metadata.gz: 995605c11dc212bbbd6f3e24facae4e2c3f0532500677c0a355239a4df8abc9570c27b1657747494ec2429a4d4edd2954e70358fcbfb41500f03fcd921cfa034
+  data.tar.gz: 072d5f9d50e0fa210ebe9e95cc76682f73f68fedc4e9d7d9e9af0ad57aaf3a14d5e77f026273783cbfc6e3c99ec413a7c17a951f55f93aa1f7451233b76cf1a1

data/_includes/header.html

@@ -2,7 +2,13 @@
 
   <div class="wrapper">
 
-    <a class="site-title" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
+    <div class="site-header-container">
+      <div class="site-header-text">
+        <a class="site-title" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
+        <br>
+        <p class="site-description">{{ site.description | escape }}</p>
+      </div>
+    </div>
 
     <nav class="site-nav">
       {% for link in site.data.navigation.main %}

data/_sass/jsblog.scss

@@ -6,7 +6,8 @@ $monospace-font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Co
 // Site Wide Variables
 $site-header-text-color: #ffffff !default;
 $site-header-text-color-visited: darken(#828282, 25%); // --grey-color-dark in light mode
-$site-title-font-size: 28px !default;
+$site-title-font-size: 32px !default;
+$site-title-small-font-size: 25px !default;
 $site-footer-font-size: 16px !default;
 
 // Font Sizes
@@ -27,8 +28,8 @@ $lead-small-font-size: 19px !default;
 $base-font-size: 17px !default;
 $caption-font-size: 17px !default;
 $blockquote-font-size: 18px !default;
-$small-font-size:   $base-font-size * 0.875 !default;
-$nav-font-size:     16px !default;
+$small-font-size: $base-font-size * 0.875 !default;
+$nav-font-size: 16px !default;
 
 // Font Variables
 $base-font-weight: 400 !default;
@@ -50,9 +51,7 @@ $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;
+$link-hover-opacity: .65 !default;
 
 // Width of the content area
 $on-palm: 692px !default;
@@ -62,6 +61,8 @@ $on-small: 735px !default;
 
 // Variables that change with dark mode
 :root {
+  --link-color: #0070c9;
+  --link-visited-color: #0059a0;
   --text-color: #333333;
   --dim-text-color: #ffffff;
   --background-color: #ffffff;
@@ -81,6 +82,8 @@ $on-small: 735px !default;
 
 @media (prefers-color-scheme: dark) {
   :root {
+    --link-color: #328cd3;
+    --link-visited-color: #2870a8;
     --text-color: #f2f2f2;
     --dim-text-color: #000000;
     --background-color: #2C2C2C;

data/_sass/jsblog/_base.scss

@@ -130,16 +130,16 @@ h1, h2, h3, h4, h5, h6 {
  * Links
  */
 a {
-  color: $brand-color;
+  color: var(--link-color);
   text-decoration: none;
 
   &:visited {
-    color: darken($brand-color, 10%);
+    color: var(--link-visited-color);
   }
 
   &:hover {
     color: var(--text-color);
-    opacity: $a-hover-opacity;
+    opacity: $link-hover-opacity;
   }
 }
 

data/_sass/jsblog/_layout.scss

@@ -2,8 +2,8 @@
  * Site header
  */
 .site-header {
-  height: 65px;
-  line-height: 65px;
+  height: 100px;
+  // line-height: 70px;
   background-color: var(--header-background-color);
 
   -webkit-user-select: none;
@@ -31,13 +31,25 @@
   }
 }
 
+.site-header-container {
+  margin-bottom: 0;
+  float: left;
+  height: 100px;
+  line-height: 100px;
+  max-width: 45%;
+}
+
+.site-header-text {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: normal;
+}
+
 .site-title {
   color: $site-header-text-color !important;
   font-size: $site-title-font-size;
   font-weight: $heavy-font-weight;
   letter-spacing: -1px;
-  margin-bottom: 0;
-  float: left;
 
   &,
   &:visited {
@@ -45,17 +57,32 @@
   }
 
   :hover {
-    opacity: $a-hover-opacity;
+    opacity: $link-hover-opacity;
     text-decoration: none;
   }
+
+  @include media-query($on-small) {
+    font-size: $site-title-small-font-size;
+  }
+}
+
+.site-description {
+  margin-top: 10px;
+  margin-bottom: 0;
+  font-size: $small-font-size;
+
+  @include media-query($on-small) {
+    display: none;
+  }
 }
 
 .site-nav {
   float: right;
+  line-height: 100px;
   font-size: $nav-font-size;
 
   a:hover {
-    opacity: $a-hover-opacity;
+    opacity: $link-hover-opacity;
     text-decoration: none;
   }
 
@@ -181,7 +208,7 @@
 .post-continue {
   a {
     text-decoration: none;
-    color: $a-color;
+    color: var(--link-color);
 
     &:hover {
       text-decoration: underline;
@@ -202,7 +229,7 @@
 //
 //     &:hover {
 //       color: white;
-//       background-color: $brand-color;
+//       background-color: var(--link-color);
 //     }
 //   }
 // }
@@ -230,7 +257,7 @@
 .post-title {
   font-size: $title-font-size;
   line-height: 1.1;
-  font-weight: 600;
+  font-weight: 800;
   letter-spacing: 0em;
   margin-bottom: 0px;
 
@@ -251,20 +278,20 @@
   margin-bottom: $spacing-unit;
 
   // First paragraph is the lead
-  p:first-of-type {
-    font-size: $lead-font-size;
-    line-height: 1.5;
-    font-weight: 500;
-    letter-spacing: .017em;
-
-    @include media-query($on-medium) {
-      font-size: $lead-small-font-size;
-    }
-
-    @include media-query($on-small) {
-      font-size: $lead-small-font-size;
-    }
-  }
+  // p:first-of-type {
+  //   font-size: $lead-font-size;
+  //   line-height: 1.5;
+  //   font-weight: 500;
+  //   letter-spacing: .017em;
+  //
+  //   @include media-query($on-medium) {
+  //     font-size: $lead-small-font-size;
+  //   }
+  //
+  //   @include media-query($on-small) {
+  //     font-size: $lead-small-font-size;
+  //   }
+  // }
 
   // Headers
 

data/_sass/jsblog/_syntax-highlighting.scss

@@ -2,7 +2,7 @@
  * Syntax highlighting styles
  */
 
-.highlighter-rouge {
+code.highlighter-rouge {
   background-color: var(--grey-color-lighter);
   border: 0 solid var(--text-color);
   border-radius: 3px;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-jsblog
 version: !ruby/object:Gem::Version
-  version: 1.0.16
+  version: 1.0.18
 platform: ruby
 authors:
 - Julian Schiavo
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-02-02 00:00:00.000000000 Z
+date: 2019-02-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll