jekyll-bonsai 0.0.3

data/_sass/includes/_site_nav.scss

@@ -0,0 +1,221 @@
+// site (bonsai/garden) nav -- which houses the 'svg-graph'
+
+.site-nav {
+  display: none;
+  width: 100%;
+
+  &.nav-open {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+  }
+
+  @include mq(md) {
+    display: block;
+    flex: 1 1 auto;
+  }
+
+  header {
+    @include fs-5;
+    display: flex;
+    justify-content: flex-start;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 4;
+    padding: $sp-2;
+    color: $grey-dk-000;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  footer {
+    position: absolute;
+    width: 100%;
+    z-index: 4;
+    bottom: 0;
+    left: 0;
+    padding: $sp-3;
+  }
+}
+
+.dropdown {
+  border: none;
+  background: none; 
+}
+
+.dropdown:hover .dropdown-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.dropdown-content {
+  display: none;
+}
+
+.dropdown-btn {
+  @include fs-6;
+  display: flex;
+  cursor: pointer;
+  user-select: none;
+  padding: $sp-2;
+  border: none;
+  background: none; 
+  display: table-cell;
+  vertical-align: middle;
+  filter: drop-shadow(0 0 0.8mm $drop-shadow-blue);
+}
+
+.dropbtn {
+  @include fs-6;
+  cursor: pointer;
+  user-select: none;
+  padding: $sp-2;
+  transition: all .2s ease-in-out;
+  border: none;
+  background: none; 
+  display: table-cell;
+  vertical-align: middle;
+  transition: all .2s ease-in-out;
+  
+  &:hover {
+    transform: scale(1.5); 
+  }
+
+  #posts-emoji-span {
+    filter: drop-shadow(0 0 0.8mm $drop-shadow-purple);
+  }
+
+  #recent-emoji-span {
+    filter: drop-shadow(0 0 0.8mm $drop-shadow-blue);
+  }
+
+  #stat-tags-emoji-span {
+    filter: drop-shadow(0 0 0.8mm $drop-shadow-brown);
+  }
+}
+
+.site-nav-btn {
+  @include fs-6;
+  display: flex;
+  cursor: pointer;
+  user-select: none;
+  padding: $sp-2;
+  transition: all .2s ease-in-out;
+  border: none;
+  background: none; 
+  display: table-cell;
+  vertical-align: middle;
+  
+  &:hover {
+    transform: scale(1.5); 
+  }
+
+  #search-emoji-span {
+    filter: drop-shadow(0 0 0.8mm $drop-shadow-brown);
+  }
+
+  #visited-emoji-span {
+    filter: drop-shadow(0 0 0.8mm $drop-shadow-orange);
+  }
+}
+
+.delete-btn {
+  @include fs-3;
+  display: flex;
+  cursor: pointer;
+  user-select: none;
+  transition: all .2s ease-in-out;
+  border: none;
+  background: none; 
+  display: table-cell;
+  vertical-align: middle;
+  
+  &:hover {
+    transform: scale(1.5); 
+  }
+
+  #delete-emoji-span {
+    filter: drop-shadow(0 0 0.8mm $drop-shadow-red);
+  }
+}
+
+// visited nav (user-path)
+
+.visited-nav {  
+  z-index: 3;
+  position:relative;
+  height: 100%;
+  width: 100%;
+  padding-top: $sp-10;
+  padding-bottom: $sp-10;
+  overflow-y: scroll;
+
+  .visited-nav-list {
+    padding-left: $sp-1 !important;
+    list-style: none;
+    
+    .visited-nav-list-item {
+      @include fs-4;
+      display: flex;
+      width: 80%;
+      padding: $sp-2;
+      margin-top: $sp-2;
+      margin-bottom: $sp-2;
+      border-radius: 16px;
+      // both animation and transform rely on this transition setting (according to: https://stackoverflow.com/a/20903041)
+      transition: all 0.15s ease-in-out;
+      
+      &:hover {
+        transform: scale(1.1); 
+      }
+      
+      &::before {
+        content: "🥾";
+      }
+
+      button {
+        justify-content: flex-end;
+      }
+    }
+  } 
+}
+
+.hide {
+  position: absolute !important;
+  top: -9999px !important;
+  left: -9999px !important;
+
+  // animation-name: animateShow;
+  // animation-duration: 100ms;
+  // animation-timing-function: ease-in-out;
+}
+
+// @keyframes animateHide {
+//   0% {
+//     opacity: 1;
+//   }
+  
+//   100% {
+//     opacity: 0;
+//   }
+// }
+
+// .show {
+//   animation-name: animateShow;
+//   animation-duration: 250ms;
+//   animation-delay: calc(var(--animation-show-order) * 100ms);
+//   animation-fill-mode: both;
+//   animation-timing-function: ease-in-out;
+// }
+
+// // from: https://css-tricks.com/different-approaches-for-creating-a-staggered-animation/#how-about-custom-properties
+// @keyframes animateShow {
+//   0% {
+//     opacity: 0;
+//   }
+  
+//   100% {
+//     opacity: 1;
+//   }
+// }

data/_sass/includes/_tooltip.scss

@@ -0,0 +1,29 @@
+//
+// hover-preview tooltip
+//
+
+.tooltip-wrapper {
+    @include fs-2;
+    z-index: 5;
+    background: $body-background-color;
+    padding: 2em; // don't use sass spacing variables -- it makes hover preview buggy.
+    border: 1px solid $border-color;
+    border-radius: 15px;
+    overflow: hidden;
+    position: absolute;
+    width: 400px;
+    height: 250px;
+    box-shadow: 0 1px 2px rgba($box-shadow-color, 0.12), 0 3px 10px rgba($box-shadow-color, 0.08);
+}
+
+.tooltip-wrapper:after {
+  content: "";
+  position: absolute;
+  z-index: 5;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  background-image: linear-gradient(to bottom, rgba(0,0,0,0), $body-background-color 90%);
+  width: 100%;
+  height: 75px;
+}

data/_sass/includes/includes.scss

@@ -0,0 +1,9 @@
+// 
+// scss that corresponds to project _includes.
+// 
+
+@import "./btn";
+@import "./graph";
+@import "./nav";
+@import "./site_nav";
+@import "./tooltip";

data/_sass/markdown/_code.scss

@@ -0,0 +1,340 @@
+//
+// Code and syntax highlighting
+//
+// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type
+
+code {
+  padding: 0.2em 0.15em;
+  font-weight: 400;
+  background-color: $code-background-color;
+  border: $border $border-color;
+  border-radius: $border-radius;
+}
+
+// Avoid appearance of dark border around visited code links in Safari
+a:visited code {
+  border-color: $border-color;
+}
+
+// Content structure for highlighted code blocks using fences or Liquid
+//
+// ```[LANG]...```, no kramdown line_numbers:
+//   div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
+//
+// ```[LANG]...```, kramdown line_numbers = true:
+//   div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
+//   > div.table-wrapper > table.rouge-table > tbody > tr
+//   > td.rouge-gutter.gl > pre.lineno
+//   | td.rouge-code > pre
+//
+// {% highlight LANG %}...{% endhighlight %}:
+//   figure.highlight > pre > code.language-LANG
+//
+// {% highlight LANG linenos %}...{% endhighlight %}:
+//   figure.highlight > pre > code.language-LANG
+//   > div.table-wrapper > table.rouge-table > tbody > tr
+//   > td.gutter.gl > pre.lineno
+//   | td.code > pre
+//
+// fix_linenos removes the outermost pre when it encloses table.rouge-table
+//
+// See docs/index-test.md for some tests.
+//
+// No kramdown line_numbers: fences and Liquid highlighting look the same.
+// Kramdown line_numbers = true: fences have a wider gutter than with Liquid?
+
+// ```[LANG]...```
+div.highlighter-rouge {
+  padding: $sp-3;
+  margin-top: 0;
+  margin-bottom: $sp-3;
+  overflow-x: auto;
+  background-color: $code-background-color;
+  border-radius: $border-radius;
+  box-shadow: none;
+  -webkit-overflow-scrolling: touch;
+
+  div.highlight,
+  pre.highlight,
+  code {
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+}
+
+// {% highlight LANG %}...{% endhighlight %},
+// {% highlight LANG linenos %}...{% endhighlight %}:
+figure.highlight {
+  padding: $sp-3;
+  margin-top: 0;
+  margin-bottom: $sp-3;
+  background-color: $code-background-color;
+  border-radius: $border-radius;
+  box-shadow: none;
+  -webkit-overflow-scrolling: touch;
+
+  pre,
+  code {
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+}
+
+// ```[LANG]...```, kramdown line_numbers = true,
+// {% highlight LANG linenos %}...{% endhighlight %}:
+.highlight .table-wrapper {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  box-shadow: none;
+
+  td,
+  pre {
+    @include fs-2;
+    min-width: 0;
+    padding: 0;
+    background-color: $code-background-color;
+    border: 0;
+  }
+
+  td.gl {
+    padding-right: $sp-3;
+  }
+
+  pre {
+    margin: 0;
+    line-height: 2;
+  }
+}
+
+.highlight .c {
+  color: #586e75;
+} // comment //
+.highlight .err {
+  color: #93a1a1;
+} // error //
+.highlight .g {
+  color: #93a1a1;
+} // generic //
+.highlight .k {
+  color: #859900;
+} // keyword //
+.highlight .l {
+  color: #93a1a1;
+} // literal //
+.highlight .n {
+  color: #93a1a1;
+} // name //
+.highlight .o {
+  color: #859900;
+} // operator //
+.highlight .x {
+  color: #cb4b16;
+} // other //
+.highlight .p {
+  color: #93a1a1;
+} // punctuation //
+.highlight .cm {
+  color: #586e75;
+} // comment.multiline //
+.highlight .cp {
+  color: #859900;
+} // comment.preproc //
+.highlight .c1 {
+  color: #586e75;
+} // comment.single //
+.highlight .cs {
+  color: #859900;
+} // comment.special //
+.highlight .gd {
+  color: #2aa198;
+} // generic.deleted //
+.highlight .ge {
+  font-style: italic;
+  color: #93a1a1;
+} // generic.emph //
+.highlight .gr {
+  color: #dc322f;
+} // generic.error //
+.highlight .gh {
+  color: #cb4b16;
+} // generic.heading //
+.highlight .gi {
+  color: #859900;
+} // generic.inserted //
+.highlight .go {
+  color: #93a1a1;
+} // generic.output //
+.highlight .gp {
+  color: #93a1a1;
+} // generic.prompt //
+.highlight .gs {
+  font-weight: bold;
+  color: #93a1a1;
+} // generic.strong //
+.highlight .gu {
+  color: #cb4b16;
+} // generic.subheading //
+.highlight .gt {
+  color: #93a1a1;
+} // generic.traceback //
+.highlight .kc {
+  color: #cb4b16;
+} // keyword.constant //
+.highlight .kd {
+  color: #268bd2;
+} // keyword.declaration //
+.highlight .kn {
+  color: #859900;
+} // keyword.namespace //
+.highlight .kp {
+  color: #859900;
+} // keyword.pseudo //
+.highlight .kr {
+  color: #268bd2;
+} // keyword.reserved //
+.highlight .kt {
+  color: #dc322f;
+} // keyword.type //
+.highlight .ld {
+  color: #93a1a1;
+} // literal.date //
+.highlight .m {
+  color: #2aa198;
+} // literal.number //
+.highlight .s {
+  color: #2aa198;
+} // literal.string //
+.highlight .na {
+  color: #555;
+} // name.attribute //
+.highlight .nb {
+  color: #b58900;
+} // name.builtin //
+.highlight .nc {
+  color: #268bd2;
+} // name.class //
+.highlight .no {
+  color: #cb4b16;
+} // name.constant //
+.highlight .nd {
+  color: #268bd2;
+} // name.decorator //
+.highlight .ni {
+  color: #cb4b16;
+} // name.entity //
+.highlight .ne {
+  color: #cb4b16;
+} // name.exception //
+.highlight .nf {
+  color: #268bd2;
+} // name.function //
+.highlight .nl {
+  color: #555;
+} // name.label //
+.highlight .nn {
+  color: #93a1a1;
+} // name.namespace //
+.highlight .nx {
+  color: #555;
+} // name.other //
+.highlight .py {
+  color: #93a1a1;
+} // name.property //
+.highlight .nt {
+  color: #268bd2;
+} // name.tag //
+.highlight .nv {
+  color: #268bd2;
+} // name.variable //
+.highlight .ow {
+  color: #859900;
+} // operator.word //
+.highlight .w {
+  color: #93a1a1;
+} // text.whitespace //
+.highlight .mf {
+  color: #2aa198;
+} // literal.number.float //
+.highlight .mh {
+  color: #2aa198;
+} // literal.number.hex //
+.highlight .mi {
+  color: #2aa198;
+} // literal.number.integer //
+.highlight .mo {
+  color: #2aa198;
+} // literal.number.oct //
+.highlight .sb {
+  color: #586e75;
+} // literal.string.backtick //
+.highlight .sc {
+  color: #2aa198;
+} // literal.string.char //
+.highlight .sd {
+  color: #93a1a1;
+} // literal.string.doc //
+.highlight .s2 {
+  color: #2aa198;
+} // literal.string.double //
+.highlight .se {
+  color: #cb4b16;
+} // literal.string.escape //
+.highlight .sh {
+  color: #93a1a1;
+} // literal.string.heredoc //
+.highlight .si {
+  color: #2aa198;
+} // literal.string.interpol //
+.highlight .sx {
+  color: #2aa198;
+} // literal.string.other //
+.highlight .sr {
+  color: #dc322f;
+} // literal.string.regex //
+.highlight .s1 {
+  color: #2aa198;
+} // literal.string.single //
+.highlight .ss {
+  color: #2aa198;
+} // literal.string.symbol //
+.highlight .bp {
+  color: #268bd2;
+} // name.builtin.pseudo //
+.highlight .vc {
+  color: #268bd2;
+} // name.variable.class //
+.highlight .vg {
+  color: #268bd2;
+} // name.variable.global //
+.highlight .vi {
+  color: #268bd2;
+} // name.variable.instance //
+.highlight .il {
+  color: #2aa198;
+} // literal.number.integer.long //
+
+//
+// Code examples (rendered)
+//
+
+.code-example {
+  padding: $sp-3;
+  margin-bottom: $sp-3;
+  overflow: auto;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+
+  + .highlighter-rouge,
+  + figure.highlight {
+    position: relative;
+    margin-top: -$sp-4;
+    border-right: 1px solid $border-color;
+    border-bottom: 1px solid $border-color;
+    border-left: 1px solid $border-color;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}