PlexSheep
/
krata
1
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Imported the dark-mode toggle.

This commit is contained in:
Cotes Chung 2020-02-13 17:46:05 +08:00
parent 4390a00604
commit a4435a45ec
2 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_includes/sidebar.html
View File

@ -56,6 +56,11 @@
</div><!-- #nav-wrapper -->
<div class="contact d-flex justify-content-around mt-4">
<span id="mode-toggle-wrapper" class="d-flex justify-content-center align-items-center">
{% include dark-mode-toggle.html %}
</span>
<a href="https://github.com/{{ site.github.username }}" target="_blank">
<i class="fab fa-github-alt"></i>
</a>
@ -69,4 +74,5 @@
<a href="{{ site.baseurl }}/feed.xml" target="_blank">
<i class="fas fa-rss"></i>
</a>
</div>

26
assets/css/main.scss
View File

@ -231,10 +231,26 @@ body {
/*box-shadow: inset 0 0 0.25em 0 rgba(0, 0, 0, 0.22);*/
}
#sidebar .contact a:hover {
#sidebar .contact a:hover,
#sidebar #mode-toggle-wrapper:hover {
color: #fff;
}
#mode-toggle-wrapper {
color: rgb(103, 107, 109);
font-size: 1.05rem;
user-select: none;
transition: color 0.35s ease-in-out;
}
#sidebar #mode-toggle-wrapper>i::after {
content: "";
color: #525354;
border-right: 1px solid;
padding-left: .6rem;
}
/*--- top-bar ---*/
#topbar-wrapper {
@ -1107,6 +1123,10 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
padding: 0 0.6rem;
}
#mode-toggle-wrapper {
padding-left: 1.2rem;
}
#main-wrapper {
margin-left: 210px;
}
@ -1362,6 +1382,10 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
padding-top: .45rem;
}
#mode-toggle-wrapper {
font-size: 1.6rem;
}
footer>div.d-flex {
max-width: 1130px;
}