Fluffy/WebsiteArchive
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/Fluffys-website.git synced 2025-05-19 09:54:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add darkmode

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

84
static/sass/styles.sass
View file

@ -13,6 +13,7 @@ $font-mono: 'IBM Plex Mono', monospace
@import "styles/table"
@import "styles/art-block"
@import "styles/button-array"
@import "styles/back-button"
*
font-family: $font
@ -27,6 +28,13 @@ $font-mono: 'IBM Plex Mono', monospace
html
font-size: 1rem
background-color: $light
color: $dark
transition: background 0.1s ease-in-out
@media (prefers-color-scheme: dark)
html
background-color: $dark
color: $light
body
margin: 0
@ -34,40 +42,8 @@ body
min-height: 100vh
display: flex
flex-direction: column
color: $dark
.back
padding: 0
width: 3rem
height: 3rem
display: flex
justify-content: center
align-items: center
position: fixed
right: 1.3rem
bottom: 1.3rem
border: 0 solid transparent
border-radius: 50%
background: $dark
box-shadow: 0 0 0.35rem rgba(0, 0, 0, 0.4)
cursor: pointer
z-index: 10
svg
display: block
width: 1.4rem
height: 1.4rem
color: $light
&:hover
text-decoration: none
.scroll
width: 0
height: 0.3rem
position: fixed
@ -90,15 +66,17 @@ header
background-color: $dark
color: $light
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2)
z-index: 2
overflow: hidden
z-index: 2
img
width: 100%
height: 100%
position: absolute
inset: 0
top: 0
left: 0
object-fit: cover
h1
@ -148,14 +126,23 @@ main
h1
margin: 0 0 0.5rem 0
position: relative
font-size: 2.5rem
color: $accent
overflow: hidden
opacity: 0
span
position: absolute
transition: transform 0.5s cubic-bezier(.18,.89,.32,1.28)
a
color: $accent
text-decoration: none
&:hover
&:hover, &:focus-visible
text-decoration: underline
outline: 0 solid transparent
.article
margin: 0 0 0.5rem 0
@ -166,8 +153,6 @@ main
position: relative
text-decoration: none
background: $light
color: $dark
h2
margin: 0 0.5rem 0.2rem 0
@ -177,8 +162,8 @@ main
white-space: nowrap
text-overflow: ellipsis
background: inherit
color: inherit
background: $light
color: $dark
overflow: hidden
transition: color 0.1s ease-in-out
@ -191,8 +176,8 @@ main
font-size: 1rem
white-space: nowrap
background: inherit
color: inherit
background: $light
color: $dark
transition: color 0.1s ease-in-out
z-index: +1
@ -212,9 +197,24 @@ main
transition: background 0.1s ease-in-out
&:hover
color: $accent
text-decoration: none
h2, p
color: $accent
@media (prefers-color-scheme: dark)
.article
h2
background: $dark
color: $light
p
background: $dark
color: $light
&::after
border-top: 1px $light dotted
@media (max-width: 600px)
.article
h2

1
static/sass/styles/art-block.sass
View file

@ -13,7 +13,6 @@
width: 100%
height: 100%
position: relative
background: $light
border-radius: $radius
img

39
static/sass/styles/back-button.sass Normal file
View file

@ -0,0 +1,39 @@
.back
padding: 0
width: 3rem
height: 3rem
display: flex
justify-content: center
align-items: center
position: fixed
right: 1.3rem
bottom: 1.3rem
outline: 0.5rem solid $light
border: 0 solid transparent
border-radius: 50%
background: $dark
transition: transform 0.2s ease-in-out
cursor: pointer
z-index: 10
svg
display: block
width: 1.4rem
height: 1.4rem
color: $light
&:hover, &:focus-visible
text-decoration: none
transform: translateY(-0.2rem)
@media (prefers-color-scheme: dark)
.back
outline-color: $dark
background: $light
svg
color: $dark

31
static/sass/styles/button-array.sass
View file

@ -3,6 +3,10 @@
flex-wrap: wrap
justify-content: start
font-size: 0.9rem
font-family: $font-mono
text-decoration: none
p
margin: 0 0.2rem 0 0
padding: 0 0.5rem
@ -11,9 +15,7 @@
display: flex
align-items: center
font-size: 0.9rem
font-family: $font-mono
font-family: inherit
background: $dark
color: $light
@ -30,24 +32,31 @@
justify-content: center
align-items: center
font-size: 0.9rem
font-family: $font-mono
text-decoration: none
font-family: inherit
background-color: $accent
color: $dark
border: 0 solid transparent
border-radius: $radius
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
// transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
svg
width: 1.1rem
height: 1.1rem
color: inherit
&:hover, &:focus-visible
text-decoration: none
background-color: $dark
color: $light
outline: none
background-color: transparent
color: $dark
outline: 0 solid transparent
@media (prefers-color-scheme: dark)
.button-array
p
background: $light
color: $dark
button, a
&:hover, &:focus-visible
color: $light

16
static/sass/styles/footer.sass
View file

@ -6,23 +6,17 @@ footer
flex-direction: column
justify-content: center
align-items: center
text-align: center
font-size: 0.9rem
background-color: $light
color: $dark
p
p, a
margin: 0
font-size: 0.9rem
text-align: center
color: inherit
a
margin: 0
font-size: 0.9rem
text-decoration: none
color: $accent
cursor: pointer
&:hover
&:hover, &:focus-visible
text-decoration: underline
outline: 0 solid transparent

12
static/sass/styles/markdown.sass
View file

@ -45,3 +45,15 @@
padding: 0 0.6rem
font-style: italic
border-left: 0.2rem solid $accent
@media (prefers-color-scheme: dark)
.markdown
code
background-color: $light
color: $dark
pre
border: 1px solid $light
> code
background-color: $dark
color: $light

17
static/sass/styles/navigation.sass
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

15
static/sass/styles/table.sass
View file

@ -33,3 +33,18 @@
.table table
th, td
padding: 0.25rem
@media (prefers-color-scheme: dark)
.table
border: 1px solid $light
table
tr
border-bottom: 1px solid $light
th, td
border-right: 1px solid $light
th
background: $light
color: $dark