just-the-docs 0.2.4 → 0.2.9

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,11 +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;
-$body-heading-line-height: 1.15 !default !default;
+$content-line-height: 1.6 !default;
+$body-heading-line-height: 1.25 !default;
 
 //
 // Colors
@@ -52,27 +54,18 @@ $red-300: #dd2e2e !default;
 
 $body-background-color: $white !default;
 $sidebar-color: $grey-lt-000 !default;
+$search-background-color: $white !default;
+$table-background-color: $white !default;
 $code-background-color: $grey-lt-000 !default;
 
 $body-text-color: $grey-dk-100 !default;
 $body-heading-color: $grey-dk-300 !default;
+$search-result-preview-color: $grey-dk-000 !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
-) !default;
-
 //
 // Spacing
 //
@@ -90,7 +83,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
@@ -118,13 +111,20 @@ $border-color: $grey-lt-100 !default;
 
 $gutter-spacing: $sp-6 !default;
 $gutter-spacing-sm: $sp-4 !default;
-$nav-width: 232px !default;
+$nav-width: 264px !default;
+$nav-width-md: 248px !default;
 $content-width: 800px !default;
+$header-height: 60px !default;
+$search-results-width: 500px !default;
+
+//
+// Media queries in pixels
+//
 
 $media-queries: (
   xs: 320px,
   sm: 500px,
-  md: 740px,
-  lg: 800px,
-  xl: 1316px
+  md: $content-width,
+  lg: $content-width + $nav-width,
+  xl: 1400px,
 ) !default;

data/_sass/support/mixins/_layout.scss

@@ -15,9 +15,7 @@
     @media (min-width: rem($value)) {
       @content;
     }
-  }
-
-  @else {
+  } @else {
     @warn "No value could be retrieved from `#{$media-query}`. "
       + "Please make sure it is defined in `$media-queries` map.";
   }

data/_sass/support/mixins/_typography.scss

@@ -25,7 +25,7 @@
 }
 
 @mixin fs-4 {
-  font-size: 14px !important;
+  font-size: 15px !important;
 
   @include mq(sm) {
     font-size: 16px !important;
@@ -45,11 +45,13 @@
 
   @include mq(sm) {
     font-size: 24px !important;
+    line-height: $body-heading-line-height;
   }
 }
 
 @mixin fs-7 {
   font-size: 24px !important;
+  line-height: $body-heading-line-height;
 
   @include mq(sm) {
     font-size: 32px !important;
@@ -58,6 +60,7 @@
 
 @mixin fs-8 {
   font-size: 32px !important;
+  line-height: $body-heading-line-height;
 
   @include mq(sm) {
     font-size: 36px !important;
@@ -66,6 +69,7 @@
 
 @mixin fs-9 {
   font-size: 36px !important;
+  line-height: $body-heading-line-height;
 
   @include mq(sm) {
     font-size: 42px !important;
@@ -74,6 +78,7 @@
 
 @mixin fs-10 {
   font-size: 42px !important;
+  line-height: $body-heading-line-height;
 
   @include mq(sm) {
     font-size: 48px !important;

data/_sass/tables.scss

@@ -3,18 +3,20 @@
 //
 // stylelint-disable max-nesting-depth, selector-no-type, selector-max-type
 
-table {
+.table-wrapper {
   display: block;
   width: 100%;
   max-width: 100%;
   margin-bottom: $sp-5;
   overflow-x: auto;
-  border-collapse: separate;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
+  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(sm) {
-    display: table;
-  }
+table {
+  display: table;
+  min-width: 100%;
+  border-collapse: separate;
 }
 
 th,
@@ -25,7 +27,7 @@ td {
   padding-right: $sp-3;
   padding-bottom: $sp-2;
   padding-left: $sp-3;
-  background-color: lighten($body-background-color, 2%);
+  background-color: $table-background-color;
   border-bottom: $border rgba($border-color, 0.5);
   border-left: $border $border-color;
 
@@ -34,38 +36,16 @@ td {
   }
 }
 
-thead,
-tbody:first-child {
-  tr {
-    &:first-of-type {
-      th,
-      td {
-        &:first-of-type {
-          border-top-left-radius: $border-radius;
-        }
-
-        &:last-of-type {
-          border-top-right-radius: $border-radius;
-        }
-      }
-    }
-  }
-}
-
 tbody {
   tr {
     &:last-of-type {
       th,
       td {
         border-bottom: 0;
+      }
 
-        &:first-of-type {
-          border-bottom-left-radius: $border-radius;
-        }
-
-        &:last-of-type {
-          border-bottom-right-radius: $border-radius;
-        }
+      td {
+        padding-bottom: $sp-3;
       }
     }
   }
@@ -73,6 +53,6 @@ tbody {
 
 thead {
   th {
-    border-bottom: 1px solid $border-color;
+    border-bottom: $border $border-color;
   }
 }

data/_sass/typography.scss

@@ -1,7 +1,7 @@
 //
 // Typography
 //
-// stylelint-disable primer/selector-no-utility, selector-no-type, selector-max-type
+// stylelint-disable primer/selector-no-utility, primer/no-override, selector-no-type, selector-max-type
 
 h1,
 .text-alpha {
@@ -22,7 +22,7 @@ h3,
 h4,
 .text-delta {
   @include fs-2;
-  font-weight: 300;
+  font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }
@@ -39,12 +39,6 @@ h6,
   color: $grey-dk-200;
 }
 
-li {
-  .highlight {
-    margin-top: $sp-2;
-  }
-}
-
 .text-small {
   @include fs-2;
 }
@@ -53,6 +47,14 @@ li {
   font-family: $mono-font-family !important;
 }
 
+.text-left {
+  text-align: left !important;
+}
+
 .text-center {
   text-align: center !important;
 }
+
+.text-right {
+  text-align: right !important;
+}

data/_sass/utilities/_layout.scss

@@ -1,15 +1,25 @@
-// stylelint-disable primer/selector-no-utility
+// stylelint-disable primer/selector-no-utility, primer/no-override
 //
 // Utility classes for layout
 //
 
 // Display
 
-.d-block { display: block !important; }
-.d-flex { display: flex !important; }
-.d-inline { display: inline !important; }
-.d-inline-block { display: inline-block !important; }
-.d-none { display: none !important; }
+.d-block {
+  display: block !important;
+}
+.d-flex {
+  display: flex !important;
+}
+.d-inline {
+  display: inline !important;
+}
+.d-inline-block {
+  display: inline-block !important;
+}
+.d-none {
+  display: none !important;
+}
 
 @each $media-query in map-keys($media-queries) {
   @for $i from 1 through length($spacers) {
@@ -18,21 +28,68 @@
       $scale: #{$i - 1};
 
       // .d-sm-block, .d-md-none, .d-lg-inline
-      .d-#{$media-query}-block { display: block !important; }
-      .d-#{$media-query}-flex { display: flex !important; }
-      .d-#{$media-query}-inline { display: inline !important; }
-      .d-#{$media-query}-inline-block { display: inline-block !important; }
-      .d-#{$media-query}-none { display: none !important; }
-
+      .d-#{$media-query}-block {
+        display: block !important;
+      }
+      .d-#{$media-query}-flex {
+        display: flex !important;
+      }
+      .d-#{$media-query}-inline {
+        display: inline !important;
+      }
+      .d-#{$media-query}-inline-block {
+        display: inline-block !important;
+      }
+      .d-#{$media-query}-none {
+        display: none !important;
+      }
     }
   }
 }
 
+// Horizontal alignment
+
+.float-left {
+  float: left !important;
+}
+
+.float-right {
+  float: right !important;
+}
+
+.flex-justify-start {
+  justify-content: flex-start !important;
+}
+
+.flex-justify-end {
+  justify-content: flex-end !important;
+}
+
+.flex-justify-between {
+  justify-content: space-between !important;
+}
+
+.flex-justify-around {
+  justify-content: space-around !important;
+}
+
 // Vertical alignment
 
-.v-align-baseline { vertical-align: baseline !important; }
-.v-align-bottom { vertical-align: bottom !important; }
-.v-align-middle { vertical-align: middle !important; }
-.v-align-text-bottom { vertical-align: text-bottom !important; }
-.v-align-text-top { vertical-align: text-top !important; }
-.v-align-top { vertical-align: top !important; }
+.v-align-baseline {
+  vertical-align: baseline !important;
+}
+.v-align-bottom {
+  vertical-align: bottom !important;
+}
+.v-align-middle {
+  vertical-align: middle !important;
+}
+.v-align-text-bottom {
+  vertical-align: text-bottom !important;
+}
+.v-align-text-top {
+  vertical-align: text-top !important;
+}
+.v-align-top {
+  vertical-align: top !important;
+}

data/_sass/utilities/_lists.scss

@@ -2,10 +2,16 @@
 // Utility classes for lists
 //
 
-// stylelint-disable primer/selector-no-utility
+// stylelint-disable primer/selector-no-utility, primer/no-override, selector-max-type
 
 .list-style-none {
   padding: 0 !important;
   margin: 0 !important;
   list-style: none !important;
+
+  li {
+    &::before {
+      display: none !important;
+    }
+  }
 }

data/_sass/utilities/_spacing.scss

@@ -3,20 +3,35 @@
 //
 
 // scss-lint:disable SpaceAfterPropertyName
-// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
+// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility, primer/no-override
 
 // Margin spacer utilities
 
+.mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
 @for $i from 1 through length($spacers) {
   $size: #{map-get($spacers, sp-#{$i - 1})};
   $scale: #{$i - 1};
 
   // .m-0, .m-1, .m-2...
-  .m-#{$scale}  { margin: #{$size} !important; }
-  .mt-#{$scale} { margin-top: #{$size} !important; }
-  .mr-#{$scale} { margin-right: #{$size} !important; }
-  .mb-#{$scale} { margin-bottom: #{$size} !important; }
-  .ml-#{$scale} { margin-left: #{$size} !important; }
+  .m-#{$scale} {
+    margin: #{$size} !important;
+  }
+  .mt-#{$scale} {
+    margin-top: #{$size} !important;
+  }
+  .mr-#{$scale} {
+    margin-right: #{$size} !important;
+  }
+  .mb-#{$scale} {
+    margin-bottom: #{$size} !important;
+  }
+  .ml-#{$scale} {
+    margin-left: #{$size} !important;
+  }
 
   .mx-#{$scale} {
     margin-right: #{$size} !important;
@@ -32,11 +47,10 @@
     margin-right: -#{$size} !important;
     margin-left: -#{$size} !important;
   }
-}
-
-.mx-auto {
-  margin-right: auto !important;
-  margin-left: auto !important;
+  .mx-#{$scale}-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
 }
 
 @each $media-query in map-keys($media-queries) {
@@ -46,11 +60,21 @@
       $scale: #{$i - 1};
 
       // .m-sm-0, .m-md-1, .m-lg-2...
-      .m-#{$media-query}-#{$scale}  { margin: #{$size} !important; }
-      .mt-#{$media-query}-#{$scale} { margin-top: #{$size} !important; }
-      .mr-#{$media-query}-#{$scale} { margin-right: #{$size} !important; }
-      .mb-#{$media-query}-#{$scale} { margin-bottom: #{$size} !important; }
-      .ml-#{$media-query}-#{$scale} { margin-left: #{$size} !important; }
+      .m-#{$media-query}-#{$scale} {
+        margin: #{$size} !important;
+      }
+      .mt-#{$media-query}-#{$scale} {
+        margin-top: #{$size} !important;
+      }
+      .mr-#{$media-query}-#{$scale} {
+        margin-right: #{$size} !important;
+      }
+      .mb-#{$media-query}-#{$scale} {
+        margin-bottom: #{$size} !important;
+      }
+      .ml-#{$media-query}-#{$scale} {
+        margin-left: #{$size} !important;
+      }
 
       .mx-#{$media-query}-#{$scale} {
         margin-right: #{$size} !important;
@@ -77,11 +101,21 @@
   $scale: #{$i - 1};
 
   // .p-0, .p-1, .p-2...
-  .p-#{$scale}  { padding: #{$size} !important; }
-  .pt-#{$scale} { padding-top: #{$size} !important; }
-  .pr-#{$scale} { padding-right: #{$size} !important; }
-  .pb-#{$scale} { padding-bottom: #{$size} !important; }
-  .pl-#{$scale} { padding-left: #{$size} !important; }
+  .p-#{$scale} {
+    padding: #{$size} !important;
+  }
+  .pt-#{$scale} {
+    padding-top: #{$size} !important;
+  }
+  .pr-#{$scale} {
+    padding-right: #{$size} !important;
+  }
+  .pb-#{$scale} {
+    padding-bottom: #{$size} !important;
+  }
+  .pl-#{$scale} {
+    padding-left: #{$size} !important;
+  }
 
   .px-#{$scale} {
     padding-right: #{$size} !important;
@@ -101,11 +135,21 @@
       $scale: #{$i - 1};
 
       // .p-sm-0, .p-md-1, .p-lg-2...
-      .p-#{$media-query}-#{$scale}  { padding: #{$size} !important; }
-      .pt-#{$media-query}-#{$scale} { padding-top: #{$size} !important; }
-      .pr-#{$media-query}-#{$scale} { padding-right: #{$size} !important; }
-      .pb-#{$media-query}-#{$scale} { padding-bottom: #{$size} !important; }
-      .pl-#{$media-query}-#{$scale} { padding-left: #{$size} !important; }
+      .p-#{$media-query}-#{$scale} {
+        padding: #{$size} !important;
+      }
+      .pt-#{$media-query}-#{$scale} {
+        padding-top: #{$size} !important;
+      }
+      .pr-#{$media-query}-#{$scale} {
+        padding-right: #{$size} !important;
+      }
+      .pb-#{$media-query}-#{$scale} {
+        padding-bottom: #{$size} !important;
+      }
+      .pl-#{$media-query}-#{$scale} {
+        padding-left: #{$size} !important;
+      }
 
       .px-#{$media-query}-#{$scale} {
         padding-right: #{$size} !important;