}\r
\r
body {\r
- background: _palette(bg);\r
+ background: _palette_light(bg);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background: _palette_dark(bg);\r
+ }\r
\r
// Stops initial animations until page loads.\r
&.is-preload {\r
/* Type */\r
\r
body, input, select, textarea {\r
- color: _palette(fg);\r
+ color: _palette_light(fg);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ color: _palette_dark(fg);\r
+ }\r
font-family: _font(family);\r
font-size: 17pt;\r
font-weight: _font(weight);\r
\r
&:hover {\r
border-bottom-color: transparent;\r
- color: _palette(highlight) !important;\r
+ color: _palette_light(highlight) !important;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ color: _palette_dark(highlight);\r
+ }\r
}\r
\r
&:active {\r
- color: desaturate(darken(_palette(highlight), 15), 5) !important;\r
+ color: desaturate(darken(_palette_light(highlight), 15), 5) !important;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ color: desaturate(darken(_palette_dark(highlight), 15), 5) !important;\r
+ }\r
}\r
}\r
\r
strong, b {\r
- color: _palette(fg-bold);\r
+ color: _palette_light(fg-bold);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ color: _palette_dark(fg-bold);\r
+ }\r
font-weight: _font(weight-bold);\r
}\r
\r
}\r
\r
h1, h2, h3, h4, h5, h6 {\r
- color: _palette(fg-bold);\r
+ color: _palette_light(fg-bold);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ color: _palette_dark(fg-bold);\r
+ }\r
font-weight: _font(weight-bold);\r
line-height: 1.65;\r
margin: 0 0 (_size(element-margin) * 0.5) 0;\r
}\r
\r
blockquote {\r
- border-left: solid 4px _palette(border);\r
+ border-left: solid 4px _palette_light(border);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ border-left: solid 4px _palette_dark(border);\r
+ }\r
font-style: italic;\r
margin: 0 0 _size(element-margin) 0;\r
padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);\r
}\r
\r
code {\r
- background: _palette(border-bg);\r
+ background: _palette_light(border-bg);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background: _palette_dark(border-bg);\r
+ }\r
font-family: _font(family-fixed);\r
font-size: 0.9em;\r
margin: 0 0.25em;\r
\r
hr {\r
border: 0;\r
- border-bottom: solid 1px _palette(border);\r
+ border-bottom: solid 1px _palette_light(border);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ border-bottom: solid 1px _palette_dark(border);\r
+ }\r
margin: _size(element-margin) 0;\r
\r
&.major {\r
/* Box */\r
\r
.box {\r
- border: solid 1px _palette(border);\r
+ border: solid 1px _palette_light(border);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ border-bottom: solid 1px _palette_dark(border);\r
+ }\r
margin-bottom: _size(element-margin);\r
padding: 1.5em;\r
\r
background-color: transparent;\r
border: 0;\r
border-radius: 0;\r
- box-shadow: inset 0 0 0 2px _palette(fg-bold);\r
- color: _palette(fg-bold);\r
+ box-shadow: inset 0 0 0 2px _palette_light(fg-bold);\r
+ color: _palette_light(fg-bold);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ box-shadow: inset 0 0 0 2px _palette_dark(fg-bold);\r
+ color: _palette_dark(fg-bold);\r
+ }\r
cursor: pointer;\r
display: inline-block;\r
font-size: 0.8em;\r
white-space: nowrap;\r
\r
&:hover, &:active {\r
- box-shadow: inset 0 0 0 2px _palette(highlight);\r
- color: _palette(highlight);\r
+ box-shadow: inset 0 0 0 2px _palette_light(highlight);\r
+ color: _palette_light(highlight);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ box-shadow: inset 0 0 0 2px _palette_dark(highlight);\r
+ color: _palette_dark(highlight);\r
+ }\r
}\r
\r
&:active {\r
- background-color: transparentize(_palette(highlight), 0.9);\r
- box-shadow: inset 0 0 0 2px desaturate(darken(_palette(highlight), 15), 5);\r
- color: desaturate(darken(_palette(highlight), 15), 5);\r
+ background-color: transparentize(_palette_light(highlight), 0.9);\r
+ box-shadow: inset 0 0 0 2px desaturate(darken(_palette_light(highlight), 15), 5);\r
+ color: desaturate(darken(_palette_light(highlight), 15), 5);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: transparentize(_palette_dark(highlight), 0.9);\r
+ box-shadow: inset 0 0 0 2px desaturate(darken(_palette_dark(highlight), 15), 5);\r
+ color: desaturate(darken(_palette_dark(highlight), 15), 5);\r
+ }\r
}\r
\r
&.icon {\r
}\r
\r
&:before {\r
- background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette(fg-bold)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_light(fg-bold)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(fg-bold)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');\r
+ }\r
}\r
\r
&:after {\r
- background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette(highlight)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_light(highlight)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(highlight)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');\r
+ }\r
opacity: 0;\r
z-index: 1;\r
}\r
}\r
\r
&.primary {\r
- background-color: _palette(fg-bold);\r
+ background-color: _palette_light(fg-bold);\r
box-shadow: none;\r
- color: _palette(bg);\r
+ color: _palette_light(bg);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(fg-bold);\r
+ color: _palette_dark(bg);\r
+ }\r
\r
&:hover, &:active {\r
- background-color: _palette(highlight);\r
- color: _palette(bg) !important;\r
+ background-color: _palette_light(highlight);\r
+ color: _palette_light(bg) !important;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(highlight);\r
+ color: _palette_dark(bg) !important;\r
+ }\r
}\r
\r
&:active {\r
- background-color: desaturate(darken(_palette(highlight), 15), 5);\r
+ background-color: desaturate(darken(_palette_light(highlight), 15), 5);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: desaturate(darken(_palette_dark(highlight), 15), 5);\r
+ }\r
}\r
}\r
\r
}\r
\r
label {\r
- color: _palette(fg-bold);\r
+ color: _palette_light(fg-bold);\r
display: block;\r
font-size: 0.8em;\r
font-weight: _font(weight-bold);\r
select,\r
textarea {\r
@include vendor('appearance', 'none');\r
- background: _palette(border-bg);\r
+ background: _palette_light(border-bg);\r
border: none;\r
border-radius: 0;\r
color: inherit;\r
}\r
\r
&:focus {\r
- border-color: _palette(highlight);\r
- box-shadow: 0 0 0 2px _palette(highlight);\r
+ border-color: _palette_light(highlight);\r
+ box-shadow: 0 0 0 2px _palette_light(highlight);\r
}\r
}\r
\r
select {\r
- background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");\r
+ background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette_light(border)}' /></svg>");\r
background-size: 1.25rem;\r
background-repeat: no-repeat;\r
background-position: calc(100% - 1rem) center;\r
text-overflow: ellipsis;\r
\r
option {\r
- color: _palette(fg-bold);\r
- background: _palette(bg);\r
+ color: _palette_light(fg-bold);\r
+ background: _palette_light(bg);\r
}\r
\r
&:focus {\r
\r
& + label {\r
@include icon(false, solid);\r
- color: _palette(fg);\r
+ color: _palette_light(fg);\r
cursor: pointer;\r
display: inline-block;\r
font-weight: _font(weight);\r
position: relative;\r
\r
&:before {\r
- background: _palette(border-bg);\r
+ background: _palette_light(border-bg);\r
content: '';\r
display: inline-block;\r
font-size: 0.8em;\r
\r
&:checked + label {\r
&:before {\r
- background: _palette(fg-bold);\r
- border-color: _palette(highlight);\r
+ background: _palette_light(fg-bold);\r
+ border-color: _palette_light(highlight);\r
content: '\f00c';\r
- color: _palette(bg);\r
+ color: _palette_light(bg);\r
}\r
}\r
\r
&:focus + label {\r
&:before {\r
- box-shadow: 0 0 0 2px _palette(highlight);\r
+ box-shadow: 0 0 0 2px _palette_light(highlight);\r
}\r
}\r
}\r
}\r
\r
::-webkit-input-placeholder {\r
- color: _palette(fg-light) !important;\r
+ color: _palette_light(fg-light) !important;\r
opacity: 1.0;\r
}\r
\r
:-moz-placeholder {\r
- color: _palette(fg-light) !important;\r
+ color: _palette_light(fg-light) !important;\r
opacity: 1.0;\r
}\r
\r
::-moz-placeholder {\r
- color: _palette(fg-light) !important;\r
+ color: _palette_light(fg-light) !important;\r
opacity: 1.0;\r
}\r
\r
:-ms-input-placeholder {\r
- color: _palette(fg-light) !important;\r
+ color: _palette_light(fg-light) !important;\r
opacity: 1.0;\r
}
\ No newline at end of file
\r
&.alt {\r
&:before {\r
- background-color: _palette(fg-bold);\r
+ background-color: _palette_light(fg-bold);\r
border-radius: 100%;\r
- color: _palette(bg);\r
+ color: _palette_light(bg);\r
display: inline-block;\r
height: 2em;\r
line-height: 2em;\r
text-align: center;\r
width: 2em;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(fg-bold);\r
+ color: _palette_dark(bg);\r
+ }\r
}\r
}\r
}\r
\r
&:hover {\r
&:before {\r
- background-color: _palette(accent1);\r
+ background-color: _palette_light(accent1);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(accent1);\r
+ }\r
}\r
}\r
\r
&:active {\r
&:before {\r
- background-color: desaturate(darken(_palette(accent1), 15), 5);\r
+ background-color: desaturate(darken(_palette_light(accent1), 15), 5);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: desaturate(darken(_palette_dark(accent1), 15), 5);\r
+ }\r
}\r
}\r
}\r
\r
.circle > img {\r
@include circle(200px, "block");\r
- @include box-shadow(-5px, 5px, 5px, _palette(fg-bold));\r
+ @include box-shadow(-5px, 5px, 5px, _palette_light(fg-bold));\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ @include box-shadow(-5px, 5px, 5px, _palette_dark(fg-bold));\r
+ }\r
}\r
\r
video {\r
padding-left: 0;\r
\r
li {\r
- border-top: solid 1px _palette(border);\r
+ border-top: solid 1px _palette_light(border);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ border-top: solid 1px _palette_dark(border);\r
+ }\r
padding: 0.5em 0;\r
\r
&:first-child {\r
text-align: center;
&.active {
- background-color: _palette(fg-bold);
- color: _palette(bg);
+ background-color: _palette_light(fg-bold);
+ color: _palette_light(bg);
+ @media screen and (prefers-color-scheme: dark) {
+ background-color: _palette_dark(fg-bold);
+ color: _palette_dark(bg);
+ }
&:hover {
- background-color: _palette(highlight);
- color: _palette(bg) !important;
+ background-color: _palette_light(highlight);
+ color: _palette_light(bg) !important;
+ @media screen and (prefers-color-scheme: dark) {
+ background-color: _palette_dark(highlight);
+ color: _palette_dark(bg) !important;
+ }
}
&:active {
- background-color: desaturate(darken(_palette(highlight), 15), 5);
+ background-color: desaturate(darken(_palette_light(highlight), 15), 5);
+ @media screen and (prefers-color-scheme: dark) {
+ background-color: desaturate(darken(_palette_dark(highlight), 15), 5);
+ }
}
}
}
\r
&:after {\r
content: '';\r
- background-color: _palette(fg-bold);\r
+ background-color: _palette_light(fg-bold);\r
display: block;\r
height: 2px;\r
margin: 0.325em 0 0.5em 0;\r
width: 100%;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(fg-bold);\r
+ }\r
}\r
}\r
\r
> section {\r
@include vendor('display', 'flex');\r
@include vendor('flex-direction', 'row');\r
- background-color: desaturate(lighten(_palette(bg-alt), 2), 1);\r
+ background-color: desaturate(lighten(_palette_light(bg-alt), 2), 1);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: desaturate(lighten(_palette_dark(bg-alt), 2), 1);\r
+ }\r
\r
> .image {\r
background-position: center center;\r
}\r
\r
&:before {\r
- background: transparentize(_palette(bg), 0.1);\r
+ background: transparentize(_palette_light(bg), 0.1);\r
content: '';\r
display: block;\r
height: 100%;\r
position: absolute;\r
top: 0;\r
width: 100%;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background: transparentize(_palette_dark(bg), 0.1);\r
+ }\r
}\r
}\r
\r
\r
&:nth-child(2n) {\r
@include vendor('flex-direction', 'row-reverse');\r
- background-color: desaturate(lighten(_palette(bg-alt), 4), 2);\r
+ background-color: desaturate(lighten(_palette_light(bg-alt), 4), 2);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: desaturate(lighten(_palette_dark(bg-alt), 4), 2);\r
+ }\r
\r
> .content {\r
@include vendor('align-items', 'flex-end');\r
\r
tbody {\r
tr {\r
- border: solid 1px _palette(border);\r
+ border: solid 1px _palette_light(border);\r
border-left: 0;\r
border-right: 0;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ border: solid 1px _palette_dark(border);\r
+ }\r
\r
&:nth-child(2n + 1) {\r
- background-color: _palette(border-bg);\r
+ background-color: _palette_light(border-bg);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(border-bg);\r
+ }\r
}\r
}\r
}\r
}\r
\r
th {\r
- color: _palette(fg-bold);\r
+ color: _palette_light(fg-bold);\r
font-size: 0.9em;\r
font-weight: _font(weight-bold);\r
padding: 0 0.75em 0.75em 0.75em;\r
text-align: left;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ color: _palette_dark(fg-bold);\r
+ }\r
}\r
\r
thead {\r
- border-bottom: solid 2px _palette(border);\r
+ border-bottom: solid 2px _palette_light(border);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ border-bottom: solid 2px _palette_dark(border);\r
+ }\r
}\r
\r
tfoot {\r
- border-top: solid 2px _palette(border);\r
+ border-top: solid 2px _palette_light(border);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ border-top: solid 2px _palette_dark(border);\r
+ }\r
}\r
\r
&.alt {\r
tbody {\r
tr {\r
td {\r
- border: solid 1px _palette(border);\r
+ border: solid 1px _palette_light(border);\r
border-left-width: 0;\r
border-top-width: 0;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ border-top: solid 1px _palette_dark(border);\r
+ }\r
\r
&:first-child {\r
border-left-width: 1px;\r
}\r
\r
&:after {\r
- background-color: transparentize(_palette(bg), 0.75);\r
+ background-color: transparentize(_palette_light(bg), 0.75);\r
content: '';\r
display: block;\r
height: 100%;\r
top: 0;\r
width: 100%;\r
z-index: 1;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: transparentize(_palette_dark(bg), 0.75);\r
+ }\r
}\r
\r
&:hover {\r
\r
&:nth-child(6n - 5) {\r
&:before {\r
- background-color: _palette(accent1);\r
+ background-color: _palette_light(accent1);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(accent1);\r
+ }\r
}\r
}\r
\r
&:nth-child(6n - 4) {\r
&:before {\r
- background-color: _palette(accent2);\r
+ background-color: _palette_light(accent2);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(accent2);\r
+ }\r
}\r
}\r
\r
&:nth-child(6n - 3) {\r
&:before {\r
- background-color: _palette(accent3);\r
+ background-color: _palette_light(accent3);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(accent3);\r
+ }\r
}\r
}\r
\r
&:nth-child(6n - 2) {\r
&:before {\r
- background-color: _palette(accent4);\r
+ background-color: _palette_light(accent4);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(accent4);\r
+ }\r
}\r
}\r
\r
&:nth-child(6n - 1) {\r
&:before {\r
- background-color: _palette(accent5);\r
+ background-color: _palette_light(accent5);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(accent5);\r
+ }\r
}\r
}\r
\r
&:nth-child(6n) {\r
&:before {\r
- background-color: _palette(accent6);\r
+ background-color: _palette_light(accent6);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(accent6);\r
+ }\r
}\r
}\r
}\r
@include vendor('transition', 'opacity #{_duration(banner)} ease');\r
@include vendor('transition-delay', '0.75s');\r
@include vendor('pointer-events', 'none');\r
- background-color: _palette(bg);\r
+ background-color: _palette_light(bg);\r
content: '';\r
display: block;\r
height: 100%;\r
top: 0;\r
width: 100%;\r
z-index: 1;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(bg);\r
+ }\r
}\r
\r
h1 {\r
}\r
}\r
\r
- &.style1 { &:after { background-color: _palette(accent1); } }\r
- &.style2 { &:after { background-color: _palette(accent2); } }\r
- &.style3 { &:after { background-color: _palette(accent3); } }\r
- &.style4 { &:after { background-color: _palette(accent4); } }\r
- &.style5 { &:after { background-color: _palette(accent5); } }\r
- &.style6 { &:after { background-color: _palette(accent6); } }\r
+ &.style1 { &:after { background-color: _palette_light(accent1); } }\r
+ &.style2 { &:after { background-color: _palette_light(accent2); } }\r
+ &.style3 { &:after { background-color: _palette_light(accent3); } }\r
+ &.style4 { &:after { background-color: _palette_light(accent4); } }\r
+ &.style5 { &:after { background-color: _palette_light(accent5); } }\r
+ &.style6 { &:after { background-color: _palette_light(accent6); } }\r
+\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ &.style1 { &:after { background-color: _palette_dark(accent1); } }\r
+ &.style2 { &:after { background-color: _palette_dark(accent2); } }\r
+ &.style3 { &:after { background-color: _palette_dark(accent3); } }\r
+ &.style4 { &:after { background-color: _palette_dark(accent4); } }\r
+ &.style5 { &:after { background-color: _palette_dark(accent5); } }\r
+ &.style6 { &:after { background-color: _palette_dark(accent6); } }\r
+ }\r
\r
body.is-preload & {\r
&:after {\r
/* Contact */\r
\r
#contact {\r
- border-bottom: solid 1px _palette(border);\r
+ border-bottom: solid 1px _palette_light(border);\r
overflow-x: hidden;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ border-bottom: solid 1px _palette_dark(border);\r
+ }\r
\r
> .inner {\r
@include vendor('display', 'flex');\r
\r
> :nth-child(2n - 1) {\r
@include padding(4em, 0, (0, 3em, 0, 0));\r
- border-right: solid 1px _palette(border);\r
+ border-right: solid 1px _palette_light(border);\r
width: 60%;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ border-right: solid 1px _palette_dark(border);\r
+ }\r
}\r
\r
> :nth-child(2n) {\r
position: relative;\r
\r
&:before {\r
- border-top: solid 1px _palette(border);\r
+ border-top: solid 1px _palette_light(border);\r
content: '';\r
display: block;\r
margin-left: -3em;\r
position: absolute;\r
top: 0;\r
width: calc(100vw + 3em);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ border-top: solid 1px _palette_dark(border);\r
+ }\r
}\r
}\r
\r
\r
#header {\r
@include vendor('display', 'flex');\r
- background-color: _palette(bg-alt);\r
+ background-color: _palette_light(bg-alt);\r
box-shadow: 0 0 0.25em 0 rgba(0,0,0,0.15);\r
cursor: default;\r
font-weight: _font(weight-bold);\r
top: 0;\r
width: 100%;\r
z-index: _misc(z-index-base);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(bg-alt);\r
+ }\r
\r
.logo {\r
border: 0;\r
'background-color #{_duration(transition)} ease-in-out',\r
'color #{_duration(transition)} ease-in-out'\r
));\r
- background-color: _palette(fg-bold);\r
- color: _palette(bg);\r
+ background-color: _palette_light(fg-bold);\r
+ color: _palette_light(bg);\r
display: inline-block;\r
line-height: 1.65em;\r
margin-right: 0.325em;\r
padding: 0 0.125em 0 (_font(letter-spacing-alt) + 0.125em);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(fg-bold);\r
+ color: _palette_dark(bg);\r
+ }\r
}\r
\r
&:hover {\r
strong {\r
- background-color: _palette(highlight);\r
+ background-color: _palette_light(highlight);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(highlight);\r
+ }\r
}\r
}\r
\r
&:active {\r
strong {\r
- background-color: desaturate(darken(_palette(highlight), 15), 5);\r
+ background-color: desaturate(darken(_palette_light(highlight), 15), 5);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: desaturate(darken(_palette_dark(highlight), 15), 5);\r
+ }\r
}\r
}\r
}\r
padding-right: 3.325em !important;\r
\r
&:before, &:after {\r
- background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette(fg-bold)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_light(fg-bold)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');\r
background-position: center;\r
background-repeat: no-repeat;\r
background-size: 24px 32px;\r
top: 0;\r
vertical-align: middle;\r
width: 24px;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_dark(fg-bold)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');\r
+ }\r
}\r
\r
&:after {\r
@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');\r
- background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette(highlight)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_light(highlight)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');\r
opacity: 0;\r
z-index: 1;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_dark(highlight)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');\r
+ }\r
}\r
\r
&:hover, &:active {\r
box-shadow: none;\r
position: absolute;\r
\r
- &.style1 { .logo { strong { color: _palette(accent1); } } }\r
- &.style2 { .logo { strong { color: _palette(accent2); } } }\r
- &.style3 { .logo { strong { color: _palette(accent3); } } }\r
- &.style4 { .logo { strong { color: _palette(accent4); } } }\r
- &.style5 { .logo { strong { color: _palette(accent5); } } }\r
- &.style6 { .logo { strong { color: _palette(accent6); } } }\r
+ &.style1 { .logo { strong { color: _palette_light(accent1); } } }\r
+ &.style2 { .logo { strong { color: _palette_light(accent2); } } }\r
+ &.style3 { .logo { strong { color: _palette_light(accent3); } } }\r
+ &.style4 { .logo { strong { color: _palette_light(accent4); } } }\r
+ &.style5 { .logo { strong { color: _palette_light(accent5); } } }\r
+ &.style6 { .logo { strong { color: _palette_light(accent6); } } }\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ &.style1 { .logo { strong { color: _palette_dark(accent1); } } }\r
+ &.style2 { .logo { strong { color: _palette_dark(accent2); } } }\r
+ &.style3 { .logo { strong { color: _palette_dark(accent3); } } }\r
+ &.style4 { .logo { strong { color: _palette_dark(accent4); } } }\r
+ &.style5 { .logo { strong { color: _palette_dark(accent5); } } }\r
+ &.style6 { .logo { strong { color: _palette_dark(accent6); } } }\r
+ }\r
}\r
\r
body.is-preload & {\r
/* Main */\r
\r
#main {\r
- background-color: _palette(bg-alt);\r
+ background-color: _palette_light(bg-alt);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(bg-alt);\r
+ }\r
\r
> * {\r
- border-top: solid 1px _palette(border);\r
+ border-top: solid 1px _palette_light(border);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ border-top: solid 1px _palette_dark(border);\r
+ }\r
\r
&:first-child {\r
border-top: 0;\r
\r
&.alt {\r
background-color: transparent;\r
- border-bottom: solid 1px _palette(border);\r
+ border-bottom: solid 1px _palette_light(border);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ border-bottom: solid 1px _palette_dark(border);\r
+ }\r
}\r
}
\ No newline at end of file
@include vendor('display', 'flex');\r
@include vendor('justify-content', 'center');\r
@include vendor('pointer-events', 'none');\r
- background: transparentize(_palette(bg), 0.1);\r
+ background: transparentize(_palette_light(bg), 0.1);\r
box-shadow: none;\r
height: 100%;\r
left: 0;\r
visibility: hidden;\r
width: 100%;\r
z-index: _misc(z-index-base) + 2;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background: transparentize(_palette_dark(bg), 0.1);\r
+ }\r
\r
.inner {\r
@include vendor('transition', (\r
\r
> a:not(.button) {\r
border: 0;\r
- border-top: solid 1px _palette(border);\r
+ border-top: solid 1px _palette_light(border);\r
display: block;\r
font-size: 0.8em;\r
font-weight: _font(weight-bold);\r
line-height: 4em;\r
text-decoration: none;\r
text-transform: uppercase;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ border-top: solid 1px _palette_dark(border);\r
+ }\r
}\r
\r
> .button {\r
}\r
\r
&:before {\r
- background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette(fg-bold)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette_light(fg-bold)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(fg-bold)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');\r
+ }\r
}\r
\r
&:after {\r
- background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette(highlight)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette_light(highlight)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');\r
opacity: 0;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(highlight)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');\r
+ }\r
}\r
\r
&:hover, &:active {\r
\r
body.is-ie {\r
#menu {\r
- background: transparentize(_palette(bg-alt), 0.025);\r
+ background: transparentize(_palette_light(bg-alt), 0.025);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background: transparentize(_palette_dark(bg-alt), 0.025);\r
+ }\r
}\r
}\r
\r
@return val($misc, $keys...);\r
}\r
\r
-/// Gets a palette value.\r
+/// Gets a dark palette value.\r
/// @param {string} $keys Key(s).\r
/// @return {string} Value.\r
-@function _palette($keys...) {\r
- @return val($palette, $keys...);\r
+@function _palette_dark($keys...) {\r
+ @return val($palette_dark, $keys...);\r
+}\r
+\r
+/// Gets a light palette value.\r
+/// @param {string} $keys Key(s).\r
+/// @return {string} Value.\r
+@function _palette_light($keys...) {\r
+ @return val($palette_light, $keys...);\r
}\r
\r
/// Gets a size value.\r
letter-spacing-alt: 0.25em\r
);\r
\r
-// Palette.\r
- $palette: ( \r
- bg: #D8D9CF,\r
- bg-alt: #F0EEED,\r
- fg: #393E46,\r
- fg-bold: #222831,\r
- fg-light: rgba(216,217,207,0.2),\r
- border: rgba(57,62,70,0.1),\r
- border-bg: rgba(34,40,49,0.035),\r
- highlight: #FD7014,\r
- accent1: #FF8B13,\r
- accent2: #CF4DCE,\r
- accent3: #F273E6,\r
- accent4: #e7b788,\r
- accent5: #8ea9e8,\r
- accent6: #609EA2\r
- );
\ No newline at end of file
+ // Palette.\r
+ $palette_light: ( \r
+ bg: #D8D9CF,\r
+ bg-alt: #F0EEED,\r
+ fg: #393E46,\r
+ fg-bold: #222831,\r
+ fg-light: rgba(216,217,207,0.2),\r
+ border: rgba(57,62,70,0.1),\r
+ border-bg: rgba(34,40,49,0.035),\r
+ highlight: #FD7014,\r
+ accent1: #FF8B13,\r
+ accent2: #CF4DCE,\r
+ accent3: #F273E6,\r
+ accent4: #e7b788,\r
+ accent5: #8ea9e8,\r
+ accent6: #609EA2\r
+ );\r
+ $palette_dark: ( \r
+ bg: #393E46,\r
+ bg-alt: #222831,\r
+ fg: #D8D9CF,\r
+ fg-bold: #F0EEED,\r
+ fg-light: rgba(216,217,207,0.2),\r
+ border: rgba(57,62,70,0.1),\r
+ border-bg: rgba(34,40,49,0.035),\r
+ highlight: #FD7014,\r
+ accent1: #FF8B13,\r
+ accent2: #CF4DCE,\r
+ accent3: #F273E6,\r
+ accent4: #e7b788,\r
+ accent5: #8ea9e8,\r
+ accent6: #609EA2\r
+ ); \r
xxsmall: (null, 360px )
));
-
// Mixins.
@mixin inner {
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="color-scheme" content="light dark">
<link rel="profile" href="https://gmpg.org/xfn/11">
+
{{ $style_options := (dict "targetPath" "css/style.css" "outputStyle" "compressed" "transpiler" "dartsass" "enableSourceMap" (not hugo.IsProduction)) }}
{{ $style := resources.Get "sass/main.scss" | resources.ToCSS $style_options }}
