From f3f3179644a36ed112ffe8d45510fbf18eb2ef3a Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Fri, 24 Apr 2020 10:57:20 -0400 Subject: [PATCH 1/5] Update ci.yml --- .github/workflows/ci.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 9f5d68d..8ec7f6f 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -30,8 +30,8 @@ jobs: --volume="${{ github.workspace }}:/srv/jekyll" \ jekyll/builder:3.8.5 /bin/bash -c "gem install bundler && chmod -R 777 /srv/jekyll && jekyll build && bundle exec just-the-docs rake search:init" - css: - name: Build, Test, and Format + assets: + name: Format and test CSS and JS runs-on: ubuntu-latest steps: @@ -49,7 +49,6 @@ jobs: id: extract_branch - run: npm install - - run: npm test - run: npm run format - name: Add changed files run: | @@ -69,3 +68,4 @@ jobs: echo ${{ steps.is_dirty.outputs.status }} git commit -m "🎨 Prettier" git push --force --set-upstream "https://${GITHUB_ACTOR}:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git" ${{ steps.extract_branch.outputs.branch }} + - run: npm test From ec64bc1dce8dcee471062988f8a908aa55e375dd Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Fri, 24 Apr 2020 11:25:28 -0400 Subject: [PATCH 2/5] Update ci.yml --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 8ec7f6f..43fa552 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -45,7 +45,7 @@ jobs: node-version: '12.x' - name: Extract branch name shell: bash - run: echo "##[set-output name=branch;]$(echo ${GITHUB_REF#refs/heads/})" + run: echo "##[set-output name=branch;]$(echo ${GITHUB_HEAD_REF#refs/heads/})" id: extract_branch - run: npm install From cf748e7ef51fa3bbd0cbfad2322da83dffc5ac25 Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Fri, 24 Apr 2020 11:39:50 -0400 Subject: [PATCH 3/5] Update ci.yml --- .github/workflows/ci.yml | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 43fa552..655601f 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -55,8 +55,9 @@ jobs: echo "https://$GITHUB_ACTOR:$GITHUB_TOKEN@github.com/$GITHUB_REPOSITORY.git" git config --global user.email $GITHUB_ACTOR@users.noreply.github.com git config --global user.name $GITHUB_ACTOR - echo "branch is ${{ steps.extract_branch.outputs.branch }}" - git checkout ${{ steps.extract_branch.outputs.branch }} + # echo "branch is ${{ steps.extract_branch.outputs.branch }}" + # git checkout ${{ steps.extract_branch.outputs.branch }} + git status git add . - name: Are there any updates? shell: bash @@ -67,5 +68,6 @@ jobs: run: | echo ${{ steps.is_dirty.outputs.status }} git commit -m "🎨 Prettier" - git push --force --set-upstream "https://${GITHUB_ACTOR}:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git" ${{ steps.extract_branch.outputs.branch }} + git push --force -U origin HEAD + # git push --force --set-upstream "https://${GITHUB_ACTOR}:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git" ${{ steps.extract_branch.outputs.branch }} - run: npm test From 4197c26a3619318a0e2e7cde1b314678d121efd9 Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Fri, 24 Apr 2020 11:44:00 -0400 Subject: [PATCH 4/5] Update ci.yml --- .github/workflows/ci.yml | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 655601f..926b7f5 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -55,8 +55,8 @@ jobs: echo "https://$GITHUB_ACTOR:$GITHUB_TOKEN@github.com/$GITHUB_REPOSITORY.git" git config --global user.email $GITHUB_ACTOR@users.noreply.github.com git config --global user.name $GITHUB_ACTOR - # echo "branch is ${{ steps.extract_branch.outputs.branch }}" - # git checkout ${{ steps.extract_branch.outputs.branch }} + echo "extracted branch is ${{ steps.extract_branch.outputs.branch }}" + git checkout -b ${{ steps.extract_branch.outputs.branch }} git status git add . - name: Are there any updates? @@ -68,6 +68,5 @@ jobs: run: | echo ${{ steps.is_dirty.outputs.status }} git commit -m "🎨 Prettier" - git push --force -U origin HEAD - # git push --force --set-upstream "https://${GITHUB_ACTOR}:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git" ${{ steps.extract_branch.outputs.branch }} + git push --force --set-upstream "https://${GITHUB_ACTOR}:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git" ${{ steps.extract_branch.outputs.branch }} - run: npm test From c81862436316d38aea535163427d17f84e29343a Mon Sep 17 00:00:00 2001 From: pmarsceill Date: Fri, 24 Apr 2020 15:44:37 +0000 Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=8E=A8=20Prettier?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .stylelintrc.json | 7 +- _sass/base.scss | 6 +- _sass/code.scss | 274 ++++++++++++++++++++++-------- _sass/color_schemes/dark.scss | 1 - _sass/layout.scss | 5 +- _sass/support/_functions.scss | 5 +- _sass/support/_variables.scss | 9 +- _sass/support/mixins/_layout.scss | 4 +- _sass/utilities/_layout.scss | 65 +++++-- _sass/utilities/_spacing.scss | 80 ++++++--- assets/js/dark-mode-preview.js | 30 ++-- 11 files changed, 347 insertions(+), 139 deletions(-) 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) } })