From 47fd080552917fa9765e5c9a2a7e638b7daf3c9d Mon Sep 17 00:00:00 2001 From: atsuyaw Date: Fri, 3 Nov 2023 16:34:34 +0900 Subject: [PATCH] fix: polish colors --- v4/assets/sass/_articles.scss | 4 ++-- v4/assets/sass/_bilberry-hugo-theme.scss | 9 +++++++++ v4/assets/sass/_footer.scss | 2 +- v4/assets/sass/_header.scss | 4 ++-- v4/assets/sass/_main.scss | 4 ++-- v4/assets/sass/_pagination.scss | 4 ++-- v4/assets/sass/dark-theme.scss | 16 ++++++++-------- 7 files changed, 26 insertions(+), 17 deletions(-) diff --git a/v4/assets/sass/_articles.scss b/v4/assets/sass/_articles.scss index 7ea44bc3b..3f43f1541 100644 --- a/v4/assets/sass/_articles.scss +++ b/v4/assets/sass/_articles.scss @@ -341,7 +341,7 @@ article { padding: 5.5%; margin: 0; text-align: center; - color: #fff; + color: $header-text-color; background: none; font-size: 1.2em; position: relative; @@ -442,7 +442,7 @@ article { @include featuredImage(); a { - color: #fff; + color: $header-text-color; text-decoration: none; display: flex; flex-direction: column; diff --git a/v4/assets/sass/_bilberry-hugo-theme.scss b/v4/assets/sass/_bilberry-hugo-theme.scss index 41851fed1..968c7dbc8 100644 --- a/v4/assets/sass/_bilberry-hugo-theme.scss +++ b/v4/assets/sass/_bilberry-hugo-theme.scss @@ -135,6 +135,15 @@ list-style: none; } } + .flex-control-paging li a { + background: rgba($text-color,0.5); + } + .flex-control-paging li a:hover { + background: rgba($text-color,0.7); + } + .flex-control-paging li a.flex-active { + background: rgba($text-color,0.9); + } .fa-youtube-adblock-proof:before { content: "\F167"; diff --git a/v4/assets/sass/_footer.scss b/v4/assets/sass/_footer.scss index e1260788d..855583ad7 100644 --- a/v4/assets/sass/_footer.scss +++ b/v4/assets/sass/_footer.scss @@ -31,7 +31,7 @@ footer { margin-top: 1.25em; li { - border-bottom: 1px solid #eee; + border-bottom: 1px solid $footer-border-color; padding-right: 10px; } diff --git a/v4/assets/sass/_header.scss b/v4/assets/sass/_header.scss index 6c8e0f2b0..6a040e52e 100644 --- a/v4/assets/sass/_header.scss +++ b/v4/assets/sass/_header.scss @@ -102,7 +102,7 @@ header { font-size: 1.125em; min-width: 2em; border: transparent; - color: $page-background-color; + color: $header-text-color; } } .languages { @@ -115,7 +115,7 @@ header { a { text-transform: uppercase; font-size: 0.8em; - color: $page-background-color; + color: $header-text-color; letter-spacing: 0.1em; &.active { diff --git a/v4/assets/sass/_main.scss b/v4/assets/sass/_main.scss index ee7affc01..540ec93cd 100644 --- a/v4/assets/sass/_main.scss +++ b/v4/assets/sass/_main.scss @@ -10,7 +10,7 @@ bottom: 50px; width: 2px; height: 100%; - background: rgba(0, 0, 0, 0.05); + background: rgba($logo-color, 0.1); z-index: 1; } @@ -22,7 +22,7 @@ bottom: 32px; height: 20px; width: 20px; - background: #ddd; + background: darken($bubble-color,1); border-radius: 999px; z-index: 10; } diff --git a/v4/assets/sass/_pagination.scss b/v4/assets/sass/_pagination.scss index 94724b4d6..f52072014 100644 --- a/v4/assets/sass/_pagination.scss +++ b/v4/assets/sass/_pagination.scss @@ -13,8 +13,8 @@ padding: 0.8em 1.4em; text-decoration: none; font-weight: bold; - background-color: #b4b4b4; - color: #fff; + background-color: $article-background-color; + color: $text-color; &:hover { background-color: $highlight-color; diff --git a/v4/assets/sass/dark-theme.scss b/v4/assets/sass/dark-theme.scss index cc539b492..5ba7c9726 100644 --- a/v4/assets/sass/dark-theme.scss +++ b/v4/assets/sass/dark-theme.scss @@ -9,31 +9,31 @@ $content-font: {{ .Param "contentFont" | default "'Open Sans',sans-serif" }}; $article-footer-font: {{ .Param "articleFooterFont" | default "'Fira Code',monospace" }}; $code-block-font: {{ .Param "codeBlockFont" | default "'Fira Code',monospace" }}; -$page-background-color: {{ .Param "pageBackgroundColor" | default "invert(#f1f1f1)" }}; +$page-background-color: {{ .Param "pageBackgroundColor" | default "#333" }}; $base-color: {{ .Param "baseColor" | default "#1d1f38" }}; $special-color: {{ .Param "specialColor" | default "#2D3642" }}; $highlight-color: {{ .Param "highlightColor" | default "saturate(#5c8b59,20)" }}; $text-color: {{ .Param "textColor" | default "darken(invert(#222), 20)" }}; $nav-background-color: {{ .Param "navBackgroundColor" | default "$special-color" }}; -$nav-text-color: {{ .Param "navTextColor" | default "$page-background-color" }}; +$nav-text-color: {{ .Param "navTextColor" | default "darken(#f1f1f1,20)" }}; $algolia-search-box-color: {{ .Param "algoliaSearchBoxColor" | default "#444" }}; $algolia-search-box-icon-color: {{ .Param "algoliaSearchBoxIconColor" | default "#888" }}; $algolia-search-box-background-color: {{ .Param "algoliaSearchBoxBackgroundColor" | default "#fafafa" }}; $algolia-border-color: {{ .Param "algoliaBorderColor" | default "#e4e4e4" }}; -$header-text-color: {{ .Param "headerTextColor" | default "darken($page-background-color, 20)" }}; -$logo-color: {{ .Param "logoColor" | default "darken(invert($page-background-color), 70)" }}; +$header-text-color: {{ .Param "headerTextColor" | default "$nav-text-color" }}; +$logo-color: {{ .Param "logoColor" | default "darken(#f1f1f1, 60)" }}; $bubble-color: {{ .Param "bubbleColor" | default "$logo-color" }}; -$bubble-background-color: {{ .Param "bubbleBackgroundColor" | default "lighter(invert(#ccc), 5)" }}; +$bubble-background-color: {{ .Param "bubbleBackgroundColor" | default "#373737" }}; $bubble-hover-color: {{ .Param "bubbleHoverColor" | default "$highlight-color" }}; -$article-background-color: {{ .Param "articleBackgroundColor" | default "invert(#fff)" }}; +$article-background-color: {{ .Param "articleBackgroundColor" | default "#252525" }}; $meta-text-color: {{ .Param "metaTextColor" | default "invert(#999)" }}; -$meta-border-color: {{ .Param "metaBorderColor" | default "invert(#eee)" }}; +$meta-border-color: {{ .Param "metaBorderColor" | default "#545454" }}; $continue-reading-hover-color: {{ .Param "continueReadingHoverColor" | default "$meta-text-color" }}; -$footer-border-color: {{ .Param "footerBorderColor" | default "invert(#eee)" }}; +$footer-border-color: {{ .Param "footerBorderColor" | default "#222" }}; $footer-background-color: {{ .Param "footerBackgroundColor" | default "invert(rgba(#ffffff, 80))" }}; $footer-headline-color: {{ .Param "footerHeadlineColor" | default "darken(invert(#444),5)" }};