From acef79480ddd506a4246540c69d4ad82610698ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luiz=20F=2E=20A=2E=20de=20Pr=C3=A1?= Date: Wed, 28 Oct 2020 21:37:28 -0300 Subject: [PATCH] Change Colorscheme Toggle Button to be floating (#466) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Moved colour scheme toggle and squashed commits (#433) Co-authored-by: Luiz F. A. de Prá * Fix toggle button code * Add built CSS files Co-authored-by: Jian Liew --- CONTRIBUTORS.md | 3 ++- assets/scss/_float.scss | 25 +++++++++++++++++++ assets/scss/_float_dark.scss | 24 ++++++++++++++++++ assets/scss/_navigation.scss | 4 +++ assets/scss/coder-dark.scss | 1 + assets/scss/coder.scss | 1 + layouts/_default/baseof.html | 1 + layouts/partials/float.html | 7 ++++++ layouts/partials/footer.html | 2 +- layouts/partials/header.html | 10 -------- ...s_1fcd9040f1144c65015c77e7b93bc5ac.content | 2 +- ...scss_1fcd9040f1144c65015c77e7b93bc5ac.json | 2 +- ...s_5e1eb8e37c42cdfb6215b61e44dcfa5f.content | 2 +- ...scss_5e1eb8e37c42cdfb6215b61e44dcfa5f.json | 2 +- 14 files changed, 70 insertions(+), 16 deletions(-) create mode 100644 assets/scss/_float.scss create mode 100644 assets/scss/_float_dark.scss create mode 100644 layouts/partials/float.html diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index c4b88eb..51b373c 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -82,6 +82,7 @@ - [Hussaini Zulkifli](https://github.com/hussaini/) - [Ellison Leão](https://github.com/ellisonleao) - [Lucas de Oliveira](https://github.com/lucas-dOliveira) +- [Jian Loong Liew](https://github.com/JianLoong) - [earnest ma](https://github.com/earnestma) - [TMineCola](https://github.com/tminecola) -- [Arafat Hasan](https://github.com/arafat-hasan) \ No newline at end of file +- [Arafat Hasan](https://github.com/arafat-hasan) diff --git a/assets/scss/_float.scss b/assets/scss/_float.scss new file mode 100644 index 0000000..c98e1f4 --- /dev/null +++ b/assets/scss/_float.scss @@ -0,0 +1,25 @@ +.float-container { + bottom: 2rem; + right: 2rem; + z-index: 100; + position: fixed; + font-size: 1.6em; + a { + display: block; + color: $alt-fg-color; + background-color: $alt-bg-color; + font-size: 2.0rem; + padding: 0.5rem; + border-radius: 0.5rem; + opacity: 50%; + transition: opacity 0.5s, color 0.5s; + &:hover, &:focus { + color: $link-color; + opacity: 100%; + @media only screen and (max-width : 768px) { + color: $alt-fg-color; + opacity: 50%; + } + } + } +} diff --git a/assets/scss/_float_dark.scss b/assets/scss/_float_dark.scss new file mode 100644 index 0000000..40b984b --- /dev/null +++ b/assets/scss/_float_dark.scss @@ -0,0 +1,24 @@ +@mixin float_dark { + .float-container { + a { + color: $alt-fg-color-dark; + background-color: $alt-bg-color-dark; + &:hover, &:focus { + color: $link-color-dark; + @media only screen and (max-width : 768px) { + color: $alt-fg-color-dark; + } + } + } + } +} + +body.colorscheme-dark { + @include float_dark() +} + + body.colorscheme-auto { + @media (prefers-color-scheme: dark) { + @include float_dark() + } +} diff --git a/assets/scss/_navigation.scss b/assets/scss/_navigation.scss index 84f7014..343a46d 100644 --- a/assets/scss/_navigation.scss +++ b/assets/scss/_navigation.scss @@ -74,6 +74,10 @@ margin: 1.7rem 0; font-size: 2.4rem; line-height: inherit; + bottom: 2rem; + left: 2rem; + z-index: 100; + position: fixed; } #menu-toggle { display: none; diff --git a/assets/scss/coder-dark.scss b/assets/scss/coder-dark.scss index 2cd4cf9..9f7576b 100644 --- a/assets/scss/coder-dark.scss +++ b/assets/scss/coder-dark.scss @@ -3,3 +3,4 @@ @import "content_dark"; @import "navigation_dark"; @import "footer_dark"; +@import "float_dark"; diff --git a/assets/scss/coder.scss b/assets/scss/coder.scss index 2866b6c..6e27811 100644 --- a/assets/scss/coder.scss +++ b/assets/scss/coder.scss @@ -4,3 +4,4 @@ @import "navigation"; @import "pagination"; @import "footer"; +@import "float"; diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 516cfef..ec7eff4 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -99,6 +99,7 @@ + {{ partial "float" . }}
{{ partial "header.html" . }} diff --git a/layouts/partials/float.html b/layouts/partials/float.html new file mode 100644 index 0000000..2113d07 --- /dev/null +++ b/layouts/partials/float.html @@ -0,0 +1,7 @@ +{{ if not .Site.Params.hidecolorschemetoggle }} +
+ + + +
+{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index b2048ee..5131448 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -23,4 +23,4 @@ {{ end }} -{{ end }} \ No newline at end of file +{{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index c4b5cb5..d2d9967 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -4,11 +4,6 @@ {{ .Site.Title }} {{ if or .Site.Menus.main .Site.IsMultiLingual }} - {{ if not .Site.Params.hidecolorschemetoggle }} - - - - {{ end }}