diff --git a/v4/assets/sass/_articles.scss b/v4/assets/sass/_articles.scss index 3f43f1541..e97d32d59 100644 --- a/v4/assets/sass/_articles.scss +++ b/v4/assets/sass/_articles.scss @@ -11,7 +11,7 @@ article { content: ""; display: block; border: 11px solid transparent; - border-right-color: #ddd; + border-right-color: $con-line-colorB; position: absolute; top: 49px; left: -22px; @@ -21,7 +21,7 @@ article { content: ""; display: block; border: 10px solid transparent; - border-right-color: #fff; + border-right-color: #con-line-colorA; position: absolute; top: 50px; left: -20px; @@ -151,7 +151,7 @@ article { margin-top: 1.25em; li { - border-bottom: 1px solid #eee; + border-bottom: 1px solid $footer-border-color; padding-right: 10px; } @@ -170,19 +170,23 @@ article { &:hover { left: 10px; - color: $base-color; + color: $text-color; text-decoration: none; } } } } + code { + background-color: rgba(150,150,160,0.2); + border: none; + } blockquote { - background-color: #f6f6f6; + background-color: $blockquote-background-color; font-family: $headline-font; margin: 1.5em 0; padding: 2em; - border-left: 0.5em solid #ededed; + border-left: 0.5em solid rgba(invert($blockquote-background-color),0.2); font-size: 1.05em; cite { @@ -226,7 +230,7 @@ article { li { display: inherit; - color: $text-color; + color: $highlight-color; a { color: inherit; @@ -234,7 +238,7 @@ article { padding: 0; &:hover { - color: $highlight-color; + color: $text-color; background-color: transparent; } } @@ -478,4 +482,5 @@ article { #comments-container { margin-left: 100px; padding-bottom: 1.2em; + color: #fff; } diff --git a/v4/assets/sass/_footer.scss b/v4/assets/sass/_footer.scss index 855583ad7..7ff39e2cf 100644 --- a/v4/assets/sass/_footer.scss +++ b/v4/assets/sass/_footer.scss @@ -24,6 +24,15 @@ footer { text-transform: uppercase; color: $footer-headline-color; padding-bottom: 0.75em; + display: block; + } + + a { + strong{ + &:hover { + color: $highlight-color; + } + } } ul { @@ -45,7 +54,7 @@ footer { &:hover { left: 10px; - color: $base-color; + color: $text-color; } } } @@ -113,10 +122,6 @@ footer { width: 100%; margin-left: 0; } - - strong { - display: block; - } } } } diff --git a/v4/assets/sass/_header.scss b/v4/assets/sass/_header.scss index 6a040e52e..ee7a1476f 100644 --- a/v4/assets/sass/_header.scss +++ b/v4/assets/sass/_header.scss @@ -95,15 +95,18 @@ header { display: flex; border-top-right-radius: 4px; border-top-left-radius: 4px; - button { - margin-top: 0; - margin-bottom: 0; - padding: 0.375em 0.75em; - font-size: 1.125em; - min-width: 2em; - border: transparent; - color: $header-text-color; - } + button { + margin-top: 0; + margin-bottom: 0; + padding: 0.375em 0.75em; + font-size: 1.125em; + min-width: 2em; + border: transparent; + color: $header-text-color; + &:hover { + color: $highlight-color; + } + } } .languages { background-color: $special-color; @@ -126,6 +129,9 @@ header { content: " | "; color: inherit; } + &:hover { + color: $highlight-color; + } } } } @@ -144,5 +150,8 @@ header { &.permanentTopNav { display: none; } + &:hover { + color: $highlight-color; + } } } diff --git a/v4/assets/sass/_main.scss b/v4/assets/sass/_main.scss index 540ec93cd..44fc967fb 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($logo-color, 0.1); + background: $con-line-colorA; z-index: 1; } @@ -22,7 +22,7 @@ bottom: 32px; height: 20px; width: 20px; - background: darken($bubble-color,1); + background: $con-line-colorB; border-radius: 999px; z-index: 10; } diff --git a/v4/assets/sass/_topnav.scss b/v4/assets/sass/_topnav.scss index 81f9f1988..c223ce1ef 100644 --- a/v4/assets/sass/_topnav.scss +++ b/v4/assets/sass/_topnav.scss @@ -119,12 +119,17 @@ nav { font-size: 0.75em; text-align: right; padding: 0.5em 1em; - background-color: $page-background-color; + border-radius: 0.5em; + background-color: rgba($page-background-color,0.6); img { width: 3.5em; position: relative; - top: 0.1em; + // top: 0.1em; + display: inline-block; + vertical-align: middle; + padding: 0.5em; + background: rgba(#fff,0.5); } } } @@ -138,7 +143,7 @@ nav { &:hover, &:focus { - background-color: darken($algolia-search-box-background-color, 2); + background-color: darken($algolia-search-box-background-color, 5); } .title { @@ -197,8 +202,8 @@ nav { } .aa-dropdown-menu { - background-color: #fff; - border: 1px solid rgba($algolia-border-color, 0.6); + background-color: $algolia-search-box-background-color; + border: 1px solid rgba($algolia-border-color, 0.2); min-width: 300px; margin-top: 10px; box-sizing: border-box; @@ -210,12 +215,12 @@ nav { } .aa-suggestion + .aa-suggestion { - border-top: 1px solid rgba($algolia-border-color, 0.6); + border-top: 1px solid rgba($algolia-border-color, 0.2); } .aa-suggestions-category { - border-bottom: 1px solid rgba($algolia-border-color, 0.6); - border-top: 1px solid rgba($algolia-border-color, 0.6); + border-bottom: 1px solid rgba($algolia-border-color, 0.2); + border-top: 1px solid rgba($algolia-border-color, 0.2); padding: 6px 12px; } } diff --git a/v4/assets/sass/dark-theme.scss b/v4/assets/sass/dark-theme.scss index 5ba7c9726..b86847a57 100644 --- a/v4/assets/sass/dark-theme.scss +++ b/v4/assets/sass/dark-theme.scss @@ -14,12 +14,13 @@ $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)" }}; +$blockquote-background-color: {{ .Param "blockquoteBackgroundColor" | default "rgba(99,110,110,0.2)" }}; $nav-background-color: {{ .Param "navBackgroundColor" | default "$special-color" }}; $nav-text-color: {{ .Param "navTextColor" | default "darken(#f1f1f1,20)" }}; -$algolia-search-box-color: {{ .Param "algoliaSearchBoxColor" | default "#444" }}; +$algolia-search-box-color: {{ .Param "algoliaSearchBoxColor" | default "$nav-text-color" }}; $algolia-search-box-icon-color: {{ .Param "algoliaSearchBoxIconColor" | default "#888" }}; -$algolia-search-box-background-color: {{ .Param "algoliaSearchBoxBackgroundColor" | default "#fafafa" }}; +$algolia-search-box-background-color: {{ .Param "algoliaSearchBoxBackgroundColor" | default "#222" }}; $algolia-border-color: {{ .Param "algoliaBorderColor" | default "#e4e4e4" }}; $header-text-color: {{ .Param "headerTextColor" | default "$nav-text-color" }}; @@ -27,14 +28,16 @@ $logo-color: {{ .Param "logoColor" | default "darken(#f1f1f1, 60)" }}; $bubble-color: {{ .Param "bubbleColor" | default "$logo-color" }}; $bubble-background-color: {{ .Param "bubbleBackgroundColor" | default "#373737" }}; $bubble-hover-color: {{ .Param "bubbleHoverColor" | default "$highlight-color" }}; +$con-line-colorA: {{ .Param "conLineColorA" | default "rgba(invert(#000),0.05)" }}; +$con-line-colorB: {{ .Param "conLineColorB" | default "#444" }}; -$article-background-color: {{ .Param "articleBackgroundColor" | default "#252525" }}; -$meta-text-color: {{ .Param "metaTextColor" | default "invert(#999)" }}; +$article-background-color: {{ .Param "articleBackgroundColor" | default "#222" }}; +$meta-text-color: {{ .Param "metaTextColor" | default "darken(#f1f1f1,40)" }}; $meta-border-color: {{ .Param "metaBorderColor" | default "#545454" }}; $continue-reading-hover-color: {{ .Param "continueReadingHoverColor" | default "$meta-text-color" }}; -$footer-border-color: {{ .Param "footerBorderColor" | default "#222" }}; -$footer-background-color: {{ .Param "footerBackgroundColor" | default "invert(rgba(#ffffff, 80))" }}; +$footer-border-color: {{ .Param "footerBorderColor" | default "#444" }}; +$footer-background-color: {{ .Param "footerBackgroundColor" | default "#222" }}; $footer-headline-color: {{ .Param "footerHeadlineColor" | default "darken(invert(#444),5)" }}; @mixin featuredImage() { diff --git a/v4/assets/sass/theme.scss b/v4/assets/sass/theme.scss index d8b773381..cf02a99a4 100644 --- a/v4/assets/sass/theme.scss +++ b/v4/assets/sass/theme.scss @@ -14,6 +14,7 @@ $base-color: {{ .Param "baseColor" | default "#1d1f38" }}; $special-color: {{ .Param "specialColor" | default "#2D3642" }}; $highlight-color: {{ .Param "highlightColor" | default "#5c8b59" }}; $text-color: {{ .Param "textColor" | default "#222" }}; +$blockquote-background-color: {{ .Param "blockquoteBackgroundColor" | default "#f6f6f6" }}; $nav-background-color: {{ .Param "navBackgroundColor" | default "$special-color" }}; $nav-text-color: {{ .Param "navTextColor" | default "$page-background-color" }}; @@ -27,6 +28,8 @@ $logo-color: {{ .Param "logoColor" | default "darken($page-background-color, 1)" $bubble-color: {{ .Param "bubbleColor" | default "#fff" }}; $bubble-background-color: {{ .Param "bubbleBackgroundColor" | default "#ccc" }}; $bubble-hover-color: {{ .Param "bubbleHoverColor" | default "$highlight-color" }}; +$con-line-colorA: {{ .Param "conLineColorA" | default "rgba(#000,0.05)" }}; +$con-line-colorB: {{ .Param "conLineColorB" | default "#ddd" }}; $article-background-color: {{ .Param "articleBackgroundColor" | default "#fff" }}; $meta-text-color: {{ .Param "metaTextColor" | default "#999" }}; diff --git a/v4/layouts/partials/header.html b/v4/layouts/partials/header.html index c85f6bf6b..800322b99 100644 --- a/v4/layouts/partials/header.html +++ b/v4/layouts/partials/header.html @@ -39,7 +39,7 @@

{{ if .Site.Params.enableLightDarkMode | default 1 }}
- +
{{ end }} {{ if and (gt .Site.Languages 1) (.Site.Params.showHeaderLanguageChooser | default true) }}