jekyll-bonsai 0.0.3 → 0.0.7

data/_sass/base/code_themes/_monokai.scss

@@ -0,0 +1,217 @@
+// monokai
+
+.highlight {
+  color: #f8f8f2;
+  // background-color: #49483e;
+
+  table td { padding: 5px; }
+  table pre { margin: 0; }
+  .c,  .ch,  .cd,  .cpf {
+    color: #75715e;
+    font-style: italic;
+  }
+  .cm {
+    color: #75715e;
+    font-style: italic;
+  }
+  .c1 {
+    color: #75715e;
+    font-style: italic;
+  }
+  .cp {
+    color: #75715e;
+    font-weight: bold;
+  }
+  .cs {
+    color: #75715e;
+    font-weight: bold;
+    font-style: italic;
+  }
+  .err {
+    color: #960050;
+    background-color: #1e0010;
+  }
+  .gi {
+    color: #ffffff;
+    background-color: #324932;
+  }
+  .gd {
+    color: #ffffff;
+    // background-color: #493131;
+  }
+  .ge {
+    color: #000000;
+    font-style: italic;
+  }
+  .gr {
+    color: #aa0000;
+  }
+  .gt {
+    color: #aa0000;
+  }
+  .gh {
+    color: #999999;
+  }
+  .go {
+    color: #888888;
+  }
+  .gp {
+    color: #555555;
+  }
+  .gs {
+    font-weight: bold;
+  }
+  .gu {
+    color: #aaaaaa;
+  }
+  .k,  .kv {
+    color: #66d9ef;
+    font-weight: bold;
+  }
+  .kc {
+    color: #66d9ef;
+    font-weight: bold;
+  }
+  .kd {
+    color: #66d9ef;
+    font-weight: bold;
+  }
+  .kp {
+    color: #66d9ef;
+    font-weight: bold;
+  }
+  .kr {
+    color: #66d9ef;
+    font-weight: bold;
+  }
+  .kt {
+    color: #66d9ef;
+    font-weight: bold;
+  }
+  .kn {
+    color: #f92672;
+    font-weight: bold;
+  }
+  .ow {
+    color: #f92672;
+    font-weight: bold;
+  }
+  .o {
+    color: #f92672;
+    font-weight: bold;
+  }
+  .mf {
+    color: #ae81ff;
+  }
+  .mh {
+    color: #ae81ff;
+  }
+  .il {
+    color: #ae81ff;
+  }
+  .mi {
+    color: #ae81ff;
+  }
+  .mo {
+    color: #ae81ff;
+  }
+  .m,  .mb,  .mx {
+    color: #ae81ff;
+  }
+  .se {
+    color: #ae81ff;
+  }
+  .sa {
+    color: #66d9ef;
+    font-weight: bold;
+  }
+  .sb {
+    color: #e6db74;
+  }
+  .sc {
+    color: #e6db74;
+  }
+  .sd {
+    color: #e6db74;
+  }
+  .s2 {
+    color: #e6db74;
+  }
+  .sh {
+    color: #e6db74;
+  }
+  .si {
+    color: #e6db74;
+  }
+  .sx {
+    color: #e6db74;
+  }
+  .sr {
+    color: #e6db74;
+  }
+  .s1 {
+    color: #e6db74;
+  }
+  .ss {
+    color: #e6db74;
+  }
+  .s,  .dl {
+    color: #e6db74;
+  }
+  .na {
+    color: #a6e22e;
+  }
+  .nc {
+    color: #a6e22e;
+    font-weight: bold;
+  }
+  .nd {
+    color: #a6e22e;
+    font-weight: bold;
+  }
+  .ne {
+    color: #a6e22e;
+    font-weight: bold;
+  }
+  .nf,  .fm {
+    color: #a6e22e;
+    font-weight: bold;
+  }
+  .no {
+    color: #66d9ef;
+  }
+  .bp {
+    color: #f8f8f2;
+  }
+  .nb {
+    color: #f8f8f2;
+  }
+  .ni {
+    color: #f8f8f2;
+  }
+  .nn {
+    color: #f8f8f2;
+  }
+  .vc {
+    color: #f8f8f2;
+  }
+  .vg {
+    color: #f8f8f2;
+  }
+  .vi {
+    color: #f8f8f2;
+  }
+  .nv,  .vm {
+    color: #f8f8f2;
+  }
+  .w {
+    color: #f8f8f2;
+  }
+  .nl {
+    color: #f8f8f2;
+    font-weight: bold;
+  }
+  .nt {
+    color: #f92672;
+  }
+}

data/_sass/base/code_themes/_solarized.scss

@@ -0,0 +1,84 @@
+// solarized
+
+.highlight {
+  table td { padding: 5px; }
+  table pre { margin: 0; }
+  .w {
+    color: #586e75;
+  }
+  .err {
+    color: #002b36;
+    background-color: #dc322f;
+  }
+  .c,  .ch,  .cd,  .cm,  .cpf,  .c1,  .cs {
+    color: #657b83;
+  }
+  .cp {
+    color: #b58900;
+  }
+  .nt {
+    color: #b58900;
+  }
+  .o,  .ow {
+    color: #93a1a1;
+  }
+  .p,  .pi {
+    color: #93a1a1;
+  }
+  .gi {
+    color: #859900;
+  }
+  .gd {
+    color: #dc322f;
+  }
+  .gh {
+    color: #268bd2;
+    // background-color: #002b36;
+    font-weight: bold;
+  }
+  .k,  .kn,  .kp,  .kr,  .kv {
+    color: #6c71c4;
+  }
+  .kc {
+    color: #cb4b16;
+  }
+  .kt {
+    color: #cb4b16;
+  }
+  .kd {
+    color: #cb4b16;
+  }
+  .s,  .sb,  .sc,  .dl,  .sd,  .s2,  .sh,  .sx,  .s1 {
+    color: #859900;
+  }
+  .sa {
+    color: #6c71c4;
+  }
+  .sr {
+    color: #2aa198;
+  }
+  .si {
+    color: #d33682;
+  }
+  .se {
+    color: #d33682;
+  }
+  .nn {
+    color: #b58900;
+  }
+  .nc {
+    color: #b58900;
+  }
+  .no {
+    color: #b58900;
+  }
+  .na {
+    color: #268bd2;
+  }
+  .m,  .mb,  .mf,  .mh,  .mi,  .il,  .mo,  .mx {
+    color: #859900;
+  }
+  .ss {
+    color: #859900;
+  }
+}

data/_sass/components/_btn.scss

@@ -0,0 +1,95 @@
+//
+// Buttons and things that look like buttons
+//
+
+.btn {
+  @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;
+
+  // suppress default html button attributes
+  border: none;
+  background: none;
+
+  &:hover {
+    transform: scale(1.5); 
+  }
+
+  /* Hide the browser's default checkbox */
+  input {
+    opacity: 0;
+    height: 0;
+    width: 0;
+  }
+
+  &--small {
+    @include fs-5;
+  }
+
+  &--blue {
+    filter: drop-shadow(0 0 0.8mm $drop-shadow-blue);
+  }
+
+  &--brown {
+    filter: drop-shadow(0 0 0.8mm $drop-shadow-brown);
+  }
+
+  &--green {
+    filter: drop-shadow(0 0 0.8mm $drop-shadow-green);
+  }
+
+  &--orange {
+    filter: drop-shadow(0 0 0.8mm $drop-shadow-orange);
+  }
+
+  &--purple {
+    filter: drop-shadow(0 0 0.8mm $drop-shadow-purple);
+  }
+
+  &--red {
+    filter: drop-shadow(0 0 0.8mm $drop-shadow-red);
+  }
+
+  &--yellow {
+    filter: drop-shadow(0 0 0.8mm $drop-shadow-yellow);
+  }
+}
+
+.bonsai-burger-nav {
+  // fix in corner
+  position: fixed;
+  z-index: $z-burger;
+  right: $sp-2;
+  bottom: $sp-4;
+  // flex contents
+  display: flex;
+  flex-direction: column;
+  // interaction
+  cursor: pointer;
+  user-select: none;
+  filter: drop-shadow(0 0 0.7mm $drop-shadow-green);
+  
+  /* Hide the browser's default checkbox */
+  input {
+    opacity: 0;
+    height: 0;
+    width: 0;
+  }
+
+  #nav-bonsai {
+    margin-left: 5px;
+  }
+
+  #nav-base {
+    margin-left: 20px;
+    margin-right: 20px;
+    transition: all .2s ease-in-out;
+
+    &:hover {
+      transform: scale(1.25);
+    }
+  }
+}

data/_sass/components/_infobox.scss

@@ -0,0 +1,48 @@
+// infobox styles
+//    the infobox is meant to be placed inside of a container of the 
+//    parent layout. (often named &__infobox)
+// 
+// appears in:
+//  - entry
+//  - post
+
+.infobox {
+  display: flex;
+  flex-direction: column;
+  // todo: separate scroll for infobox...
+  //       ...but it didn't feel quite right...
+  //       ...commenting out for now.
+  // max-height: 100vh;
+  // overflow-y: scroll;
+
+  &__img {
+    align-self: center;
+    padding: $sp-3;
+    height: 70%;
+    width: 70%;
+
+    &--cover {
+      align-self: center;
+      padding: $sp-3;
+      height: 300px;
+      width: 200px;
+    }
+  }
+
+  &__bar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__link-nav {
+    width: 100%; 
+  }
+
+  &__sem-tags {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding: $sp-2;
+  }
+}

data/_sass/components/_item.scss

@@ -0,0 +1,28 @@
+// complex list item styles
+
+.item {
+  display: flex;
+  justify-content: space-between;
+  padding: $sp-2;
+
+  &__status {
+    @include fs-3;
+    display: flex;
+    justify-content: center;
+    width: 15%;
+  }
+  
+  &__text {
+    // is a flex item
+    flex-grow: 1;
+    align-items: center;
+    // is a flex container
+    display: flex;
+    justify-content: space-between;
+
+    &--big {
+      @include fs-5;
+      padding-left: $sp-3;
+    }
+  }
+}

data/_sass/components/_search.scss

@@ -0,0 +1,61 @@
+// 
+// Search
+// 
+
+.search {
+  display: none;
+  position: absolute;
+  z-index: $z-nav-search;
+  height: 100vh;
+  width: 100%;
+  padding-top: $sp-10;
+
+  &__input {
+    position: absolute;
+    z-index: $z-nav-search;
+    height: 35px;
+    width: 100%;
+    margin-left: $sp-2;
+    margin-right: $sp-2;
+    margin-top: $sp-10;
+    margin-bottom: $sp-10;
+  }
+
+  &__results  {
+    position: relative;
+    height: 100vh;
+    overflow-y: scroll; 
+    width: 100%;
+    padding-top: $sp-8;
+    color: var(--body-text-color);
+    background-color: transparent;
+
+    a {
+      color: var(--body-text-color);
+      text-decoration: none;
+      &:hover {
+        color: var(--body-text-color-hover);
+      }
+    }
+
+    ul {
+      display: absolute;
+      padding-top: $sp-10;
+      padding-bottom: $sp-10;
+      background-color: transparent;
+  
+      li {
+        @include fs-2;
+        padding: $sp-1;
+        margin: $sp-2;
+        border-radius: $sp-2;
+        cursor: pointer;
+        user-select: none;
+    
+        &:hover {
+          background: var(--accent-light-color);
+        }
+      }
+    }
+  }
+}

data/_sass/components/_tag_pills.scss

@@ -0,0 +1,24 @@
+// tag pill styles 
+// (for semantic tags)
+
+.tag-pill {
+  white-space: nowrap;
+  padding: $sp-2;
+  margin: $sp-2;
+  border-radius: 15px;
+  color: var(--wiki-link-color);
+  background-color: $transparent;
+  border: 1px solid var(--accent-light-color);
+
+  &:hover {
+    background-color: var(--accent-light-color);
+  }
+
+  &.disabled {
+    color: var(--tag-disabled-color);
+
+    &:hover {
+      background-color: var(--accent-dark-color);
+    }
+  }
+}

data/_sass/components/_visited.scss

@@ -0,0 +1,42 @@
+// 
+// Visited Nav
+// 
+
+// visited nav (user-steps)
+
+.visited-nav {
+  position: relative;
+  z-index: $z-nav-content;
+  height: 100vh;
+  width: 100%;
+  padding-top: $sp-10;
+  padding-bottom: $sp-10;
+  overflow-y: scroll;
+
+  ul {
+
+    li {
+      @include fs-5;
+      padding-left: $sp-4;
+      padding-left: $sp-4;
+      margin-top: $sp-3;
+      margin-bottom: $sp-3;
+      margin-left: auto;
+      margin-right: auto;
+      // both animation and transform rely on this transition setting (according to: https://stackoverflow.com/a/20903041)
+      transition: all 0.15s ease-in-out;
+      width: 40%;
+  
+      &:hover {
+        transform: scale(1.1);
+      }
+  
+      @include mq(md) {
+        width: 80%;
+      }
+      // button {
+      //   justify-content: flex-end;
+      // }
+    }
+  }
+}

data/_sass/includes/_anchor_headings.scss

@@ -0,0 +1,36 @@
+// anchor heading styles
+
+.anchor-heading {
+  position: absolute;
+  width: $sp-5;
+  height: 100%;
+  padding-right: $sp-1;
+  padding-left: $sp-2;
+  overflow: visible;
+
+  @include mq(md) {
+    padding-left: $sp-2;
+  }
+
+  .anchor-tag {
+    @include fs-3;
+    display: flex;
+    opacity: 0;
+
+    &:hover {
+      filter: drop-shadow(0 0 0.7mm $drop-shadow-yellow);
+    }
+  }
+}
+
+.anchor-heading:hover,
+h1:hover > .anchor-heading,
+h2:hover > .anchor-heading,
+h3:hover > .anchor-heading,
+h4:hover > .anchor-heading,
+h5:hover > .anchor-heading,
+h6:hover > .anchor-heading {
+  .anchor-tag {
+    opacity: 1;
+  }
+}

data/_sass/includes/_connect.scss

@@ -0,0 +1,8 @@
+.connect-bar{
+  text-align: left;
+  padding-left: $sp-3;
+
+  & .connect-icon {
+    user-select: none;
+  }
+}

data/_sass/includes/_cookie_consent.scss

@@ -0,0 +1,46 @@
+// 
+// scss for cookie-consent -related things
+// 
+
+#cookie-consent {
+  display: none;
+  align-items: center;
+  position: fixed;
+  bottom: 0;
+  z-index: $z-modal;
+  width: 80%;
+  padding: $sp-4;
+  margin: $sp-3;
+  text-align: center;
+  color: var(--body-text-color);
+  background: var(--accent-dark-color);
+  border-radius: $sp-3;
+  box-shadow: 0 1px 2px rgba(var(--box-shadow-color), 0.12), 0 3px 10px rgba(var(--box-shadow-color), 0.08);
+  
+  @include mq(md) {
+    max-width: 60%;
+    margin-left: $nav-width-md;
+  }
+
+  @include mq(lg) {
+    max-width: $content-width;
+    margin-left: $nav-width-lg;
+  }
+
+  & a {
+    display: inline-block; 
+    cursor: pointer; 
+  }
+
+  #cookie-consent-response-accept {
+    @include fs-6;
+  }
+
+  #cookie-consent-hmm {
+    @include fs-8;
+  }
+
+  #cookie-consent-response-reject {
+    @include fs-2;
+  }
+}

data/_sass/includes/_dates.scss

@@ -0,0 +1,6 @@
+.dates {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  margin: $sp-2;
+}