From 6d1e00a63efb690c06dd35f2e7324818204209c0 Mon Sep 17 00:00:00 2001 From: Ariejan de Vroom Date: Thu, 15 Aug 2024 10:19:51 +0200 Subject: [PATCH] Improve theme --- config.toml | 2 +- .../assets/scss/_colors_dark.scss | 19 -------- themes/devroom-2024/assets/scss/_site.scss | 34 ++++++++++---- .../scss/{devroom_light.scss => devroom.scss} | 0 .../assets/scss/devroom_dark.scss | 2 - .../devroom-2024/layouts/_default/baseof.html | 45 +++---------------- .../devroom-2024/layouts/partials/header.html | 14 ++---- 7 files changed, 37 insertions(+), 79 deletions(-) delete mode 100644 themes/devroom-2024/assets/scss/_colors_dark.scss rename themes/devroom-2024/assets/scss/{devroom_light.scss => devroom.scss} (100%) delete mode 100644 themes/devroom-2024/assets/scss/devroom_dark.scss diff --git a/config.toml b/config.toml index 77129df..85bf9b6 100644 --- a/config.toml +++ b/config.toml @@ -27,7 +27,7 @@ enableGitInfo = true lineNos = true lineNumbersInTable = false noClasses = true - style = "dracula" + style = "github" [params] diff --git a/themes/devroom-2024/assets/scss/_colors_dark.scss b/themes/devroom-2024/assets/scss/_colors_dark.scss deleted file mode 100644 index 43b1b16..0000000 --- a/themes/devroom-2024/assets/scss/_colors_dark.scss +++ /dev/null @@ -1,19 +0,0 @@ -$accent: rgb(90, 126, 193); -$background: rgb(40, 44, 53); -$backdrop: darken($background, 5%); -$text: rgb(226, 226, 226); -$subtext: #868686; -$links: $accent; -$footer: $subtext; -$meta: $text; -$header: $text; -$highlight: $links; -$blockquote_border: $accent; -$important_border: #f00; -$code_background: $text; -$code_border_color: $text; -$code: $background; -$separator: darken(desaturate($accent, 20%), 20%); -$darkmode_icon: $text; -$tag_background: $accent; -$tag_color: $text; \ No newline at end of file diff --git a/themes/devroom-2024/assets/scss/_site.scss b/themes/devroom-2024/assets/scss/_site.scss index 0282aa7..8865f35 100644 --- a/themes/devroom-2024/assets/scss/_site.scss +++ b/themes/devroom-2024/assets/scss/_site.scss @@ -1,5 +1,6 @@ @import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); + $h1_font_size: 2.0rem; $h2_font_size: 1.7rem; $header_size: 1.2rem; @@ -9,9 +10,9 @@ $code_font_size: 14px; $code_line_height: 17px; $line-height: 1.6; +$mobile-width: 600px; html, body { - background-color: $background; color: $text; font-family: "Mulish", sans-serif; font-size: $font_size; @@ -22,6 +23,18 @@ html, body { background-color 0.2s ease-in-out; } +html { + background: + conic-gradient(from 0deg at calc(500%/6) calc(100%/3),#485a73 0 120deg,#0000 0), + conic-gradient(from -120deg at calc(100%/6) calc(100%/3),#778caa 0 120deg,#0000 0), + conic-gradient(from 120deg at calc(100%/3) calc(500%/6),#b6c1d1 0 120deg,#0000 0), + conic-gradient(from 120deg at calc(200%/3) calc(500%/6),#b6c1d1 0 120deg,#0000 0), + conic-gradient(from -180deg at calc(100%/3) 50%,#778caa 60deg,#b6c1d1 0 120deg,#0000 0), + conic-gradient(from 60deg at calc(200%/3) 50%,#b6c1d1 60deg,#485a73 0 120deg,#0000 0), + conic-gradient(from -60deg at 50% calc(100%/3),#b6c1d1 120deg,#778caa 0 240deg,#485a73 0); + background-size: 222px 128px; +} + code, pre { font-family: "Roboto Mono", monospace; font-optical-sizing: auto; @@ -36,11 +49,16 @@ code, pre { } .container { + background-color: rgba(255, 255, 255, 0.85); padding: 1rem 1.5rem; - margin: 1rem auto; + margin: 2rem auto; max-width: 1200px; min-height: 100vh; + + @media screen and (max-width: $mobile-width) { + margin: 0.5rem auto; + } } a, a:hover { @@ -82,7 +100,7 @@ nav { } - @media screen and (max-width: 600px) { + @media screen and (max-width: $mobile-width) { flex-direction: column; align-items: flex-end; gap: 0.4rem; @@ -231,7 +249,7 @@ small { code { color: $text; - background-color: $backdrop; + // background-color: $backdrop; padding: 1px 4px 3px; border-radius: 4px; } @@ -247,16 +265,16 @@ pre > code { white-space: pre; padding: 0; color: $text; - background-color: $backdrop !important; + // background-color: $backdrop !important; } pre { - background-color: $backdrop !important; + // background-color: $backdrop !important; padding: 12px; overflow-x: auto; overflow-y: hidden; line-height: $line-height; - border: 2px solid $accent; + border-left: 6px solid $accent; border-radius: 4px; } @@ -338,7 +356,7 @@ article.post { font-size: 14px; white-space: nowrap; - @media (max-width: 600px) { + @media (max-width: $mobile-width) { display: none; } } diff --git a/themes/devroom-2024/assets/scss/devroom_light.scss b/themes/devroom-2024/assets/scss/devroom.scss similarity index 100% rename from themes/devroom-2024/assets/scss/devroom_light.scss rename to themes/devroom-2024/assets/scss/devroom.scss diff --git a/themes/devroom-2024/assets/scss/devroom_dark.scss b/themes/devroom-2024/assets/scss/devroom_dark.scss deleted file mode 100644 index 1ea77e4..0000000 --- a/themes/devroom-2024/assets/scss/devroom_dark.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import "_colors_dark"; -@import "_site"; \ No newline at end of file diff --git a/themes/devroom-2024/layouts/_default/baseof.html b/themes/devroom-2024/layouts/_default/baseof.html index 474edd5..45a32f2 100644 --- a/themes/devroom-2024/layouts/_default/baseof.html +++ b/themes/devroom-2024/layouts/_default/baseof.html @@ -17,33 +17,15 @@ {{ hugo.Generator }} - {{ if hugo.IsServer }} {{ $cssOpts := (dict "targetPath" "css/devroom_dark.css" - "enableSourceMap" true ) }} {{ $styles := resources.Get "scss/devroom_dark.scss" - | resources.ExecuteAsTemplate "style.devroom_dark.css" . | toCSS $cssOpts }} - - {{ else }} {{ $cssOpts := (dict "targetPath" "css/devroom_dark.css" ) }} {{ - $styles := resources.Get "scss/devroom_dark.scss" | resources.ExecuteAsTemplate - "style.devroom_dark.css" . | toCSS $cssOpts | minify | fingerprint }} + {{ if hugo.IsServer }} {{ $cssOpts := (dict "targetPath" "css/devroom.css" + "enableSourceMap" true ) }} {{ $styles := resources.Get "scss/devroom.scss" + | resources.ExecuteAsTemplate "style.devroom.css" . | toCSS $cssOpts }} + + {{ else }} {{ $cssOpts := (dict "targetPath" "css/devroom.css" ) }} {{ + $styles := resources.Get "scss/devroom.scss" | resources.ExecuteAsTemplate + "style.devroom.css" . | toCSS $cssOpts | minify | fingerprint }} - {{ end }} - - {{ if hugo.IsServer }} {{ $cssOpts := (dict "targetPath" "css/devroom_light.css" - "enableSourceMap" true ) }} {{ $styles := resources.Get "scss/devroom_light.scss" - | resources.ExecuteAsTemplate "style.devroom_light.css" . | toCSS $cssOpts }} - - {{ else }} {{ $cssOpts := (dict "targetPath" "css/devroom_light.css" ) }} {{ - $styles := resources.Get "scss/devroom_light.scss" | resources.ExecuteAsTemplate - "style.devroom_light.css" . | toCSS $cssOpts | minify | fingerprint }} - - diff --git a/themes/devroom-2024/layouts/partials/header.html b/themes/devroom-2024/layouts/partials/header.html index 156ce77..e465463 100644 --- a/themes/devroom-2024/layouts/partials/header.html +++ b/themes/devroom-2024/layouts/partials/header.html @@ -1,8 +1,6 @@