jekyll-wikibonsai 0.0.8 → 0.0.10

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

@@ -0,0 +1,97 @@
+// site nav (bonsai/garden) -- which houses the 'jekyll-graph'
+
+.site-nav {
+
+  header {
+    position: absolute;
+    z-index: $z-nav-component;
+    top: 0;
+    padding: $sp-2;
+    @include fs-5;
+    display: flex;
+    justify-content: flex-start;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  footer {
+    position: absolute;
+    z-index: $z-nav-component;
+    bottom: 0;
+    left: 0;
+    padding: $sp-3;
+  }
+}
+
+// site-nav components
+
+.dropdown {
+  border: none;
+  background: none; 
+
+  &:hover {
+    display: flex;
+    flex-direction: column;
+
+    .dropdown__content {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  &__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);
+  }
+  
+  &__content {
+    display: none;
+  }
+}
+
+.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/_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,156 @@
+// entry page styles
+  
+.entry {
+
+  @include mq(md) {
+  }
+
+  @include mq(lg) {
+    display: grid;
+    grid-template-areas:
+    "header header header"
+    "title title title"
+    "body body infobox"
+    ". . infobox"
+    "footer footer footer";
+  }
+
+  &__header {
+    grid-area: header;
+    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;
+    }
+  }
+
+  &__title {
+    grid-area: title;
+  }
+
+  &__infobox {
+    grid-area: infobox;
+    padding: $sp-3;
+    margin-bottom: $sp-3;
+
+    @include mq(md) {
+      @include infobox-container;
+    }
+    @include mq(lg) {
+      // grid
+    }
+  }
+
+  &__body {
+    grid-area: body;
+  }
+
+  &__footer {
+    grid-area: footer;
+  }
+
+  &__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;
+    }
+  }
+
+  &__content {
+
+    @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/_map.scss

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

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;
+}

data/_sass/layouts/_recent.scss

@@ -0,0 +1,77 @@
+//
+// scss for recent page
+//
+
+.recent {
+  @include container-narrow;
+
+  // &__leader {
+    
+  // }
+
+  &__content {
+    padding: $sp-4;
+  }
+
+  .leader {
+    display: flex;
+    margin: $sp-2;
+    padding: $sp-2;
+
+    &__content {
+      padding: $sp-2;
+    }
+  }
+  
+  .key {
+    @include fs-3;
+    display: flex;
+    flex-direction: column;
+    padding: $sp-4;
+    border: 1px solid var(--accent-light-color);
+    border-radius: 15px;
+  
+    width: 90%;
+  
+    @include mq(md) {
+      width: 50%;
+    }
+  
+    &__title {
+      @include fs-5;
+      text-align: center;
+    }
+  
+    &__content {
+      @include fs-4;
+      white-space: nowrap;
+  
+      width: 100%;
+    }
+
+    &--right {
+      float: right;
+    }
+  }
+
+  .bullet-scene {
+    display: flex;
+    flex-direction: column;
+    width: 10%;
+    padding: $sp-1;
+  
+    &__change-type {
+      @include fs-6;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+  
+    &__status {
+      @include fs-3;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+  }  
+}