weko/assets/styles/main.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"