jekyll-bonsai 0.0.3 → 0.0.7

data/_layouts/state.html

@@ -1,59 +1,70 @@
 ---
-layout: default
+layout: base
 ---
+
 {% assign states = site.states  %}
 {% assign index_state_title = "Plant Tags Page" %}
 
-<div id="states" class="states-page">
-  <nav class="states-nav">
-    <ul class="states-nav-list">
+<div id="state" class="state">
+
+  <nav class="state__nav">
+    <ul>
       {% for state in states %}
-        <li class="states-list-item {% if page.url == state.url %}active{% endif %}">
-          <a href="{{ state.url | relative_url }}" class="stat-tag">
+        <li class="{% if page.url == state.url %}active{% endif %}">
+          <a class="stat-tag" href="{{ state.url | relative_url }}">
             {{ state.emoji }}
           </a>
         </li>
       {% endfor %}
     </ul>
   </nav>
+  
+  <div class="state__content">
 
-  <!-- all states -->
-  {% if page.title == index_state_title %}
-    <h1>🔖 Plant Tags In This Garden</h1>
-    {{ content }}
-    <p class="small-descr">
-      Descriptions only reflect the spirit of this garden. 
-      Click <a href="{{ page.emojipedia }}">here</a> for the official emoji description.
-    </p>
-    {% for state in states %}
-      {% if state.title != index_state_title %}
-        <h2>{{ state.emoji }} <a href="{{ state.url | relative_url }}" class="wiki-link">{{ state.title }}</a></h2>
-        <p>{{ state.content | markdownify }}</p>
-      {% endif %}
-    {% endfor %}
-  <!-- individual states -->
-  {% else %}
-    <!-- page == tag (from tag-nav) -->
-    {% assign entries_w_stat = site.entries | where: 'tags', page.emoji %}
-    <h1>{{ page.emoji }} {{ page.title }}</h1>
-    {{ content }}
-    <p class="small-descr">
-      Descriptions only reflect the spirit of this garden. 
-      Click <a href="{{ page.emojipedia }}">here</a> for the official emoji description.
-    </p>
-
-    {% if entries_w_stat.size == 0 %}
-      <div class="no-results">
-        There are currently no {{ page.emoji }}s.
+    <section>
+      <div class="hp-title">
+        <h1 class="p-name">{{ page.emoji }} {{ page.title }}</h1>
       </div>
+      <div class="markdown hp-content e-content p-name">
+        {{ content }}
+      </div>
+    </section>
+
+    <!-- display all states on root state -->
+    {% if page.path == site.bonsai.states.root_path %}
+      <section class="has-web-links">
+        {% for state in states %}
+          {% if state.path != site.bonsai.states.root_path %}
+            <h4>{{ state.emoji }} {{ state.title }}</h4>
+            {{ state.content | markdownify }}
+          {% endif %}
+      {% endfor %}
+      </section>
+    <!-- display entries with that state as its status -->
     {% else %}
-      <ul class="states-list">
-        {% for entry in entries_w_stat %}
-          <li class="states-list-item">
-            {{ page.emoji }} <a href="{{ entry.url | relative_url }}" class="wiki-link">{{ entry.title }}</a>
-          </li>
-        {% endfor %}  
-      </ul>
-      {% endif %}
-  {% endif %}
+      <section>
+        <!-- page == tag (from tag-nav) -->
+        {% assign docs_w_stat = site.documents | where: 'status', page.emoji %}
+        {% if docs_w_stat.size == 0 and page.path != site.bonsai.states.root_path %}
+          <div class="state__list-wrap--empty">
+            <span>There are currently no {{ page.emoji }}s.</span>
+          </div>
+        {% else %}
+          <ul class="state__list-wrap">
+            {% for entry in docs_w_stat %}
+              <li>
+                {{ page.emoji }} <a class="wiki-link" href="{{ entry.url | relative_url }}">{{ entry.title }}</a>
+              </li>
+            {% endfor %}  
+          </ul>
+        {% endif %}
+      </section>
+    {% endif %}
+
+  </div>
+
+  <footer class="state__footer text--small">
+    Descriptions only reflect the spirit of this garden. Check out the official description: <a class="web-link" href="{{ page.emojipedia }}"> here </a>.
+  </footer>
+
 </div>

data/_sass/base/_code.scss

@@ -0,0 +1,133 @@
+//
+// Code and syntax highlighting
+//
+// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type
+
+// from: https://bnhr.xyz/2017/03/25/add-syntax-highlighting-to-your-jekyll-site-with-rouge.html
+// @import './code_themes/gruvbox';
+@import './code_themes/solarized';
+// @import './code_themes/monokai';
+
+code {
+  padding: $sp-1 $sp-1;
+  font-weight: 400;
+  border-radius: $border-radius;
+  background-color: var(--accent-dark-color);
+}
+
+// Avoid appearance of dark border around visited code links in Safari
+a:visited code {
+  border-color: var(--accent-light-color);
+}
+
+// Content structure for highlighted code blocks using fences or Liquid
+//
+// ```[LANG]...```, no kramdown line_numbers:
+//   div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
+//
+// ```[LANG]...```, kramdown line_numbers = true:
+//   div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
+//   > div.table-wrapper > table.rouge-table > tbody > tr
+//   > td.rouge-gutter.gl > pre.lineno
+//   | td.rouge-code > pre
+//
+// {% highlight LANG %}...{% endhighlight %}:
+//   figure.highlight > pre > code.language-LANG
+//
+// {% highlight LANG linenos %}...{% endhighlight %}:
+//   figure.highlight > pre > code.language-LANG
+//   > div.table-wrapper > table.rouge-table > tbody > tr
+//   > td.gutter.gl > pre.lineno
+//   | td.code > pre
+//
+// fix_linenos removes the outermost pre when it encloses table.rouge-table
+//
+// See docs/index-test.md for some tests.
+//
+// No kramdown line_numbers: fences and Liquid highlighting look the same.
+// Kramdown line_numbers = true: fences have a wider gutter than with Liquid?
+
+// ```[LANG]...```
+div.highlighter-rouge {
+  overflow-x: auto;
+  padding: $sp-3;
+  margin-top: $sp-3;
+  margin-bottom: $sp-3;
+  background-color: var(--accent-dark-color);
+  border-radius: $border-radius;
+  box-shadow: none;
+  -webkit-overflow-scrolling: touch;
+
+  div.highlight,
+  pre.highlight,
+  code {
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+}
+
+// {% highlight LANG %}...{% endhighlight %},
+// {% highlight LANG linenos %}...{% endhighlight %}:
+figure.highlight {
+  padding: $sp-3;
+  margin-top: 0;
+  margin-bottom: $sp-3;
+  background-color: var(--accent-dark-color);
+  border-radius: $border-radius;
+  box-shadow: none;
+  -webkit-overflow-scrolling: touch;
+
+  pre,
+  code {
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+}
+
+// ```[LANG]...```, kramdown line_numbers = true,
+// {% highlight LANG linenos %}...{% endhighlight %}:
+.highlight .table-wrapper {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  box-shadow: none;
+
+  td,
+  pre {
+    @include fs-2;
+    min-width: 0;
+    padding: 0;
+    background-color: var(--accent-dark-color);
+    border: 0;
+  }
+
+  td.gl {
+    padding-right: $sp-3;
+  }
+
+  pre {
+    margin: 0;
+    line-height: 2;
+  }
+}
+
+.code-example {
+  padding: $sp-3;
+  margin-bottom: $sp-3;
+  overflow: auto;
+  border: 1px solid var(--accent-light-color);
+  border-radius: $border-radius;
+
+  + .highlighter-rouge,
+  + figure.highlight {
+    position: relative;
+    margin-top: -$sp-4;
+    border-right: 1px solid var(--accent-light-color);
+    border-bottom: 1px solid var(--accent-light-color);
+    border-left: 1px solid var(--accent-light-color);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}

data/_sass/base/_layout.scss

@@ -1,54 +1,55 @@
-//
 // two column layout
-//
 
 .side-bar {
-  z-index: 1;
-  display: flex;
-  flex-wrap: wrap;
+  position: fixed;
+  z-index: $z-nav;
+  display: none;
+  height: 100vh;
 
   @include mq(md) {
+    display: block;
     width: $nav-width-md;
-    flex-wrap: nowrap;
-    position: fixed;
-    height: 100%;
   }
 
   @include mq(lg) {
+    display: block;
     width: $nav-width-lg;
   }
+
+  &.nav-open {
+    display: block;
+    width: 100vw;
+  }
 }
 
 .main {
-  height: 100%;
+  @include container;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 
   @include mq(md) {
-    max-width: $content-width;
     margin-left: $nav-width-md;
   }
 
   @include mq(lg) {
     margin-left: $nav-width-lg;
   }
-}
 
-.main-content-wrap { 
-  @include container;
-  
-  display: flex;
-  flex-direction: column;
-
-  padding-top: $gutter-spacing-sm;
-  padding-bottom: $gutter-spacing-sm;
-
-  min-height: 100vh;
-
-  @include mq(md) {
-    padding-top: $gutter-spacing;
-    padding-bottom: $gutter-spacing;
+  &__content {
+    flex: 1 0 auto;
   }
-}
 
-.entry-body {
-  padding: $sp-3;
-}
+  &__footer {
+    // 'sticky footer' from: https://css-tricks.com/couple-takes-sticky-footer/#there-is-flexbox
+    //  ex = local
+    //    footer = main__footer
+    //    content = main__content
+    //    body = main
+    //    html, body = main (height is min-height)
+    flex-shrink: 0;
+    display: flex;
+
+    padding-top: $sp-10;
+  }
+}

data/_sass/base/_link.scss

@@ -0,0 +1,105 @@
+// link -- a tag -- styles
+
+a {
+  text-decoration: none;
+}
+
+a.sem-tag {
+  @include fs-2;
+  color: var(--wiki-link-color);
+}
+
+a.stat-tag {
+  color: var(--body-text-color);
+  filter: drop-shadow(0 0 0.2mm $drop-shadow-green);
+}
+
+a.web-link {
+  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;
+  }
+}
+
+// wiki-link classes
+
+.invalid-wiki-link {
+  color: var(--invalid-wiki-link-color);
+  cursor: help;
+}
+
+a.wiki-link { 
+  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(
+      var(--wiki-link-color) 0%,
+      var(--wiki-link-color) 100%
+    );
+    background-size: 1px 1px;
+  }  
+}
+
+.embed-wrapper {
+  position: relative;
+  border: 1px solid var(--accent-light-color);
+  border-radius: 15px;
+  padding: $sp-3;
+
+  .embed-title {
+    @include fs-6;
+    padding-top: $sp-3;
+    padding-left: $sp-3;
+  }
+
+  .embed-content {
+    padding: $sp-3;
+  }
+  
+  .embed-wiki-link {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+
+    &::before {
+      content: "🥾";
+    }
+
+    &:hover {
+      filter: drop-shadow(0 0 0.8mm $drop-shadow-brown);
+    }
+  }
+}
+
+.embed-image-wrapper {
+  display: flex;
+  justify-content: center;
+  padding-top: $sp-2;
+  padding-bottom: $sp-2;
+
+  .embed-image {
+    height: 50%;
+    width: 50%;
+  }
+}

data/_sass/base/_main.scss

@@ -8,8 +8,7 @@
 }
 
 ::selection {
-  color: $grey-dk-100;
-  background: #E6E09E;
+  background: var(--selection-color);
 }
 
 html {
@@ -21,8 +20,8 @@ body {
   font-family: $body-font-family;
   font-size: inherit;
   line-height: $body-line-height;
-  color: $body-text-color;
-  background-color: $body-background-color;
+  color: var(--body-text-color);
+  background-color: var(--body-background-color);
 }
 
 ol,
@@ -46,11 +45,11 @@ h3,
 h4,
 h5,
 h6 {
-  margin-top: 0;
-  margin-bottom: 1em;
+  // margin-top: 0;
+  // margin-bottom: 1em;
   font-weight: 500;
   line-height: $body-heading-line-height;
-  color: $body-heading-color;
+  color: var(--small-heading-color);
 }
 
 p {
@@ -58,27 +57,6 @@ p {
   margin-bottom: 1em;
 }
 
-a {
-  color: $link-color;
-  text-decoration: none;
-}
-
-a:not([class]) {
-  text-decoration: none;
-  background-image: linear-gradient($border-color 0%, $border-color 100%);
-  background-repeat: repeat-x;
-  background-position: 0 100%;
-  background-size: 1px 1px;
-
-  &:hover {
-    background-image: linear-gradient(
-      rgba($link-color, 0.45) 0%,
-      rgba($link-color, 0.45) 100%
-    );
-    background-size: 1px 1px;
-  }
-}
-
 code {
   font-family: $mono-font-family;
   font-size: 0.75em;
@@ -90,8 +68,18 @@ pre {
   margin: 0;
 }
 
-li {
-  margin: 0.25em 0;
+ul {
+  margin-bottom: 0;
+  padding: $sp-2;
+  
+  li {
+    padding: $sp-1;
+    list-style-type: none !important;
+  
+    &::before {
+      content: "" !important;
+    }
+  }
 }
 
 img {
@@ -103,101 +91,6 @@ hr {
   height: 1px;
   padding: 0;
   margin: $sp-6 0;
-  background-color: $border-color;
+  background-color: var(--accent-light-color);
   border: 0;
 }
-
-// wiki-link classes
-
-.invalid-wiki-link {
-  color: $grey-dk-000;
-  background: $invalid-wiki-link-color;
-  cursor: help;
-}
-
-.wiki-link { 
-  color: $wiki-link-color;
-}
-
-.wiki-link-embed {
-  position: relative;
-  border: 1px solid $separator-color;
-  border-radius: 15px;
-  padding: $sp-3;
-
-  .wiki-link-embed-title {
-    @include fs-6;
-    padding-top: $sp-3;
-    padding-left: $sp-3;
-  }
-
-  .wiki-link-embed-content {
-    padding: $sp-3;
-  }
-  
-  .wiki-link-embed-link {
-    position: absolute;
-    top: 1em;
-    right: 1em;
-
-    &::before {
-      content: "🥾";
-    }
-
-    &:hover {
-      filter: drop-shadow(0 0 0.8mm $drop-shadow-brown);
-    }
-  }
-}
-
-.wiki-link-img {
-  width: 50px;
-  height: 50px;
-}
-
-.sem-tag {
-  @include fs-2;
-  padding: $sp-2;
-  border: 1px solid $separator-color;
-  border-radius: 15px;
-  color: $wiki-link-color;
-
-  &:hover {
-    background-color: $base-button-color;
-  }
-}
-
-.stat-tag {
-  filter: drop-shadow(0 0 0.2mm $drop-shadow-green);
-}
-
-.infobox {
-  @include fs-2;
-  float: right;
-  margin-left: $sp-2;
-  margin-right: $sp-2;
-  padding-left: $sp-3;
-  padding-right: $sp-3;
-  padding-top: $sp-3;
-  border: 1px solid $separator-color;
-  border-radius: 15px;
-
-  .title {
-    text-align: center;
-    margin-top: 0;
-  }
-
-  ul {
-    padding: 0 !important;
-    padding-left: $sp-2 !important;
-    padding-right: $sp-2 !important;
-
-    li {
-      list-style-type: none !important;
-  
-      &::before {
-        content: "" !important;
-      }
-    }  
-  }
-}