jekyll-wikibonsai 0.0.9 → 0.0.11

data/_sass/layouts/_state.scss

@@ -0,0 +1,98 @@
+// state page styles
+
+.state {
+  display: flex;
+  flex-direction: column;
+  min-height: 90vh;
+
+  &__nav {
+    @include fs-6;
+    width: 100%;
+    z-index: $z-nav;
+    top: 0;
+    user-select: none;
+
+    ul {
+      overflow-x: scroll;      // horizontal scroll on overflow
+      white-space: nowrap;     // horizontal scroll on overflow
+  
+      padding: 0 !important;
+      margin-bottom: 0;
+      
+      li {
+        display: inline-block; // horizontal scroll on overflow
+  
+        margin-right: $sp-3;
+        margin-left: $sp-3;
+        transition: all .2s ease-in-out;
+      
+        &::before {
+          content: "";
+        }
+  
+        &.active {
+          filter: drop-shadow(0 2mm 2mm $drop-shadow-green);
+        }
+  
+        &:hover {
+          transform: scale(1.5); 
+          filter: drop-shadow(0 2mm 2mm $drop-shadow-brown);
+        }
+      }  
+    }
+  }
+
+  &__content {
+    @include container-narrow;
+    flex: 1 0 auto;
+  }
+
+  &__list-wrap {
+    display: block; // columns require block
+    column-count: 3;
+    column-width: $content-width / 6;
+    // padding: $sp-4;
+
+    &--empty {
+      padding: $sp-10;
+      text-align: center;
+    }
+  }
+
+  &__footer {
+    // 'sticky footer' from: https://css-tricks.com/couple-takes-sticky-footer/#there-is-flexbox
+    //  ex = local
+    //    footer = state__footer
+    //    content = state__content
+    //    body = state
+    //    html, body = state (height is min-height)
+    flex-shrink: 0;
+    display: flex;
+
+    padding: $sp-3;
+  }
+}
+
+// note: this is a hacky workaround for the fact that 'markdownify' 
+//       doesn't seem to be calling jekyll-wikilink's custom web-link
+//       converter.
+// (styles should match the 'web-link' class)
+.has-web-links a {
+  color: var(--link-color);
+  text-decoration: none;
+  background-image: linear-gradient(
+    var(--link-underline-color) 0%,
+    var(--link-underline-color) 100%
+  );
+  background-repeat: repeat-x;
+  background-position: 0 100%;
+  background-size: 1px 1px;
+
+  &:hover {
+    background-image: linear-gradient(
+      var(--link-color) 0%,
+      var(--link-color) 100%
+    );
+    background-size: 1px 1px;
+  }
+}

data/_sass/main.scss

@@ -0,0 +1,73 @@
+//
+// util
+//
+
+@import "./util/variables";
+@import "./util/functions";
+// mixins
+@import "./util/mixins/layout";
+@import "./util/mixins/buttons";
+@import "./util/mixins/typography";
+
+// 
+// external dependencies
+// 
+
+@import "./vendor/normalize.scss/normalize.scss";
+@import url('https://fonts.googleapis.com/css?family=Special+Elite');
+
+// 
+// base styles
+// 
+
+@import "./base/code";
+@import "./base/layout";
+@import "./base/link";
+@import "./base/main";
+@import "./base/markdown";
+@import "./base/typography";
+
+// 
+// component styles
+//
+
+@import "./components/btn";
+@import "./components/infobox";
+@import "./components/item";
+@import "./components/search";
+@import "./components/tag_pills";
+@import "./components/visited";
+
+// 
+// includes styles
+// (each file corresponds with an include)
+// 
+
+@import "./includes/anchor_headings";
+@import "./includes/cookie_consent";
+@import "./includes/connect";
+@import "./includes/dates";
+@import "./includes/hp_tooltip";
+@import "./includes/site_nav";
+@import "./includes/share";
+@import "./includes/svg";
+@import "./includes/toc";
+
+//
+// layouts styles
+// (each file corresponds with a layouts)
+//
+
+// templates
+@import "./layouts/book";
+@import "./layouts/entry";
+@import "./layouts/post";
+// pages
+@import "./layouts/404";
+@import "./layouts/about";
+@import "./layouts/archive";
+@import "./layouts/home";
+@import "./layouts/map";
+@import "./layouts/privacy";
+@import "./layouts/recent";
+@import "./layouts/state";

data/_sass/util/_functions.scss

@@ -0,0 +1,9 @@
+@function rem($size, $unit: "") {
+  $remSize: $size / $root-font-size;
+
+  @if ($unit == false) {
+    @return #{$remSize};
+  } @else {
+    @return #{$remSize}rem;
+  }
+}

data/_sass/util/_variables.scss

@@ -0,0 +1,113 @@
+//
+// Typography
+//
+
+$body-font-family: Georgia, serif !default;
+$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
+$click-font-family: 'Trebuchet MS', sans-serif !default; // 'click' because this font invites users to click on the text.
+
+$root-font-size: 16px !default; // Base font-size for rems
+$body-line-height: 1.4 !default;
+$content-line-height: 1.6 !default;
+$body-heading-line-height: 1.25 !default;
+
+//
+// Font size
+// `-sm` suffix is the size at the small (and above) media query
+//
+
+$font-size-1: 9px !default;
+$font-size-1-sm: 10px !default;
+$font-size-2: 11px !default;
+$font-size-3: 12px !default;
+$font-size-4: 14px !default;
+$font-size-5: 16px !default;
+$font-size-6: 18px !default;
+$font-size-7: 24px !default;
+$font-size-8: 32px !default;
+$font-size-9: 36px !default;
+$font-size-10: 42px !default;
+$font-size-10-sm: 48px !default;
+
+//
+// Spacing
+//
+
+$spacing-unit: 1rem; // 1rem == 16px
+
+$spacers: (
+  sp-0: 0,
+  sp-0-75: $spacing-unit * 0.15,
+  sp-1: $spacing-unit * 0.25,
+  sp-1-75: $spacing-unit * 0.4,
+  sp-2: $spacing-unit * 0.5,
+  sp-3: $spacing-unit * 0.75,
+  sp-4: $spacing-unit,
+  sp-5: $spacing-unit * 1.5,
+  sp-6: $spacing-unit * 2,
+  sp-7: $spacing-unit * 2.5,
+  sp-8: $spacing-unit * 3,
+  sp-9: $spacing-unit * 3.5,
+  sp-10: $spacing-unit * 4,
+) !default;
+
+$sp-1: map-get($spacers, sp-1) !default; // 0.25 rem == 4px
+$sp-2: map-get($spacers, sp-2) !default; // 0.5  rem == 8px
+$sp-3: map-get($spacers, sp-3) !default; // 0.75 rem == 12px
+$sp-4: map-get($spacers, sp-4) !default; // 1    rem == 16px
+$sp-5: map-get($spacers, sp-5) !default; // 1.5  rem == 24px
+$sp-6: map-get($spacers, sp-6) !default; // 2    rem == 32px
+$sp-7: map-get($spacers, sp-7) !default; // 2.5  rem == 40px
+$sp-8: map-get($spacers, sp-8) !default; // 3    rem == 48px
+$sp-9: map-get($spacers, sp-9) !default; // 3.5  rem == 56px
+$sp-10: map-get($spacers, sp-10) !default; // 4  rem == 64px
+
+//
+// Borders
+//
+
+$border: 1px solid !default;
+$border-radius: 4px !default;
+
+//
+// "Grid" system
+//
+
+$header-height: 60px !default;
+$gutter-spacing: $sp-6 !default;
+$gutter-spacing-sm: $sp-4 !default;
+$content-width: 700px !default;
+$nav-width: 264px !default;
+$nav-width-md: 248px !default;
+$nav-width-lg: calc((100% - #{$nav-width + $content-width}) / 2 + (.6 * #{$nav-width})) !default;
+$nav-list-item-height: $sp-6 !default;
+$nav-list-item-height-sm: $sp-8 !default;
+$nav-list-expander-right: true;
+$search-results-width: $content-width - $nav-width !default;
+$transition-duration: 400ms;
+
+//
+// Media queries in pixels
+//
+
+$media-queries: (
+  xs: 320px,
+  sm: 500px,
+  md: $content-width,
+  lg: $content-width + $nav-width,
+  xl: 1700px,
+) !default;
+
+// 
+// Z-Indices
+// 
+
+$z-nav: 10;
+$z-nav-content: 20;
+$z-nav-component: 30;
+$z-nav-search: 35;
+
+$z-tooltip: 40;
+$z-modal: 50;
+
+$z-burger: 100;

data/_sass/util/mixins/_buttons.scss

@@ -0,0 +1,27 @@
+// Colored button
+
+@mixin btn-color($fg, $bg) {
+  color: $fg;
+  background-color: darken($bg, 2%);
+  background-image: linear-gradient(lighten($bg, 5%), darken($bg, 2%));
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12);
+
+  &:hover,
+  &.zeroclipboard-is-hover {
+    color: $fg;
+    background-color: darken($bg, 4%);
+    background-image: linear-gradient((lighten($bg, 2%), darken($bg, 4%)));
+  }
+
+  &:active,
+  &.selected,
+  &.zeroclipboard-is-active {
+    background-color: darken($bg, 5%);
+    background-image: none;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
+  }
+
+  &.selected:hover {
+    background-color: darken($bg, 10%);
+  }
+}

data/_sass/util/mixins/_layout.scss

@@ -0,0 +1,84 @@
+// Media query
+
+// 'mobile first' design (as opposed to 'desktop first'): https://css-tricks.com/logic-in-media-queries/
+// Media query mixin
+// Usage:
+// @include mq(md) {
+//   ..medium and up styles
+// }
+@mixin mq($name) {
+  // Retrieves the value from the key
+  $value: map-get($media-queries, $name);
+
+  // If the key exists in the map
+  @if $value != null {
+    // Prints a media query based on the value
+    @media (min-width: rem($value)) {
+      @content;
+    }
+  } @else {
+    @warn "No value could be retrieved from `#{$media-query}`. "
+      + "Please make sure it is defined in `$media-queries` map.";
+  }
+}
+
+// Responsive containers
+
+@mixin container {
+  padding: $gutter-spacing-sm;
+
+  @include mq(md) {
+    padding: $gutter-spacing;
+  }
+
+  @include mq(lg) {
+    padding: $gutter-spacing;
+  }
+}
+
+@mixin container-narrow {
+  max-width: $content-width;
+
+  // note: the following 'margin-right' are for the 
+  //       infobox-container's consideration.
+
+  @include mq(lg) {
+    margin-right: $nav-width-md;
+  }
+
+  @include mq(xl) {
+    margin-right: $nav-width-md x 2;
+  }
+}
+
+@mixin infobox-container {
+  max-height: 100vh;
+  width: 100%;
+
+  @include mq(md) {
+    max-width: $nav-width-md;
+    float: right;
+  }
+
+  @include mq(lg) {
+    max-width: $nav-width-md;
+    padding: $sp-2;
+
+    // from: https://www.bram.us/2020/01/10/smooth-scrolling-sticky-scrollspy-navigation/
+    position: sticky;
+    position: -webkit-sticky;
+    top: $sp-2;
+  }
+
+  @include mq(xl) {
+    max-width: $nav-width-md * 1.5;
+    padding: $sp-2;
+
+    // from: https://www.bram.us/2020/01/10/smooth-scrolling-sticky-scrollspy-navigation/
+    position: sticky;
+    position: -webkit-sticky;
+    top: $sp-2;
+
+    margin-right: $nav-width-md * (3/5);
+  }
+}

data/_sass/util/mixins/_typography.scss

@@ -0,0 +1,84 @@
+@mixin fs-1 {
+  font-size: $font-size-1 !important;
+
+  @include mq(sm) {
+    font-size: $font-size-1-sm !important;
+  }
+}
+
+@mixin fs-2 {
+  font-size: $font-size-2 !important;
+
+  @include mq(sm) {
+    font-size: $font-size-3 !important;
+  }
+}
+
+@mixin fs-3 {
+  font-size: $font-size-3 !important;
+
+  @include mq(sm) {
+    font-size: $font-size-4 !important;
+  }
+}
+
+@mixin fs-4 {
+  font-size: $font-size-4 !important;
+
+  @include mq(sm) {
+    font-size: $font-size-5 !important;
+  }
+}
+
+@mixin fs-5 {
+  font-size: $font-size-5 !important;
+
+  @include mq(sm) {
+    font-size: $font-size-6 !important;
+  }
+}
+
+@mixin fs-6 {
+  font-size: $font-size-6 !important;
+
+  @include mq(sm) {
+    font-size: $font-size-7 !important;
+    line-height: $body-heading-line-height;
+  }
+}
+
+@mixin fs-7 {
+  font-size: $font-size-7 !important;
+  line-height: $body-heading-line-height;
+
+  @include mq(sm) {
+    font-size: $font-size-8 !important;
+  }
+}
+
+@mixin fs-8 {
+  font-size: $font-size-8 !important;
+  line-height: $body-heading-line-height;
+
+  @include mq(sm) {
+    font-size: $font-size-9 !important;
+  }
+}
+
+@mixin fs-9 {
+  font-size: $font-size-9 !important;
+  line-height: $body-heading-line-height;
+
+  @include mq(sm) {
+    font-size: $font-size-10 !important;
+  }
+}
+
+@mixin fs-10 {
+  font-size: $font-size-10 !important;
+  line-height: $body-heading-line-height;
+
+  @include mq(sm) {
+    font-size: $font-size-10-sm !important;
+  }
+}

data/_sass/vendor/normalize.scss/README.md

@@ -0,0 +1,7 @@
+# normalize.scss
+
+Normalize.scss is an SCSS copy of [normalize.css](http://necolas.github.io/normalize.css), a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.
+
+The [normalize.scss fork](https://github.com/guerrero/normalize.scss) of [normalize.css](http://necolas.github.io/normalize.css) was archived in 2014, and has not been updated since v0.1.0.
+
+[View the normalize.css test file](http://necolas.github.io/normalize.css/latest/test.html)