Add dark theme
This commit is contained in:
parent
d5368dc248
commit
9e76a34531
56
themes/_base.sass
Normal file
56
themes/_base.sass
Normal file
@ -0,0 +1,56 @@
|
||||
body
|
||||
margin: $gap-l auto
|
||||
max-width: 700px
|
||||
background: $color-bg
|
||||
color: $color-text
|
||||
padding-inline: $gap-m
|
||||
font-family: $font-main
|
||||
font-weight: 500
|
||||
box-sizing: border-box
|
||||
&::selection
|
||||
color: $color-bg
|
||||
background: $color-selection
|
||||
|
||||
|
||||
h1, h2, h3
|
||||
font-family: $font-main,
|
||||
margin-top: $gap-l
|
||||
line-height: 1.2
|
||||
|
||||
img
|
||||
display: block
|
||||
width: 100%
|
||||
object-fit: cover
|
||||
object-position: center
|
||||
|
||||
a
|
||||
color: $color-link
|
||||
&:hover
|
||||
text-decoration: none
|
||||
|
||||
pre
|
||||
font-family: $font-monospace
|
||||
|
||||
.isa_info, .isa_success, .isa_warning, .isa_error
|
||||
width: 90%
|
||||
margin: 10px 0px
|
||||
padding: 12px
|
||||
|
||||
.isa_info
|
||||
color: #00529b
|
||||
background-color: #bde5f8
|
||||
|
||||
.isa_success
|
||||
color: #4f8a10
|
||||
background-color: #dff2bf
|
||||
|
||||
.isa_warning
|
||||
color: #9f6000
|
||||
background-color: #feefb3
|
||||
|
||||
.isa_error
|
||||
color: #d8000c
|
||||
background-color: #ffd2d2
|
||||
|
||||
.timestamp
|
||||
color: $color-text--light
|
11
themes/dark.sass
Normal file
11
themes/dark.sass
Normal file
@ -0,0 +1,11 @@
|
||||
$font-main: "Lora", sans-serif
|
||||
$font-monospace: "Inconsolata", monospace
|
||||
$color-bg: #191919
|
||||
$color-text: #ffffffcf
|
||||
$color-text--light: lighten($color-text, 20%)
|
||||
$color-link: #6FB0E2
|
||||
$color-selection: #9BA6B0
|
||||
$gap-l: 2.5rem
|
||||
$gap-m: 1rem
|
||||
|
||||
@use "base"
|
@ -8,59 +8,4 @@ $color-selection: #4D5460
|
||||
$gap-l: 2.5rem
|
||||
$gap-m: 1rem
|
||||
|
||||
body
|
||||
margin: $gap-l auto
|
||||
max-width: 700px
|
||||
background: $color-bg
|
||||
color: $color-text
|
||||
padding-inline: $gap-m
|
||||
font-family: $font-main
|
||||
font-weight: 500
|
||||
box-sizing: border-box
|
||||
&::selection
|
||||
color: $color-bg
|
||||
background: $color-selection
|
||||
|
||||
|
||||
h1, h2, h3
|
||||
font-family: $font-main,
|
||||
margin-top: $gap-l
|
||||
line-height: 1.2
|
||||
|
||||
img
|
||||
display: block
|
||||
width: 100%
|
||||
object-fit: cover
|
||||
object-position: center
|
||||
|
||||
a
|
||||
color: $color-link
|
||||
&:hover
|
||||
text-decoration: none
|
||||
|
||||
pre
|
||||
font-family: $font-monospace
|
||||
|
||||
.isa_info, .isa_success, .isa_warning, .isa_error
|
||||
width: 90%
|
||||
margin: 10px 0px
|
||||
padding: 12px
|
||||
|
||||
.isa_info
|
||||
color: #00529b
|
||||
background-color: #bde5f8
|
||||
|
||||
.isa_success
|
||||
color: #4f8a10
|
||||
background-color: #dff2bf
|
||||
|
||||
.isa_warning
|
||||
color: #9f6000
|
||||
background-color: #feefb3
|
||||
|
||||
.isa_error
|
||||
color: #d8000c
|
||||
background-color: #ffd2d2
|
||||
|
||||
.timestamp
|
||||
color: $color-text--light
|
||||
@use "base"
|
||||
|
Loading…
Reference in New Issue
Block a user