jekyll-wikibonsai 0.0.8 → 0.0.10

data/_sass/base/_main.scss

@@ -0,0 +1,96 @@
+//
+// Base element style overrides
+//
+// stylelint-disable selector-no-type, selector-max-type
+
+* {
+  box-sizing: border-box;
+}
+
+::selection {
+  background: var(--selection-color);
+}
+
+html {
+  @include fs-4;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: $body-font-family;
+  font-size: inherit;
+  line-height: $body-line-height;
+  color: var(--body-text-color);
+  background-color: var(--body-background-color);
+}
+
+ol,
+ul,
+dl,
+pre,
+address,
+blockquote,
+table,
+div,
+hr,
+form,
+fieldset,
+noscript .table-wrapper {
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  // margin-top: 0;
+  // margin-bottom: 1em;
+  font-weight: 500;
+  line-height: $body-heading-line-height;
+  color: var(--small-heading-color);
+}
+
+p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+code {
+  font-family: $mono-font-family;
+  font-size: 0.75em;
+  line-height: $body-line-height;
+}
+
+figure,
+pre {
+  margin: 0;
+}
+
+ul {
+  margin-bottom: 0;
+  padding: $sp-2;
+  
+  li {
+    padding: $sp-1;
+    list-style-type: none !important;
+  
+    &::before {
+      content: "" !important;
+    }
+  }
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+hr {
+  height: 1px;
+  padding: 0;
+  margin: $sp-6 0;
+  background-color: var(--accent-light-color);
+  border: 0;
+}

data/_sass/base/_markdown.scss

@@ -0,0 +1,281 @@
+@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
+
+.markdown {
+  line-height: $content-line-height;
+
+  ol,
+  ul,
+  dl,
+  pre,
+  address,
+  blockquote,
+  .table-wrapper {
+    margin-top: 0.5em;
+  }
+
+  a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    
+    &.web-link: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: $accent-txt-color;
+        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 {
+    margin-top: 0;
+    list-style: none !important;
+
+    > li {
+      &::before {
+        position: absolute;
+        margin-left: -1.4em;
+        color: $accent-txt-color;
+        content: "•" !important;
+      }
+    }
+  }
+
+  .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: var(--accent-light-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;
+      }
+    }
+  }
+
+  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;
+    }
+  }
+
+  // from: 
+  //  - https://codepen.io/jimmycow/pen/LmjVaz
+  //  - https://codepen.io/JoeHastings/pen/MOdRVm
+  blockquote {
+    @include fs-3;
+    margin: 0;
+    padding: $sp-2;
+
+    border-left: $sp-1 solid var(--accent-light-color);
+
+    & p {
+      padding-left: $sp-6;
+    }
+
+    &:before {
+      @include fs-10;
+      font-family: 'Special Elite', cursive;
+      position: absolute;
+      color: var(--accent-light-color);
+      width: 4rem;
+      height: 4rem;
+
+      content: '“';
+    }
+  }
+
+  .footnotes {
+    border-top: double var(--accent-light-color);
+  }
+
+  .footnote, .reversefootnote {
+    color: var(--wiki-link-color);
+  }
+
+  // tables
+  table {
+    display: table;
+    width: 100%;
+    border-collapse: separate;
+  }
+
+  th,
+  td {
+    @include fs-3;
+    min-width: 120px;
+    padding-top: $sp-2;
+    padding-bottom: $sp-2;
+    padding-right: $sp-3;
+    padding-left: $sp-3;
+    background-color: var(--accent-dark-color);
+    border-bottom: $border rgba(var(--accent-light-color), 0.5);
+    border-left: $border var(--accent-light-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 var(--accent-light-color);
+    }
+  }
+}

data/_sass/base/_typography.scss

@@ -0,0 +1,89 @@
+//
+// Typography
+//
+// stylelint-disable primer/selector-no-utility, primer/no-override, selector-no-type, selector-max-type
+
+body {
+  line-height: $content-line-height;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  position: relative;
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+  padding-top: $sp-2;
+}
+
+h1,
+.text-alpha {
+  @include fs-10;
+}
+
+h2,
+.text-beta {
+  @include fs-8;
+}
+
+h3,
+.text-gamma {
+  @include fs-7;
+}
+
+h4,
+.text-delta {
+  @include fs-6;
+}
+
+h4 code {
+  text-transform: none;
+}
+
+h5,
+.text-epsilon {
+  @include fs-5;
+  color: $accent-txt-color;
+}
+
+h6,
+.text-zeta {
+  @include fs-4;
+  color: $accent-txt-color;
+}
+
+.text {
+
+  &--center {
+    text-align: center !important;
+  }
+
+  &--date {
+    @include fs-4;
+    color: $accent-txt-color;
+  }
+
+  &--small {
+    @include fs-2;
+    color: $accent-txt-color;
+  }
+
+//   &--left {
+//     text-align: left !important;
+//   }
+
+//   &--mono {
+//     font-family: $mono-font-family !important;
+//   }
+
+  &--no-point {
+    pointer-events: none;
+  }
+
+//   &--right {
+//     text-align: right !important;
+//   }
+}

data/_sass/base/code_themes/_gruvbox.scss

@@ -0,0 +1,92 @@
+// gruvbox
+
+.highlight {
+
+ table td { padding: 5px; }
+ table pre { margin: 0; }
+  .w {
+    color: #fbf1c7;
+    // background-color: #282828;
+  }
+  .err {
+    color: #fb4934;
+    // background-color: #282828;
+    font-weight: bold;
+  }
+  .c,  .ch,  .cd,  .cm,  .cpf,  .c1,  .cs {
+    color: #928374;
+    font-style: italic;
+  }
+  .cp {
+    color: #8ec07c;
+  }
+  .nt {
+    color: #fb4934;
+  }
+  .o,  .ow {
+    color: #fbf1c7;
+  }
+  .p,  .pi {
+    color: #fbf1c7;
+  }
+  .gi {
+    color: #b8bb26;
+    background-color: #282828;
+  }
+  .gd {
+    color: #fb4934;
+    background-color: #282828;
+  }
+  .gh {
+    color: #b8bb26;
+    font-weight: bold;
+  }
+  .k,  .kn,  .kp,  .kr,  .kv {
+    color: #fb4934;
+  }
+  .kc {
+    color: #d3869b;
+  }
+  .kt {
+    color: #fabd2f;
+  }
+  .kd {
+    color: #fe8019;
+  }
+  .s,  .sb,  .sc,  .dl,  .sd,  .s2,  .sh,  .sx,  .s1 {
+    color: #b8bb26;
+    font-style: italic;
+  }
+  .si {
+    color: #b8bb26;
+    font-style: italic;
+  }
+  .sr {
+    color: #b8bb26;
+    font-style: italic;
+  }
+  .sa {
+    color: #fb4934;
+  }
+  .se {
+    color: #fe8019;
+  }
+  .nn {
+    color: #8ec07c;
+  }
+  .nc {
+    color: #8ec07c;
+  }
+  .no {
+    color: #d3869b;
+  }
+  .na {
+    color: #b8bb26;
+  }
+  .m,  .mb,  .mf,  .mh,  .mi,  .il,  .mo,  .mx {
+    color: #d3869b;
+  }
+  .ss {
+    color: #83a598;
+  }
+}