From 95f42bcfe1e76b3e67051a58e2bb13eacd22792c Mon Sep 17 00:00:00 2001 From: Oliver Booth Date: Wed, 13 Nov 2024 15:57:16 +0000 Subject: [PATCH] refactor: revert e24e5e5aaa64f45792d437ecddfce9d7f6a81f48 --- OliverBooth/Data/SiteTheme.cs | 22 --- OliverBooth/Pages/Shared/_Layout.cshtml | 27 +-- OliverBooth/Properties/launchSettings.json | 4 +- src/img/ob-256x256-dark.png | Bin 9108 -> 0 bytes src/scss/_prism-vs.scss | 88 --------- src/scss/app.dark.scss | 132 ------------- src/scss/app.light.scss | 140 -------------- src/scss/app.scss | 123 +++++++++--- src/scss/blog.scss | 16 +- src/scss/colors.scss | 29 +-- src/scss/markdown-callouts-light.scss | 183 ------------------ ...louts-dark.scss => markdown-callouts.scss} | 0 src/scss/markdown.scss | 8 +- src/scss/prism-vs-dark.scss | 25 --- src/scss/prism-vs-light.scss | 25 --- src/ts/SiteTheme.ts | 21 -- src/ts/UI.ts | 63 ------ src/ts/app.ts | 4 - 18 files changed, 118 insertions(+), 792 deletions(-) delete mode 100644 OliverBooth/Data/SiteTheme.cs delete mode 100644 src/img/ob-256x256-dark.png delete mode 100644 src/scss/_prism-vs.scss delete mode 100644 src/scss/app.dark.scss delete mode 100644 src/scss/app.light.scss delete mode 100644 src/scss/markdown-callouts-light.scss rename src/scss/{markdown-callouts-dark.scss => markdown-callouts.scss} (100%) delete mode 100644 src/scss/prism-vs-dark.scss delete mode 100644 src/scss/prism-vs-light.scss delete mode 100644 src/ts/SiteTheme.ts diff --git a/OliverBooth/Data/SiteTheme.cs b/OliverBooth/Data/SiteTheme.cs deleted file mode 100644 index 2c610d3..0000000 --- a/OliverBooth/Data/SiteTheme.cs +++ /dev/null @@ -1,22 +0,0 @@ -namespace OliverBooth.Data; - -/// -/// An enumeration of site themes. -/// -public enum SiteTheme -{ - /// - /// Dark mode. - /// - Dark, - - /// - /// Light mode. - /// - Light, - - /// - /// Follow system settings. - /// - Auto -} diff --git a/OliverBooth/Pages/Shared/_Layout.cshtml b/OliverBooth/Pages/Shared/_Layout.cshtml index 06ea234..22bcae4 100644 --- a/OliverBooth/Pages/Shared/_Layout.cshtml +++ b/OliverBooth/Pages/Shared/_Layout.cshtml @@ -2,7 +2,6 @@ @using OliverBooth.Common.Data.Blog @using OliverBooth.Common.Data.Web @using OliverBooth.Common.Services -@using OliverBooth.Data @using OliverBooth.Extensions @inject IBlogPostService BlogPostService @inject ITutorialService TutorialService @@ -10,15 +9,9 @@ @{ HttpRequest request = Context.Request; var url = new Uri($"{request.Scheme}://{request.Host}{request.Path}{request.QueryString}"); - SiteTheme siteTheme = request.Cookies["_theme"] switch - { - "dark" => SiteTheme.Dark, - "light" => SiteTheme.Light, - _ => SiteTheme.Auto - }; } - "dark" })"> + @@ -68,21 +61,7 @@ - @switch (siteTheme) - { - case SiteTheme.Dark: - - break; - - case SiteTheme.Light: - - break; - - default: - - - break; - } + @@ -90,7 +69,7 @@

- Oliver Booth + Oliver Booth Oliver Booth

diff --git a/OliverBooth/Properties/launchSettings.json b/OliverBooth/Properties/launchSettings.json index 20e8e43..3012f63 100644 --- a/OliverBooth/Properties/launchSettings.json +++ b/OliverBooth/Properties/launchSettings.json @@ -4,7 +4,7 @@ "windowsAuthentication": false, "anonymousAuthentication": true, "iisExpress": { - "applicationUrl": "http://*:5000", + "applicationUrl": "http://localhost:5000", "sslPort": 2845 } }, @@ -14,7 +14,7 @@ "dotnetRunMessages": true, "launchBrowser": false, "workingDirectory": "bin/Debug/net8.0/", - "applicationUrl": "https://*:2845", + "applicationUrl": "https://localhost:2845", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } diff --git a/src/img/ob-256x256-dark.png b/src/img/ob-256x256-dark.png deleted file mode 100644 index bbc4b9a77546044865dab71afaab9ae017b15ad9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 9108 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 diff --git a/src/scss/_prism-vs.scss b/src/scss/_prism-vs.scss deleted file mode 100644 index cb44208..0000000 --- a/src/scss/_prism-vs.scss +++ /dev/null @@ -1,88 +0,0 @@ -code[class*="language-"] { - font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; - background: $background; - color: $foreground; -} - -.token { - &.punctuation { - color: $foreground; - } - - &.comment { - color: $comment; - } - - &.string { - color: $string; - } - - &.function { - color: $function; - } - - &.class-name { - color: $class-name; - } - - &.doctype, &.prolog { - color: $doctype; - } - - &.keyword { - color: $keyword; - } - - &.preprocessor.property { - color: $preprocessor-property; - - .keyword { - color: $preprocessor-property; - } - } - - &.selector { - color: $css-selector; - } - - &.atrule { - color: $atrule; - } - - &.tag { - color: $markup-tag; - } - - &.attr-name { - color: $attr-name; - } - - &.attr-value { - color: $markup-attr-value; - } -} - -// CSS -code[class*="language-css"] { - color: $css-foreground; - - .token { - - &.property { - color: $css-property; - } - - &.string { - color: $css-foreground; - } - } -} - -// Markup -code[class*="language-markup"] { - .token { - &.punctuation { - color: $markup-punctuation; - } - } -} diff --git a/src/scss/app.dark.scss b/src/scss/app.dark.scss deleted file mode 100644 index 1153d0f..0000000 --- a/src/scss/app.dark.scss +++ /dev/null @@ -1,132 +0,0 @@ -@use "sass:color"; -@import "colors"; - -html, body { - background: $background-dark; - color: $foreground-dark; -} - -#site-title { - a { - &:link, &:visited, &:hover, &:active { - color: $ui-foreground-dark; - - * { - color: $ui-foreground-dark; - } - } - } -} - -nav ul.site-nav li a { - &:link, &:visited, &:hover, &:active { - color: $ui-foreground-dark; - } -} - -ul.contact-reasons li a { - &:link, &:visited, &:hover, &:active { - color: $ui-foreground-dark; - } -} - -.card { - background: $card-background-dark; - color: $ui-foreground-dark; - - a.btn, button { - color: $ui-foreground-dark; - } -} - -article { - background: $content-background-dark; -} - -main.container { - background: $content-background-dark; -} - -a { - &:link, &:visited, &:hover, &:active { - color: $link-text-dark; - } - - &:hover { - color: $link-hover-dark; - } -} - -a.brand-mastodon { - &:hover { - color: $ui-foreground-dark; - } -} - -hr.page-separator { - border-top: 5px dashed $ui-foreground-dark; -} - -article blockquote { - border-left: 2px solid $blockquote-dark; -} - -.project-card { - background: $project-background-dark; - - a { - &:link, &:visited, &:hover &:active { - color: $ui-foreground-dark; - } - } - - p.project-title { - background-color: rgba($project-background-dark, 50%); - } -} - -code:not([class*="language-"]) { - background: #1e1e1e !important; - color: #dcdcda !important; -} - -a:link, a:visited, a:active { - code:not([class*="language-"]) { - color: $link-text-dark !important; - } -} - -a:hover { - code:not([class*="language-"]) { - color: $link-hover-dark !important; - } -} - -a.brand-linkedin { - &:hover { - color: $ui-foreground-dark; - } -} - -pre { - background: #1e1e1e !important; - - code mark, code mark span { - background: #d8ba76 !important; - } -} - -.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { - box-shadow: 0 0 0 0.1rem $ui-foreground-dark, 0 0 0 0.25rem #258cfb; -} - -.keystroke { - background: color.adjust($foreground-dark, $lightness: -20%); - color: $background-dark; - border: color.adjust($foreground-dark, $lightness: -30%); -} - -.mastodon-update-card.card { - background-color: desaturate(darken(#6364FF, 50%), 50%); - color: #fff; -} diff --git a/src/scss/app.light.scss b/src/scss/app.light.scss deleted file mode 100644 index f76a7e3..0000000 --- a/src/scss/app.light.scss +++ /dev/null @@ -1,140 +0,0 @@ -@use "sass:color"; -@import "colors"; - -html, body { - background: $background-light; - color: $foreground-light; -} - -#site-title { - a { - &:link, &:visited, &:hover, &:active { - color: $ui-foreground-light; - - * { - color: $ui-foreground-light; - } - } - } -} - -nav ul.site-nav li a { - &:link, &:visited, &:hover, &:active { - color: $ui-foreground-light; - } -} - -ul.contact-reasons li a { - &:link, &:visited, &:hover, &:active { - color: $ui-foreground-light; - } -} - -.card { - background: $card-background-light; - color: $ui-foreground-light; - - a.btn, button { - color: $ui-foreground-light; - } -} - -article { - background: $content-background-light; -} - -main.container { - background: $content-background-light; -} - -a.brand-mastodon { - &:hover { - color: $ui-foreground-light; - } -} - -a { - &:link, &:visited, &:hover, &:active { - color: $link-text-light; - } - - &:hover { - color: $link-hover-light; - } -} - -hr.page-separator { - border-top: 5px dashed $ui-foreground-light; -} - -article blockquote { - border-left: 2px solid $blockquote-light; -} - -.project-card { - background: $project-background-light; - - a { - &:link, &:visited, &:hover &:active { - color: $ui-foreground-light; - } - } - - p.project-title { - background-color: rgba($project-background-light, 50%); - } -} - -code:not([class*="language-"]) { - background: #dcdcda !important; - color: #1e1e1e !important; -} - -a:link, a:visited, a:hover, a:active { - code:not([class*="language-"]) { - color: $link-text-light !important; - } -} - -a:hover { - code:not([class*="language-"]) { - color: $link-hover-light !important; - } -} - -a.brand-linkedin { - &:hover { - color: $ui-foreground-light; - } -} - -pre { - background: #ffffff !important; - - code mark, code mark span { - background: #ffff00 !important; - } -} - -.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { - box-shadow: 0 0 0 0.1rem $ui-foreground-light, 0 0 0 0.25rem #258cfb; -} - -.keystroke { - background: color.adjust($foreground-light, $lightness: -20%); - color: $background-light; - border: color.adjust($foreground-light, $lightness: -30%); -} - -.mastodon-update-card.card { - background-color: #6364FF; - color: $ui-foreground-dark; - - .text-muted abbr { - color: $ui-foreground-dark; - } - - a:link, a:visited, a:hover, a:active { - color: $ui-foreground-dark; - } -} \ No newline at end of file diff --git a/src/scss/app.scss b/src/scss/app.scss index 19a9c68..b78c93b 100644 --- a/src/scss/app.scss +++ b/src/scss/app.scss @@ -4,17 +4,11 @@ @import "blog"; html, body { + background: $background; + color: $foreground; font-size: 16px; } -@media (prefers-color-scheme: dark) { - @import "app.dark"; -} - -@media (prefers-color-scheme: light) { - @import "app.light"; -} - @media (min-width: 768px) { html { font-size: 16px; @@ -22,12 +16,19 @@ html, body { } .keystroke { + background: color.adjust($foreground, $lightness: -20%); + color: $background; border-radius: 2px; + border: color.adjust($foreground, $lightness: -30%); box-shadow: #2b2b2b 2px 2px; font-size: 12px; padding: 2px 4px; } +.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { + box-shadow: 0 0 0 0.1rem $ui-foreground, 0 0 0 0.25rem #258cfb; +} + html { position: relative; min-height: 100%; @@ -38,6 +39,7 @@ body { } main.container { + background: #333; padding: 20px; border-radius: 5px; } @@ -45,6 +47,11 @@ main.container { a { &:link, &:visited, &:hover, &:active { text-decoration: none; + color: $link-text; + } + + &:hover { + color: $link-hover; } } @@ -52,16 +59,19 @@ a { a { &:link, &:visited, &:hover, &:active { text-decoration: none; + color: $ui-foreground; * { font-family: 'Roboto Mono', monospace; text-decoration: none; + color: $ui-foreground; } } } } hr.page-separator { + border-top: 5px dashed $ui-foreground; opacity: 1; margin: 50px 0; } @@ -88,6 +98,7 @@ ul.contact-reasons { a { &:link, &:visited, &:hover, &:active { text-decoration: none; + color: $ui-foreground; } &:hover { @@ -97,6 +108,15 @@ ul.contact-reasons { } } +.card { + background: #212121; + color: $ui-foreground; + + a.btn, button { + color: $ui-foreground; + } +} + nav { margin: 0 auto; max-width: 960px; @@ -120,6 +140,7 @@ nav { &:link, &:visited, &:hover, &:active { text-decoration: none; + color: $ui-foreground; } &:hover { @@ -135,6 +156,7 @@ nav { } article { + background: $content-background; padding: 20px; border-radius: 5px; @@ -143,6 +165,7 @@ article { } blockquote { + border-left: 2px solid $blockquote; padding-left: 10px; } @@ -162,7 +185,7 @@ article { abbr { text-decoration: none; - border-bottom: 1px dotted $link-hover-dark; + border-bottom: 1px dotted $link-hover; } span.timestamp { @@ -174,6 +197,7 @@ article { .project-card { position: relative; + background: $project-background; box-shadow: 0 0 15px rgba(0, 0, 0, .1); &:hover { @@ -199,6 +223,12 @@ article { transition: transform 500ms; } + a { + &:link, &:visited, &:hover &:active { + color: $ui-foreground; + } + } + p.project-title { font-size: 1em; transition: font-size 500ms, margin 500ms; @@ -207,20 +237,37 @@ article { width: 100%; margin: -34px 0 0; padding: 5px; + background-color: rgba($project-background, 50%); } } } code:not([class*="language-"]) { + background: #1e1e1e !important; + color: #dcdcda !important; font-size: inherit !important; padding: 3px; } +a:link, a:visited, a:hover, a:active { + code:not([class*="language-"]) { + color: #03a9f4 !important; + } +} + +a:hover { + code:not([class*="language-"]) { + color: #fff !important; + } +} + pre { + background: #1e1e1e !important; border-radius: 5px; font-size: 0.9em !important; code mark, code mark span { + background: #d8ba76 !important; color: #000 !important; } } @@ -304,12 +351,22 @@ a.bmc-btn { a.brand-mastodon { &:link, &:visited, &:hover, &:active { text-decoration: none; + color: #5a48dd; + } + + &:hover { + color: #fff; } } a.brand-linkedin { &:link, &:visited, &:hover, &:active { text-decoration: none; + color: #0077b5; + } + + &:hover { + color: #fff; } } @@ -328,6 +385,38 @@ td.trim-p p:last-child { margin-bottom: 0; } +#usa-countdown { + background-image: url('/img/us-flag-cover_512x166.png'); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + border-radius: 10px; + cursor: pointer; + + * { + cursor: pointer; + } + + .usa-countdown-element { + margin: 10px 0; + padding: 5px; + font-family: "Gabarito", sans-serif; + font-weight: 500; + text-align: center; + font-size: 3em; + border-right: 2px solid #fff; + border-left: 2px solid #fff; + + &:first-child { + border-left: none; + } + + &:last-child { + border-right: none; + } + } +} + .post-tags a.badge { transition: color 250ms, background-color 250ms; @@ -337,7 +426,7 @@ td.trim-p p:last-child { } &:hover { - color: $accent-dark; + color: $accent; background-color: #1E1E1E !important; } } @@ -374,13 +463,8 @@ td.trim-p p:last-child { } } -@media (prefers-color-scheme: dark) { -} - -@media (prefers-color-scheme: light) { -} - .mastodon-update-card.card { + background-color: desaturate(darken(#6364FF, 50%), 50%); margin-bottom: 20px; border-radius: 3px; border: none; @@ -459,11 +543,6 @@ td.trim-p p:last-child { } } -button#theme-switch { - width: 42pt; - height: 42pt; -} - @keyframes headshot-spin-start { 0% { transform: rotateY(0) scale(1.0); @@ -488,4 +567,4 @@ button#theme-switch { transform: scale(1.0); box-shadow: none; } -} +} \ No newline at end of file diff --git a/src/scss/blog.scss b/src/scss/blog.scss index 83705e0..0bfc55f 100644 --- a/src/scss/blog.scss +++ b/src/scss/blog.scss @@ -1,21 +1,9 @@ -$blog-card-bg-dark: #333333; -$blog-card-bg-light: #ffffff; +$blog-card-bg: #333333; $blog-card-gutter: 20px; $border-radius: 3px; -@media (prefers-color-scheme: dark) { - div.blog-card { - background-color: $blog-card-bg-dark; - } -} - -@media (prefers-color-scheme: light) { - div.blog-card { - background-color: $blog-card-bg-light; - } -} - div.blog-card { + background: $blog-card-bg; margin-bottom: $blog-card-gutter; padding: $blog-card-gutter; border-radius: $border-radius; diff --git a/src/scss/colors.scss b/src/scss/colors.scss index fa249fd..cdb4847 100644 --- a/src/scss/colors.scss +++ b/src/scss/colors.scss @@ -1,23 +1,12 @@ @use "sass:color"; -$background-dark: #121212; -$foreground-dark: #f5f5f5; -$accent-dark: #03a9f4; -$ui-foreground-dark: #ffffff; -$content-background-dark: #333333; -$blockquote-dark: #ff0033; -$project-background-dark: #000000; -$card-background-dark: #212121; -$link-text-dark: $accent-dark; -$link-hover-dark: lighten($link-text-dark, 50%); +$background: #121212; +$foreground: #f5f5f5; +$accent: #03a9f4; +$ui-foreground: #ffffff; +$content-background: #333333; +$blockquote: #ff0033; +$project-background: #000000; -$background-light: #dddddd; -$foreground-light: #0a0a0a; -$accent-light: #007ab1; -$ui-foreground-light: #000000; -$content-background-light: #ffffff; -$blockquote-light: #ff0033; -$project-background-light: #ffffff; -$card-background-light: #dedede; -$link-text-light: $accent-light; -$link-hover-light: lighten($link-text-light, 50%); +$link-text: $accent; +$link-hover: lighten($link-text, 50%); diff --git a/src/scss/markdown-callouts-light.scss b/src/scss/markdown-callouts-light.scss deleted file mode 100644 index 26d4a61..0000000 --- a/src/scss/markdown-callouts-light.scss +++ /dev/null @@ -1,183 +0,0 @@ -$callout-bg-blue: #e6f0fc; -$callout-bg-cyan: #e5f8f8; -$callout-bg-green: #e6f8ed; -$callout-bg-orange: #fdf1e5; -$callout-bg-red: #fdeaec; -$callout-bg-purple: #f1edfd; -$callout-bg-grey: #f5f5f5; - -$callout-fg-blue: #157aff; -$callout-fg-cyan: #53dfdd; -$callout-fg-green: #44cf6e; -$callout-fg-orange: #e9973f; -$callout-fg-red: #fb464c; -$callout-fg-purple: #a882ff; -$callout-fg-grey: #9e9e9e; - -.callout { - font-size: 16px; - border-radius: 5px; - padding: 20px; - margin-bottom: 1rem; - - .callout-title { - font-weight: bold; - margin-bottom: 1rem; - } - - p:last-child { - margin-bottom: 0; - } - - &.collapsible { - .callout-fold { - transform: rotate(180deg); - transition: transform 500ms; - margin-left: 0.5em; - - svg { - transform: rotate(180deg); - transition: transform 500ms; - } - } - - .callout-title { - cursor: pointer; - transition: margin-bottom 500ms; - } - - &.collapsed { - .callout-title { - margin-bottom: 0; - } - - .callout-fold svg { - transform: rotate(0deg); - } - } - } - - &[data-callout="note"] { - background-color: $callout-bg-blue; - - .callout-title { - color: $callout-fg-blue; - } - } - - &[data-callout="abstract"] { - background-color: $callout-bg-cyan; - - .callout-title { - color: $callout-fg-cyan; - } - } - - &[data-callout="info"] { - background-color: $callout-bg-blue; - - .callout-title { - color: $callout-fg-blue; - } - } - - &[data-callout="todo"] { - background-color: $callout-bg-blue; - - .callout-title { - color: $callout-fg-blue; - } - } - - &[data-callout="tip"] { - background-color: $callout-bg-cyan; - - .callout-title { - color: $callout-fg-cyan; - } - } - - &[data-callout="important"] { - background-color: $callout-bg-cyan; - - .callout-title { - color: $callout-fg-cyan; - } - } - - &[data-callout="success"] { - background-color: $callout-bg-green; - - .callout-title { - color: $callout-fg-green; - } - } - - &[data-callout="question"] { - background-color: $callout-bg-orange; - - .callout-title { - color: $callout-fg-orange; - } - } - - &[data-callout="warning"] { - background-color: $callout-bg-orange; - - .callout-title { - color: $callout-fg-orange; - } - } - - &[data-callout="failure"] { - background-color: $callout-bg-red; - - .callout-title { - color: $callout-fg-red; - } - } - - &[data-callout="danger"] { - background-color: $callout-bg-red; - - .callout-title { - color: $callout-fg-red; - } - } - - &[data-callout="bug"] { - background-color: $callout-bg-red; - - .callout-title { - color: $callout-fg-red; - } - } - - &[data-callout="example"] { - background-color: $callout-bg-purple; - - .callout-title { - color: $callout-fg-purple; - } - } - - &[data-callout="cite"] { - background-color: $callout-bg-grey; - - .callout-title { - color: $callout-fg-grey; - } - } - - &[data-callout="update"] { - background-color: $callout-bg-blue; - - .callout-title { - color: $callout-fg-blue; - } - } -} - -svg.lucide { - width: 16px; -} diff --git a/src/scss/markdown-callouts-dark.scss b/src/scss/markdown-callouts.scss similarity index 100% rename from src/scss/markdown-callouts-dark.scss rename to src/scss/markdown-callouts.scss diff --git a/src/scss/markdown.scss b/src/scss/markdown.scss index ce71211..cb5b1e1 100644 --- a/src/scss/markdown.scss +++ b/src/scss/markdown.scss @@ -1,7 +1 @@ -@media (prefers-color-scheme: dark) { - @import "markdown-callouts-dark"; -} - -@media (prefers-color-scheme: light) { - @import "markdown-callouts-light"; -} \ No newline at end of file +@import "markdown-callouts"; diff --git a/src/scss/prism-vs-dark.scss b/src/scss/prism-vs-dark.scss deleted file mode 100644 index 10ea180..0000000 --- a/src/scss/prism-vs-dark.scss +++ /dev/null @@ -1,25 +0,0 @@ -$background: #1E1E1E; -$foreground: #DCDCDA; - -// C# -$comment: #23A658; -$string: #EA9D78; -$function: #A0D7A7; -$class-name: #13C9C6; -$keyword: #439CE2; -$preprocessor-property: #9B9B99; - -// Css -$atrule: $keyword; -$css-foreground: #C8C8C6; -$css-selector: #D8BA76; -$css-property: #67DCFF; - -// Markup (HTML, XML) -$doctype: $class-name; -$markup-tag: $keyword; -$attr-name: #87DCFF; -$markup-punctuation: #80807F; -$markup-attr-value: $css-foreground; - -@import "_prism-vs"; diff --git a/src/scss/prism-vs-light.scss b/src/scss/prism-vs-light.scss deleted file mode 100644 index 07cfbfd..0000000 --- a/src/scss/prism-vs-light.scss +++ /dev/null @@ -1,25 +0,0 @@ -$background: #FFFFFC; -$foreground:#000; - -// C# -$comment: #008016; -$string: #E11500; -$function: #785318; -$class-name: #0491C1; -$keyword: #3200FF; -$preprocessor-property: #80807F; - -// Css -$atrule:$keyword; -$css-foreground: #3200FF; -$css-selector: #B80000; -$css-property: $css-selector; - -// Markup (HTML, XML) -$doctype: $class-name ; -$markup-tag: $css-selector; -$attr-name: #FF0000; -$markup-punctuation: $keyword; -$markup-attr-value:$keyword; - -@import "_prism-vs"; \ No newline at end of file diff --git a/src/ts/SiteTheme.ts b/src/ts/SiteTheme.ts deleted file mode 100644 index e5b2a5f..0000000 --- a/src/ts/SiteTheme.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * An enumeration if site themes. - */ -enum SiteTheme { - /** - * Dark mode. - */ - DARK, - - /** - * Light mode. - */ - LIGHT, - - /** - * Follow system settings. - */ - AUTO -} - -export default SiteTheme; diff --git a/src/ts/UI.ts b/src/ts/UI.ts index b209ad2..554eb07 100644 --- a/src/ts/UI.ts +++ b/src/ts/UI.ts @@ -1,5 +1,4 @@ import TimeUtility from "./TimeUtility"; -import SiteTheme from "./SiteTheme"; declare const bootstrap: any; declare const katex: any; @@ -17,68 +16,6 @@ class UI { return script; } - /** - * Gets the user's current-requested site theme. - */ - public static getSiteTheme(): SiteTheme { - const theme = getCookie("_theme"); - switch (theme) { - case "dark": - return SiteTheme.DARK; - case "light": - return SiteTheme.LIGHT; - default: - return SiteTheme.AUTO; - } - - function getCookie(name: string): string { - name = `${name}=`; - const decodedCookie = decodeURIComponent(document.cookie); - const cookies = decodedCookie.split(';'); - - for (let index = 0; index < cookies.length; index++) { - let current = cookies[index]; - - while (current.charAt(0) == ' ') { - current = current.substring(1); - } - if (current.indexOf(name) == 0) { - return current.substring(name.length, current.length); - } - } - - return ""; - } - } - - /** - * Gets the user's current-requested site theme. - */ - public static setSiteTheme(theme: SiteTheme) { - const cookieName = "_theme"; - const expiryDays = 30; - - switch (theme) { - case SiteTheme.DARK: - setCookie(cookieName, "dark", expiryDays); - break; - case SiteTheme.LIGHT: - setCookie(cookieName, "light", expiryDays); - break; - case SiteTheme.AUTO: - setCookie(cookieName, "auto", expiryDays); - break; - } - - function setCookie(name: string, value: any, expiryDays: number) { - const date = new Date(); - date.setTime(date.getTime() + (expiryDays * 24 * 60 * 60 * 1000)); - - const expires = "expires=" + date.toUTCString(); - document.cookie = `${name}=${value};${expires};path=/`; - } - } - /** * Forces all UI elements under the given element to update their rendering. * @param element The element to search for UI elements in. diff --git a/src/ts/app.ts b/src/ts/app.ts index 0712967..bd3ca1e 100644 --- a/src/ts/app.ts +++ b/src/ts/app.ts @@ -75,10 +75,6 @@ declare const lucide: any; const favicon = document.querySelector("link[rel~=\"icon\"]"); // @ts-ignore favicon.href = `/img/${darkMode ? "favicon.png" : "favicon-dark.png"}`; - document.querySelector("html").dataset.bsTheme = darkMode ? "dark" : "light"; - - const siteLogo = document.getElementById("site-logo") as HTMLImageElement; - siteLogo.src = darkMode ? "/img/ob-256x256.png" : "/img/ob-256x256-dark.png"; } setFavicon();