From 61b34a5f260db45575d448d766ea29c0fb273ed3 Mon Sep 17 00:00:00 2001
From: Karl Hallsby <karl@hallsby.com>
Date: Sun, 27 Sep 2020 14:31:36 -0500
Subject: Add jekyll-text-theme YAML files

---
 _sass/components/_article-content.scss | 221 +++++++++++++++++++++++++++++++++
 _sass/components/_article-footer.scss  |  17 +++
 _sass/components/_article-header.scss  |  50 ++++++++
 _sass/components/_article-info.scss    |  25 ++++
 _sass/components/_article-list.scss    |  18 +++
 _sass/components/_author-links.scss    |  43 +++++++
 _sass/components/_author-profile.scss  |  26 ++++
 _sass/components/_extensions.scss      |  35 ++++++
 _sass/components/_footer.scss          |  33 +++++
 _sass/components/_header.scss          | 123 ++++++++++++++++++
 _sass/components/_lightbox.scss        |   7 ++
 _sass/components/_main.scss            |  28 +++++
 _sass/components/_search.scss          | 186 +++++++++++++++++++++++++++
 _sass/components/_tags.scss            |  24 ++++
 14 files changed, 836 insertions(+)
 create mode 100644 _sass/components/_article-content.scss
 create mode 100644 _sass/components/_article-footer.scss
 create mode 100644 _sass/components/_article-header.scss
 create mode 100644 _sass/components/_article-info.scss
 create mode 100644 _sass/components/_article-list.scss
 create mode 100644 _sass/components/_author-links.scss
 create mode 100644 _sass/components/_author-profile.scss
 create mode 100644 _sass/components/_extensions.scss
 create mode 100644 _sass/components/_footer.scss
 create mode 100644 _sass/components/_header.scss
 create mode 100644 _sass/components/_lightbox.scss
 create mode 100644 _sass/components/_main.scss
 create mode 100644 _sass/components/_search.scss
 create mode 100644 _sass/components/_tags.scss

(limited to '_sass/components')

diff --git a/_sass/components/_article-content.scss b/_sass/components/_article-content.scss
new file mode 100644
index 0000000..6dbda0d
--- /dev/null
+++ b/_sass/components/_article-content.scss
@@ -0,0 +1,221 @@
+.article__content {
+  line-height: map-get($base, line-height-lg);
+  word-wrap: break-word;
+  @media print {
+    line-height: map-get($base, line-height);
+  }
+  @include block-elements() {
+    margin: map-get($spacers, 3) 0;
+    @media print {
+      margin: map-get($spacers, 2) 0;
+    }
+  }
+  @include heading-elements() {
+    position: relative;
+    margin-top: map-get($spacers, 4);
+    @media print {
+      margin-top: map-get($spacers, 3);
+    }
+    & > .anchor {
+      @include link-colors($border-color, $main-color-1);
+      margin-left: map-get($spacers, 1);
+      text-decoration: none;
+      visibility: hidden;
+      opacity: 0;
+      & > i {
+        font-size: map-get($base, font-size-sm);
+      }
+    }
+    @include hover() {
+      & > .anchor {
+        cursor: pointer;
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+  }
+  h1,
+  h2 {
+    @include split-line(bottom);
+  }
+  hr {
+    border: none;
+    @include horizontal-rules();
+  }
+  blockquote {
+    padding-left: map-get($spacers, 3);
+    font-size: map-get($base, font-size-sm);
+    color: $text-color-l;
+    @include split-line(left, 4px, $border-color);
+    p {
+      margin: map-get($spacers, 2) 0;
+    }
+    & > :last-child {
+      margin-bottom: 0;
+    }
+  }
+  img:not(.emoji) {
+    max-width: 100%;
+    vertical-align: middle;
+  }
+  .emoji {
+    display: inline-block;
+    width: map-get($base, line-height-lg) * .7rem;
+    height: map-get($base, line-height-lg) * .7rem;
+    vertical-align: text-bottom;
+  }
+  .footnotes {
+    @include split-line();
+    margin-top: map-get($spacers, 5);
+    @media print {
+      margin-top: map-get($spacers, 2) * 2;
+    }
+  }
+  code {
+    padding: map-get($spacers, 1) map-get($spacers, 2);
+    background-color: $text-background-color;
+    border-radius: map-get($base, border-radius);
+    span {
+      padding: 0;
+      margin: 0;
+    }
+  }
+  pre {
+    @include overflow(auto);
+    & > code {
+      padding: 0;
+      word-wrap: normal;
+      background-color: transparent;
+      &.language-mermaid, &.language-chart {
+        svg {
+          width: 100%;
+        }
+        display: none;
+        &[data-processed] {
+          display: block;
+        }
+      }
+    }
+  }
+  .highlighter-rouge > .highlight, figure.highlight {
+    & > pre {
+      padding: map-get($spacers, 3) 0 map-get($spacers, 3) map-get($spacers, 3);
+      margin: 0;
+      background-color: $text-background-color;
+      border-radius: map-get($base, border-radius);
+      & > code {
+        display: block;
+      }
+    }
+  }
+  figure.highlight {
+    &::before {
+      display: block;
+      padding: map-get($spacers, 2) map-get($spacers, 3) map-get($spacers, 2) 0;
+      font-weight: map-get($base, font-weight-bold);
+      color: $decorate-color;
+      text-align: right;
+      text-transform: uppercase;
+      content: attr(data-lang);
+      background-color: $text-background-color;
+      border-top-left-radius: map-get($base, border-radius);
+      border-top-right-radius: map-get($base, border-radius);
+    }
+    & > pre {
+      padding-top: 0;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      & > code {
+        & > .rouge-table {
+          width: auto;
+          margin: 0 0 #{- map-get($spacers, 3)} #{- map-get($spacers, 3)};
+          tbody, tr, td {
+            padding-top: 0;
+            padding-bottom: 0;
+            border: none;
+          }
+          & > tbody {
+            @include flexbox;
+            & > tr {
+              width: 100%;
+              @include flexbox;
+              & > .code {
+                padding: 0 0 map-get($spacers, 3) map-get($spacers, 2);
+                @include overflow(auto);
+              }
+            }
+          }
+          tbody td {
+            &.gl {
+              padding-left: map-get($spacers, 3);
+            }
+            & > pre {
+              display: block;
+              margin: 0;
+              border-radius: 0;
+              @include overflow(auto);
+              &.lineno {
+                color: $text-color-l;
+                @include user-select(none);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  ul, ol {
+    margin-left: map-get($spacers, 4);
+    ul, ol {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    li {
+      p {
+        margin: map-get($spacers, 2);
+        @media print {
+          margin: map-get($spacers, 1);
+        }
+      }
+    }
+  }
+  dl {
+    dt, dd {
+      p {
+        margin: map-get($spacers, 2);
+        @media print {
+          margin: map-get($spacers, 1);
+        }
+      }
+    }
+    dt {
+      font-weight: map-get($base, font-weight-bold);
+    }
+    dd {
+      margin-left: 2rem;
+    }
+  }
+  ul.task-list {
+    margin-left: 0;
+    list-style-type: none;
+    ul, ol {
+      margin-left: map-get($spacers, 4);
+    }
+  }
+  table {
+    display: block;
+    width: 100%;
+    border-collapse: collapse;
+    @include overflow(auto);
+    thead, tfoot {
+      background-color: $text-background-color;
+    }
+    th, td {
+      padding: map-get($spacers, 2);
+      border: 1px solid $border-color-l;
+    }
+    th {
+      font-weight: map-get($base, font-weight-bold);
+    }
+  }
+}
diff --git a/_sass/components/_article-footer.scss b/_sass/components/_article-footer.scss
new file mode 100644
index 0000000..575bc8d
--- /dev/null
+++ b/_sass/components/_article-footer.scss
@@ -0,0 +1,17 @@
+.article__footer {
+  margin: map-get($spacers, 4) 0;
+  font-size: map-get($base, font-size-sm);
+}
+
+.article__license, .article__subscribe {
+  a {
+    @include link-colors($text-color, $main-color-1);
+  }
+}
+
+.article__license {
+  color: $text-color-l;
+  img {
+    height: map-get($base, font-size) * 1.6;
+  }
+}
diff --git a/_sass/components/_article-header.scss b/_sass/components/_article-header.scss
new file mode 100644
index 0000000..002cc8c
--- /dev/null
+++ b/_sass/components/_article-header.scss
@@ -0,0 +1,50 @@
+.article__header {
+  margin-top: map-get($spacers, 5);
+  margin-bottom: map-get($spacers, 4);
+  @include media-breakpoint-down(md) {
+    margin-top: map-get($spacers, 4);
+  }
+  header, h1 {
+    display: inline;
+  }
+  h1 {
+    word-wrap: break-word;
+  }
+  .split-space {
+    @include user-select(none);
+  }
+  .edit-on-github {
+    text-decoration: none !important;
+  }
+}
+
+.article__header--overlay {
+  .overlay {
+    min-height: 36rem;
+    padding-top: map-get($spacers, 5) * 2;
+    padding-bottom: map-get($spacers, 5) * 2;
+    @include media-breakpoint-down(md) {
+      min-height: 29rem;
+      padding-top: map-get($spacers, 5);
+      padding-bottom: map-get($spacers, 5);
+    }
+  }
+  .overlay__excerpt {
+    font-size: map-get($base, font-size-h3-xl);
+    @include media-breakpoint-down(lg) {
+      font-size: map-get($base, font-size-h3-lg);
+    }
+    @include media-breakpoint-down(md) {
+      font-size: map-get($base, font-size-h3-sm);
+    }
+    font-weight: map-get($base, font-weight-bold);
+  }
+
+  .article__header {
+    margin-top: 0;
+  }
+}
+
+.article__header--cover {
+  width: 100%;
+}
diff --git a/_sass/components/_article-info.scss b/_sass/components/_article-info.scss
new file mode 100644
index 0000000..bebf9b5
--- /dev/null
+++ b/_sass/components/_article-info.scss
@@ -0,0 +1,25 @@
+.article__info {
+  font-size: map-get($base, font-size-sm);
+  color: $text-color-l;
+  .left-col {
+    float: left;
+    @include media-breakpoint-down(md) {
+      float: none;
+    }
+  }
+  .right-col {
+    float: right;
+    margin-left: map-get($button, padding-x-sm);
+    @include media-breakpoint-down(md) {
+      float: none;
+    }
+    & > li {
+      &:not(:last-child) {
+        @include split-line(right, default, $text-color-l);
+        padding-right: map-get($spacers, 2);
+        margin-right: map-get($spacers, 2);
+        line-height: map-get($base, line-height-xs);
+      }
+    }
+  }
+}
diff --git a/_sass/components/_article-list.scss b/_sass/components/_article-list.scss
new file mode 100644
index 0000000..c59550d
--- /dev/null
+++ b/_sass/components/_article-list.scss
@@ -0,0 +1,18 @@
+.article-list {
+  .item__meta {
+    padding: 0 map-get($spacers, 3) 0 0;
+    font-family: map-get($base, font-family-code);
+    font-size: map-get($base, font-size-sm);
+    white-space: nowrap;
+  }
+  &.grid--sm {
+    .card__header {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+.article-list__group-header {
+  margin-top: map-get($spacers, 3);
+}
diff --git a/_sass/components/_author-links.scss b/_sass/components/_author-links.scss
new file mode 100644
index 0000000..efe09c2
--- /dev/null
+++ b/_sass/components/_author-links.scss
@@ -0,0 +1,43 @@
+.author-links {
+  & > ul {
+    margin: 0;
+    & > li > {
+      .mail-button {
+        @include clickable($text-color-1, $mail-color);
+      }
+      .facebook-button {
+        @include clickable($text-color-1, $facebook-color);
+      }
+      .twitter-button {
+        @include clickable($text-color-1, $twitter-color);
+      }
+      .weibo-button {
+        @include clickable($text-color-1, $weibo-color);
+      }
+      .googlepluse-button {
+        @include clickable($text-color-1, $google-plus-color);
+      }
+      .telegram-button {
+        @include clickable($text-color-1, $telegram-color);
+      }
+      .medium-button {
+        @include clickable($text-color-1, $medium-color);
+      }
+      .zhihu-button {
+        @include clickable($text-color-1, $zhihu-color);
+      }
+      .douban-button {
+        @include clickable($text-color-1, $douban-color);
+      }
+      .linkedin-button {
+        @include clickable($text-color-1, $linkedin-color);
+      }
+      .github-button {
+        @include clickable($text-color-1, $github-color);
+      }
+      .npm-button {
+        @include clickable($text-color-1, $npm-color);
+      }
+    }
+  }
+}
diff --git a/_sass/components/_author-profile.scss b/_sass/components/_author-profile.scss
new file mode 100644
index 0000000..b506715
--- /dev/null
+++ b/_sass/components/_author-profile.scss
@@ -0,0 +1,26 @@
+.author-profile {
+  max-width: 25rem;
+  padding: map-get($spacers, 2) map-get($spacers, 3);
+  margin: map-get($spacers, 4) 0;
+  font-size: map-get($base, font-size-sm);
+  background-color: $text-background-color;
+  @include media-breakpoint-down(md) {
+    text-align: center;
+  }
+}
+.author-profile__avatar {
+  width: 5rem;
+  height: 5rem;
+  margin-top: map-get($spacers, 2);
+  border-radius: 50%;
+}
+.author-profile__name {
+  font-size: map-get($base, font-size-lg);
+  font-weight: map-get($base, font-weight-bold);
+  a {
+    @include link-colors($text-color, $main-color-1);
+  }
+}
+.author-profile__links {
+  @include overflow(auto);
+}
diff --git a/_sass/components/_extensions.scss b/_sass/components/_extensions.scss
new file mode 100644
index 0000000..7c83f75
--- /dev/null
+++ b/_sass/components/_extensions.scss
@@ -0,0 +1,35 @@
+.extensions {
+  margin: map-get($spacers, 3) 0;
+  @extend .d-print-none;
+}
+
+.extensions--video, .extensions--slide, .extensions--demo {
+  position: relative;
+  width: 100%;
+  padding: 0;
+  & > iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.extensions--video {
+  padding-top: percentage(315 / 560);
+}
+
+.extensions--slide {
+  padding-top: percentage(487 / 599);
+}
+
+.extensions--demo {
+  min-height: 340px;
+  padding-top: percentage(315 / 560);
+}
+
+.extensions--audio {
+  display: block;
+  max-width: 100% !important;
+}
diff --git a/_sass/components/_footer.scss b/_sass/components/_footer.scss
new file mode 100644
index 0000000..63ed8fe
--- /dev/null
+++ b/_sass/components/_footer.scss
@@ -0,0 +1,33 @@
+/**
+ * Site Info
+ */
+
+.footer {
+  @include flexbox();
+  @include align-items(center);
+  color: $footer-text-color;
+  background: $footer-background;
+  a {
+    @include link-colors ($footer-text-color, $main-color-1);
+  }
+  .site-info {
+    font-size: map-get($base, font-size-xs);
+    text-align: center;
+    .menu {
+      line-height: map-get($base, line-height-xs);
+      & > * {
+        &:not(:last-child) {
+          @include split-line(right, default, $footer-text-color);
+          padding-right: map-get($spacers, 1);
+          margin-right: map-get($spacers, 1);
+        }
+      }
+    }
+  }
+}
+.footer__author-links {
+  @include overflow(auto);
+  .author-links {
+    text-align: center;
+  }
+}
diff --git a/_sass/components/_header.scss b/_sass/components/_header.scss
new file mode 100644
index 0000000..44d108d
--- /dev/null
+++ b/_sass/components/_header.scss
@@ -0,0 +1,123 @@
+.header {
+  background: $header-background;
+  a {
+    font-weight: map-get($base, font-weight);
+    text-decoration: none !important;
+    @include link-colors($header-text-color, $main-color-1);
+  }
+  .main {
+    @include flexbox();
+    @include media-breakpoint-down(md) {
+      @include flex-direction(column);
+    }
+  }
+}
+
+.header--dark {
+  @extend .text--dark;
+  background: rgba(#000, .15);
+  .navigation__item--active {
+    &::after {
+      @include split-line(bottom, 4px, $text-color-theme-dark);
+    }
+  }
+}
+
+.header--light {
+  @extend .text--light;
+  background: rgba(#fff, .15);
+  .navigation__item--active {
+    &::after {
+      @include split-line(bottom, 4px, $text-color-theme-light);
+    }
+  }
+}
+
+.header__title {
+  @include menu(3, 0);
+  @include align-items(center);
+  @include flex-wrap(nowrap);
+  @include flex(1);
+  height: map-get($layout, header-height);
+  margin-right: map-get($spacers, 3);
+  white-space: nowrap;
+  @include media-breakpoint-down(md) {
+    height: auto;
+    margin-right: 0;
+  }
+  & > .header__brand {
+    @include flex(1);
+    @include media-breakpoint-down(md) {
+      height: map-get($layout, header-height-sm);
+    }
+  }
+  & > .search-button {
+    display: none;
+    margin-left: map-get($spacers, 2);
+    @include media-breakpoint-down(md) {
+      @include flexbox();
+    }
+  }
+}
+
+.header__brand {
+  @include flexbox();
+  @include align-items(center);
+  & > svg {
+    width: map-get($base, font-size-h4) * 1.6;
+    height: map-get($base, font-size-h4) * 1.6;
+    margin-right: map-get($spacers, 3);
+    vertical-align: middle;
+    @include media-breakpoint-down(md) {
+      width: map-get($base, font-size-h4) * 1.2;
+      height: map-get($base, font-size-h4) * 1.2;
+    }
+  }
+  & > a {
+    display: inline-block;
+    font-size: map-get($base, font-size-h4);
+    @include media-breakpoint-down(md) {
+      font-size: map-get($base, font-size-h4-small);
+    }
+  }
+}
+
+.navigation {
+  @include overflow(auto, "x");
+  & > ul {
+    height: map-get($layout, header-height);
+    padding-bottom: 0;
+    margin: 0;
+    @include media-breakpoint-down(md) {
+      padding-bottom: 4px;
+      margin: -4px 0 0 0;
+    }
+    @include menu(3, 2, nowrap);
+    @include align-items(center);
+    @include media-breakpoint-down(md) {
+      height: auto;
+    }
+    .search-button {
+      @include media-breakpoint-down(md) {
+        display: none;
+      }
+    }
+  }
+}
+
+.navigation__item {
+  &::after {
+    display: block;
+    margin-bottom: -4px;
+    content: "";
+    @include split-line(bottom, 4px, transparent);
+  }
+}
+.navigation__item--active {
+  a {
+    @include link-colors($main-color-1, $main-color-1);
+  }
+  &::after {
+    @include split-line(bottom, 4px, $main-color-1);
+  }
+}
diff --git a/_sass/components/_lightbox.scss b/_sass/components/_lightbox.scss
new file mode 100644
index 0000000..4dad32b
--- /dev/null
+++ b/_sass/components/_lightbox.scss
@@ -0,0 +1,7 @@
+.popup-image {
+  cursor: pointer;
+  @include hover() {
+    @include box-shadow(2);
+  }
+  @include transition(map-get($clickable, transition));
+}
diff --git a/_sass/components/_main.scss b/_sass/components/_main.scss
new file mode 100644
index 0000000..265c727
--- /dev/null
+++ b/_sass/components/_main.scss
@@ -0,0 +1,28 @@
+.main {
+  width: 100%;
+  max-width: map-get($layout, content-max-width);
+  padding: 0 map-get($spacers, 5);
+  margin: 0 auto;
+  @include media-breakpoint-down(lg) {
+    padding: 0 map-get($spacers, 4);
+  }
+  @include media-breakpoint-down(md) {
+    padding: 0 map-get($spacers, 3);
+  }
+}
+
+.has-aside {
+  .main {
+    max-width: map-get($layout, content-max-width) + map-get($layout, aside-width);
+    @include media-breakpoint-down(lg) {
+      max-width: map-get($layout, content-max-width);
+    }
+  }
+}
+
+.full-width {
+  .main {
+    width: 100%;
+    max-width: 100%;
+  }
+}
diff --git a/_sass/components/_search.scss b/_sass/components/_search.scss
new file mode 100644
index 0000000..d28dabc
--- /dev/null
+++ b/_sass/components/_search.scss
@@ -0,0 +1,186 @@
+.search {
+  @include overflow(auto);
+
+}
+.search--google-custom-search-engine {
+  .main {
+    padding-top: map-get($spacers, 4);
+    padding-bottom: map-get($spacers, 4);
+    @include media-breakpoint-down(md) {
+      position: absolute;
+      padding: 0;
+    }
+  }
+}
+
+.search__header {
+  margin-top: map-get($spacers, 4);
+  font-size: map-get($base, font-size-h1);
+  font-weight: map-get($base, font-weight-bold);
+  color: $text-color-d;
+  .search--light & {
+    color: $text-color-theme-light-d;
+  }
+  .search--dark & {
+    color: $text-color-theme-dark-d;
+  }
+  @include media-breakpoint-down(md) {
+    display: none;
+  }
+}
+
+.search-bar {
+  @include flexbox();
+  margin: map-get($spacers, 3) 0 map-get($spacers, 4) 0;
+}
+
+.search-box {
+  position: relative;
+  width: 100%;
+  max-width: 22rem;
+  @include media-breakpoint-down(md) {
+    width: 100%;
+    max-width: none;
+  }
+  & > input {
+    display: inline-block;
+    width: 100%;
+    height: $button-height-lg;
+    padding: 0 2rem;
+    margin: 0;
+    line-height: 1 !important;
+    color: $text-color;
+    background-color: transparent;
+    border: 2px solid $border-color;
+    border-radius: map-get($button, pill-radius);
+    -webkit-appearance: none; /* fix iOS don't display box-shadow properly */
+    @include transition(box-shadow map-get($animation, duration) map-get($animation, timing-function));
+    @include focus {
+      box-shadow: 0 0 0 2px rgba($border-color, .4);
+    }
+    .search--light & {
+      color: $text-color-theme-light;
+      border-color: $text-color-theme-light;
+      @include focus {
+        box-shadow: 0 0 0 2px rgba($text-color-theme-light, .4);
+      }
+    }
+    .search--dark & {
+      color: $text-color-theme-dark;
+      border-color: $text-color-theme-dark;
+      @include focus {
+        box-shadow: 0 0 0 2px rgba($text-color-theme-dark, .4);
+      }
+    }
+  }
+  & > .search-box__icon-search {
+    color: $text-color-l;
+    .search--light & {
+      color: $text-color-theme-light-l;
+    }
+    .search--dark & {
+      color: $text-color-theme-dark-l;
+    }
+  }
+  & > .search-box__icon-clear {
+    & > a {
+      @include link-colors($text-color);
+      .search--light & {
+        @include link-colors($text-color-theme-light);
+      }
+      .search--dark & {
+        @include link-colors($text-color-theme-dark);
+      }
+      cursor: pointer;
+    }
+  }
+  & > .search-box__icon-search, & > .search-box__icon-clear {
+    position: absolute;
+    width: $button-height-lg;
+    height: $button-height-lg;
+    line-height: $button-height-lg;
+    text-align: center;
+    vertical-align: middle;
+  }
+  &.not-empty > .search-box__icon-clear {
+    display: block;
+  }
+  & > .search-box__icon-clear {
+    top: 0;
+    right: 0;
+    display: none;
+  }
+  & > .search-box__icon-search {
+    top: 0;
+    left: 0;
+  }
+}
+
+.search__cancel {
+  margin-left: map-get($spacers, 2);
+  font-weight: map-get($base, font-weight-bold);
+  white-space: nowrap;
+}
+
+.search-result {
+  margin: map-get($spacers, 4) 0;
+  font-size: map-get($base, font-size-sm);
+  line-height: map-get($base, line-height-sm);
+}
+
+.search-result__header {
+  margin: map-get($spacers, 3) 0 map-get($spacers, 2) 0;
+  font-size: map-get($base, font-size-lg);
+  font-weight: map-get($base, font-weight-bold);
+  color: $text-color-l;
+  text-transform: uppercase;
+  .search--light & {
+    color: $text-color-theme-light-l;
+  }
+  .search--dark & {
+    color: $text-color-theme-dark-l;
+  }
+}
+
+.search-result__item {
+  list-style-type: none;
+  a {
+    padding: map-get($spacers, 1) map-get($spacers, 3);
+    @include transition(none);
+    @include clickable($text-color, transparent, $text-color-3, $main-color-3);
+    .search--light & {
+      @include clickable($text-color-theme-light, transparent, $text-color-theme-dark, $main-color-theme-light);
+    }
+    .search--dark & {
+      @include clickable($text-color-theme-dark, transparent, $text-color-theme-light, $main-color-theme-dark);
+    }
+  }
+  &.active {
+    a {
+      @include plain() {
+        color: $text-color-3;
+        background-color: $main-color-3;
+        .search--light & {
+          color: $text-color-theme-dark;
+          background-color: $main-color-theme-light;
+        }
+        .search--dark & {
+          color: $text-color-theme-light;
+          background-color: $main-color-theme-dark;
+        }
+      }
+      @include active() {
+        @include transition(map-get($clickable, transition));
+      }
+    }
+  }
+}
+
+// google search
+.gsc-control-cse {
+  *,
+  ::before,
+  ::after {
+    box-sizing: initial;
+  }
+}
diff --git a/_sass/components/_tags.scss b/_sass/components/_tags.scss
new file mode 100644
index 0000000..946b1b6
--- /dev/null
+++ b/_sass/components/_tags.scss
@@ -0,0 +1,24 @@
+.site-tags {
+  .tag-button {
+    @include clickable($text-color-3, $main-color-3, default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2);
+    & > .tag-button__count {
+      display: inline-block;
+      margin-left: map-get($spacers, 1);
+      font-size: map-get($base, font-size-xs);
+      line-height: 1;
+      vertical-align: top;
+    }
+  }
+  .tag-button-1 {
+    @include clickable($text-color-1, rgba($main-color-1, .4), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2);
+  }
+  .tag-button-2 {
+    @include clickable($text-color-1, rgba($main-color-1, .55), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2);
+  }
+  .tag-button-3 {
+    @include clickable($text-color-1, rgba($main-color-1, .7), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2);
+  }
+  .tag-button-4 {
+    @include clickable($text-color-1, rgba($main-color-1, .9), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2);
+  }
+}
-- 
cgit v1.2.3