jekyll-theme-basically-basic 1.2.0 → 1.3.0

data/_sass/basically-basic/_search.scss

@@ -0,0 +1,101 @@
+/* ==========================================================================
+   SEARCH
+   ========================================================================== */
+
+.search-toggle {
+  margin-left: 1rem;
+  margin-right: 1rem;
+  border: 0;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+
+  .icon {
+    @include fluid-type($min-vw, $max-vw, 20px, 24px);
+    fill: $navicon-content-bg;
+  }
+}
+
+.search-content {
+  display: none;
+  visibility: hidden;
+  padding-top: 1em;
+  padding-bottom: 1em;
+
+  .inner {
+    padding: 0 0.5rem;
+
+    @include breakpoint($small) {
+      padding-right: 1rem;
+      padding-left: 1rem;
+    }
+
+    @include breakpoint($medium) {
+      padding-right: 2rem;
+      padding-left: 2rem;
+    }
+
+    @include breakpoint($large) {
+      padding-right: 3rem;
+      padding-left: 3rem;
+    }
+
+    @include breakpoint($xlarge) {
+      padding-right: 4rem;
+      padding-left: 4rem;
+    }
+  }
+
+  .entry-excerpt {
+    p {
+      margin-bottom: 0;
+    }
+  }
+
+  .search-input {
+    display: block;
+    margin-bottom: 0;
+    padding: 0;
+    border: none;
+    outline: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    background-color: transparent;
+    @include fluid-type($min-vw, $max-vw, 24px, 32px);
+  }
+
+  &.is--visible::after {
+    content: "";
+    display: block;
+  }
+
+  .results-found {
+    margin-top: 0.5em;
+  }
+}
+
+/* Algolia search */
+
+.ais-hits {
+  .entry {
+    border-bottom: 1px solid $border-color;
+  }
+}
+
+.ais-search-box {
+  max-width: 100% !important;
+  margin-bottom: 2em;
+}
+
+.entry-title .ais-Highlight {
+  color: $accent-color;
+  font-style: normal;
+  text-decoration: underline;
+}
+.entry-excerpt .ais-Highlight {
+  color: $accent-color;
+  font-style: normal;
+  font-weight: bold;
+}

data/_sass/basically-basic/_sidebar.scss

@@ -1,142 +1,166 @@
-/* ==========================================================================
-   Sidebar
-   ========================================================================== */
-
-.sidebar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  max-width: $sidebar-width;
-  height: 100%;
-  z-index: 50;
-  visibility: hidden;
-  -webkit-transition: visibility 0s 0.3s;
-  transition: visibility 0s 0.3s;
-
-  @include breakpoint($large) {
-    max-width: (1.5 * $sidebar-width);
-  }
-
-  &.is--visible {
-    visibility: visible;
-    -webkit-transition: visibility 0s 0s;
-    transition: visibility 0s 0s;
-  }
-
-  li {
-    transform: translateX(-1rem);
-    transition: all 0.5s;
-    opacity: 0;
-
-    &.is--moved {
-      transform: translateX(0);
-      opacity: 1;
-    }
-
-    /* line hover effect */
-    a {
-      position: relative;
-      color: $base-color;
-
-      &::before {
-        display: block;
-        position: absolute;
-        top: 50%;
-        left: -3rem;
-        width: 0;
-        height: 1px;
-        transition: width 0.3s cubic-bezier(0, 0, 0.3, 1);
-        background-color: $base-color;
-        content: "";
-      }
-
-      &:hover {
-        color: $accent-color;
-      }
-
-      &:hover::before {
-        width: 2.5rem;
-      }
-    }
-  }
-
-  > .inner {
-    width: 100%;
-    height: 100%;
-    padding: 1.5em;
-    background-color: $sidebar-background-color;
-    overflow-x: hidden;
-    box-shadow: inset -1em 0 5em 0 rgba(0, 0, 0, 0.125);
-
-    @include breakpoint($medium) {
-      padding: 3rem;
-    }
-  }
-
-  .menu {
-    @include fluid-type($min-vw, $max-vw, 24px, 48px);
-    position: relative;
-    margin-bottom: 1.5rem;
-    padding-bottom: 0.5rem;
-    font-weight: bold;
-    line-height: 1;
-
-    a {
-      display: block;
-    }
-
-    /* divider line */
-    &::after {
-      position: absolute;
-      bottom: 0;
-      width: 1.5em;
-      height: 1px;
-      background-color: $base-color;
-      content: "";
-    }
-
-    li {
-      margin-bottom: 1.5rem;
-    }
-  }
-
-  .contact-list {
-    @include fluid-type($min-vw, $max-vw, 18px, 24px);
-    margin-top: 0.5rem;
-    padding-top: 0.5rem;
-
-    li:not(:last-child) {
-      margin-bottom: 0.5rem;
-    }
-
-    a {
-      display: block;
-      color: $base-color;
-      text-decoration: none;
-    }
-  }
-}
-
-.sidebar-toggle-wrapper {
-  position: fixed;
-  top: 0.675rem;
-  right: 0;
-  cursor: pointer;
-  z-index: 10000;
-
-  .toggle-inner {
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-align: center;
-    align-items: center;
-  }
-}
-
-.sidebar-toggle-label {
-  -ms-flex-order: 2;
-  order: 2;
-  margin-left: 0.5rem;
-  font-weight: bold;
-  color: $text-color;
-}
+/* ==========================================================================
+   Sidebar
+   ========================================================================== */
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  max-width: $sidebar-width;
+  height: 100%;
+  z-index: 50;
+  visibility: hidden;
+  -webkit-transition: visibility 0s 0.3s;
+  transition: visibility 0s 0.3s;
+
+  @include breakpoint($large) {
+    max-width: (1.5 * $sidebar-width);
+  }
+
+  &.is--visible {
+    visibility: visible;
+    -webkit-transition: visibility 0s 0s;
+    transition: visibility 0s 0s;
+  }
+
+  li {
+    -webkit-transform: translateX(-1rem);
+    -ms-transform: translateX(-1rem);
+    transform: translateX(-1rem);
+    -webkit-transition: all 0.5s;
+    transition: all 0.5s;
+    opacity: 0;
+
+    &.is--moved {
+      -webkit-transform: translateX(0);
+      -ms-transform: translateX(0);
+      transform: translateX(0);
+      opacity: 1;
+    }
+
+    /* line hover effect */
+    a {
+      position: relative;
+      color: $base-color;
+
+      &::before {
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: -3rem;
+        width: 0;
+        height: 1px;
+        -webkit-transition: width 0.3s cubic-bezier(0, 0, 0.3, 1);
+        transition: width 0.3s cubic-bezier(0, 0, 0.3, 1);
+        background-color: $base-color;
+        content: "";
+      }
+
+      &:hover {
+        color: $accent-color;
+      }
+
+      &:hover::before {
+        width: 2.5rem;
+      }
+    }
+  }
+
+  > .inner {
+    width: 100%;
+    height: 100%;
+    padding: 1.5em;
+    background-color: $sidebar-background-color;
+    overflow-x: hidden;
+    -webkit-box-shadow: inset -1em 0 5em 0 rgba(0, 0, 0, 0.125);
+    box-shadow: inset -1em 0 5em 0 rgba(0, 0, 0, 0.125);
+
+    @include breakpoint($medium) {
+      padding: 3rem;
+    }
+  }
+
+  .menu {
+    @include fluid-type($min-vw, $max-vw, 24px, 48px);
+    position: relative;
+    margin-bottom: 1.5rem;
+    padding-bottom: 0.5rem;
+    font-weight: bold;
+    line-height: 1;
+
+    a {
+      display: block;
+    }
+
+    /* divider line */
+    &::after {
+      position: absolute;
+      bottom: 0;
+      width: 1.5em;
+      height: 1px;
+      background-color: $base-color;
+      content: "";
+    }
+
+    li {
+      margin-bottom: 1.5rem;
+    }
+  }
+
+  .contact-list {
+    @include fluid-type($min-vw, $max-vw, 18px, 24px);
+    margin-top: 0.5rem;
+    padding-top: 0.5rem;
+
+    li:not(:last-child) {
+      margin-bottom: 0.5rem;
+    }
+
+    a {
+      display: block;
+      color: $base-color;
+      text-decoration: none;
+    }
+  }
+}
+
+.sidebar-toggle-wrapper {
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  top: 0;
+  right: 0;
+  margin: 1.8125rem 0;
+  padding-right: 1rem;
+  background-color: $background-color;
+  z-index: 10000;
+
+  @include breakpoint($medium) {
+    right: 2rem;
+    padding-right: 0;
+  }
+
+  @include breakpoint($large) {
+    right: 5vw;
+  }
+
+  .toggle-inner {
+    display: -ms-flexbox;
+    display: -webkit-box;
+    display: flex;
+    -ms-flex-align: center;
+    -webkit-box-align: center;
+    align-items: center;
+  }
+}
+
+.sidebar-toggle-label {
+  margin-left: 0.5rem;
+  font-weight: bold;
+  color: $text-color;
+}

data/_sass/basically-basic/_syntax-highlighting.scss

@@ -312,3 +312,9 @@ figure.highlight {
     color: $base09;
   }
 }
+
+.gist {
+  th, td {
+    border-bottom: 0;
+  }
+}

data/_sass/basically-basic/_utilities.scss

@@ -1,5 +1,6 @@
-@import 'utilities/accessibility';
-@import 'utilities/align';
-@import 'utilities/clearfix';
-@import 'utilities/float';
-@import 'utilities/text';
+@import "utilities/accessibility";
+@import "utilities/align";
+@import "utilities/clearfix";
+@import "utilities/float";
+@import "utilities/text";
+@import "utilities/visibility";

data/_sass/basically-basic/utilities/_visibility.scss

@@ -0,0 +1,32 @@
+/* ==========================================================================
+   Visibility
+   ========================================================================== */
+
+/* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */
+
+.is--hidden {
+  display: none;
+  visibility: hidden;
+}
+
+.is--visible {
+  display: block;
+  visibility: visible;
+}
+
+/* https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html */
+
+.visually-hidden {
+  position: absolute !important;
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px !important;
+  width: 1px !important;
+  border: 0 !important;
+  overflow: hidden;
+}
+
+body:hover .visually-hidden a,
+body:hover .visually-hidden input,
+body:hover .visually-hidden button {
+  display: none !important;
+}