jekyll-bonsai 0.0.3

data/_sass/markdown/_content.scss

@@ -0,0 +1,400 @@
+@charset "UTF-8";
+
+//
+// Styles for rendered markdown in the .main-content container
+//
+// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
+
+.main-content {
+  flex: 1 0 auto;
+
+  line-height: $content-line-height;
+  counter-reset: sidenote-counter;
+
+  ol,
+  ul,
+  dl,
+  pre,
+  address,
+  blockquote,
+  .table-wrapper {
+    margin-top: 0.5em;
+  }
+
+  a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    
+    &:not(.wiki-link):not(.wiki-link-embed-link):not(.sem-tag):not(.stat-tag):not(.anchor-heading):not(.footnote):not(.reversefootnote):after {
+      @include fs-3;
+      font-family: $mono-font-family;
+      position: relative;
+      top: -0.5em; // sass variable not working here
+      content: "↗";
+      color: #aaaaaa;
+    }
+  }
+
+  ul,
+  ol {
+    padding-left: 1.5em;
+  }
+
+  li {
+    .highlight {
+      margin-top: $sp-1;
+    }
+  }
+
+  ol {
+    list-style-type: none;
+    counter-reset: step-counter;
+
+    > li {
+      position: relative;
+
+      &::before {
+        position: absolute;
+        top: 0.2em;
+        left: -1.6em;
+        color: $grey-dk-000;
+        content: counter(step-counter);
+        counter-increment: step-counter;
+        @include fs-3;
+
+        @include mq(sm) {
+          top: 0.11em;
+        }
+      }
+
+      ol {
+        counter-reset: sub-counter;
+
+        li {
+          &::before {
+            content: counter(sub-counter, lower-alpha);
+            counter-increment: sub-counter;
+          }
+        }
+      }
+    }
+  }
+
+  ul {
+    list-style: none;
+
+    > li {
+      &::before {
+        position: absolute;
+        margin-left: -1.4em;
+        color: $grey-dk-000;
+        content: "•";
+      }
+    }
+  }
+
+  .task-list {
+    padding-left: 0;
+  }
+
+  .task-list-item {
+    display: flex;
+    align-items: center;
+
+    &::before {
+      content: "";
+    }
+  }
+
+  .task-list-item-checkbox {
+    margin-right: 0.6em;
+  }
+
+  hr {
+    background-color: $separator-color;
+
+    + * {
+      margin-top: 0;
+    }
+  }
+
+  dl {
+    display: grid;
+    grid-template: auto / 10em 1fr;
+  }
+
+  dt,
+  dd {
+    margin: 0.25em 0;
+  }
+
+  dt {
+    grid-column: 1;
+    font-weight: 500;
+    text-align: right;
+    &::after {
+      content: ":";
+    }
+  }
+
+  dd {
+    grid-column: 2;
+    margin-bottom: 0;
+    margin-left: 1em;
+    blockquote,
+    div,
+    dl,
+    dt,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    li,
+    ol,
+    p,
+    pre,
+    table,
+    ul,
+    .table-wrapper {
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
+  dd,
+  ol,
+  ul {
+    dl:first-child {
+      dt:first-child,
+      dd:nth-child(2) {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .anchor-heading {
+    position: absolute;
+    right: -$sp-4;
+    width: $sp-5;
+    height: 100%;
+    padding-right: $sp-1;
+    padding-left: $sp-1;
+    overflow: visible;
+
+    @include mq(md) {
+      right: auto;
+      left: -$sp-5;
+    }
+
+    .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;
+    }
+  }
+
+  summary {
+    cursor: pointer;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    position: relative;
+    margin-top: 0.25em;
+    margin-bottom: 0.25em;
+
+    &:first-child {
+      margin-top: $sp-2;
+    }
+
+    + table,
+    + .table-wrapper,
+    + .code-example,
+    + .highlighter-rouge {
+      margin-top: 1em;
+    }
+
+    + p {
+      margin-top: 0;
+    }
+  }
+
+  // from: 
+  //  - https://codepen.io/jimmycow/pen/LmjVaz
+  //  - https://codepen.io/JoeHastings/pen/MOdRVm
+  blockquote {
+    @include fs-3;
+    font-family: 'Special Elite', cursive;
+    max-width: $content-width;
+    // line-height: 1.4;
+    position: relative;
+    margin: 0;
+    padding: $sp-2;
+
+    border-left: $sp-1 solid $blockquote-border-color;
+
+    & p {
+      padding-left: $sp-6;
+    }
+
+    &:before {
+      @include fs-10;
+      font-family: 'Special Elite', cursive;
+      position: absolute;
+      color: $blockquote-quote-color;
+      width: 4rem;
+      height: 4rem;
+
+      font-family: 'Special Elite', cursive;
+      content: '“';
+    }
+  }
+
+  .footnotes {
+    border-top: double $separator-color;
+  }
+
+  .footnote, .reversefootnote {
+    color: $wiki-link-color;
+  }
+
+  // Sidenotes
+  // more on sidenote implementation: https://www.gwern.net/Sidenotes
+
+  // right-sidenote
+  .rsn {
+    @include sidenote-container;
+    display: none;
+    word-wrap: break-word;
+
+    @include mq(lg) {
+      display: block;
+      float: right;
+      clear: right;
+
+      margin-right: -$content-sidenote-width;
+      width: $content-sidenote-width;
+      margin-top: $sp-1;
+      margin-bottom: 0;
+      font-size: $font-size-2;
+      // line-height: 1.3;
+      vertical-align: baseline;
+      position: relative;
+    }
+  }
+
+  // left-sidenote
+  .lsn {
+    @include sidenote-container;
+    display: none;
+    word-wrap: break-word;
+
+    @include mq(lg) {
+      display: block;
+      float: left;
+      clear: left;
+
+      margin-left: -$content-sidenote-width;
+      width: $content-sidenote-width;
+      margin-top: $sp-1;
+      margin-bottom: 0;
+      font-size: $font-size-2;
+      // line-height: 1.3;
+      vertical-align: baseline;
+      position: relative;
+    }
+  }
+
+  // all sidenotes
+  .sidenote-toggle:checked + .rsn,
+  .sidenote-toggle:checked + .lsn {
+    display: block;
+    float: left;
+    left: 1rem;
+    clear: both;
+    width: 95%;
+    margin: 1rem 2.5%;
+    vertical-align: baseline;
+    position: relative;
+  }
+
+  label.sidenote-toggle:not(.sidenote-number) {
+    display: inline;
+  }
+
+  .sidenote-number {
+    counter-increment: sidenote-counter;
+  }
+
+  input.sidenote-toggle {
+    display: none;
+  }
+
+  label.sidenote-number {
+    display: inline;
+  }
+
+  label.sidenote-toggle:not(.sidenote-number) {
+    display: none;
+  }
+
+  .sidenote-number:after,
+  .rsn:before,
+  .lsn:before {
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  .sidenote-number:after {
+    content: counter(sidenote-counter);
+    color: $wiki-link-color;
+    cursor: pointer;
+    font-size: $font-size-2;
+    top: -$sp-1-75;
+    left: $sp-0-75;
+    padding-right: $sp-0-75;
+  }
+
+  .rsn:before,
+  .lsn:before {
+    content: counter(sidenote-counter) " ";
+    font-size: $font-size-2;
+    top: -$sp-2;
+  }
+
+  // blockquote .rsn,
+  // blockquote .lsn {
+  //   margin-right: -82%;
+  //   min-width: 59%;
+  //   text-align: left;
+  // }
+
+  .rsn > code,
+  .lsn > code {
+    font-size: $font-size-2;
+  }
+}

data/_sass/markdown/_tables.scss

@@ -0,0 +1,60 @@
+//
+// Tables
+//
+// stylelint-disable max-nesting-depth, selector-no-type, selector-max-type
+
+.table-wrapper {
+  display: block;
+  min-width: $content-width;
+  max-width: $content-width + $content-sidenote-width;
+  margin-right: -$content-sidenote-width;
+  margin-bottom: $sp-5;
+  overflow-x: auto;
+  border-radius: $border-radius;
+  box-shadow: 0 1px 2px rgba($box-shadow-color, 0.12), 0 3px 10px rgba($box-shadow-color, 0.08);
+  font-family: $click-font-family; 
+}
+
+table {
+  display: table;
+  width: 100%;
+  border-collapse: separate;
+}
+
+th,
+td {
+  @include fs-3;
+  min-width: 120px;
+  padding-top: $sp-2;
+  padding-right: $sp-3;
+  padding-bottom: $sp-2;
+  padding-left: $sp-3;
+  background-color: $table-background-color;
+  border-bottom: $border rgba($border-color, 0.5);
+  border-left: $border $border-color;
+
+  &:first-of-type {
+    border-left: 0;
+  }
+}
+
+tbody {
+  tr {
+    &:last-of-type {
+      th,
+      td {
+        border-bottom: 0;
+      }
+
+      td {
+        padding-bottom: $sp-3;
+      }
+    }
+  }
+}
+
+thead {
+  th {
+    border-bottom: $border $border-color;
+  }
+}