159 lines
3.6 KiB
Sass
159 lines
3.6 KiB
Sass
@import "./basic/reset"
|
|
|
|
// Variables
|
|
@import "../../themes/hugo-theme-lowtech/assets/styles/font"
|
|
|
|
$size-small: 1024px
|
|
$color-dark: #010101
|
|
$color-light: #fffffe
|
|
$size-space: 2rem
|
|
|
|
@mixin dark-theme
|
|
// https://www.happyhues.co/palettes/4
|
|
--color-black: #{$color-dark}
|
|
--color-white: #{$color-light}
|
|
--color-stroke: #010101
|
|
--color-main: #fffffe
|
|
--color-highlight: #7f5af0
|
|
--color-secondary: #72757e
|
|
--color-tertiary: #2cb67d
|
|
|
|
--color-background: #16161a
|
|
--color-headline: #fffffe
|
|
--color-paragraph: #94a1b2
|
|
--color-card-background: #242629
|
|
--color-card-headline: #fffffe
|
|
--color-card-paragraph: #94a1b2
|
|
--color-link: #fffffe
|
|
|
|
--color-secondary-background: #242629
|
|
--color-secondary-headline: #fffffe
|
|
--color-secondary-paragraph: #94a1b2
|
|
--color-secondary-card-background: #16161a
|
|
--color-secondary-card-headline: #fffffe
|
|
--color-secondary-card-paragraph: #94a1b2
|
|
--color-secondary-link: #fffffe
|
|
|
|
--color-tertiary-background: black
|
|
--color-tertiary-headline: #fffffe
|
|
--color-tertiary-paragraph: #94a1b2
|
|
--color-tertiary-card-background: #16161a
|
|
--color-tertiary-card-headline: #fffffe
|
|
--color-tertiary-card-paragraph: #94a1b2
|
|
--color-tertiary-link: #2cb67d
|
|
|
|
@mixin light-theme
|
|
// https://www.happyhues.co/palettes/2
|
|
--color-black: #{$color-light}
|
|
--color-white: #{$color-dark}
|
|
--color-stroke: #00214d
|
|
--color-main: #fffffe
|
|
--color-highlight: #00ebc7
|
|
--color-secondary: #ff5470
|
|
--color-tertiary: #fde24f
|
|
|
|
--color-background: #fffffe
|
|
--color-headline: #00214d
|
|
--color-paragraph: #1b2d45
|
|
--color-card-background: #f2f4f6
|
|
--color-card-headline: #00214d
|
|
--color-card-paragraph: #1b2d45
|
|
--color-link: #00214d
|
|
|
|
--color-secondary-background: #f2f4f6
|
|
--color-secondary-headline: #00214d
|
|
--color-secondary-paragraph: #1b2d45
|
|
--color-secondary-card-background: #fffffe
|
|
--color-secondary-card-headline: #00214d
|
|
--color-secondary-card-paragraph: #1b2d45
|
|
--color-secondary-link: #00214d
|
|
|
|
--color-tertiary-background: #001534
|
|
--color-tertiary-headline: #fffffe
|
|
--color-tertiary-paragraph: #b7c9e4
|
|
--color-tertiary-card-background: #fffffe
|
|
--color-tertiary-card-headline: #00214d
|
|
--color-tertiary-card-paragraph: #1b2d45
|
|
--color-tertiary-link: #fffffe
|
|
|
|
svg
|
|
.stroke
|
|
stroke: var(--color-stroke)
|
|
.main
|
|
fill: var(--color-main)
|
|
.highlight
|
|
fill: var(--color-highlight)
|
|
.secondary
|
|
fill: var(--color-secondary)
|
|
.tertiary
|
|
fill: var(--color-tertiary)
|
|
|
|
body
|
|
color-scheme: light dark
|
|
--font: "Libre Franklin Regular"
|
|
--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
|
|
|
|
h1
|
|
display: inline-block
|
|
position: relative
|
|
padding: 2rem 4rem
|
|
|
|
@media screen and (max-width: $size-small)
|
|
padding: 1rem
|
|
|
|
&::after,
|
|
&::before
|
|
height: 8px
|
|
width: 100%
|
|
background: var(--color-highlight)
|
|
content: ""
|
|
position: absolute
|
|
border-radius: 1rem 1rem 1rem 1rem / 1rem 1rem 1rem 1rem
|
|
left: 0
|
|
right: 0
|
|
transform: rotate(-2deg)
|
|
|
|
&::before
|
|
top: -1rem
|
|
|
|
&::after
|
|
bottom: -1rem
|
|
|
|
#me .container
|
|
align-items: center
|
|
@media screen and (max-width: $size-small)
|
|
flex-direction: column-reverse
|
|
justify-content: center
|
|
|
|
div
|
|
width: 450px
|
|
max-width: 100%
|
|
|
|
svg
|
|
width: 400px
|
|
height: 400px
|
|
@media screen and (max-width: $size-small)
|
|
width: calc(200px + #{$size-space*2})
|
|
height: calc(200px + #{$size-space*2})
|
|
margin: 0 auto
|
|
padding: $size-space
|
|
|
|
@import "./home"
|
|
@import "./basic/html"
|
|
@import "./font"
|
|
@import "./header"
|
|
@import "./footer"
|
|
@import "./container"
|