just-the-docs 0.2.6 → 0.3.1

data/_sass/print.scss

@@ -0,0 +1,40 @@
+// stylelint-disable selector-max-specificity, selector-max-id, selector-max-type, selector-no-qualifying-type, primer/no-override,
+
+@media print {
+  .site-footer,
+  .site-button,
+  #edit-this-page,
+  #back-to-top,
+  .site-nav,
+  .main-header {
+    display: none !important;
+  }
+
+  .side-bar {
+    width: 100%;
+    height: auto;
+    border-right: 0 !important;
+  }
+
+  .site-header {
+    border-bottom: 1px solid $border-color;
+  }
+
+  .site-title {
+    font-size: $root-font-size !important;
+    font-weight: 700 !important;
+  }
+
+  .text-small {
+    font-size: 8pt !important;
+  }
+
+  pre.highlight {
+    border: 1px solid $border-color;
+  }
+
+  .main {
+    max-width: none;
+    margin-left: 0;
+  }
+}

data/_sass/search.scss

@@ -4,91 +4,115 @@
 
 .search {
   position: relative;
-  z-index: 99;
+  z-index: 2;
   flex-grow: 1;
-  height: 100%;
-  margin-bottom: $sp-3;
+  height: $sp-10;
+  padding: $sp-2;
+  transition: padding linear #{$transition-duration / 2};
 
   @include mq(md) {
-    margin-bottom: 0;
+    position: relative !important;
+    width: auto !important;
+    height: 100% !important;
+    padding: 0;
+    transition: none;
   }
 }
 
 .search-input-wrap {
-  display: flex;
-  height: 100%;
-  padding: $sp-2;
-  background-color: $search-background-color;
+  position: relative;
+  z-index: 1;
+  height: $sp-8;
+  overflow: hidden;
   border-radius: $border-radius;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+  transition: height linear #{$transition-duration / 2};
 
   @include mq(md) {
-    padding-top: 0;
-    padding-right: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    background-color: $body-background-color;
+    position: absolute;
+    width: 100%;
+    max-width: $search-results-width;
+    height: 100% !important;
     border-radius: 0;
     box-shadow: none;
+    transition: width ease $transition-duration;
   }
 }
 
 .search-input {
-  align-self: center;
+  position: absolute;
   width: 100%;
-  padding-top: $sp-1;
-  padding-bottom: $sp-1;
+  height: 100%;
+  padding-top: $sp-2;
+  padding-right: $gutter-spacing-sm;
+  padding-bottom: $sp-2;
+  padding-left: #{$gutter-spacing-sm + $sp-5};
+  font-size: 16px;
   background-color: $search-background-color;
   border-top: 0;
   border-right: 0;
   border-bottom: 0;
   border-left: 0;
-  order: 2;
-  @include fs-4;
+  border-radius: 0;
+
+  @include mq(md) {
+    padding-top: $gutter-spacing-sm;
+    padding-bottom: $gutter-spacing-sm;
+    padding-left: #{$gutter-spacing + $sp-5};
+    font-size: 14px;
+    background-color: $body-background-color;
+    transition: padding-left linear #{$transition-duration / 2};
+  }
 
   &:focus {
     outline: 0;
-    box-shadow: none;
 
-    + .search-icon {
-      fill: $link-color;
+    + .search-label .search-icon {
+      color: $link-color;
     }
   }
+}
+
+.search-label {
+  position: absolute;
+  display: flex;
+  height: 100%;
+  padding-left: $gutter-spacing-sm;
 
   @include mq(md) {
-    background-color: $body-background-color;
-    @include fs-3;
+    padding-left: $gutter-spacing;
+    transition: padding-left linear #{$transition-duration / 2};
   }
-}
 
-.search-icon {
-  align-self: center;
-  margin-right: $sp-2;
-  fill: $grey-dk-000;
-  order: 1;
+  .search-icon {
+    width: #{$sp-4 * 1.2};
+    height: #{$sp-4 * 1.2};
+    align-self: center;
+    color: $grey-dk-000;
+  }
 }
 
-.search-results-wrap {
+.search-results {
   position: absolute;
-  z-index: 100;
+  left: 0;
   display: none;
   width: 100%;
-  background: $search-background-color;
-  border-radius: $border-radius;
+  max-height: calc(100% - #{$sp-10});
+  overflow-y: auto;
+  background-color: $search-background-color;
+  border-bottom-right-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
 
-  &.active {
-    display: block;
-  }
-
   @include mq(md) {
+    top: 100%;
     width: $search-results-width;
+    max-height: calc(100vh - 200%) !important;
   }
 }
 
 .search-results-list {
   padding-left: 0;
-  margin-top: $sp-1;
   margin-bottom: $sp-1;
   list-style: none;
   @include fs-4;
@@ -112,31 +136,58 @@
 
   &:hover,
   &.active {
-    background-color: $sidebar-color;
-  }
-
-  @include mq(md) {
-    padding-right: $sp-4;
-    padding-left: $sp-4;
+    background-color: $feedback-color;
   }
 }
 
 .search-result-title {
   display: block;
   padding-top: $sp-2;
-  padding-right: $sp-4;
   padding-bottom: $sp-2;
 
   @include mq(sm) {
     display: inline-block;
     width: 40%;
-    word-wrap: break-word;
+    padding-right: $sp-2;
     vertical-align: top;
   }
 }
 
+.search-result-doc {
+  display: flex;
+  align-items: center;
+  word-wrap: break-word;
+
+  &.search-result-doc-parent {
+    opacity: 0.5;
+    @include fs-3;
+
+    @include mq(md) {
+      @include fs-2;
+    }
+  }
+
+  .search-result-icon {
+    width: $sp-4;
+    height: $sp-4;
+    margin-right: $sp-2;
+    color: $link-color;
+    flex-shrink: 0;
+  }
+
+  .search-result-doc-title {
+    overflow: auto;
+  }
+}
+
+.search-result-section {
+  margin-left: #{$sp-4 + $sp-2};
+  word-wrap: break-word;
+}
+
 .search-result-rel-url {
   display: block;
+  margin-left: #{$sp-4 + $sp-2};
   overflow: hidden;
   color: $search-result-preview-color;
   text-overflow: ellipsis;
@@ -144,12 +195,14 @@
   @include fs-1;
 }
 
-.search-result-preview {
+.search-result-previews {
   display: block;
   padding-top: $sp-2;
   padding-bottom: $sp-2;
   padding-left: $sp-4;
+  margin-left: $sp-2;
   color: $search-result-preview-color;
+  word-wrap: break-word;
   border-left: $border;
   border-left-color: $border-color;
   @include fs-2;
@@ -157,11 +210,114 @@
   @include mq(sm) {
     display: inline-block;
     width: 60%;
+    padding-left: $sp-2;
+    margin-left: 0;
     vertical-align: top;
   }
 }
 
+.search-result-preview + .search-result-preview {
+  margin-top: $sp-1;
+}
+
 .search-result-highlight {
   font-weight: bold;
-  color: $link-color;
+}
+
+.search-no-result {
+  padding-top: $sp-2;
+  padding-right: $sp-3;
+  padding-bottom: $sp-2;
+  padding-left: $sp-3;
+  @include fs-3;
+}
+
+.search-button {
+  position: fixed;
+  right: $sp-4;
+  bottom: $sp-4;
+  display: flex;
+  width: $sp-9;
+  height: $sp-9;
+  background-color: $search-background-color;
+  border: 1px solid rgba($link-color, 0.3);
+  border-radius: #{$sp-9 / 2};
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+  align-items: center;
+  justify-content: center;
+}
+
+.search-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 0;
+  height: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  transition: opacity ease $transition-duration, width 0s $transition-duration,
+    height 0s $transition-duration;
+}
+
+.search-active {
+  .search {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+  }
+
+  .search-input-wrap {
+    height: $sp-10;
+    border-radius: 0;
+
+    @include mq(md) {
+      width: $search-results-width;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+    }
+  }
+
+  .search-input {
+    background-color: $search-background-color;
+
+    @include mq(md) {
+      padding-left: #{$sp-4 * 1.25 + $sp-5};
+    }
+  }
+
+  .search-label {
+    @include mq(md) {
+      padding-left: #{$sp-4 * 1.25};
+    }
+  }
+
+  .search-results {
+    display: block;
+  }
+
+  .search-overlay {
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+    transition: opacity ease $transition-duration, width 0s, height 0s;
+  }
+
+  @include mq(md) {
+    .main {
+      position: fixed;
+      right: 0;
+      left: 0;
+    }
+  }
+
+  .main-header {
+    padding-top: $sp-10;
+
+    @include mq(md) {
+      padding-top: 0;
+    }
+  }
 }

data/_sass/support/_functions.scss

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

data/_sass/support/_variables.scss

@@ -2,12 +2,13 @@
 // Typography
 //
 
-$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif !default;
+$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue",
+  helvetica, roboto, noto, "segoe ui", arial, sans-serif !default;
 $mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
-$root-font-size: 16px !default;         // Base font-size for rems
+$root-font-size: 16px !default; // Base font-size for rems
 $body-line-height: 1.4 !default;
-$content-line-height: 1.5 !default;
-$body-heading-line-height: 1.15 !default !default;
+$content-line-height: 1.6 !default;
+$body-heading-line-height: 1.25 !default;
 
 //
 // Colors
@@ -56,6 +57,7 @@ $sidebar-color: $grey-lt-000 !default;
 $search-background-color: $white !default;
 $table-background-color: $white !default;
 $code-background-color: $grey-lt-000 !default;
+$feedback-color: darken($sidebar-color, 3%) !default;
 
 $body-text-color: $grey-dk-100 !default;
 $body-heading-color: $grey-dk-300 !default;
@@ -82,7 +84,7 @@ $spacers: (
   sp-7: $spacing-unit * 2.5,
   sp-8: $spacing-unit * 3,
   sp-9: $spacing-unit * 3.5,
-  sp-10: $spacing-unit * 4
+  sp-10: $spacing-unit * 4,
 ) !default;
 
 $sp-1: map-get($spacers, sp-1) !default; // 0.25 rem == 4px
@@ -93,8 +95,8 @@ $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; // 4    rem == 48px
-$sp-10: map-get($spacers, sp-10) !default; // 4.5  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
@@ -112,9 +114,13 @@ $gutter-spacing: $sp-6 !default;
 $gutter-spacing-sm: $sp-4 !default;
 $nav-width: 264px !default;
 $nav-width-md: 248px !default;
+$nav-list-item-height: $sp-6 !default;
+$nav-list-item-height-sm: $sp-8 !default;
+$nav-list-expander-right: true;
 $content-width: 800px !default;
 $header-height: 60px !default;
-$search-results-width: 500px !default;
+$search-results-width: $content-width - $nav-width !default;
+$transition-duration: 400ms;
 
 //
 // Media queries in pixels
@@ -125,5 +131,5 @@ $media-queries: (
   sm: 500px,
   md: $content-width,
   lg: $content-width + $nav-width,
-  xl: 1400px
+  xl: 1400px,
 ) !default;