diff --git a/themes/_base.sass b/themes/_base.sass new file mode 100644 index 0000000..23886dd --- /dev/null +++ b/themes/_base.sass @@ -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 diff --git a/themes/dark.sass b/themes/dark.sass new file mode 100644 index 0000000..33f8531 --- /dev/null +++ b/themes/dark.sass @@ -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" diff --git a/themes/light.sass b/themes/light.sass index f10d92f..103af30 100644 --- a/themes/light.sass +++ b/themes/light.sass @@ -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"