asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Improved the responsive of sidebar bottom.

Browse source
This commit is contained in:
Cotes Chung 2020-02-20 00:31:28 +08:00
parent 1d61608c71
commit 8b059432d3
2 changed files with 64 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
_includes/sidebar.html
View file

@ -55,12 +55,13 @@
</div><!-- #nav-wrapper --> </div><!-- #nav-wrapper -->
<div class="sidebar-bottom d-flex justify-content-around mt-4"> <div class="sidebar-bottom d-flex flex-wrap justify-content-around mt-4">
{% if site.theme_mode == "dual" %} {% if site.theme_mode == "dual" %}
<span id="mode-toggle-wrapper"> <span id="mode-toggle-wrapper">
{% include mode-toggle.html %} {% include mode-toggle.html %}
</span> </span>
<span class="icon-border"></span>
{% endif %} {% endif %}
<a href="https://github.com/{{ site.github.username }}" target="_blank"> <a href="https://github.com/{{ site.github.username }}" target="_blank">

113
assets/css/main.scss
View file

@ -15,6 +15,7 @@
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
transition: color 0.35s ease-in-out; transition: color 0.35s ease-in-out;
user-select: none; user-select: none;
margin: 0 .25rem;
} }
@mixin icon-round($diameter) { @mixin icon-round($diameter) {
@ -65,6 +66,10 @@ body {
@include sidebar-icon; @include sidebar-icon;
} }
#sidebar .sidebar-bottom .icon-border+a { // the icon behide mode-toggle
margin-left: .1rem;
}
#sidebar .nav-item { #sidebar .nav-item {
height: 20%; height: 20%;
} }
@ -234,35 +239,38 @@ body {
margin-top: 2rem; margin-top: 2rem;
} }
.sidebar-bottom {
#sidebar .sidebar-bottom {
font-size: 1.2rem; font-size: 1.2rem;
margin: 2rem 2.5rem; margin: 2rem 2.5rem 1.6rem;
flex-shrink: 0;
-webkit-flex-shrink: 0;
-ms-flex-shrink: 0;
/*box-shadow: inset 0 0 0.25em 0 rgba(0, 0, 0, 0.22);*/
}
#sidebar .sidebar-bottom a:hover, a {
#sidebar #mode-toggle-wrapper:hover { margin-bottom: .5rem; // icons may have multi lines
color: #fff; }
}
#mode-toggle-wrapper { a:hover, #mode-toggle-wrapper>i:hover {
@include sidebar-icon; color: #fff;
font-size: 1.05rem; }
text-align: center;
}
#mode-toggle-wrapper::after { #mode-toggle-wrapper {
content: ""; i {
background: #525354; @include sidebar-icon;
width: 1px; margin-right: 0;
height: 8px; font-size: 1.05rem;
margin-left: 7px; text-align: center;
margin-right: -6px; position: relative;
margin-bottom: 3px; bottom: 1px;
display: inline-block; }
}
.icon-border {
background: #525354;
width: 1px;
height: 8px;
margin-top: .6rem;
margin-left: .25rem;
margin-right: .25rem;
}
} }
@ -1154,12 +1162,10 @@ table tbody td {
margin-right: 1rem; margin-right: 1rem;
} }
.sidebar-bottom a { #sidebar .sidebar-bottom {
padding: 0 0.6rem; margin-left: 1.5rem;
} margin-right: 1.5rem;
#mode-toggle-wrapper {
padding-left: 1.2rem;
} }
#main-wrapper { #main-wrapper {
@ -1392,27 +1398,23 @@ table tbody td {
display: inline-block!important; display: inline-block!important;
} }
.sidebar-bottom { #sidebar .sidebar-bottom {
margin-left: 3.5rem; margin-left: 3.5rem;
margin-right: 3rem; margin-right: 3rem;
font-size: 1.3rem; font-size: 1.3rem;
padding-bottom: 1rem; a {
} border: 1px solid;
border-radius: 50%;
.sidebar-bottom a { font-size: 1rem;
border: 1px solid; width: 2rem;
border-radius: 50%; height: 2rem;
font-size: 1rem; text-align: center;
width: 2rem; i {
height: 2rem; text-align: center;
text-align: center; width: 1.25em;
} padding-top: .45rem;
}
.sidebar-bottom a>i { }
text-align: center;
width: 1.25em;
padding-top: .45rem;
}
#mode-toggle-wrapper { #mode-toggle-wrapper {
font-size: .9rem; font-size: .9rem;
@ -1421,13 +1423,22 @@ table tbody td {
#mode-toggle-wrapper>i { #mode-toggle-wrapper>i {
@include icon-round(2rem); @include icon-round(2rem);
padding-top: 0.5rem; padding-top: 0.5rem;
bottom: 0;
} }
#mode-toggle-wrapper::after { .icon-border {
height: 14px; height: 14px;
margin-bottom: 0; margin-left: .2rem;
margin-right: .2rem;
margin-bottom: 0;
}
.icon-border+a {
margin-left: 0;
}
} }
footer>div.d-flex { footer>div.d-flex {
max-width: 1150px; max-width: 1150px;
} }