jekyll-theme-hydejack 8.5.1 → 9.0.3

data/_sass/_variables.scss

@@ -1,4 +1,4 @@
-// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+// Copyright (c) 2019 Florian Klampfer <https://qwtel.com/>
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
@@ -13,51 +13,10 @@
 // You should have received a copy of the GNU General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-$gray: #888;
+$gray: #777;
 $gray-bg: rgba(0,0,0,.025);
 $gray-text: #666;
 $menu-text: #bbb;
 $body-color: #333;
 $body-bg: #fff;
 $border-color: #ebebeb;
-
-$root-font-size: 16px;
-$root-font-size-medium: 17px;
-$root-font-size-large: 18px;
-$root-font-size-print: 11pt;
-$root-line-height: 1.75;
-
-$font-weight: 400;
-$font-weight-bold: 700;
-$font-weight-heading: 400;
-
-$code-font-family: Menlo, Monaco, Consolas, monospace;
-
-// Breakpoints and content width. All units must be in rem!
-// NOTE: Duplicated values from `_js/src/drawer.js`.
-$content-width: 38rem;
-$content-width-2: 42rem;
-$content-width-5: 48rem;
-
-$content-margin-3: 3rem;
-$content-margin-5: 4rem;
-
-$content-padding: 1rem;
-
-$sidebar-width: 21rem;
-
-$break-point-1: 42em;
-$break-point-2: 54em;
-$break-point-3: 64em;
-$break-point-4: 72em;
-$break-point-5: 88em;
-$break-point-font-large: 124em;
-
-// The sidebar width starts adjusting dynamically when the content is at the center of the window.
-// This is the case when the window size has a `min-width` of content area + twice the sidebar (left, right):
-//
-// $break-point-dynamic: $content-width-5 + (2 * $content-margin-5) + (2 * $sidebar-width); // = 98rem
-//
-// HACK: Since Chrome doesn't treat rem values in media queries correctly,
-// we hard-code the pixel value for the values above.
-$break-point-dynamic: 1666px; // = 98 * 17px

data/_sass/html.scss

@@ -0,0 +1,42 @@
+html {
+  --font-family: #{$font-family};
+  --font-family-heading: #{$font-family-heading};
+  --code-font-family: #{$code-font-family};
+
+  --gray: #{$gray};
+  --gray-bg: #{$gray-bg};
+  --gray-text: #{$gray-text};
+  --menu-text: #{$menu-text};
+  --body-color: #{$body-color};
+  --body-bg: #{$body-bg};
+  --border-color: #{$border-color};
+
+  --root-font-size: #{$root-font-size};
+  --root-font-size-medium: #{$root-font-size-medium};
+  --root-font-size-large: #{$root-font-size-large};
+  --root-font-size-print: #{$root-font-size-print};
+  --root-line-height: #{$root-line-height};
+
+  --font-weight: #{$font-weight};
+  --font-weight-bold: #{$font-weight-bold};
+  --font-weight-heading: #{$font-weight-heading};
+
+  // --content-width: #{$content-width};
+  // --content-width-2: #{$content-width-2};
+  --content-width-5: #{$content-width-5};
+
+  // --content-margin-3: #{$content-margin-3};
+  --content-margin-5: #{$content-margin-5};
+
+  --sidebar-width: #{$sidebar-width};
+  --half-content: #{$half-content};
+
+  // --break-point-1: #{$break-point-1};
+  // --break-point-2: #{$break-point-2};
+  --break-point-3: #{$break-point-3};
+  // --break-point-4: #{$break-point-4};
+  --break-point-5: #{$break-point-5};
+  // --break-point-font-large: #{$break-point-font-large};
+
+  --break-point-dynamic: #{$break-point-dynamic};
+}

data/_sass/hydejack/__inline__/_avatar.scss

@@ -24,25 +24,25 @@
 
 .avatar {
   
-  width: 6.5rem;
-  height: 6.5rem;
+  width: 7rem;
+  height: 7rem;
   border-radius: 100%;
   overflow: hidden;
+  display: inline-block;
+  img { width: 100%; }
   
 
   
-
-  
-  @media screen and (min-width: $break-point-5) {
-    width: 7rem;
-    height: 7rem;
-  }
-  
 }
 
 
 .content .avatar {
+  @extend .color-transition;
   float: right;
-  margin-left: .5rem;
+  box-sizing: content-box;
+  border: 1rem solid var(--body-bg);
+  transition: border-color 1s ease;
+  margin-top: -1.5rem;
+  margin-right: -1rem;
 }
 

data/_sass/hydejack/__inline__/_base.scss

@@ -25,8 +25,8 @@
 
 
 
-@media screen {
-  body::before {
+body::before {
+  @media screen {
     content: '';
     width: .5rem;
     background: var(--border-color);
@@ -37,37 +37,23 @@
   }
 
   @media (min-width: $break-point-3) {
-    body::before { width: $sidebar-width; }
+    width: $sidebar-width;
   }
 
   @media (min-width: $break-point-dynamic) {
-    $r28: ($content-width-5 / 2) + $content-margin-5;
-    body::before { width: calc(50% - #{$r28}); }
+    width: calc(50% - #{$half-content});
   }
 }
 
 html {
   @media screen and (min-width: $break-point-1) {
-    font-size: $root-font-size-medium;
+    font-size: var(--root-font-size-medium);
   }
 
   @media screen and (min-width: $break-point-font-large) {
-    font-size: $root-font-size-large;
+    font-size: var(--root-font-size-large);
   }
 }
 
 
-// @media print { html { font-size: $root-font-size-print; } } 
-.fade-in {
-  animation-duration: 500ms;
-  animation-timing-function: ease;
-  animation-name: fade-in;
-  animation-fill-mode: forwards;
-}
-
-@keyframes fade-in {
-  from { transform: translateY(-3rem); opacity: 0; }
-  50%  { transform: translateY(-3rem); opacity: 0; }
-  to   { transform: translateY(0);     opacity: 1; }
-}
-
+// @media print { html { font-size: var(--root-font-size-print); } } 

data/_sass/hydejack/__inline__/_content.scss

@@ -24,10 +24,9 @@
 
 
 .content {
-  position: relative;
   margin-left: auto;
   margin-right: auto;
-  padding: 6rem $content-padding 12rem;
+  padding: 8rem $content-padding 12rem;
 
   @media screen {
     padding-left: $content-padding + .5rem;
@@ -56,4 +55,12 @@
   }
 }
 
+.large-only {
+  display: none;
+  @media screen and (min-width: $break-point-dynamic) {
+    display: block;
+  }
+}
+
+
 

data/_sass/hydejack/__inline__/_images.scss

@@ -22,7 +22,7 @@
 // You should have received a copy of the GNU General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-.content .img {
+.content .aspect-ratio {
   overflow: hidden; 
   img {
     margin: 0; 
@@ -31,8 +31,6 @@
 //     object-fit: cover; 
 //     object-position: center; 
     background-color: var(--gray-bg); 
-    
   }
 }
 
-

data/_sass/hydejack/__inline__/_links.scss

@@ -22,24 +22,39 @@
 // You should have received a copy of the GNU General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-hy-push-state a, .a {
-  position: relative; 
-  padding-bottom: .15rem; 
-  border-bottom: 1px solid; 
-//   transition: color 1s, border-color 250ms; 
+hy-push-state a {
+  color: var(--body-color); 
+  
+  @supports not ((text-decoration-thickness: initial) and (text-underline-offset: initial)) {
+    text-decoration: none; 
+    border-bottom: 2px solid;
+  }
+
+  @supports ((text-decoration-thickness: initial) and (text-underline-offset: initial)) {
+    text-decoration-style: solid;
+    text-underline-offset: .35rem;
+    text-decoration-thickness: 2px;
+  }
+  
+
   
 
+  
   &.no-hover {
-    border-bottom: none; 
-    padding-bottom: 0; 
-//     transition: none; 
-//     &:hover { transition: none; } 
+    border-bottom: none;
+    text-decoration-thickness: unset;
+    text-underline-offset: unset;
   }
+  
 }
 
-/*
-img {
-  background-color: var(--gray-bg); 
+.content a:not(.btn):not(.no-hover) {
+  
+  @supports ((text-decoration-thickness: initial) and (text-underline-offset: initial)) {
+    text-decoration-color: var(--accent-color-faded);
+  }
+  border-color: var(--accent-color-faded);
+  
   
 }
-*/
+

data/_sass/hydejack/__inline__/_menu.scss

@@ -22,6 +22,8 @@
 // You should have received a copy of the GNU General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
+$navbar-height: 5rem;
+
 
 .fixed-common {
   position: fixed;
@@ -40,28 +42,55 @@
   bottom: 0;
 }
 
-.navbar > .content {
-  padding-top: 0;
-  padding-bottom: 0;
-  min-height: 0;
-  color: var(--menu-text);
+
+.navbar {
+  @extend .color-transition; 
+  > .content {
+    
+    position: relative;
+    padding-top: 0;
+    padding-bottom: 0;
+    min-height: 0;
+    max-height: $navbar-height;
+    
+
+    
+  }
+
+  
 }
 
+
 .nav-btn-bar {
-  margin: 0 -1rem 0 -.875rem;
+  @extend .color-transition;
+  margin: 0 -1rem;
+  background-color: white; // IE11
+  background-color: var(--body-bg);
+  height: $navbar-height;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  > :first-child, > :last-child {
+    border: none;
+  }
 }
 
 .nav-btn {
+  @extend .color-transition;
   background: none;
   border: none;
-  padding: 1.75rem .875rem;
-  color: var(--menu-text)!important;
-  cursor: pointer;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.25rem;
+  height: $navbar-height;
+  color: var(--menu-text);
+  border-right: 1px solid var(--border-color);
+  border-left: 1px solid var(--border-color);
+  margin-left: -1px;
 }
 
-.animation-main {
-  opacity: 0;
-  pointer-events: none;
-}
 
 

data/_sass/hydejack/__inline__/_sidebar.scss

@@ -26,7 +26,8 @@ hy-drawer {
   width: 100%; 
   position: relative; 
   overflow: hidden; 
-//   z-index: 2; 
+  display: block; 
+  z-index: 4; 
   @media screen {
     
   }
@@ -50,9 +51,7 @@ hy-drawer {
   }
 
   @media screen and (min-width: $break-point-dynamic) {
-    $r28: ($content-width-5 / 2) + $content-margin-5;
-
-    width: calc(50% - #{$r28});
+    width: calc(50% - #{$half-content});
 
     
   }
@@ -68,14 +67,17 @@ hy-drawer {
   align-items: center;
   color: rgba(255, 255, 255, .75);
   text-align: center;
-  z-index: 2;
   min-height: 100vh;
   
 
   a {
     color: #fff; 
     border-bottom-color: rgba(255, 255, 255, 0.2); 
-//     &:hover { border-bottom-color: #fff; } 
+    text-decoration-color: rgba(255, 255, 255, 0.2); 
+    &:hover { 
+//       border-bottom-color: #fff; 
+//       text-decoration-color: #fff; 
+    }
   }
 }
 
@@ -104,7 +106,7 @@ hy-drawer {
   &.sidebar-overlay::after {
 //     background: -moz-linear-gradient(top, rgba(32,32,32,0) 0%, rgba(32,32,32,0.5) 50%, rgba(32,32,32,0) 100%); 
 //     background: -webkit-linear-gradient(top, rgba(32,32,32,0) 0%,rgba(32,32,32,0.5) 50%, rgba(32,32,32,0) 100%); 
-    background: linear-gradient(to bottom, rgba(32,32,32,0) 0%,rgba(32,32,32,0.5) 50%, rgba(32,32,32,0) 100%);
+    background: linear-gradient(to bottom, rgba(32,32,32,0) 0%,rgba(32,32,32,0.5) 50%, rgba(32,32,32,0) 100%); 
   }
 }
 
@@ -122,8 +124,27 @@ hy-drawer {
     margin-bottom: 1.5rem
   }
 
-  > h2 {
-    margin-top: 0;
+  > a.sidebar-title {
+    text-decoration: none;
+    > h2 {
+      margin: 0;
+      padding-bottom: .5rem;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      border-bottom: 2px solid;
+      margin: 0 auto .5rem;
+      width: 4rem;
+      border-color: rgba(255, 255, 255, 0.2);
+      transition: border-color 250ms;
+    }
+
+    &:hover::after {
+      border-color: rgba(255, 255, 255, 1);
+      transition: border-color 50ms;
+    }
   }
 }
 
@@ -132,12 +153,17 @@ hy-drawer {
   padding-left: 0;
 }
 
-a.sidebar-nav-item {
+.sidebar-nav-item {
+  @extend .f4;
   display: inline-block;
-  font-weight: var(--font-weight-heading);
-  line-height: 1.75;
-  padding: .25rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  margin-bottom: .5rem;
+}
+
+#_main.no-drawer {
+  @media (min-width: $break-point-3) {
+    #_menu { display: none }
+    .nav-btn-bar > :nth-child(2) { border: none }
+  }
 }