jekyll-theme-hydejack 9.0.4 → 9.1.4

data/_sass/pooleparty/_base.pre.scss

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

data/_sass/pooleparty/_code.pre.scss

@@ -1,4 +1,4 @@
-// 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
@@ -26,6 +26,7 @@ code {
 }
 
 .figure-base {
+  @include border-radius();
   @extend .color-transition;
   margin-left: -1rem;
   margin-right: -1rem;
@@ -38,6 +39,7 @@ code {
 .pre-base {
   @extend .figure-base;
   padding: 1rem;
+  margin-bottom: 1.5rem;
   background-color: var(--gray-bg);
 
   // HACK: prevents painting for some reason
@@ -54,46 +56,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);
+  }
 }
 // >>>>> LINK

data/_sass/pooleparty/_footnotes.pre.scss

@@ -42,6 +42,7 @@ sup {
 // List of footnotes
 .footnotes {
   margin-top: 5rem;
+  margin-bottom: 5rem;
 
   > ol {
     color: var(--gray);
@@ -62,7 +63,7 @@ sup {
     @extend .color-transition;
     content: "";
     display: block;
-    margin: 1.5rem 0;
+    margin: 1rem 0;
     border: 0;
     border-top: 1px solid var(--border-color);
   }

data/_sass/pooleparty/_message.pre.scss

@@ -30,7 +30,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/_posts.pre.scss

@@ -25,6 +25,10 @@
     position: relative;
     margin-bottom: 1.5rem;
   }
+
+  .aspect-ratio.sixteen-nine.lead {
+    @extend .border-radius;
+  }
 }
 
 body:not(.no-third-column) {
@@ -48,13 +52,37 @@ 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;
+  margin-top: -.6rem;
+  height: 2rem;
+  margin-bottom: .85rem;
   color: var(--gray);
+
+  > .ellipsis {
+    cursor: pointer;
+  }
+
+  [class^="icon-"] { 
+    display: inline-block; 
+    font-size: smaller;
+    margin-right: .25rem;
+  }
 }
 // >>>
 // <<< LINK
+clap-button {
+  margin-left: auto;
+  margin-right: auto;
+  --clap-button-color: var(--accent-color);
+}
+
+clap-button + p.message {
+  margin: -2rem auto 0;
+  max-width: 32rem;
+  font-size: smaller
+}
+
 hr.dingbat {
   border: 0;
   &:after{

data/_sass/pooleparty/_read-more.pre.scss

@@ -18,6 +18,7 @@
   @extend .faded;
   margin-top: 1.5rem;
   margin-bottom: 3rem;
+  text-align: right;
 
   &::after {
     content: " \2192";

data/_sass/pooleparty/_table.pre.scss

@@ -14,26 +14,36 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 // <<<<< LINK
-table:not(.highlight) {
+table:not(.rouge-table) {
   @extend .figure-base;
   border-collapse: collapse;
+  border-radius: 0!important;
   display: block;
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
 
   td, th {
     @extend .color-transition;
-    padding: .25rem .5rem;
-    border: 1px solid var(--border-color);
+    padding: .5em .75em;
 
     &:first-child {
       padding-left: 1rem;
+      border-left: 1px solid var(--border-color);
     }
 
     &:last-child {
       padding-right: 1rem;
+      border-right: 1px solid var(--border-color);
     }
   }
 
+  > *:first-child {
+    border-top: 1px solid var(--border-color);
+  }
+
+  > *:last-child {
+    border-bottom: 1px solid var(--border-color);
+  }
+
   thead {
     @extend .color-transition;
     background-color: var(--body-bg);
@@ -43,7 +53,7 @@ table:not(.highlight) {
   tbody + tbody,
   tfoot {
     @extend .color-transition;
-    border-top: 3px double var(--border-color);
+    border-top: 1px solid var(--border-color);
   }
 
   tbody tr:nth-child(even) td,
@@ -70,13 +80,6 @@ table:not(.highlight) {
   display: flex;
   overflow: hidden;
 
-  thead,
-  thead + tbody,
-  tbody + tbody {
-    border-top: 1px solid var(--border-color);
-    border-bottom: 1px solid var(--border-color);
-  }
-
   thead, tbody {
     display: flex;
   }
@@ -84,9 +87,11 @@ table:not(.highlight) {
   thead {
     flex-shrink: 0;
     min-width: min-content;
+    border-left: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
 
     th {
-      padding-left: 1rem;
+      padding-left: 1em;
     }
   }
 
@@ -94,7 +99,6 @@ table:not(.highlight) {
     position: relative;
     overflow-x: auto;
     overflow-y: hidden;
-    padding-left: 1px;
     -webkit-overflow-scrolling: touch;
   }
 
@@ -104,35 +108,25 @@ table:not(.highlight) {
     min-width: min-content;
     flex-shrink: 0;
 
-    td {
-      border-left: none;
-    }
-
-    &:first-child {
-      td {
-        border-left: 1px solid var(--border-color);
-      }
-    }
-
     &:last-child {
+      border-right: 1px solid var(--border-color);
       td {
-        padding-right: 1rem;
-        border-right: 1px solid var(--border-color);
+        padding-right: 1em;
       }
     }
   }
 
   td, th {
     display: block;
-    border-bottom: none;
 
     &:first-child {
-      padding-left: .5rem;
-      border-top: none;
+      padding-left: .5em;
+      border-left: none;
     }
 
     &:last-child {
-      padding-right: .5rem;
+      padding-right: .5em;
+      border-right: none;
     }
   }
 }
@@ -140,11 +134,11 @@ table:not(.highlight) {
 table.stretch-table {
   display: table;
   width: 100% !important;
-  width: calc(100% + 2rem) !important;
-  @media screen and (max-width: $break-point-4) {
-    display: block!important;
-    @include scroll-table();
-  }
+  width: calc(100% + 2em) !important;
+  // @media screen and (max-width: $break-point-4) {
+  //   display: block!important;
+  //   @include scroll-table();
+  // }
 }
 
 table.scroll-table {
@@ -166,7 +160,7 @@ table.flip-table {
 }
 
 @media print {
-  table:not(.highlight) {
+  table:not(.rouge-table) {
     width: 100%!important;
   }
 }