Add darkmode

Prettier titles
This commit is contained in:
Michał Gdula 2023-07-21 13:25:33 +01:00
parent b6077f88ed
commit 0ddc2a20b2
15 changed files with 187 additions and 76 deletions

View file

@ -15,7 +15,6 @@ nav
border-radius: 0
background-color: $dark
color: $light
opacity: 0
transform: translateY(-1rem)
@ -80,13 +79,13 @@ nav
width: 3rem
height: 3rem
outline: 0.5rem solid $light
border: 0 solid transparent
border-radius: 50%
background: $dark
color: $light
box-shadow: 0 0 0.35rem rgba(0, 0, 0, 0.4)
transition: all 0.2s ease-in-out
transition: transform 0.2s ease-in-out, outline-color 0.2s ease-in-out
cursor: pointer
z-index: 9999
@ -95,7 +94,19 @@ nav
width: 1.4rem
height: 1.4rem
color: inherit
transition: transform 0.2s ease-in-out
&.open
outline-color: $dark
background: $light
color: $dark
&:hover, &:focus-visible
text-decoration: none
transform: translateY(-0.2rem)
@media (prefers-color-scheme: dark)
.nav-toggle
outline-color: $dark
background-color: $light
color: $dark