jekyll-bonsai 0.0.3

data/_sass/base/_typography.scss

@@ -0,0 +1,75 @@
+// //
+// // 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;
+}
+
+.small-descr {
+  @include fs-2;
+  color: $grey-dk-000;
+}
+
+// .text-small {
+//   @include fs-2;
+// }
+
+// .text-mono {
+//   font-family: $mono-font-family !important;
+// }
+
+// .text-left {
+//   text-align: left !important;
+// }
+
+// .text-center {
+//   text-align: center !important;
+// }
+
+// .text-right {
+//   text-align: right !important;
+// }

data/_sass/base/base.scss

@@ -0,0 +1,3 @@
+@import "./layout";
+@import "./main";
+@import "./typography";

data/_sass/color/dark.scss

@@ -0,0 +1,58 @@
+$body-background-color: $grey-dk-300;
+$sidebar-color: $grey-dk-300;
+$border-color: $grey-dk-200;
+
+$body-text-color: $grey-lt-300;
+// $body-text-color-highlighted: $grey-dk-100;
+$body-heading-color: $grey-lt-000;
+$nav-child-link-color: $grey-dk-000;
+$search-result-preview-color: $grey-dk-000;
+
+$separator-color: $grey-dk-200;
+
+$btn-primary-color: $blue-200;
+$base-button-color: $grey-dk-250;
+
+$code-background-color: $grey-dk-250;
+$search-background-color: $grey-dk-250;
+$table-background-color: $grey-dk-250;
+$box-shadow-color: $white;
+$feedback-color: darken($sidebar-color, 3%);
+
+$entry-foot-background-color: $grey-dk-250;
+$entry-foot-text-color: $grey-dk-000;
+$visited-color: $grey-dk-200;
+
+$infobox-color: $grey-dk-000;
+
+// link variables
+
+$link-color: $blue-000;
+$wiki-link-color: $green-07;
+$invalid-wiki-link-color: $grey-dk-200;
+
+// graph variables
+// (graph attributes had to be set in scripts.js because of poor svg 2.0 support)
+
+$link-line-stroke-color: $grey-dk-200;
+$link-line-stroke-width: 0.5;
+$link-line-dash-val: 0;
+
+$node-stroke-color: $grey-dk-200;
+$node-stroke-width: 1;
+
+$node-unvisited-color: $green-400;
+$node-visited-color: $green-05;
+$node-missing-color: $transparent;
+
+$node-active-color: $yellow-200;
+$node-tagged-color: $orange-300;
+
+$hover-active-brightness: 100%;
+$hover-inactive-brightness: 50%;
+$hover-active-alpha: 100%;
+$hover-inactive-alpha: 90%;
+
+// blockquote decoration
+$blockquote-border-color: rgba($link-line-stroke-color, 0.33);
+$blockquote-quote-color: rgba($link-line-stroke-color, .75);

data/_sass/color/light.scss

@@ -0,0 +1,58 @@
+$body-background-color: $green-01 !default;
+$sidebar-color: $grey-lt-000 !default;
+$border-color: $grey-lt-100 !default;
+
+$body-text-color: $grey-dk-100 !default;
+// $body-text-color-highlighted: $grey-lt-300 !default;
+$body-heading-color: $grey-dk-300 !default;
+$nav-child-link-color: $grey-dk-100 !default;
+$search-background-color: $white !default;
+
+$separator-color: $green-02 !default;
+
+$btn-primary-color: $green-200 !default;
+$base-button-color: $green-02 !default;
+
+$code-background-color: $green-02 !default;
+$search-result-preview-color: $grey-dk-000 !default;
+$table-background-color: $white !default;
+$box-shadow-color: $black !default;
+$feedback-color: darken($sidebar-color, 3%) !default;
+
+$entry-foot-background-color: $green-01-03 !default;
+$entry-foot-text-color: $brown-02;
+$visited-color: $green-yellow-05 !default;
+
+$infobox-color: $brown-02 !default;
+
+// link variables
+
+$link-color: $blue-200 !default;
+$wiki-link-color: $green-200 !default;
+$invalid-wiki-link-color: $grey-lt-300;
+
+// graph variables
+// (graph attributes had to be set in scripts.js because of poor svg 2.0 support)
+
+$link-line-stroke-color: $brown-02;
+$link-line-stroke-width: 0.5;
+$link-line-dash-val: 0;
+
+$node-stroke-color: $transparent;
+$node-stroke-width: 0;
+
+$node-unvisited-color: $green-03;
+$node-visited-color: $green-05;
+$node-missing-color: $brown-02;
+
+$node-active-color: $yellow-300;
+$node-tagged-color: $orange-300;
+
+$hover-active-brightness: 100%;
+$hover-inactive-brightness: 100%;
+$hover-active-alpha: 100%;
+$hover-inactive-alpha: 25%;
+
+// blockquote
+$blockquote-border-color: rgba($link-line-stroke-color, 0.33) !default;
+$blockquote-quote-color: rgba($link-line-stroke-color, .5) !default;

data/_sass/includes/_btn.scss

@@ -0,0 +1,106 @@
+//
+// Buttons and things that look like buttons
+//
+
+.btn-selector {
+  @include fs-6;
+  display: flex; // transform animation breaks without this on theme-colors and graph-type...
+  cursor: pointer;
+  user-select: none;
+  padding: $sp-2;
+  transition: all .2s ease-in-out;
+
+  &:hover {
+    transform: scale(1.5); 
+  }
+
+  /* Hide the browser's default checkbox */
+  input {
+    opacity: 0;
+    height: 0;
+    width: 0;
+  }
+
+  #graph-type-emoji-span {
+    filter: drop-shadow(0 0 0.7mm $drop-shadow-green);
+  }
+
+  #nav-type-emoji-span {
+    filter: drop-shadow(0 0 0.7mm $drop-shadow-orange);
+  }
+
+  #entry-head-emoji-span {  
+    filter: drop-shadow(0 0 0.7mm $drop-shadow-brown);  
+  }
+
+  #theme-colors-emoji-span {
+    filter: drop-shadow(0 0 0.7mm $drop-shadow-yellow);
+  }
+}
+
+.entry-foot-selector {
+  @include fs-6;
+  display: flex;
+  cursor: pointer;
+  user-select: none;
+  padding-right: $sp-3;
+  padding-top: $sp-3;
+  transition: all .2s ease-in-out;
+
+  &:hover {
+    transform: scale(1.5); 
+  }
+
+  /* Hide the browser's default checkbox */
+  input {
+    opacity: 0;
+    height: 0;
+    width: 0;
+  }
+
+  #entry-foot-posts-emoji-span {
+    filter: drop-shadow(0 0 0.7mm $drop-shadow-purple);  
+  }
+
+  #entry-foot-link-emoji-span {
+    filter: drop-shadow(0 0 0.7mm $drop-shadow-brown);
+  }
+}
+
+.bonsai-burger {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  right: $sp-2;
+  bottom: $sp-4;
+  cursor: pointer;
+  user-select: none;
+  filter: drop-shadow(0 0 0.7mm $drop-shadow-green);
+  z-index: 5;
+
+  /* Hide the browser's default checkbox */
+  input {
+    opacity: 0;
+    height: 0;
+    width: 0;
+  }
+
+  #nav-base {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  #nav-bonsai {
+    margin-left: 5px;
+  }
+}
+
+.connect {
+  // 'sticky footer' from: https://css-tricks.com/couple-takes-sticky-footer/#there-is-flexbox
+  //  ex = local
+  //    footer = connect
+  //    content = main-content
+  //    body = main-content-wrap
+  //    html, body = main
+  flex-shrink: 0;
+}

data/_sass/includes/_graph.scss

@@ -0,0 +1,69 @@
+//
+// Graph attributes (garden/site-nav)
+//
+
+svg {
+  .links line {
+    stroke: $link-line-stroke-color;
+    stroke-width: $link-line-stroke-width;
+    stroke-dasharray: $link-line-dash-val;
+  }
+
+  .nodes circle {
+    pointer-events: all;
+    stroke: $node-stroke-color;
+    stroke-width: $node-stroke-width;
+    fill: $node-unvisited-color;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &.pulse {
+      fill: $node-active-color;
+      animation: pulse 2s linear infinite;
+    }
+
+    &.pulse-sem-tag {
+      fill: $node-tagged-color;
+      animation: pulse 2s linear infinite;
+    }
+    
+    &.missing {
+      fill: $node-missing-color !important;
+      cursor: help;
+    }
+
+    // &.unvisited {
+    //   fill: $node-unvisited-color;
+    // }
+
+    &.visited {
+      fill: $node-visited-color;
+    }
+  }
+
+  .text text {
+    fill: $body-text-color;
+  }
+
+  .active {
+    opacity: $hover-active-alpha;
+    filter: brightness($hover-active-brightness);
+    font-size: 50%;
+    z-index: 10;
+    transition: all 0.1s ease-in-out;
+  }
+
+  .inactive {
+    opacity: $hover-inactive-alpha;
+    filter: brightness($hover-inactive-brightness);
+    z-index: 0;
+    transition: all 0.1s ease-in-out;
+  }
+
+  @keyframes pulse {       
+    0% {transform: scale(1.0); opacity: 1;}
+    100% {transform: scale(2); opacity: 0;}
+  }
+}

data/_sass/includes/_nav.scss

@@ -0,0 +1,89 @@
+//
+// navigation
+//
+// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity
+
+// entry-breadcrumb nav
+
+.entry-head-nav {
+  @include mq(md) {
+    margin-top: -$sp-4;
+  }
+  display: flex;
+  overflow-x: scroll;
+  white-space: nowrap;  
+
+  .entry-head-breadcrumbs {
+    padding-left: 0;
+    padding-top: $sp-2;
+    margin-bottom: 0;
+    margin-top: 0;
+    align-self: center;
+    list-style: none;
+  
+    .entry-head-breadcrumb {
+      @include fs-2;
+      display: flex;
+      flex-direction: row;
+      padding-left: $sp-2;
+      
+      &::before {
+        display: none;
+      }
+    }
+  } 
+}
+
+// entry-foot nav
+
+.entry-foot-wrapper {
+  margin-top: $sp-6;
+  margin-bottom: $sp-6;
+  display: flex;
+
+  .entry-foot-nav-title {
+    @include fs-4;
+    color: $entry-foot-text-color;
+  }
+
+  .entry-foot-nav-subtitle {
+    @include fs-2;
+    color: $entry-foot-text-color;
+  }
+
+  .entry-foot-nav {
+    display: flex;
+    flex-direction: column;
+    border-radius: 16px;
+
+    .entry-foot-nav-sections {
+      display: flex;
+    }
+    
+    .entry-foot-nav-section {
+      padding-left: $sp-2;
+      padding-right: $sp-2;
+    }
+
+    .entry-foot-nav-list {
+      display: block; // columns require block
+      column-count: 2;
+      column-width: $content-width / 6;
+      padding-left: 0;
+      list-style: none;
+  
+      .entry-foot-nav-list-item {
+        border-radius: 16px;
+        padding: $sp-1;
+        max-width: $content-width / 4;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+  
+        &::before {
+          display: none; 
+        }
+      }
+    }
+  }
+}