Improve the layout of sidebar icons

This commit is contained in:
Cotes Chung 2021-09-21 22:37:28 +08:00
parent fa0155de6f
commit 395b24736a
9 changed files with 43 additions and 66 deletions

View file

@ -2,7 +2,7 @@
-
type: github
icon: 'fab fa-github-alt'
icon: 'fab fa-github'
-
type: twitter
icon: 'fab fa-twitter'

View file

@ -49,7 +49,7 @@
</ul> <!-- ul.nav.flex-column -->
<div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center">
<div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center align-items-center">
{% for entry in site.data.contact %}
{% capture url %}

View file

@ -7,16 +7,9 @@
@if $dark-mode {
@include dark-scheme;
.mode-toggle {
transform: rotateY(180deg);
}
} @else {
@include light-scheme;
.mode-toggle {
transform: none;
}
}
}
@ -645,12 +638,12 @@ $sidebar-display: "sidebar-display";
scrollbar-width: none; /* Firefox */
a {
@include sidebar-links;
@extend %sidebar-links;
&:hover {
@include no-text-decoration;
color: var(--sidebar-hover-color) !important;
color: var(--sidebar-active-color) !important;
}
}
@ -808,20 +801,18 @@ $sidebar-display: "sidebar-display";
@extend %clickable-transition;
}
i {
line-height: 1.75rem; // default line-height in body
vertical-align: middle;
}
#mode-toggle-wrapper {
@extend %icon;
i {
@include sidebar-links;
@extend %sidebar-links;
@extend %cursor-pointer;
@extend %clickable-transition;
margin: 0;
font-size: 1.05rem;
text-align: center;
position: relative;
bottom: 1px;
}
}
@ -832,13 +823,10 @@ $sidebar-display: "sidebar-display";
width: 3px;
height: 3px;
border-radius: 50%;
position: relative;
top: 12px;
}
a:hover,
#mode-toggle-wrapper i:hover {
color: var(--sidebar-hover-color);
#mode-toggle-wrapper:hover > i {
color: var(--sidebar-active-color);
}
} // .sidebar-bottom
@ -1602,19 +1590,10 @@ $sidebar-display: "sidebar-display";
.nav-link {
> span {
letter-spacing: 3px;
letter-spacing: 2px;
}
> i {
@include icon-round(1.65rem);
line-height: 1.5rem;
font-size: 0.6rem;
padding-top: 1px;
padding-left: 1px;
position: relative;
bottom: 1px;
&.unloaded {
display: inline-block !important;
}
@ -1628,35 +1607,40 @@ $sidebar-display: "sidebar-display";
padding-left: 3.5rem;
width: 100%;
$icon-block-size: 2rem;
&.justify-content-center {
-webkit-box-pack: start !important;
-ms-flex-pack: start !important;
justify-content: flex-start !important;
}
a {
font-size: 1rem;
width: 3rem;
> span,
> a {
@include ml-mr(0.15rem);
height: $icon-block-size;
margin-bottom: 0.5rem; // wrap line
}
i {
@include icon-round(2rem);
background-color: var(--sidebar-btn-bg);
font-size: 1rem;
width: $icon-block-size;
height: $icon-block-size;
border-radius: 50%;
position: relative;
padding-top: 0.44rem;
margin-top: .7rem; // multi line space
bottom: 0;
}
#mode-toggle-wrapper {
width: 3rem;
i {
top: 11px;
&::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.icon-border {
top: 26px;
top: 0.9rem;
}
} // .sidebar-bottom

View file

@ -65,18 +65,11 @@
text-decoration: none;
}
@mixin sidebar-links {
color: rgba(117, 117, 117, 83%);
%sidebar-links {
color: rgba(117, 117, 117, 0.9);
user-select: none;
}
@mixin icon-round($diameter) {
border: 1px solid;
border-radius: 50%;
width: $diameter;
height: $diameter;
}
@mixin ml-mr($value) {
margin-left: $value;
margin-right: $value;

View file

@ -11,7 +11,7 @@ $sidebar-width-large: 350px !default; // screen width: >= 1650px
/* tabs of sidebar */
$tab-count: 5 !default; // backward compatible (version <= 4.0.2)
$tab-height: 3.2rem !default;
$tab-height: 3rem !default;
$tab-cursor-height: 1.6rem !default;
$cursor-width: 2px !default; // the cursor width of the selected tab

View file

@ -32,9 +32,9 @@
/* Sidebar */
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
--sidebar-muted-color: #6d6c6b;
--sidebar-hover-color: rgb(255 255 255 / 68%);
--sidebar-active-color: rgb(255 255 255 / 68%);
--sidebar-active-color: rgb(255 255 255 / 80%);
--nav-cursor-color: rgb(183, 182, 182);
--sidebar-btn-bg: rgb(117 116 116 / 20%);
/* Topbar */
--topbar-text-color: var(--text-color);

View file

@ -30,9 +30,9 @@
/* Sidebar */
--sidebar-bg: #eeeeee;
--sidebar-muted-color: #a2a19f;
--sidebar-hover-color: #696868;
--sidebar-active-color: #455a64;
--nav-cursor-color: #455a64;
--sidebar-active-color: #424242;
--nav-cursor-color: #757575;
--sidebar-btn-bg: white;
/* Topbar */
--topbar-text-color: rgb(78, 78, 78);

View file

@ -1,6 +1,6 @@
---
title: About
icon: fas fa-info
icon: fas fa-info-circle
order: 4
---

View file

@ -1,6 +1,6 @@
---
layout: tags
title: Tags
icon: fas fa-tags
icon: fas fa-tag
order: 2
---