jekyll-theme-hydejack 8.5.2 → 9.0.0

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 }
+  }
 }
 
 

data/_sass/hydejack/__inline__/_social.scss

@@ -45,6 +45,9 @@
         height: 4rem;
         padding: .5rem 0;
         line-height: 4rem - 2 * .5rem;
+        text-decoration: none;
+        border-bottom-width: 2px;
+        border-bottom-style: solid;
       }
     }
 

data/_sass/hydejack/__inline__/_toc.scss

@@ -0,0 +1,55 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
+//
+// To change the contents of this file,
+// edit `_sass/hydejack/_toc.pre.scss`
+// and run `npm run build:css`.
+//
+// During development you can run `npm run watch:css`
+// to continuosly rebuild this file.
+
+// Copyright (c) 2020 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
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+#markdown-toc {
+  
+  @extend .note-sm;
+  padding: 0 1.5rem .5rem 2.5rem;
+  margin: 2rem -1rem 2rem calc(-1rem + 1px);
+  
+//   transition: opacity 300ms ease, transform 300ms ease, border-color 1s ease; 
+  &:before {
+    position: relative;
+    left: -1.5rem;
+    top: -.25rem;
+    display: inline-block;
+    margin-bottom: .25rem;
+  }
+  
+}
+
+body:not(.no-toc) #markdown-toc {
+  @media screen and (min-width: $break-point-dynamic) {
+    
+    position: absolute;
+    z-index: 4;
+    width: calc(50% - #{$half-content});
+    right: 0;
+    margin: auto;
+    overflow: auto;
+    
+//     overscroll-behavior: contain; 
+    
+  }
+}

data/_sass/hydejack/__inline__/_utilities.scss

@@ -27,12 +27,15 @@
 .mb4 { margin-bottom: 4rem }
 .mb6 { margin-bottom: 6rem }
 .mt0 { margin-top: 0 }
+.mt1 { margin-top: 1rem }
 .mt2 { margin-top: 2rem }
 .mt3 { margin-top: 3rem }
 .mt4 { margin-top: 4rem }
 .pb0 { padding-bottom: 0 }
 
 .sixteen-nine { @include aspect-ratio(16, 9); }
+.sixteen-ten { @include aspect-ratio(16, 10); }
+.four-three { @include aspect-ratio(4, 3); }
 
 .sr-only {
   display: none; 

data/_sass/hydejack/__link__/_avatar.scss

@@ -26,12 +26,8 @@
   
 
   
-  display: inline-block;
   position: relative;
   z-index: 1;
-  img { width: 100%; }
-  
-
   
 }
 

data/_sass/hydejack/__link__/_base.scss

@@ -38,5 +38,4 @@ hy-push-state, hy-drawer {
 
 
 
-@media print { html { font-size: $root-font-size-print; } } 
-
+@media print { html { font-size: var(--root-font-size-print); } } 

data/_sass/hydejack/__link__/_break-layout.scss

@@ -23,7 +23,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 
-pre, table:not(.highlight), .katex-display, .break-layout  {
+pre, table:not(.highlight), .katex-display, .break-layout, mjx-container[jax="CHTML"][display="true"] {
   $pad: $content-padding * 2;
 
   @media screen {
@@ -46,19 +46,28 @@ pre, table:not(.highlight), .katex-display, .break-layout  {
     width: calc(100vw - #{$x});
   }
 
-  @media screen and (min-width: $break-point-4) {
-    $x: $content-width-2 + $sidebar-width + $content-margin-3 - $pad;
-    width: calc(100% + 100vw - #{$x});
-  }
-
   @media screen and (min-width: $break-point-5) {
     $x: $content-width-5 + $sidebar-width + $content-margin-5 - $pad;
     width: calc(100% + 100vw - #{$x});
   }
 
   @media screen and (min-width: $break-point-dynamic) {
-    $x: ($content-width-5 / 2) - $pad;
-    width: calc(100% + 50vw - #{$x});
+    width: calc(100% + #{$content-margin-5 + 2rem});
+  }
+}
+
+body:not(.no-break-layout) {
+  .katex-display > .katex, mjx-container[jax][display="true"] { 
+    text-align: left!important;
+  }
+}
+
+body.no-toc:not(.no-break-layout) {
+  pre, table:not(.highlight), .katex-display, .break-layout, mjx-container[jax="CHTML"][display="true"] {
+    @media screen and (min-width: $break-point-dynamic) {
+      $x: ($content-width-5 / 2) - ($content-padding * 2);
+      width: calc(100% + 50vw - #{$x});
+    }
   }
 }