109 lines
2.3 KiB
Sass
109 lines
2.3 KiB
Sass
@import "./basic/reset"
|
|
|
|
// Variables
|
|
@import "../../themes/hugo-theme-lowtech/assets/styles/font"
|
|
|
|
$size-small: 1024px
|
|
$color-dark: #010101
|
|
$color-light: #fffffe
|
|
|
|
@mixin dark-theme
|
|
// https://www.happyhues.co/palettes/4
|
|
--color-black: #{$color-dark}
|
|
--color-white: #{$color-light}
|
|
--color-highlight: #2cb67d
|
|
--color-secondary: #72757e
|
|
--color-tertiary: #7f5af0
|
|
|
|
--color-dark-background: #16161a
|
|
--color-dark-background-card: #242629
|
|
|
|
--color-light-background: #242629
|
|
--color-light-background-card: #16161a
|
|
|
|
--color-headline: var(--color-white)
|
|
--color-paragraph: #94a1b2
|
|
--color-button: var(--color-highlight)
|
|
--color-button-text: var(--color-white)
|
|
|
|
@mixin light-theme
|
|
// https://www.happyhues.co/palettes/2
|
|
--color-black: #{$color-light}
|
|
--color-white: #{$color-dark}
|
|
--color-highlight: #00ebc7
|
|
--color-secondary: #ff5470
|
|
--color-tertiary: #fde24f
|
|
|
|
--color-dark-background: #fffffe
|
|
--color-dark-background-card: #f2f4f6
|
|
|
|
--color-light-background: #242629
|
|
--color-light-background-card: #16161a
|
|
|
|
--color-headline: #00214d
|
|
--color-paragraph: #1b2d45
|
|
--color-button: var(--color-highlight)
|
|
--color-button-text: var(--color-white)
|
|
|
|
body
|
|
color-scheme: light dark
|
|
--font: "prociono"
|
|
--background-grid: 15px
|
|
--border-radius: 4px
|
|
|
|
@include light-theme
|
|
|
|
&.dark-theme
|
|
@include dark-theme
|
|
|
|
@media (prefers-color-scheme: dark)
|
|
body
|
|
@include dark-theme
|
|
|
|
&.light-theme
|
|
@include light-theme
|
|
|
|
// \::selection
|
|
// background-color: invert($color-dark, $weight: 100%)
|
|
// color: invert($color-light, $weight: 100%)
|
|
|
|
.btn-toggle
|
|
font-size: 1.5rem
|
|
background: inherit
|
|
border: inherit
|
|
padding: 1rem 0 1rem 1rem
|
|
cursor: pointer
|
|
|
|
.light-theme .btn-toggle
|
|
filter: grayscale(0)!important
|
|
|
|
.dark-theme .btn-toggle
|
|
filter: grayscale(.5)!important
|
|
|
|
@media (prefers-color-scheme: dark)
|
|
.btn-toggle
|
|
filter: grayscale(.5)
|
|
|
|
#logo a
|
|
width: 186px
|
|
height: 79px
|
|
display: block
|
|
background-repeat: no-repeat
|
|
background-image: url('/logos/weko-noir.svg')
|
|
|
|
@media (prefers-color-scheme: dark)
|
|
#logo a
|
|
background-image: url('/logos/weko-blanc.svg')
|
|
|
|
.light-theme #logo a
|
|
background-image: url('/logos/weko-noir.svg')
|
|
|
|
.dark-theme #logo a
|
|
background-image: url('/logos/weko-blanc.svg')
|
|
|
|
@import "./home"
|
|
@import "./basic/html"
|
|
@import "./font"
|
|
|
|
// @import "./elements/header"
|