mirror of
https://github.com/thangisme/notes.git
synced 2024-12-22 02:16:29 -05:00
🎨 Prettier
This commit is contained in:
pmarsceill
parent
9cf4451ea1
commit
c818624363
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
274
_sass/code.scss
274
_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)
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
$body-background-color: $grey-dk-300;
|
||||
$sidebar-color: $grey-dk-300;
|
||||
$border-color: $grey-dk-200;
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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.";
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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)
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user