diff --git a/.stylelintrc.json b/.stylelintrc.json index ed5f8bc..169dad6 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,13 +1,10 @@ { - "ignoreFiles" : [ + "ignoreFiles": [ "assets/css/just-the-docs.scss", "assets/css/dark-mode-preview.scss", "_sass/vendor/**/*.scss" ], - "extends": [ - "stylelint-prettier/recommended", - "stylelint-config-primer" - ], + "extends": ["stylelint-prettier/recommended", "stylelint-config-primer"], "plugins": ["stylelint-prettier"], "rules": { "prettier/prettier": true diff --git a/_sass/base.scss b/_sass/base.scss index 126f608..839fa0d 100644 --- a/_sass/base.scss +++ b/_sass/base.scss @@ -76,9 +76,11 @@ a:not([class]) { background-size: 1px 1px; &:hover { - background-image: linear-gradient(rgba($link-color, 0.45) 0%, rgba($link-color, 0.45) 100%); + background-image: linear-gradient( + rgba($link-color, 0.45) 0%, + rgba($link-color, 0.45) 100% + ); background-size: 1px 1px; - } } diff --git a/_sass/code.scss b/_sass/code.scss index 31a4842..97ce8f4 100644 --- a/_sass/code.scss +++ b/_sass/code.scss @@ -30,74 +30,212 @@ figure.highlight { border-radius: $border-radius; } -.highlight .c { color: #586e75; } // comment // -.highlight .err { color: #93a1a1; } // error // -.highlight .g { color: #93a1a1; } // generic // -.highlight .k { color: #859900; } // keyword // -.highlight .l { color: #93a1a1; } // literal // -.highlight .n { color: #93a1a1; } // name // -.highlight .o { color: #859900; } // operator // -.highlight .x { color: #cb4b16; } // other // -.highlight .p { color: #93a1a1; } // punctuation // -.highlight .cm { color: #586e75; } // comment.multiline // -.highlight .cp { color: #859900; } // comment.preproc // -.highlight .c1 { color: #586e75; } // comment.single // -.highlight .cs { color: #859900; } // comment.special // -.highlight .gd { color: #2aa198; } // generic.deleted // -.highlight .ge { font-style: italic; color: #93a1a1; } // generic.emph // -.highlight .gr { color: #dc322f; } // generic.error // -.highlight .gh { color: #cb4b16; } // generic.heading // -.highlight .gi { color: #859900; } // generic.inserted // -.highlight .go { color: #93a1a1; } // generic.output // -.highlight .gp { color: #93a1a1; } // generic.prompt // -.highlight .gs { font-weight: bold; color: #93a1a1; } // generic.strong // -.highlight .gu { color: #cb4b16; } // generic.subheading // -.highlight .gt { color: #93a1a1; } // generic.traceback // -.highlight .kc { color: #cb4b16; } // keyword.constant // -.highlight .kd { color: #268bd2; } // keyword.declaration // -.highlight .kn { color: #859900; } // keyword.namespace // -.highlight .kp { color: #859900; } // keyword.pseudo // -.highlight .kr { color: #268bd2; } // keyword.reserved // -.highlight .kt { color: #dc322f; } // keyword.type // -.highlight .ld { color: #93a1a1; } // literal.date // -.highlight .m { color: #2aa198; } // literal.number // -.highlight .s { color: #2aa198; } // literal.string // -.highlight .na { color: #555; } // name.attribute // -.highlight .nb { color: #b58900; } // name.builtin // -.highlight .nc { color: #268bd2; } // name.class // -.highlight .no { color: #cb4b16; } // name.constant // -.highlight .nd { color: #268bd2; } // name.decorator // -.highlight .ni { color: #cb4b16; } // name.entity // -.highlight .ne { color: #cb4b16; } // name.exception // -.highlight .nf { color: #268bd2; } // name.function // -.highlight .nl { color: #555; } // name.label // -.highlight .nn { color: #93a1a1; } // name.namespace // -.highlight .nx { color: #555; } // name.other // -.highlight .py { color: #93a1a1; } // name.property // -.highlight .nt { color: #268bd2; } // name.tag // -.highlight .nv { color: #268bd2; } // name.variable // -.highlight .ow { color: #859900; } // operator.word // -.highlight .w { color: #93a1a1; } // text.whitespace // -.highlight .mf { color: #2aa198; } // literal.number.float // -.highlight .mh { color: #2aa198; } // literal.number.hex // -.highlight .mi { color: #2aa198; } // literal.number.integer // -.highlight .mo { color: #2aa198; } // literal.number.oct // -.highlight .sb { color: #586e75; } // literal.string.backtick // -.highlight .sc { color: #2aa198; } // literal.string.char // -.highlight .sd { color: #93a1a1; } // literal.string.doc // -.highlight .s2 { color: #2aa198; } // literal.string.double // -.highlight .se { color: #cb4b16; } // literal.string.escape // -.highlight .sh { color: #93a1a1; } // literal.string.heredoc // -.highlight .si { color: #2aa198; } // literal.string.interpol // -.highlight .sx { color: #2aa198; } // literal.string.other // -.highlight .sr { color: #dc322f; } // literal.string.regex // -.highlight .s1 { color: #2aa198; } // literal.string.single // -.highlight .ss { color: #2aa198; } // literal.string.symbol // -.highlight .bp { color: #268bd2; } // name.builtin.pseudo // -.highlight .vc { color: #268bd2; } // name.variable.class // -.highlight .vg { color: #268bd2; } // name.variable.global // -.highlight .vi { color: #268bd2; } // name.variable.instance // -.highlight .il { color: #2aa198; } // literal.number.integer.long // +.highlight .c { + color: #586e75; +} // comment // +.highlight .err { + color: #93a1a1; +} // error // +.highlight .g { + color: #93a1a1; +} // generic // +.highlight .k { + color: #859900; +} // keyword // +.highlight .l { + color: #93a1a1; +} // literal // +.highlight .n { + color: #93a1a1; +} // name // +.highlight .o { + color: #859900; +} // operator // +.highlight .x { + color: #cb4b16; +} // other // +.highlight .p { + color: #93a1a1; +} // punctuation // +.highlight .cm { + color: #586e75; +} // comment.multiline // +.highlight .cp { + color: #859900; +} // comment.preproc // +.highlight .c1 { + color: #586e75; +} // comment.single // +.highlight .cs { + color: #859900; +} // comment.special // +.highlight .gd { + color: #2aa198; +} // generic.deleted // +.highlight .ge { + font-style: italic; + color: #93a1a1; +} // generic.emph // +.highlight .gr { + color: #dc322f; +} // generic.error // +.highlight .gh { + color: #cb4b16; +} // generic.heading // +.highlight .gi { + color: #859900; +} // generic.inserted // +.highlight .go { + color: #93a1a1; +} // generic.output // +.highlight .gp { + color: #93a1a1; +} // generic.prompt // +.highlight .gs { + font-weight: bold; + color: #93a1a1; +} // generic.strong // +.highlight .gu { + color: #cb4b16; +} // generic.subheading // +.highlight .gt { + color: #93a1a1; +} // generic.traceback // +.highlight .kc { + color: #cb4b16; +} // keyword.constant // +.highlight .kd { + color: #268bd2; +} // keyword.declaration // +.highlight .kn { + color: #859900; +} // keyword.namespace // +.highlight .kp { + color: #859900; +} // keyword.pseudo // +.highlight .kr { + color: #268bd2; +} // keyword.reserved // +.highlight .kt { + color: #dc322f; +} // keyword.type // +.highlight .ld { + color: #93a1a1; +} // literal.date // +.highlight .m { + color: #2aa198; +} // literal.number // +.highlight .s { + color: #2aa198; +} // literal.string // +.highlight .na { + color: #555; +} // name.attribute // +.highlight .nb { + color: #b58900; +} // name.builtin // +.highlight .nc { + color: #268bd2; +} // name.class // +.highlight .no { + color: #cb4b16; +} // name.constant // +.highlight .nd { + color: #268bd2; +} // name.decorator // +.highlight .ni { + color: #cb4b16; +} // name.entity // +.highlight .ne { + color: #cb4b16; +} // name.exception // +.highlight .nf { + color: #268bd2; +} // name.function // +.highlight .nl { + color: #555; +} // name.label // +.highlight .nn { + color: #93a1a1; +} // name.namespace // +.highlight .nx { + color: #555; +} // name.other // +.highlight .py { + color: #93a1a1; +} // name.property // +.highlight .nt { + color: #268bd2; +} // name.tag // +.highlight .nv { + color: #268bd2; +} // name.variable // +.highlight .ow { + color: #859900; +} // operator.word // +.highlight .w { + color: #93a1a1; +} // text.whitespace // +.highlight .mf { + color: #2aa198; +} // literal.number.float // +.highlight .mh { + color: #2aa198; +} // literal.number.hex // +.highlight .mi { + color: #2aa198; +} // literal.number.integer // +.highlight .mo { + color: #2aa198; +} // literal.number.oct // +.highlight .sb { + color: #586e75; +} // literal.string.backtick // +.highlight .sc { + color: #2aa198; +} // literal.string.char // +.highlight .sd { + color: #93a1a1; +} // literal.string.doc // +.highlight .s2 { + color: #2aa198; +} // literal.string.double // +.highlight .se { + color: #cb4b16; +} // literal.string.escape // +.highlight .sh { + color: #93a1a1; +} // literal.string.heredoc // +.highlight .si { + color: #2aa198; +} // literal.string.interpol // +.highlight .sx { + color: #2aa198; +} // literal.string.other // +.highlight .sr { + color: #dc322f; +} // literal.string.regex // +.highlight .s1 { + color: #2aa198; +} // literal.string.single // +.highlight .ss { + color: #2aa198; +} // literal.string.symbol // +.highlight .bp { + color: #268bd2; +} // name.builtin.pseudo // +.highlight .vc { + color: #268bd2; +} // name.variable.class // +.highlight .vg { + color: #268bd2; +} // name.variable.global // +.highlight .vi { + color: #268bd2; +} // name.variable.instance // +.highlight .il { + color: #2aa198; +} // literal.number.integer.long // // // Code examples (rendered) diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss index f0e6505..9a0b9ea 100644 --- a/_sass/color_schemes/dark.scss +++ b/_sass/color_schemes/dark.scss @@ -1,4 +1,3 @@ - $body-background-color: $grey-dk-300; $sidebar-color: $grey-dk-300; $border-color: $grey-dk-200; diff --git a/_sass/layout.scss b/_sass/layout.scss index 6644dc3..79169e4 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -58,7 +58,9 @@ } @include mq(lg) { - margin-left: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width}); + margin-left: calc( + (100% - #{$nav-width + $content-width}) / 2 + #{$nav-width} + ); } } @@ -104,7 +106,6 @@ .navigation, .site-header, .site-footer { - width: 100%; @include mq(lg) { diff --git a/_sass/support/_functions.scss b/_sass/support/_functions.scss index e9885f6..6772f4e 100644 --- a/_sass/support/_functions.scss +++ b/_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; } } diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss index 127c0e2..76d8b5d 100644 --- a/_sass/support/_variables.scss +++ b/_sass/support/_variables.scss @@ -2,9 +2,10 @@ // 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; @@ -82,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 @@ -125,5 +126,5 @@ $media-queries: ( sm: 500px, md: $content-width, lg: $content-width + $nav-width, - xl: 1400px + xl: 1400px, ) !default; diff --git a/_sass/support/mixins/_layout.scss b/_sass/support/mixins/_layout.scss index 7e7967e..27ad6c7 100644 --- a/_sass/support/mixins/_layout.scss +++ b/_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."; } diff --git a/_sass/utilities/_layout.scss b/_sass/utilities/_layout.scss index 7f17a4d..3247ea3 100644 --- a/_sass/utilities/_layout.scss +++ b/_sass/utilities/_layout.scss @@ -5,11 +5,21 @@ // 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,42 @@ $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; + } } } } // 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; +} diff --git a/_sass/utilities/_spacing.scss b/_sass/utilities/_spacing.scss index a1d8a95..917dd3c 100644 --- a/_sass/utilities/_spacing.scss +++ b/_sass/utilities/_spacing.scss @@ -12,11 +12,21 @@ $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; @@ -46,11 +56,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 +97,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 +131,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; diff --git a/assets/js/dark-mode-preview.js b/assets/js/dark-mode-preview.js index b9ad81e..bb3169f 100644 --- a/assets/js/dark-mode-preview.js +++ b/assets/js/dark-mode-preview.js @@ -1,22 +1,24 @@ -document.addEventListener("DOMContentLoaded", function(){ - - const toggleDarkMode = document.querySelector('.js-toggle-dark-mode') +document.addEventListener("DOMContentLoaded", function () { + const toggleDarkMode = document.querySelector(".js-toggle-dark-mode") const cssFile = document.querySelector('[rel="stylesheet"]') - const originalCssRef = cssFile.getAttribute('href') - const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css') - const buttonCopy = ['Return to the light side', 'Preview dark color scheme'] - const updateButtonText = function(toggleDarkMode) { - toggleDarkMode.textContent === buttonCopy[0] ? - toggleDarkMode.textContent = buttonCopy[1] : - toggleDarkMode.textContent = buttonCopy[0] + const originalCssRef = cssFile.getAttribute("href") + const darkModeCssRef = originalCssRef.replace( + "just-the-docs.css", + "dark-mode-preview.css" + ) + const buttonCopy = ["Return to the light side", "Preview dark color scheme"] + const updateButtonText = function (toggleDarkMode) { + toggleDarkMode.textContent === buttonCopy[0] + ? (toggleDarkMode.textContent = buttonCopy[1]) + : (toggleDarkMode.textContent = buttonCopy[0]) } - jtd.addEvent(toggleDarkMode, 'click', function(){ - if (cssFile.getAttribute('href') === originalCssRef) { - cssFile.setAttribute('href', darkModeCssRef) + jtd.addEvent(toggleDarkMode, "click", function () { + if (cssFile.getAttribute("href") === originalCssRef) { + cssFile.setAttribute("href", darkModeCssRef) updateButtonText(toggleDarkMode) } else { - cssFile.setAttribute('href', originalCssRef) + cssFile.setAttribute("href", originalCssRef) updateButtonText(toggleDarkMode) } })