mirror of
https://github.com/13hannes11/hugo-coder-timeline.git
synced 2024-09-04 00:50:58 +02:00
Change Colorscheme Toggle Button to be floating (#466)
* Moved colour scheme toggle and squashed commits (#433) Co-authored-by: Luiz F. A. de Prá <luizdepra@users.noreply.github.com> * Fix toggle button code * Add built CSS files Co-authored-by: Jian Liew <jianloongliew@gmail.com>
This commit is contained in:
Luiz F. A. de Prá
committed by
GitHub
GitHub
parent
141dedd0c0
commit
acef79480d
@@ -82,6 +82,7 @@
|
|||||||
- [Hussaini Zulkifli](https://github.com/hussaini/)
|
- [Hussaini Zulkifli](https://github.com/hussaini/)
|
||||||
- [Ellison Leão](https://github.com/ellisonleao)
|
- [Ellison Leão](https://github.com/ellisonleao)
|
||||||
- [Lucas de Oliveira](https://github.com/lucas-dOliveira)
|
- [Lucas de Oliveira](https://github.com/lucas-dOliveira)
|
||||||
|
- [Jian Loong Liew](https://github.com/JianLoong)
|
||||||
- [earnest ma](https://github.com/earnestma)
|
- [earnest ma](https://github.com/earnestma)
|
||||||
- [TMineCola](https://github.com/tminecola)
|
- [TMineCola](https://github.com/tminecola)
|
||||||
- [Arafat Hasan](https://github.com/arafat-hasan)
|
- [Arafat Hasan](https://github.com/arafat-hasan)
|
||||||
25
assets/scss/_float.scss
Normal file
25
assets/scss/_float.scss
Normal file
@@ -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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
24
assets/scss/_float_dark.scss
Normal file
24
assets/scss/_float_dark.scss
Normal file
@@ -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()
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -74,6 +74,10 @@
|
|||||||
margin: 1.7rem 0;
|
margin: 1.7rem 0;
|
||||||
font-size: 2.4rem;
|
font-size: 2.4rem;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
|
bottom: 2rem;
|
||||||
|
left: 2rem;
|
||||||
|
z-index: 100;
|
||||||
|
position: fixed;
|
||||||
}
|
}
|
||||||
#menu-toggle {
|
#menu-toggle {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
@@ -3,3 +3,4 @@
|
|||||||
@import "content_dark";
|
@import "content_dark";
|
||||||
@import "navigation_dark";
|
@import "navigation_dark";
|
||||||
@import "footer_dark";
|
@import "footer_dark";
|
||||||
|
@import "float_dark";
|
||||||
|
|||||||
@@ -4,3 +4,4 @@
|
|||||||
@import "navigation";
|
@import "navigation";
|
||||||
@import "pagination";
|
@import "pagination";
|
||||||
@import "footer";
|
@import "footer";
|
||||||
|
@import "float";
|
||||||
|
|||||||
@@ -99,6 +99,7 @@
|
|||||||
<body class="{{ $csClass }}{{ if .Site.Params.rtl }} rtl{{ end }}"
|
<body class="{{ $csClass }}{{ if .Site.Params.rtl }} rtl{{ end }}"
|
||||||
onload="{{ if .Site.Params.enableTwemoji }} twemoji.parse(document.body); {{ end }}"
|
onload="{{ if .Site.Params.enableTwemoji }} twemoji.parse(document.body); {{ end }}"
|
||||||
>
|
>
|
||||||
|
{{ partial "float" . }}
|
||||||
<main class="wrapper">
|
<main class="wrapper">
|
||||||
{{ partial "header.html" . }}
|
{{ partial "header.html" . }}
|
||||||
|
|
||||||
|
|||||||
7
layouts/partials/float.html
Normal file
7
layouts/partials/float.html
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{{ if not .Site.Params.hidecolorschemetoggle }}
|
||||||
|
<div class="float-container">
|
||||||
|
<a id="dark-mode-toggle" class="colorscheme-toggle">
|
||||||
|
<i class="fa fa-adjust fa-fw" aria-hidden="true"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
@@ -4,11 +4,6 @@
|
|||||||
{{ .Site.Title }}
|
{{ .Site.Title }}
|
||||||
</a>
|
</a>
|
||||||
{{ if or .Site.Menus.main .Site.IsMultiLingual }}
|
{{ if or .Site.Menus.main .Site.IsMultiLingual }}
|
||||||
{{ if not .Site.Params.hidecolorschemetoggle }}
|
|
||||||
<span id="dark-mode-toggle" class="float-right">
|
|
||||||
<i class="fa fa-adjust fa-fw" aria-hidden="true"></i>
|
|
||||||
</span>
|
|
||||||
{{ end }}
|
|
||||||
<input type="checkbox" id="menu-toggle" />
|
<input type="checkbox" id="menu-toggle" />
|
||||||
<label class="menu-button float-right" for="menu-toggle">
|
<label class="menu-button float-right" for="menu-toggle">
|
||||||
<i class="fa fa-bars fa-fw" aria-hidden="true"></i>
|
<i class="fa fa-bars fa-fw" aria-hidden="true"></i>
|
||||||
@@ -38,11 +33,6 @@
|
|||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ if not .Site.Params.hidecolorschemetoggle }}
|
|
||||||
<li class="navigation-item separator">
|
|
||||||
<span>|</span>
|
|
||||||
</li>
|
|
||||||
{{ end }}
|
|
||||||
</ul>
|
</ul>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
body.colorscheme-dark{color:#dadada;background-color:#212121}body.colorscheme-dark a{color:#42a5f5}body.colorscheme-dark h1,body.colorscheme-dark h2,body.colorscheme-dark h3,body.colorscheme-dark h4,body.colorscheme-dark h5,body.colorscheme-dark h6{color:#dadada}body.colorscheme-dark code{background-color:#424242;color:#dadada}body.colorscheme-dark pre code{background-color:inherit;color:inherit}body.colorscheme-dark blockquote{border-left:2px solid #424242}body.colorscheme-dark table td,body.colorscheme-dark table th{border:2px solid #dadada}@media(prefers-color-scheme:dark){body.colorscheme-auto{color:#dadada;background-color:#212121}body.colorscheme-auto a{color:#42a5f5}body.colorscheme-auto h1,body.colorscheme-auto h2,body.colorscheme-auto h3,body.colorscheme-auto h4,body.colorscheme-auto h5,body.colorscheme-auto h6{color:#dadada}body.colorscheme-auto code{background-color:#424242;color:#dadada}body.colorscheme-auto pre code{background-color:inherit;color:inherit}body.colorscheme-auto blockquote{border-left:2px solid #424242}body.colorscheme-auto table td,body.colorscheme-auto table th{border:2px solid #dadada}}body.colorscheme-dark .content .list ul li .title{color:#dadada}body.colorscheme-dark .content .list ul li .title:hover,body.colorscheme-dark .content .list ul li .title:focus{color:#42a5f5}body.colorscheme-dark .content .centered .about ul li a{color:#dadada}body.colorscheme-dark .content .centered .about ul li a:hover,body.colorscheme-dark .content .centered .about ul li a:focus{color:#42a5f5}@media(prefers-color-scheme:dark){body.colorscheme-auto .content .list ul li .title{color:#dadada}body.colorscheme-auto .content .list ul li .title:hover,body.colorscheme-auto .content .list ul li .title:focus{color:#42a5f5}body.colorscheme-auto .content .centered .about ul li a{color:#dadada}body.colorscheme-auto .content .centered .about ul li a:hover,body.colorscheme-auto .content .centered .about ul li a:focus{color:#42a5f5}}body.colorscheme-dark .navigation a,body.colorscheme-dark .navigation span{color:#dadada}body.colorscheme-dark .navigation a:hover,body.colorscheme-dark .navigation a:focus{color:#42a5f5}@media only screen and (max-width:768px){body.colorscheme-dark .navigation .navigation-list{background-color:#212121;border-top:solid 2px #424242;border-bottom:solid 2px #424242}}@media only screen and (max-width:768px){body.colorscheme-dark .navigation .navigation-list .menu-separator{border-top:2px solid #dadada}}@media only screen and (max-width:768px){body.colorscheme-dark .navigation #menu-toggle:checked+label>i{color:#424242}}body.colorscheme-dark .navigation i{color:#dadada}body.colorscheme-dark .navigation i:hover,body.colorscheme-dark .navigation i:focus{color:#42a5f5}body.colorscheme-dark .navigation .menu-button i:hover,body.colorscheme-dark .navigation .menu-button i:focus{color:#dadada}@media(prefers-color-scheme:dark){body.colorscheme-auto .navigation a,body.colorscheme-auto .navigation span{color:#dadada}body.colorscheme-auto .navigation a:hover,body.colorscheme-auto .navigation a:focus{color:#42a5f5}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation .navigation-list{background-color:#212121;border-top:solid 2px #424242;border-bottom:solid 2px #424242}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation .navigation-list .menu-separator{border-top:2px solid #dadada}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation #menu-toggle:checked+label>i{color:#424242}}@media(prefers-color-scheme:dark){body.colorscheme-auto .navigation i{color:#dadada}body.colorscheme-auto .navigation i:hover,body.colorscheme-auto .navigation i:focus{color:#42a5f5}body.colorscheme-auto .navigation .menu-button i:hover,body.colorscheme-auto .navigation .menu-button i:focus{color:#dadada}}body.colorscheme-dark .footer a{color:#42a5f5}@media(prefers-color-scheme:dark){body.colorscheme-auto .footer a{color:#42a5f5}}
|
body.colorscheme-dark{color:#dadada;background-color:#212121}body.colorscheme-dark a{color:#42a5f5}body.colorscheme-dark h1,body.colorscheme-dark h2,body.colorscheme-dark h3,body.colorscheme-dark h4,body.colorscheme-dark h5,body.colorscheme-dark h6{color:#dadada}body.colorscheme-dark code{background-color:#424242;color:#dadada}body.colorscheme-dark pre code{background-color:inherit;color:inherit}body.colorscheme-dark blockquote{border-left:2px solid #424242}body.colorscheme-dark table td,body.colorscheme-dark table th{border:2px solid #dadada}@media(prefers-color-scheme:dark){body.colorscheme-auto{color:#dadada;background-color:#212121}body.colorscheme-auto a{color:#42a5f5}body.colorscheme-auto h1,body.colorscheme-auto h2,body.colorscheme-auto h3,body.colorscheme-auto h4,body.colorscheme-auto h5,body.colorscheme-auto h6{color:#dadada}body.colorscheme-auto code{background-color:#424242;color:#dadada}body.colorscheme-auto pre code{background-color:inherit;color:inherit}body.colorscheme-auto blockquote{border-left:2px solid #424242}body.colorscheme-auto table td,body.colorscheme-auto table th{border:2px solid #dadada}}body.colorscheme-dark .content .list ul li .title{color:#dadada}body.colorscheme-dark .content .list ul li .title:hover,body.colorscheme-dark .content .list ul li .title:focus{color:#42a5f5}body.colorscheme-dark .content .centered .about ul li a{color:#dadada}body.colorscheme-dark .content .centered .about ul li a:hover,body.colorscheme-dark .content .centered .about ul li a:focus{color:#42a5f5}@media(prefers-color-scheme:dark){body.colorscheme-auto .content .list ul li .title{color:#dadada}body.colorscheme-auto .content .list ul li .title:hover,body.colorscheme-auto .content .list ul li .title:focus{color:#42a5f5}body.colorscheme-auto .content .centered .about ul li a{color:#dadada}body.colorscheme-auto .content .centered .about ul li a:hover,body.colorscheme-auto .content .centered .about ul li a:focus{color:#42a5f5}}body.colorscheme-dark .navigation a,body.colorscheme-dark .navigation span{color:#dadada}body.colorscheme-dark .navigation a:hover,body.colorscheme-dark .navigation a:focus{color:#42a5f5}@media only screen and (max-width:768px){body.colorscheme-dark .navigation .navigation-list{background-color:#212121;border-top:solid 2px #424242;border-bottom:solid 2px #424242}}@media only screen and (max-width:768px){body.colorscheme-dark .navigation .navigation-list .menu-separator{border-top:2px solid #dadada}}@media only screen and (max-width:768px){body.colorscheme-dark .navigation #menu-toggle:checked+label>i{color:#424242}}body.colorscheme-dark .navigation i{color:#dadada}body.colorscheme-dark .navigation i:hover,body.colorscheme-dark .navigation i:focus{color:#42a5f5}body.colorscheme-dark .navigation .menu-button i:hover,body.colorscheme-dark .navigation .menu-button i:focus{color:#dadada}@media(prefers-color-scheme:dark){body.colorscheme-auto .navigation a,body.colorscheme-auto .navigation span{color:#dadada}body.colorscheme-auto .navigation a:hover,body.colorscheme-auto .navigation a:focus{color:#42a5f5}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation .navigation-list{background-color:#212121;border-top:solid 2px #424242;border-bottom:solid 2px #424242}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation .navigation-list .menu-separator{border-top:2px solid #dadada}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation #menu-toggle:checked+label>i{color:#424242}}@media(prefers-color-scheme:dark){body.colorscheme-auto .navigation i{color:#dadada}body.colorscheme-auto .navigation i:hover,body.colorscheme-auto .navigation i:focus{color:#42a5f5}body.colorscheme-auto .navigation .menu-button i:hover,body.colorscheme-auto .navigation .menu-button i:focus{color:#dadada}}body.colorscheme-dark .footer a{color:#42a5f5}@media(prefers-color-scheme:dark){body.colorscheme-auto .footer a{color:#42a5f5}}body.colorscheme-dark .float-container a{color:#dadada;background-color:#424242}body.colorscheme-dark .float-container a:hover,body.colorscheme-dark .float-container a:focus{color:#42a5f5}@media only screen and (max-width:768px){body.colorscheme-dark .float-container a:hover,body.colorscheme-dark .float-container a:focus{color:#dadada}}@media(prefers-color-scheme:dark){body.colorscheme-auto .float-container a{color:#dadada;background-color:#424242}body.colorscheme-auto .float-container a:hover,body.colorscheme-auto .float-container a:focus{color:#42a5f5}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .float-container a:hover,body.colorscheme-auto .float-container a:focus{color:#dadada}}
|
||||||
@@ -1 +1 @@
|
|||||||
{"Target":"css/coder-dark.min.ba5a9c70b9b1a615a836cc5f491aceda69f2fbda59bc30b873d6d37213b77c7b.css","MediaType":"text/css","Data":{"Integrity":"sha256-ulqccLmxphWoNsxfSRrO2mny+9pZvDC4c9bTchO3fHs="}}
|
{"Target":"css/coder-dark.min.126ad3988d46bdae6217a11105b53c9662bca05f39d42d3c0fb366919d334620.css","MediaType":"text/css","Data":{"Integrity":"sha256-EmrTmI1Gva5iF6ERBbU8lmK8oF851C08D7NmkZ0zRiA="}}
|
||||||
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
|||||||
{"Target":"css/coder.min.f19a84724525d6c44f67f32a7454077c01059aa7249da07789336656eaf64489.css","MediaType":"text/css","Data":{"Integrity":"sha256-8ZqEckUl1sRPZ/MqdFQHfAEFmqcknaB3iTNmVur2RIk="}}
|
{"Target":"css/coder.min.58a9be249af4e3a0844c3877e24a6d4ad96cf35e6bf0764218fa50801b49d7f4.css","MediaType":"text/css","Data":{"Integrity":"sha256-WKm+JJr046CETDh34kptStls815r8HZCGPpQgBtJ1/Q="}}
|
||||||
Reference in New Issue
Block a user