just-the-docs 0.8.2 → 0.10.0

data/_sass/layout.scss

@@ -19,32 +19,57 @@
     width: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
     min-width: $nav-width;
   }
+
+  & + .main {
+    @include mq(md) {
+      margin-left: $nav-width-md;
+    }
+
+    @include mq(lg) {
+      // stylelint-disable function-name-case
+      // disable for Max(), we want to use the CSS max() function
+      margin-left: Max(
+        #{$nav-width},
+        calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width})
+      );
+      // stylelint-enable function-name-case
+    }
+
+    .main-header {
+      display: none;
+      background-color: $sidebar-color;
+
+      @include mq(md) {
+        display: flex;
+        background-color: $body-background-color;
+      }
+
+      &.nav-open {
+        display: block;
+
+        @include mq(md) {
+          display: flex;
+        }
+      }
+    }
+  }
 }
 
 .main {
+  margin: auto;
+
   @include mq(md) {
     position: relative;
     max-width: $content-width;
-    margin-left: $nav-width-md;
-  }
-
-  @include mq(lg) {
-    // stylelint-disable function-name-case
-    // disable for Max(), we want to use the CSS max() function
-    margin-left: Max(
-      #{$nav-width},
-      calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width})
-    );
-    // stylelint-enable function-name-case
   }
 }
 
 .main-content-wrap {
-  @include container;
-
   padding-top: $gutter-spacing-sm;
   padding-bottom: $gutter-spacing-sm;
 
+  @include container;
+
   @include mq(md) {
     padding-top: $gutter-spacing;
     padding-bottom: $gutter-spacing;
@@ -53,23 +78,12 @@
 
 .main-header {
   z-index: 0;
-  display: none;
-  background-color: $sidebar-color;
+  border-bottom: $border $border-color;
 
   @include mq(md) {
     display: flex;
     justify-content: space-between;
     height: $header-height;
-    background-color: $body-background-color;
-    border-bottom: $border $border-color;
-  }
-
-  &.nav-open {
-    display: block;
-
-    @include mq(md) {
-      display: flex;
-    }
   }
 }
 
@@ -112,8 +126,6 @@
 }
 
 .site-title {
-  @include container;
-
   flex-grow: 1;
   display: flex;
   height: 100%;
@@ -121,6 +133,9 @@
   padding-top: $sp-3;
   padding-bottom: $sp-3;
   color: $body-heading-color;
+
+  @include container;
+
   @include fs-6;
 
   @include mq(md) {
@@ -186,14 +201,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;
   color: $grey-dk-000;
+
+  @include container;
+
   @include fs-2;
 
   @include mq(md) {

data/_sass/navigation.scss

@@ -8,11 +8,11 @@
   list-style: none;
 
   .nav-list-item {
-    @include fs-4;
-
     position: relative;
     margin: 0;
 
+    @include fs-4;
+
     @include mq(md) {
       @include fs-3;
     }

data/_sass/support/mixins/_typography.scss

@@ -1,5 +1,7 @@
 @mixin fs-1 {
-  font-size: $font-size-1 !important;
+  & {
+    font-size: $font-size-1 !important;
+  }
 
   @include mq(sm) {
     font-size: $font-size-1-sm !important;
@@ -7,7 +9,9 @@
 }
 
 @mixin fs-2 {
-  font-size: $font-size-2 !important;
+  & {
+    font-size: $font-size-2 !important;
+  }
 
   @include mq(sm) {
     font-size: $font-size-3 !important;
@@ -15,7 +19,9 @@
 }
 
 @mixin fs-3 {
-  font-size: $font-size-3 !important;
+  & {
+    font-size: $font-size-3 !important;
+  }
 
   @include mq(sm) {
     font-size: $font-size-4 !important;
@@ -23,7 +29,9 @@
 }
 
 @mixin fs-4 {
-  font-size: $font-size-4 !important;
+  & {
+    font-size: $font-size-4 !important;
+  }
 
   @include mq(sm) {
     font-size: $font-size-5 !important;
@@ -31,7 +39,9 @@
 }
 
 @mixin fs-5 {
-  font-size: $font-size-5 !important;
+  & {
+    font-size: $font-size-5 !important;
+  }
 
   @include mq(sm) {
     font-size: $font-size-6 !important;
@@ -39,7 +49,9 @@
 }
 
 @mixin fs-6 {
-  font-size: $font-size-6 !important;
+  & {
+    font-size: $font-size-6 !important;
+  }
 
   @include mq(sm) {
     font-size: $font-size-7 !important;
@@ -48,8 +60,10 @@
 }
 
 @mixin fs-7 {
-  font-size: $font-size-7 !important;
-  line-height: $body-heading-line-height;
+  & {
+    font-size: $font-size-7 !important;
+    line-height: $body-heading-line-height;
+  }
 
   @include mq(sm) {
     font-size: $font-size-8 !important;
@@ -57,8 +71,10 @@
 }
 
 @mixin fs-8 {
-  font-size: $font-size-8 !important;
-  line-height: $body-heading-line-height;
+  & {
+    font-size: $font-size-8 !important;
+    line-height: $body-heading-line-height;
+  }
 
   @include mq(sm) {
     font-size: $font-size-9 !important;
@@ -66,8 +82,10 @@
 }
 
 @mixin fs-9 {
-  font-size: $font-size-9 !important;
-  line-height: $body-heading-line-height;
+  & {
+    font-size: $font-size-9 !important;
+    line-height: $body-heading-line-height;
+  }
 
   @include mq(sm) {
     font-size: $font-size-10 !important;
@@ -75,8 +93,10 @@
 }
 
 @mixin fs-10 {
-  font-size: $font-size-10 !important;
-  line-height: $body-heading-line-height;
+  & {
+    font-size: $font-size-10 !important;
+    line-height: $body-heading-line-height;
+  }
 
   @include mq(sm) {
     font-size: $font-size-10-sm !important;

data/_sass/tables.scss

@@ -21,14 +21,14 @@ table {
 
 th,
 td {
-  @include fs-3;
-
   min-width: 7.5rem;
   padding: $sp-2 $sp-3;
   background-color: $table-background-color;
   border-bottom: $border rgba($border-color, 0.5);
   border-left: $border $border-color;
 
+  @include fs-3;
+
   &:first-of-type {
     border-left: 0;
   }

data/_sass/typography.scss

@@ -3,9 +3,9 @@
 
 h1,
 .text-alpha {
-  @include fs-8;
-
   font-weight: 300;
+
+  @include fs-8;
 }
 
 h2,
@@ -21,11 +21,11 @@ h3,
 
 h4,
 .text-delta {
-  @include fs-2;
-
   font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.1em;
+
+  @include fs-2;
 }
 
 h4 code {

data/_sass/vendor/OneDarkJekyll/syntax.scss

@@ -5,198 +5,261 @@ pre.highlight {
   background: #31343f;
   color: #dee2f7;
 }
+
 .highlight pre {
   background: #31343f;
 }
+
 .highlight .hll {
   background: #31343f;
 }
+
 .highlight .c {
   color: #63677e;
   font-style: italic;
 }
+
 .highlight .err {
   color: #960050;
   background-color: #1e0010;
 }
+
 .highlight .k {
   color: #e19ef5;
 }
+
 .highlight .l {
   color: #a3eea0;
 }
+
 .highlight .n {
   color: #dee2f7;
 }
+
 .highlight .o {
   color: #dee2f7;
 }
+
 .highlight .p {
   color: #dee2f7;
 }
+
 .highlight .cm {
   color: #63677e;
   font-style: italic;
 }
+
 .highlight .cp {
   color: #63677e;
   font-style: italic;
 }
+
 .highlight .c1 {
   color: #63677e;
   font-style: italic;
 }
+
 .highlight .cs {
   color: #63677e;
   font-style: italic;
 }
+
 .highlight .ge {
   font-style: italic;
 }
+
 .highlight .gs {
   font-weight: 700;
 }
+
 .highlight .kc {
   color: #e19ef5;
 }
+
 .highlight .kd {
   color: #e19ef5;
 }
+
 .highlight .kn {
   color: #e19ef5;
 }
+
 .highlight .kp {
   color: #e19ef5;
 }
+
 .highlight .kr {
   color: #e19ef5;
 }
+
 .highlight .kt {
   color: #e19ef5;
 }
+
 .highlight .ld {
   color: #a3eea0;
 }
+
 .highlight .m {
   color: #eddc96;
 }
+
 .highlight .s {
   color: #a3eea0;
 }
+
 .highlight .na {
   color: #eddc96;
 }
+
 .highlight .nb {
   color: #fdce68;
 }
+
 .highlight .nc {
   color: #fdce68;
 }
+
 .highlight .no {
   color: #fdce68;
 }
+
 .highlight .nd {
   color: #fdce68;
 }
+
 .highlight .ni {
   color: #fdce68;
 }
+
 .highlight .ne {
   color: #fdce68;
 }
+
 .highlight .nf {
   color: #dee2f7;
 }
+
 .highlight .nl {
   color: #fdce68;
 }
+
 .highlight .nn {
   color: #dee2f7;
 }
+
 .highlight .nx {
   color: #dee2f7;
 }
+
 .highlight .py {
   color: #fdce68;
 }
+
 .highlight .nt {
   color: #f9867b;
 }
+
 .highlight .nv {
   color: #fdce68;
 }
+
 .highlight .ow {
   font-weight: 700;
 }
+
 .highlight .w {
   color: #f8f8f2;
 }
+
 .highlight .mf {
   color: #eddc96;
 }
+
 .highlight .mh {
   color: #eddc96;
 }
+
 .highlight .mi {
   color: #eddc96;
 }
+
 .highlight .mo {
   color: #eddc96;
 }
+
 .highlight .sb {
   color: #a3eea0;
 }
+
 .highlight .sc {
   color: #a3eea0;
 }
+
 .highlight .sd {
   color: #a3eea0;
 }
+
 .highlight .s2 {
   color: #a3eea0;
 }
+
 .highlight .se {
   color: #a3eea0;
 }
+
 .highlight .sh {
   color: #a3eea0;
 }
+
 .highlight .si {
   color: #a3eea0;
 }
+
 .highlight .sx {
   color: #a3eea0;
 }
+
 .highlight .sr {
   color: #7be2f9;
 }
+
 .highlight .s1 {
   color: #a3eea0;
 }
+
 .highlight .ss {
   color: #7be2f9;
 }
+
 .highlight .bp {
   color: #fdce68;
 }
+
 .highlight .vc {
   color: #fdce68;
 }
+
 .highlight .vg {
   color: #fdce68;
 }
+
 .highlight .vi {
   color: #f9867b;
 }
+
 .highlight .il {
   color: #eddc96;
 }
+
 .highlight .gu {
   color: #75715e;
 }
+
 .highlight .gd {
   color: #f92672;
 }
+
 .highlight .gi {
   color: #a6e22e;
 }