13hannes11/hugo-coder-timeline
1
0
Fork 0
mirror of https://github.com/13hannes11/hugo-coder-timeline.git synced 2024-09-04 00:50:58 +02:00
Code Issues Projects Releases Wiki Activity

Add theme toggle button feature (#358)

Browse Source 
* Add theme toggle button feature

* Add theme toggle button feature

* Replaced svg icon with FA icon + fixed indentation + refactored css

* Added back colorsheme configurations + script moved to be process by hugo pipe

* Make release

* Fix toggle button not working when loading new page + setTheme() refactor

* Make release

* Update exampleSite/config.toml

Co-authored-by: Luiz F. A. de Prá <luizdepra@users.noreply.github.com>
This commit is contained in:
Clément Pannetier
2020-08-11 20:51:13 +02:00
committed by GitHub
parent b3237d1ead
commit be7b79af62
12 changed files with 103 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
assets/scss/_navigation.scss
View File

@@ -55,6 +55,11 @@
margin-right: 1.0rem;
}
}
.separator {
@media only screen and (max-width : 768px) {
display: none;
}
}
.menu-separator {
@media only screen and (max-width : 768px) {
border-top: 2px solid $fg-color;
@@ -65,10 +70,15 @@
}
}
}
#dark-mode-toggle {
margin: 1.7rem 0;
font-size: 2.4rem;
line-height: inherit;
}
#menu-toggle {
display: none;
@media only screen and (max-width : 768px) {
&:checked + label {
&:checked + label > i {
color: $alt-bg-color;
}
&:checked + label + ul {
@@ -82,15 +92,17 @@
display: none;
@media only screen and (max-width : 768px) {
display: block;
margin: 1.8rem 0;
font-size: 2.4rem;
font-weight: 400;
line-height: 6.0rem;
color: $fg-color;
cursor: pointer;
&:hover,
&:focus {
color: $link-color
}
}
}
i {
color: $fg-color;
cursor: pointer;
&:hover,
&:focus {
color: $link-color;
}
}
}

14
assets/scss/_navigation_dark.scss
View File

@@ -25,18 +25,16 @@
}
#menu-toggle {
@media only screen and (max-width : 768px) {
&:checked + label {
&:checked + label > i {
color: $alt-bg-color-dark;
}
}
}
.menu-button {
@media only screen and (max-width : 768px) {
color: $fg-color-dark;
&:hover,
&:focus {
color: $link-color-dark;
}
i {
color: $fg-color-dark;
&:hover,
&:focus {
color: $link-color-dark;
}
}
}