just-the-docs 0.2.4 → 0.2.9

data/_sass/custom/custom.scss

@@ -1,120 +0,0 @@
-// //
-// // Typography
-// //
-//
-// $body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
-// $mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace;
-// $root-font-size: 16px;         // Base font-size for rems
-// $body-line-height: 1.4;
-// $body-heading-line-height: 1.15;
-//
-// //
-// // Colors
-// //
-//
-// $white: #fff;
-//
-// $grey-dk-000: #959396;
-// $grey-dk-100: #5c5962;
-// $grey-dk-200: #44434d;
-// $grey-dk-250: #302d36 !default;
-// $grey-dk-300: #27262b;
-//
-// $grey-lt-000: #f5f6fa;
-// $grey-lt-100: #eeebee;
-// $grey-lt-200: #ecebed;
-// $grey-lt-300: #e6e1e8;
-//
-// $purple-000: #7253ed;
-// $purple-100: #5e41d0;
-// $purple-200: #4e26af;
-// $purple-300: #381885;
-//
-// $blue-000: #2c84fa;
-// $blue-100: #2869e6;
-// $blue-200: #264caf;
-// $blue-300: #183385;
-//
-// $green-000: #41d693;
-// $green-100: #11b584;
-// $green-200: #009c7b;
-// $green-300: #026e57;
-//
-// $body-background-color: $white !default;
-// $sidebar-color: $grey-lt-000 !default;
-// $code-background-color: $grey-lt-000 !default;
-
-// $body-text-color: $grey-dk-100 !default;
-// $body-heading-color: $grey-dk-300 !default;
-// $nav-child-link-color: $grey-dk-100 !default;
-// $link-color: $purple-000 !default;
-// $btn-primary-color: $purple-100 !default;
-// $base-button-color: #f7f7f7 !default;
-//
-// //
-// // Media queries in pixels
-// //
-//
-// $media-queries: (
-//   xs: 320px,
-//   sm: 500px,
-//   md: 740px,
-//   lg: 1120px,
-//   xl: 1400px
-// );
-//
-// //
-// // Spacing
-// //
-//
-// $spacing-unit: 1rem; // 1rem == 16px
-//
-// $spacers: (
-//   sp-0: 0,
-//   sp-1: $spacing-unit * 0.25,
-//   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
-// );
-//
-// $sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
-// $sp-2: map-get($spacers, sp-2); // 0.5  rem == 8px
-// $sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px
-// $sp-4: map-get($spacers, sp-4); // 1    rem == 16px
-// $sp-5: map-get($spacers, sp-5); // 1.5  rem == 24px
-// $sp-6: map-get($spacers, sp-6); // 2    rem == 32px
-// $sp-7: map-get($spacers, sp-7); // 2.5  rem == 40px
-// $sp-8: map-get($spacers, sp-8); // 3    rem == 48px
-// $sp-9: map-get($spacers, sp-9); // 4    rem == 48px
-// $sp-10: map-get($spacers, sp-10); // 4.5  rem == 48px
-//
-// //
-// // Borders
-// //
-//
-// $border: 1px solid;
-// $border-radius: 4px;
-// $border-color: $grey-lt-100;
-//
-// //
-// // Grid system
-// //
-//
-// $gutter-spacing: $sp-6;
-// $gutter-spacing-sm: $sp-4;
-// $nav-width: 232px;
-// $content-width: 800px;
-//
-// $media-queries: (
-//   xs: 320px,
-//   sm: 500px,
-//   md: 740px,
-//   lg: 800px,
-//   xl: 1316px
-// );

data/_sass/labels.scss

@@ -6,16 +6,17 @@
 .label-blue {
   display: inline-block;
   padding-top: 0.16em;
-  padding-right: 0.42em;
+  padding-right: 0.56em;
   padding-bottom: 0.16em;
-  padding-left: 0.42em;
-  margin-right: $sp-1;
-  margin-left: $sp-1;
+  padding-left: 0.56em;
+  margin-right: $sp-2;
+  margin-left: $sp-2;
   color: $white;
   text-transform: uppercase;
   vertical-align: middle;
   background-color: $blue-100;
   @include fs-2;
+  border-radius: 12px;
 }
 
 .label-green {

data/_sass/layout.scss

@@ -19,17 +19,13 @@
   z-index: 100;
   display: flex;
   flex-wrap: wrap;
-  padding-top: $gutter-spacing-sm;
-  padding-bottom: $gutter-spacing-sm;
   background-color: $sidebar-color;
 
   @include mq(md) {
     flex-wrap: nowrap;
     position: absolute;
-    width: $nav-width + 16px;
+    width: $nav-width-md;
     height: 100%;
-    padding-top: $gutter-spacing * 2;
-    padding-bottom: 0;
     flex-direction: column;
     border-right: $border $border-color;
     align-items: flex-end;
@@ -48,7 +44,6 @@
     left: 0;
     width: 100%;
     height: 100%;
-    min-height: 600px;
     -webkit-overflow-scrolling: touch;
     overflow-x: hidden;
     overflow-y: scroll;
@@ -56,21 +51,16 @@
 }
 
 .main-content {
-  padding-top: $gutter-spacing-sm;
-  @include container;
-
   @include mq(md) {
     position: relative;
     max-width: $content-width;
-    padding-top: $gutter-spacing;
-    padding-bottom: $gutter-spacing;
-    padding-left: $gutter-spacing * 1.5;
-    margin-left: $nav-width;
+    margin-left: $nav-width-md;
   }
 
   @include mq(lg) {
-    padding-left: $gutter-spacing;
-    margin-left: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
+    margin-left: calc(
+      (100% - #{$nav-width + $content-width}) / 2 + #{$nav-width}
+    );
   }
 }
 
@@ -78,48 +68,119 @@
   outline: none;
 }
 
+.page {
+  @include container;
+  padding-top: $gutter-spacing-sm;
+  padding-bottom: $gutter-spacing-sm;
+
+  @include mq(md) {
+    padding-top: $gutter-spacing;
+    padding-bottom: $gutter-spacing;
+  }
+}
+
 .page-header {
+  @include container;
+  display: none;
+  padding-top: $gutter-spacing-sm;
+  padding-bottom: $gutter-spacing-sm;
   background-color: $sidebar-color;
 
   @include mq(md) {
+    display: flex;
+    justify-content: flex-end;
+    height: $header-height;
     background-color: $body-background-color;
+    border-bottom: $border $border-color;
   }
 
-  .main-content {
-    padding-top: 0;
+  &.nav-open {
+    display: block;
 
     @include mq(md) {
       display: flex;
-      justify-content: flex-end;
-      height: 60px;
-      padding-top: $sp-4;
-      padding-bottom: $sp-4;
-      border-bottom: $border $border-color;
     }
   }
 }
 
 .navigation,
-.site-title,
+.site-header,
 .site-footer {
-
-  @include container;
-
   width: 100%;
 
   @include mq(lg) {
-    width: $nav-width + 32px;
+    width: $nav-width;
   }
 }
 
 .navigation {
+  @include container;
+
   @include mq(md) {
     padding-top: $sp-8;
+    padding-bottom: $gutter-spacing-sm;
     overflow-y: auto;
     flex: 1 1 auto;
   }
 }
 
+.site-header {
+  display: flex;
+  min-height: $header-height;
+  align-items: center;
+
+  @include mq(md) {
+    z-index: 101;
+    height: $header-height;
+    max-height: $header-height;
+    border-bottom: $border $border-color;
+  }
+}
+
+.site-title {
+  @include container;
+  flex-grow: 1;
+  display: flex;
+  height: 100%;
+  align-items: center;
+  padding-top: $sp-3;
+  padding-bottom: $sp-3;
+  color: $body-heading-color;
+  @include fs-6;
+
+  @include mq(md) {
+    padding-top: $sp-2;
+    padding-bottom: $sp-2;
+  }
+}
+
+@if variable-exists(logo) {
+  .site-logo {
+    width: 100%;
+    height: 100%;
+    background-image: url($logo);
+    background-repeat: no-repeat;
+    background-position: left center;
+    background-size: contain;
+  }
+}
+
+.menu-button {
+  appearance: none;
+  display: flex;
+  height: 100%;
+  padding: $gutter-spacing-sm;
+  align-items: center;
+  color: $link-color;
+  text-transform: uppercase;
+  background: transparent;
+  border: 0;
+
+  @include mq(md) {
+    display: none;
+  }
+}
+
 // stylelint-disable selector-max-type
 
 body {
@@ -135,15 +196,15 @@ body {
 // stylelint-enable selector-max-type
 
 .site-footer {
+  @include container;
   position: absolute;
   bottom: 0;
+  left: 0;
   padding-top: $sp-4;
   padding-bottom: $sp-4;
 
   @include mq(md) {
     position: static;
-    align-self: flex-end;
     justify-self: end;
-    background-color: $sidebar-color;
   }
 }

data/_sass/modules.scss

@@ -0,0 +1,19 @@
+//
+// Import external dependencies
+//
+@import "./vendor/normalize.scss/normalize.scss";
+
+//
+// Modules
+//
+@import "./base";
+@import "./layout";
+@import "./content";
+@import "./navigation";
+@import "./typography";
+@import "./labels";
+@import "./buttons";
+@import "./search";
+@import "./tables";
+@import "./code";
+@import "./utilities/utilities";

data/_sass/navigation.scss

@@ -1,33 +1,11 @@
 //
 // Main nav, breadcrumb, etc...
 //
-
-.site-title {
-  display: block;
-  flex: 1 1 auto;
-  color: $body-heading-color;
-  background-color: $sidebar-color;
-
-  @include mq(md) {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 101;
-    height: 60px;
-    padding-top: $sp-4;
-    border-bottom: $border $border-color;
-  }
-}
-
 .navigation-list {
   padding: 0;
-  margin-top: $sp-4;
+  margin-top: 0;
   margin-bottom: 0;
   list-style: none;
-
-  @include mq(md) {
-    margin-top: 0;
-  }
 }
 
 .navigation-list-child-list {
@@ -90,8 +68,7 @@
 
 // Small screen nav
 
-.main-nav,
-.aux-nav {
+.main-nav {
   display: none;
 
   &.nav-open {
@@ -102,13 +79,8 @@
   }
 }
 
-.navigation-list-toggle {
-  position: absolute;
-  right: $sp-4;
-
-  @include mq(md) {
-    display: none !important;
-  }
+.aux-nav {
+  align-self: center;
 }
 
 // Breadcrumb nav

data/_sass/search.scss

@@ -5,60 +5,46 @@
 .search {
   position: relative;
   z-index: 99;
-  display: none;
   flex-grow: 1;
-  padding: $sp-2;
+  height: 100%;
   margin-bottom: $sp-3;
-  background-color: $white;
-  border-radius: 3px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 3px 10px rgba(0, 0, 0, 0.05);
 
   @include mq(md) {
-    display: block;
-    padding-top: $sp-1;
-    padding-right: 0;
-    padding-bottom: 0;
-    padding-left: 0;
     margin-bottom: 0;
-    background-color: transparent;
-    box-shadow: none;
-  }
-
-  &.nav-open {
-    display: block;
-  }
-}
-
-.search-results-wrap {
-  display: none;
-
-  &.active {
-    position: absolute;
-    top: $sp-1;
-    z-index: 100;
-    display: block;
-    width: 300px;
-    margin-top: $gutter-spacing;
-    background: lighten($body-background-color, 1%);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
   }
 }
 
 .search-input-wrap {
   display: flex;
-  background-color: $body-background-color;
+  height: 100%;
+  padding: $sp-2;
+  background-color: $search-background-color;
+  border-radius: $border-radius;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+
+  @include mq(md) {
+    padding-top: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    background-color: $body-background-color;
+    border-radius: 0;
+    box-shadow: none;
+  }
 }
 
 .search-input {
+  align-self: center;
   width: 100%;
   padding-top: $sp-1;
   padding-bottom: $sp-1;
-  background-color: $body-background-color;
+  background-color: $search-background-color;
   border-top: 0;
   border-right: 0;
   border-bottom: 0;
   border-left: 0;
   order: 2;
+  @include fs-4;
 
   &:focus {
     outline: 0;
@@ -69,14 +55,9 @@
     }
   }
 
-  @include fs-5;
-
-  @include mq(sm) {
-    @include fs-3;
-  }
-
   @include mq(md) {
-    @include fs-2;
+    background-color: $body-background-color;
+    @include fs-3;
   }
 }
 
@@ -87,12 +68,34 @@
   order: 1;
 }
 
+.search-results-wrap {
+  position: absolute;
+  z-index: 100;
+  display: none;
+  width: 100%;
+  background: $search-background-color;
+  border-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) {
+    width: $search-results-width;
+  }
+}
+
 .search-results-list {
   padding-left: 0;
   margin-top: $sp-1;
   margin-bottom: $sp-1;
   list-style: none;
-  @include fs-3;
+  @include fs-4;
+
+  @include mq(md) {
+    @include fs-3;
+  }
 }
 
 .search-results-list-item {
@@ -100,15 +103,65 @@
   margin: 0;
 }
 
-.search-results-link {
+.search-result {
   display: block;
   padding-top: $sp-1;
   padding-right: $sp-3;
   padding-bottom: $sp-1;
   padding-left: $sp-3;
 
-  &:hover {
-    color: $body-heading-color;
-    background-color: darken($body-background-color, 2%);
+  &:hover,
+  &.active {
+    background-color: $sidebar-color;
+  }
+
+  @include mq(md) {
+    padding-right: $sp-4;
+    padding-left: $sp-4;
   }
 }
+
+.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;
+    vertical-align: top;
+  }
+}
+
+.search-result-rel-url {
+  display: block;
+  overflow: hidden;
+  color: $search-result-preview-color;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  @include fs-1;
+}
+
+.search-result-preview {
+  display: block;
+  padding-top: $sp-2;
+  padding-bottom: $sp-2;
+  padding-left: $sp-4;
+  color: $search-result-preview-color;
+  border-left: $border;
+  border-left-color: $border-color;
+  @include fs-2;
+
+  @include mq(sm) {
+    display: inline-block;
+    width: 60%;
+    vertical-align: top;
+  }
+}
+
+.search-result-highlight {
+  font-weight: bold;
+  color: $link-color;
+}