jekyll-theme-hydejack 9.0.4 → 9.1.0

data/_sass/hydejack/_content.pre.scss

@@ -21,10 +21,13 @@
 
   @media screen {
     padding-left: $content-padding + .5rem;
-    max-width: $content-width;
     min-height: 100vh;
   }
 
+  @media screen and (min-width: $break-point-1) {
+    max-width: $content-width;
+  }
+
   @media screen and (min-width: $break-point-2) {
     max-width: $content-width-2;
   }
@@ -36,6 +39,7 @@
   }
 
   @media screen and (min-width: $break-point-5) {
+    padding-top: 9rem;
     margin-left: $sidebar-width + $content-margin-5;
     margin-right: $content-margin-5;
     max-width: $content-width-5;

data/_sass/hydejack/_images.pre.scss

@@ -31,7 +31,7 @@ figure, .figure {
   margin-bottom: 2rem;
 
   > *:first-child {
-    margin-bottom: .5rem;
+    margin-bottom: 1rem;
   }
 }
 

data/_sass/hydejack/_sidebar.pre.scss

@@ -74,16 +74,35 @@ hy-drawer {
   color: rgba(255, 255, 255, .75);
   text-align: center;
   min-height: 100vh;
+  &.invert { color: rgba(32, 32, 32, .75) }
   // >>>
 
   a {
-    color: #fff; // inline
-    border-bottom-color: rgba(255, 255, 255, 0.2); // inline
-    text-decoration-color: rgba(255, 255, 255, 0.2); // inline
+    // <<< inline
+    color: #fff; 
+    border-bottom-color: rgba(255, 255, 255, 0.2); 
+    text-decoration-color: rgba(255, 255, 255, 0.2); 
+    // >>>
+    // <<< link
+    &:hover { 
+      border-bottom-color: #fff;
+      text-decoration-color: #fff;
+    }
+    // >>>
+  }
+
+  &.invert a {
+    // <<< inline
+    color: #222;
+    border-bottom-color: rgba(32, 32, 32, 0.2); 
+    text-decoration-color: rgba(32, 32, 32, 0.2); 
+    // >>>
+    // <<< link
     &:hover { 
-      border-bottom-color: #fff; // link
-      text-decoration-color: #fff; // link
+      border-bottom-color: #222;
+      text-decoration-color: #222;
     }
+    // >>>
   }
 }
 
@@ -158,6 +177,11 @@ hy-drawer.loaded .sidebar {
   }
 }
 
+.sidebar.invert .sidebar-about > a.sidebar-title{
+  &::after { border-color: rgba(32, 32, 32, 0.2) }
+  &:hover::after { border-color: #222 }
+}
+
 .sidebar-nav > ul {
   list-style: none;
   padding-left: 0;

data/_sass/hydejack/_toc.pre.scss

@@ -21,9 +21,7 @@
   padding-bottom: .5rem;
   // >>>
   transition: opacity 300ms ease, transform 300ms ease, border-color 1s ease; // link
-  &:before {
-    left: 1rem;
-  }
+  &:before { left: 1rem; }
 }
 
 body:not(.no-toc) #markdown-toc {
@@ -31,14 +29,14 @@ body:not(.no-toc) #markdown-toc {
     // <<< inline
     position: absolute;
     z-index: 4;
-    width: calc(50% - #{$half-content});
+    width: 20.5rem;
     right: 0;
     margin: auto;
     overflow: auto;
     // >>>
-    overscroll-behavior: contain; // link
-
     // <<< link
+    overscroll-behavior: contain;
+
     &.toc-hide {
       opacity: 0;
       transform: translateX(-2rem);
@@ -57,3 +55,11 @@ body:not(.no-toc) #markdown-toc {
     // >>>
   }
 }
+
+// <<< inline
+body.no-break-layout:not(.no-toc) #markdown-toc {
+  @media screen and (min-width: $break-point-dynamic) {
+    width: calc(50% - #{$half-content});
+  }
+}
+// >>>

data/_sass/hydejack/_utilities.pre.scss

@@ -23,6 +23,8 @@
 .mt3 { margin-top: 3rem }
 .mt4 { margin-top: 4rem }
 .pb0 { padding-bottom: 0 }
+.ml1 { margin-left: 1rem }
+.mr1 { margin-right: 1rem }
 
 .sixteen-nine { @include aspect-ratio(16, 9); }
 .sixteen-ten { @include aspect-ratio(16, 10); }
@@ -43,7 +45,30 @@
   // >>>
 }
 
+.larger { font-size: larger; }
+.smaller { font-size: smaller; }
+
+.clearfix {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .border {
   border: 1px solid var(--border-color); // inline
   transition: border-color 1s ease; // link
 }
+
+.border-radius {
+  @include border-radius();
+}
+
+.fallback-img {
+  @include fallback-image();
+}

data/_sass/pooleparty/__inline__/_base.scss

@@ -59,8 +59,10 @@ p {
 }
 
 .lead {
+  @extend .border-radius;
   margin-left: -1rem;
   margin-right: -1rem;
+  margin-bottom: 1.5rem;
 }
 
 img, video {

data/_sass/pooleparty/__inline__/_code.scss

@@ -7,7 +7,7 @@
 // During development you can run `npm run watch:css`
 // to continuosly rebuild this file.
 
-// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+// 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

data/_sass/pooleparty/__inline__/_message.scss

@@ -39,7 +39,7 @@
   color: var(--body-color);
   font-size: smaller;
   border-left: 1px solid var(--border-color);
-  padding: 1.5rem 1rem 0 1rem;
+  padding: 1.2rem 1rem 0 1rem;
   margin: 1rem -1rem;
   position: relative;
 

data/_sass/pooleparty/__inline__/_posts.scss

@@ -34,6 +34,10 @@
     position: relative;
     margin-bottom: 1.5rem;
   }
+
+  .aspect-ratio.sixteen-nine.lead {
+    @extend .border-radius;
+  }
 }
 
 body:not(.no-third-column) {
@@ -57,10 +61,19 @@ body:not(.no-third-column) {
 // Meta data line below post title
 .post-date {
   @extend .h4;
-  display: block;
-  margin-top: -0.5rem;
-  margin-bottom: 1rem;
+  display: flex;
+  justify-content: space-between;
+  white-space: nowrap;
+  margin-top: -.6rem;
+  height: 2rem;
+  margin-bottom: .85rem;
   color: var(--gray);
+
+  [class^="icon-"] { 
+    display: inline-block; 
+    font-size: smaller;
+    margin-right: .25rem;
+  }
 }
 
 

data/_sass/pooleparty/__inline__/_type.scss

@@ -99,11 +99,11 @@ body:not(.no-large-headings) {
 }
 
 h1, h2, h3, .h1, .h2, .h3 {
-  margin: 3rem 0 1rem;
+  margin: 4rem 0 1rem;
 }
 
 h4, h5, h6, .h4, .h5, .h6 {
-  margin: 2rem 0 .5rem;
+  margin: 3rem 0 .5rem;
 }
 
 p {

data/_sass/pooleparty/__link__/_code.scss

@@ -7,7 +7,7 @@
 // During development you can run `npm run watch:css`
 // to continuosly rebuild this file.
 
-// Copyright (c) 2017 Florian Klampfer <https://qwtel.com/>
+// 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
@@ -35,6 +35,7 @@ code {
 }
 
 .figure-base {
+  @include border-radius();
   @extend .color-transition;
   margin-left: -1rem;
   margin-right: -1rem;
@@ -47,6 +48,7 @@ code {
 .pre-base {
   @extend .figure-base;
   padding: 1rem;
+  margin-bottom: 1.5rem;
   background-color: var(--gray-bg);
 
   // HACK: prevents painting for some reason
@@ -63,46 +65,155 @@ pre {
   @extend .pre-base;
   margin-top: 0;
   display: block;
-  line-height: 1.5;
-  font-size: .85em;
+  font-size: .83em;
+  line-height: 1.5em;
   position: relative;
 }
 
 pre > code {
+  display: inline-block;
+  position: relative;
+  min-width: 100%;
   padding: 0;
   color: inherit;
   background-color: transparent;
   font-size: 1em;
 
-  .highlight-code-line {
-    @extend .color-transition;
-    &:before { content: ' ' }
-    position: absolute;
-    left: 0;
-    display: inline-block;
-    width: 100%;
-    background: var(--border-color);
-    border-left: 3px solid var(--accent-color);
-    opacity: 0.33;
-    z-index: -1;
-  }
+  // .__hl {
+  //   @extend .color-transition;
+  //   display: inline-block;
+  //   position: absolute;
+  //   left: -1rem;
+  //   right: -1rem;
+  //   background: var(--accent-color-highlight);
+  //   border-left: .25rem solid var(--accent-color-faded);
+  //   z-index: -1;
+  // }
 }
 
-.pre-header {
+.pre-header-common {
   @extend .color-transition;
-  display: block;
-  margin-left: -1rem;
-  margin-right: -1rem;
-  padding: 0.4rem 1rem 0.25rem;
+  height: 2rem;
+  border: none;
   border-bottom: 1px solid var(--border-color);
-  font-style: normal!important;
-  font-size: smaller;
-  color: var(--gray)!important;
-  background-color: var(--gray-bg);
-  .lang { color: var(--menu-text) }
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+div.highlight {
+  position: relative;
+
+  > .pre-header {
+    @extend .figure-base;
+    @extend .pre-header-common;
+    display: block;
+    color: var(--gray)!important;
+    background-color: var(--gray-bg);
+
+    > span {
+      font-size: smaller;
+    }
+
+    > * {
+      display: inline-block;
+      padding: .3rem 1rem .2rem;
+    }
+  }
+
+  > button {
+    @extend .pre-header-common;
+    position: absolute;
+    top: 0;
+    right: -1rem;
+    color: var(--menu-text);
+    background: none;
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+    border-top-left-radius: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    overflow: hidden;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 300ms;
+
+    &:hover {
+      background: var(--gray-bg);
+    }
+
+    &.copy-success {
+      > .icon-copy {
+        animation-name: icon-copy;
+        animation-duration: 1.5s;
+        animation-timing-function: ease;
+      }
+      > .icon-checkmark {
+        animation-name: icon-checkmark;
+        animation-duration: 1.5s;
+        animation-timing-function: ease;
+      }
+    }
+    > .icon-copy { 
+      display: inline-block;
+    }
+    > .icon-checkmark {
+      position: absolute;
+
+      top: 50%;
+      margin-top: -3em;
+
+      left: 0;
+      right: 0;
+      text-align: center;
+    }
+  }
+
+  &:hover > button {
+    opacity: 1;
+    transition: opacity 100ms;
+  }
+
+  > .pre-header ~ pre.highlight {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    padding-top: .65rem;
+  }
+
+  > .pre-header ~ button {
+    opacity: 1;
+  }
+}
+
+body.no-break-layout {
+  div.highlight > button {
+    border-right: none;
+  }
+}
+
+@keyframes icon-checkmark {
+  0% {
+    transform: translateY(0);
+  }
+  15%, 85% {
+    transform: translateY(2.5em);
+  }
+  100% {
+    transform: translateY(5em);
+  }
 }
 
-.pre-header + pre.highlight {
-  padding-top: .75rem;
+@keyframes icon-copy {
+  0% {
+    transform: translateY(0);
+  }
+  15% {
+    transform: translateY(2.5em);
+  }
+  15.01%, 85% {
+    transform: translateY(-2.5em);
+  }
+  100% {
+    transform: translateY(0);
+  }
 }