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-l: 2.5rem
|
||||||
$gap-m: 1rem
|
$gap-m: 1rem
|
||||||
|
|
||||||
body
|
@use "base"
|
||||||
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
|
|
||||||
|
Loading…
Reference in New Issue
Block a user