jekyll-bonsai 0.0.3 → 0.0.4

data/_sass/base/_main.scss

@@ -8,8 +8,7 @@
 }
 
 ::selection {
-  color: $grey-dk-100;
-  background: #E6E09E;
+  background: var(--selection-color);
 }
 
 html {
@@ -21,8 +20,8 @@ body {
   font-family: $body-font-family;
   font-size: inherit;
   line-height: $body-line-height;
-  color: $body-text-color;
-  background-color: $body-background-color;
+  color: var(--body-text-color);
+  background-color: var(--body-background-color);
 }
 
 ol,
@@ -46,11 +45,11 @@ h3,
 h4,
 h5,
 h6 {
-  margin-top: 0;
-  margin-bottom: 1em;
+  // margin-top: 0;
+  // margin-bottom: 1em;
   font-weight: 500;
   line-height: $body-heading-line-height;
-  color: $body-heading-color;
+  color: var(--small-heading-color);
 }
 
 p {
@@ -58,27 +57,6 @@ p {
   margin-bottom: 1em;
 }
 
-a {
-  color: $link-color;
-  text-decoration: none;
-}
-
-a:not([class]) {
-  text-decoration: none;
-  background-image: linear-gradient($border-color 0%, $border-color 100%);
-  background-repeat: repeat-x;
-  background-position: 0 100%;
-  background-size: 1px 1px;
-
-  &:hover {
-    background-image: linear-gradient(
-      rgba($link-color, 0.45) 0%,
-      rgba($link-color, 0.45) 100%
-    );
-    background-size: 1px 1px;
-  }
-}
-
 code {
   font-family: $mono-font-family;
   font-size: 0.75em;
@@ -90,8 +68,18 @@ pre {
   margin: 0;
 }
 
-li {
-  margin: 0.25em 0;
+ul {
+  margin-bottom: 0;
+  padding: $sp-2;
+  
+  li {
+    padding: $sp-1;
+    list-style-type: none !important;
+  
+    &::before {
+      content: "" !important;
+    }
+  }
 }
 
 img {
@@ -103,101 +91,6 @@ hr {
   height: 1px;
   padding: 0;
   margin: $sp-6 0;
-  background-color: $border-color;
+  background-color: var(--accent-light-color);
   border: 0;
 }
-
-// wiki-link classes
-
-.invalid-wiki-link {
-  color: $grey-dk-000;
-  background: $invalid-wiki-link-color;
-  cursor: help;
-}
-
-.wiki-link { 
-  color: $wiki-link-color;
-}
-
-.wiki-link-embed {
-  position: relative;
-  border: 1px solid $separator-color;
-  border-radius: 15px;
-  padding: $sp-3;
-
-  .wiki-link-embed-title {
-    @include fs-6;
-    padding-top: $sp-3;
-    padding-left: $sp-3;
-  }
-
-  .wiki-link-embed-content {
-    padding: $sp-3;
-  }
-  
-  .wiki-link-embed-link {
-    position: absolute;
-    top: 1em;
-    right: 1em;
-
-    &::before {
-      content: "🥾";
-    }
-
-    &:hover {
-      filter: drop-shadow(0 0 0.8mm $drop-shadow-brown);
-    }
-  }
-}
-
-.wiki-link-img {
-  width: 50px;
-  height: 50px;
-}
-
-.sem-tag {
-  @include fs-2;
-  padding: $sp-2;
-  border: 1px solid $separator-color;
-  border-radius: 15px;
-  color: $wiki-link-color;
-
-  &:hover {
-    background-color: $base-button-color;
-  }
-}
-
-.stat-tag {
-  filter: drop-shadow(0 0 0.2mm $drop-shadow-green);
-}
-
-.infobox {
-  @include fs-2;
-  float: right;
-  margin-left: $sp-2;
-  margin-right: $sp-2;
-  padding-left: $sp-3;
-  padding-right: $sp-3;
-  padding-top: $sp-3;
-  border: 1px solid $separator-color;
-  border-radius: 15px;
-
-  .title {
-    text-align: center;
-    margin-top: 0;
-  }
-
-  ul {
-    padding: 0 !important;
-    padding-left: $sp-2 !important;
-    padding-right: $sp-2 !important;
-
-    li {
-      list-style-type: none !important;
-  
-      &::before {
-        content: "" !important;
-      }
-    }  
-  }
-}

data/_sass/base/_markdown.scss

@@ -0,0 +1,281 @@
+@charset "UTF-8";
+
+//
+// Styles for rendered markdown in the .main-content container
+//
+// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
+
+.markdown {
+  line-height: $content-line-height;
+
+  ol,
+  ul,
+  dl,
+  pre,
+  address,
+  blockquote,
+  .table-wrapper {
+    margin-top: 0.5em;
+  }
+
+  a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    
+    &.web-link:after {
+      @include fs-3;
+      font-family: $mono-font-family;
+      position: relative;
+      top: -0.5em; // sass variable not working here
+      content: "↗";
+      color: #aaaaaa;
+    }
+  }
+
+  ul,
+  ol {
+    padding-left: 1.5em;
+  }
+
+  li {
+    .highlight {
+      margin-top: $sp-1;
+    }
+  }
+
+  ol {
+    list-style-type: none;
+    counter-reset: step-counter;
+
+    > li {
+      position: relative;
+
+      &::before {
+        position: absolute;
+        top: 0.2em;
+        left: -1.6em;
+        color: $accent-txt-color;
+        content: counter(step-counter);
+        counter-increment: step-counter;
+        @include fs-3;
+
+        @include mq(sm) {
+          top: 0.11em;
+        }
+      }
+
+      ol {
+        counter-reset: sub-counter;
+
+        li {
+          &::before {
+            content: counter(sub-counter, lower-alpha);
+            counter-increment: sub-counter;
+          }
+        }
+      }
+    }
+  }
+
+  ul {
+    margin-top: 0;
+    list-style: none !important;
+
+    > li {
+      &::before {
+        position: absolute;
+        margin-left: -1.4em;
+        color: $accent-txt-color;
+        content: "•" !important;
+      }
+    }
+  }
+
+  .task-list {
+    padding-left: 0;
+  }
+
+  .task-list-item {
+    display: flex;
+    align-items: center;
+
+    &::before {
+      content: "";
+    }
+  }
+
+  .task-list-item-checkbox {
+    margin-right: 0.6em;
+  }
+
+  hr {
+    background-color: var(--accent-light-color);
+
+    + * {
+      margin-top: 0;
+    }
+  }
+
+  dl {
+    display: grid;
+    grid-template: auto / 10em 1fr;
+  }
+
+  dt,
+  dd {
+    margin: 0.25em 0;
+  }
+
+  dt {
+    grid-column: 1;
+    font-weight: 500;
+    text-align: right;
+    &::after {
+      content: ":";
+    }
+  }
+
+  dd {
+    grid-column: 2;
+    margin-bottom: 0;
+    margin-left: 1em;
+    blockquote,
+    div,
+    dl,
+    dt,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    li,
+    ol,
+    p,
+    pre,
+    table,
+    ul,
+    .table-wrapper {
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
+  dd,
+  ol,
+  ul {
+    dl:first-child {
+      dt:first-child,
+      dd:nth-child(2) {
+        margin-top: 0;
+      }
+    }
+  }
+
+  summary {
+    cursor: pointer;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    position: relative;
+    margin-top: 0.25em;
+    margin-bottom: 0.25em;
+
+    // &:first-child {
+    //   margin-top: $sp-2;
+    // }
+
+    + table,
+    + .table-wrapper,
+    + .code-example,
+    + .highlighter-rouge {
+      margin-top: 1em;
+    }
+  }
+
+  // from: 
+  //  - https://codepen.io/jimmycow/pen/LmjVaz
+  //  - https://codepen.io/JoeHastings/pen/MOdRVm
+  blockquote {
+    @include fs-3;
+    margin: 0;
+    padding: $sp-2;
+
+    border-left: $sp-1 solid var(--accent-light-color);
+
+    & p {
+      padding-left: $sp-6;
+    }
+
+    &:before {
+      @include fs-10;
+      font-family: 'Special Elite', cursive;
+      position: absolute;
+      color: var(--accent-light-color);
+      width: 4rem;
+      height: 4rem;
+
+      content: '“';
+    }
+  }
+
+  .footnotes {
+    border-top: double var(--accent-light-color);
+  }
+
+  .footnote, .reversefootnote {
+    color: var(--wiki-link-color);
+  }
+
+  // tables
+  table {
+    display: table;
+    width: 100%;
+    border-collapse: separate;
+  }
+
+  th,
+  td {
+    @include fs-3;
+    min-width: 120px;
+    padding-top: $sp-2;
+    padding-bottom: $sp-2;
+    padding-right: $sp-3;
+    padding-left: $sp-3;
+    background-color: var(--accent-dark-color);
+    border-bottom: $border rgba(var(--accent-light-color), 0.5);
+    border-left: $border var(--accent-light-color);
+
+    &:first-of-type {
+      border-left: 0;
+    }
+  }
+
+  tbody {
+    tr {
+      &:last-of-type {
+        th,
+        td {
+          border-bottom: 0;
+        }
+
+        td {
+          padding-bottom: $sp-3;
+        }
+      }
+    }
+  }
+
+  thead {
+    th {
+      border-bottom: $border var(--accent-light-color);
+    }
+  }
+}

data/_sass/base/_typography.scss

@@ -1,75 +1,89 @@
-// //
-// // Typography
-// //
-// // stylelint-disable primer/selector-no-utility, primer/no-override, selector-no-type, selector-max-type
-
-// h1,
-// .text-alpha {
-//   @include fs-8;
-//   font-weight: 300;
-// }
-
-// h2,
-// .text-beta {
-//   @include fs-6;
-// }
-
-// h3,
-// .text-gamma {
-//   @include fs-5;
-// }
-
-// h4,
-// .text-delta {
-//   @include fs-2;
-//   font-weight: 400;
-//   text-transform: uppercase;
-//   letter-spacing: 0.1em;
-// }
-
-// h4 code {
-//   text-transform: none;
-// }
-
-// h5,
-// .text-epsilon {
-//   @include fs-3;
-//   color: $grey-dk-200;
-// }
-
-// h6,
-// .text-zeta {
-//   @include fs-2;
-//   color: $grey-dk-200;
-// }
-
-.missing-entry-txt {
-  @include fs-2;
-  color: $grey-dk-000 !important;
-  pointer-events: none;
+//
+// Typography
+//
+// stylelint-disable primer/selector-no-utility, primer/no-override, selector-no-type, selector-max-type
+
+body {
+  line-height: $content-line-height;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  position: relative;
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+  padding-top: $sp-2;
+}
+
+h1,
+.text-alpha {
+  @include fs-10;
 }
 
-.small-descr {
-  @include fs-2;
-  color: $grey-dk-000;
+h2,
+.text-beta {
+  @include fs-8;
 }
 
-// .text-small {
-//   @include fs-2;
-// }
+h3,
+.text-gamma {
+  @include fs-7;
+}
 
-// .text-mono {
-//   font-family: $mono-font-family !important;
-// }
+h4,
+.text-delta {
+  @include fs-6;
+}
 
-// .text-left {
-//   text-align: left !important;
-// }
+h4 code {
+  text-transform: none;
+}
 
-// .text-center {
-//   text-align: center !important;
-// }
+h5,
+.text-epsilon {
+  @include fs-5;
+  color: $accent-txt-color;
+}
 
-// .text-right {
-//   text-align: right !important;
-// }
+h6,
+.text-zeta {
+  @include fs-4;
+  color: $accent-txt-color;
+}
+
+.text {
+
+  &--center {
+    text-align: center !important;
+  }
+
+  &--date {
+    @include fs-4;
+    color: $accent-txt-color;
+  }
+
+  &--small {
+    @include fs-2;
+    color: $accent-txt-color;
+  }
+
+//   &--left {
+//     text-align: left !important;
+//   }
+
+//   &--mono {
+//     font-family: $mono-font-family !important;
+//   }
+
+  &--no-point {
+    pointer-events: none;
+  }
+
+//   &--right {
+//     text-align: right !important;
+//   }
+}

data/_sass/base/code_themes/_gruvbox.scss

@@ -0,0 +1,92 @@
+// gruvbox
+
+.highlight {
+
+ table td { padding: 5px; }
+ table pre { margin: 0; }
+  .w {
+    color: #fbf1c7;
+    // background-color: #282828;
+  }
+  .err {
+    color: #fb4934;
+    // background-color: #282828;
+    font-weight: bold;
+  }
+  .c,  .ch,  .cd,  .cm,  .cpf,  .c1,  .cs {
+    color: #928374;
+    font-style: italic;
+  }
+  .cp {
+    color: #8ec07c;
+  }
+  .nt {
+    color: #fb4934;
+  }
+  .o,  .ow {
+    color: #fbf1c7;
+  }
+  .p,  .pi {
+    color: #fbf1c7;
+  }
+  .gi {
+    color: #b8bb26;
+    background-color: #282828;
+  }
+  .gd {
+    color: #fb4934;
+    background-color: #282828;
+  }
+  .gh {
+    color: #b8bb26;
+    font-weight: bold;
+  }
+  .k,  .kn,  .kp,  .kr,  .kv {
+    color: #fb4934;
+  }
+  .kc {
+    color: #d3869b;
+  }
+  .kt {
+    color: #fabd2f;
+  }
+  .kd {
+    color: #fe8019;
+  }
+  .s,  .sb,  .sc,  .dl,  .sd,  .s2,  .sh,  .sx,  .s1 {
+    color: #b8bb26;
+    font-style: italic;
+  }
+  .si {
+    color: #b8bb26;
+    font-style: italic;
+  }
+  .sr {
+    color: #b8bb26;
+    font-style: italic;
+  }
+  .sa {
+    color: #fb4934;
+  }
+  .se {
+    color: #fe8019;
+  }
+  .nn {
+    color: #8ec07c;
+  }
+  .nc {
+    color: #8ec07c;
+  }
+  .no {
+    color: #d3869b;
+  }
+  .na {
+    color: #b8bb26;
+  }
+  .m,  .mb,  .mf,  .mh,  .mi,  .il,  .mo,  .mx {
+    color: #d3869b;
+  }
+  .ss {
+    color: #83a598;
+  }
+}