jekyll-bonsai 0.0.3 → 0.0.4

data/_sass/includes/_hp_tooltip.scss

@@ -0,0 +1,41 @@
+// "hover-preview tooltip"
+
+.hp-tooltip {
+  @include fs-2;
+  display: none;
+  overflow: hidden;
+  position: absolute;
+  width: 400px;
+  height: 250px;
+  z-index: $z-tooltip;
+  padding: 2em; // don't use sass spacing variables -- it makes hover preview buggy.
+  border: 1px solid var(--accent-light-color);
+  border-radius: 15px;
+  background: var(--body-background-color);
+  opacity: 0;
+  box-shadow: 0 1px 2px rgba(var(--box-shadow-color), 0.12), 0 3px 10px rgba(var(--box-shadow-color), 0.08);
+
+  h1, h2, h3, h4, h5, h6 {
+    @include fs-7;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  &:after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 75px;
+    z-index: 5;
+    pointer-events: none;
+    background-image: linear-gradient(to bottom, rgba(0,0,0,0), var(--body-background-color) 90%);
+  }
+}
+
+#hp-iframe {
+  display: none; 
+  height: 0; 
+  width: 0;
+}

data/_sass/includes/_share.scss

@@ -0,0 +1,10 @@
+
+.share-bar {
+  text-align: center;
+  padding: $sp-3;
+
+  & .share-icon {
+    padding: $sp-1;
+    user-select: none;
+  }
+}

data/_sass/includes/_site_nav.scss

@@ -1,186 +1,62 @@
-// site (bonsai/garden) nav -- which houses the 'svg-graph'
+// site nav (bonsai/garden) -- which houses the 'jekyll-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;
+    z-index: $z-nav-component;
     top: 0;
-    width: 100%;
-    z-index: 4;
     padding: $sp-2;
-    color: $grey-dk-000;
+    @include fs-5;
+    display: flex;
+    justify-content: flex-start;
     cursor: pointer;
     user-select: none;
   }
 
   footer {
     position: absolute;
-    width: 100%;
-    z-index: 4;
+    z-index: $z-nav-component;
     bottom: 0;
     left: 0;
     padding: $sp-3;
   }
 }
 
-.dropdown {
-  border: none;
-  background: none; 
-}
+// site-nav components
 
-.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;
+.dropdown {
   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); 
-  }
+    display: flex;
+    flex-direction: column;
 
-  #posts-emoji-span {
-    filter: drop-shadow(0 0 0.8mm $drop-shadow-purple);
+    .dropdown__content {
+      display: flex;
+      flex-direction: column;
+    }
   }
 
-  #recent-emoji-span {
+  &__btn {
+    @include fs-6;
+    cursor: pointer;
+    user-select: none;
+    padding: $sp-2;
+    
+    // suppress default html button attributes
+    border: none;
+    background: none;
+    
     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);
+  &__content {
+    display: none;
   }
 }
 
-// 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;

data/_sass/includes/_svg.scss

@@ -0,0 +1,89 @@
+// 
+// svg imgs
+// 
+
+// bullet icons
+
+.bullet-link {
+  stroke: var(--bullet-link);
+}
+
+.bullet-node {
+  fill: var(--bullet-node);
+}
+
+// pencil textured svgs
+
+.pencil-yellow,
+.pencil-blue,
+.pencil-green {
+  fill: none;
+  stroke-miterlimit: 10;
+  stroke-width: 10px;
+}
+
+// fill
+
+.pencil-fill-default {
+  fill: var(--pencil-fill-default);
+}
+
+.pencil-fill-default {
+  fill: var(--pencil-fill-default);
+}
+
+.pencil-fill-blue {
+  fill: var(--pencil-fill-blue);
+}
+
+.pencil-fill-green {
+  fill: var(--pencil-fill-green);
+}
+
+.pencil-fill-red {
+  fill: var(--pencil-fill-red);
+}
+
+.pencil-fill-yellow {
+  fill: var(--pencil-fill-yellow);
+}
+
+// stroke
+.pencil-stroke {
+  fill: none;
+  stroke-miterlimit: 10;
+  stroke-width: 10px;
+}
+
+.pencil-stroke-dash {
+  stroke-dasharray: 12.50 12.50;
+}
+
+.pencil-stroke-default {
+  stroke: var(--pencil-stroke-default);
+}
+
+.pencil-stroke-blue {
+  stroke: var(--pencil-stroke-blue);
+}
+
+.pencil-stroke-green {
+  stroke: var(--pencil-stroke-green);
+}
+
+.pencil-stroke-red {
+  stroke: var(--pencil-stroke-red);
+}
+
+.pencil-stroke-yellow {
+  stroke: var(--pencil-stroke-yellow);
+}
+
+.pencil-txt {
+  font-family: BradleyHandITCTT-Bold, Bradley Hand;
+  font-size: 52px;
+}
+
+.pencil-txt-sm {
+  font-size: 27px;
+}

data/_sass/includes/_toc.scss

@@ -0,0 +1,38 @@
+// table-of-contents styles
+// (not nesting due to include's format)
+
+.toc {
+  display: flex;
+  justify-content: center;
+  padding: $sp-3;
+
+  &__list {
+    margin-bottom: 0;
+  }
+
+  &__list-item {
+    @include fs-4;
+  
+    &::before {
+      content: "•" !important;
+      padding-right: $sp-3;
+    }
+  }
+
+  &__anchor {
+    color: var(--wiki-link-color);
+    text-decoration: none;
+    background-image: linear-gradient(var(--wiki-link-underline-color) 0%, var(--wiki-link-underline-color) 100%);
+    background-repeat: repeat-x;
+    background-position: 0 100%;
+    background-size: 1px 1px;
+  
+    &:hover {
+      background-image: linear-gradient(
+        rgba(var(--wiki-link-color), 0.45) 0%,
+        rgba(var(--wiki-link-color), 0.45) 100%
+      );
+      background-size: 1px 1px;
+    }
+  }
+}

data/_sass/layouts/_404.scss

@@ -0,0 +1,3 @@
+.four-zero-four {
+  text-align: center;
+}

data/_sass/layouts/_about.scss

@@ -0,0 +1,3 @@
+.about {
+  @include container-narrow;
+}

data/_sass/layouts/_archive.scss

@@ -0,0 +1,26 @@
+// 
+// scss for posts page
+// 
+
+.archive {
+  @include container-narrow;
+
+  &__title {
+    display: flex;
+    justify-content: space-around;
+    padding: $sp-3;
+    // text-align: center;
+  }
+
+  &__list {
+    padding-bottom: $sp-3;
+    padding-top: $sp-3;
+    padding-left: $sp-6;
+    padding-right: $sp-6;
+  }
+
+  &__item {
+    display: flex; 
+    justify-content: space-between;
+  }
+}

data/_sass/layouts/_book.scss

@@ -0,0 +1,17 @@
+// book page styles
+
+.book {
+
+  &__title {
+    @include container-narrow;
+    margin-bottom: $sp-2;
+  }
+
+  &__infobox {
+    @include infobox-container;
+  }
+
+  &__content {
+    @include container-narrow;
+  }
+}

data/_sass/layouts/_entry.scss

@@ -0,0 +1,140 @@
+// entry page styles
+  
+.entry {
+
+  &__header {
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    &--fix-hrz-scroll {
+      // fixes horizontal scroll
+      // from: https://stackoverflow.com/questions/45280943/horizontal-scroll-breaks-when-using-css-flexbox
+      overflow:hidden;
+    }
+  }
+
+  // this container duplication is necessary so the infobox behavior works
+  // (...i think)
+
+  &__title {
+    @include container-narrow;
+    margin-bottom: $sp-2;
+  }
+
+  &__infobox {
+    @include infobox-container;
+    padding: $sp-3;
+    margin-bottom: $sp-3;
+  }
+
+  &__body {
+    @include container-narrow;
+  }
+
+  &__footer {
+    @include container-narrow;
+  }
+
+  &__section-wrapper { // specifically for the footer sections...
+    margin-top: $sp-6;
+    margin-bottom: $sp-6;
+    display: flex;
+  }
+}
+
+// header
+
+.breadcrumb {
+  align-self: center;
+  // horizontal scroll on overflow
+  overflow-x: scroll;
+  white-space: nowrap;
+
+  ol {
+    display: flex;
+    // remove 'ol' defaults
+    padding-left: 0;
+    margin-bottom: 0;
+    margin-top: 0;
+    list-style: none;
+  
+    li {
+      @include fs-2;
+      display: flex;
+      padding-left: $sp-1;
+      padding-right: $sp-1;
+
+      &::before {
+        display: none;
+      }
+
+      .stat-tag {
+        padding-right: $sp-1;
+      }
+    }
+  } 
+}
+
+// aside
+
+.link-map {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+
+  &__type {
+    text-align: center;
+  }
+
+  &__wrapper {
+    display: grid;
+  }
+
+  &__key {
+    grid-column-start: 1;
+    align-self: center;
+    text-align: right;
+  }
+
+  &__value {
+    grid-column-start: 2;
+    align-self: center;
+    text-align: left;
+  }
+}
+
+// footer
+
+.link-box {
+  width: 100%;
+
+  &__partition {
+    width: 100%;
+    padding-left: $sp-2;
+    padding-right: $sp-2;
+  }
+
+  &__type {
+    @include fs-6;
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+  }
+
+  ul {
+    display: block; // columns require block
+    column-count: 2;
+    column-width: $content-width / 6;
+    padding-left: 0;
+    
+    li {
+      padding: $sp-1;
+      max-width: $content-width / 4;
+      // hide overflowing text
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}

data/_sass/layouts/_home.scss

@@ -0,0 +1,75 @@
+// 
+// scss for index
+// 
+
+.home {
+  @include container-narrow;
+  padding: $sp-5;
+
+  .lead {
+    padding: $sp-2;
+
+    &__img {
+      text-align: center;
+      padding: $sp-6;
+
+      &--size {
+        height: 45%; 
+        width: 45%;
+      }
+    }
+
+    &__title {
+      text-align: center;
+      padding: $sp-1;
+    }
+
+    &__content {
+      text-align: left;
+      padding: $sp-4;
+    }
+  }
+
+  .featured-wrap {
+
+    @include mq(md) {
+      display: flex;
+    }
+
+    & > * {
+      margin: $sp-1;
+
+      @include mq(md) {
+        flex-basis: 100%;
+      }
+    }
+  }
+}
+
+.featured {
+  @include mq(md) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__header {
+    text-align: left;
+    padding-left: $sp-3;
+  }
+
+  &__content {
+    padding: $sp-2;
+  }
+
+  &__footer {
+    @include fs-2;
+    color: $accent-txt-color;
+    text-align: right;
+    padding-bottom: $sp-3;
+
+    @include mq(md) {
+      text-align: center;
+      margin-top: auto;
+    }
+  }
+}

data/_sass/layouts/_post.scss

@@ -0,0 +1,17 @@
+// post page styles
+
+.post {
+
+  &__title {
+    @include container-narrow;
+    margin-bottom: $sp-2;
+  }
+
+  &__infobox {
+    @include infobox-container;
+  }
+
+  &__content {
+    @include container-narrow;
+  }
+}

data/_sass/layouts/_privacy.scss

@@ -0,0 +1,3 @@
+.privacy {
+  @include container-narrow;
+}