Improve the layout of sidebar icons
This commit is contained in:
parent
fa0155de6f
commit
395b24736a
9 changed files with 43 additions and 66 deletions
|
@ -2,7 +2,7 @@
|
|||
|
||||
-
|
||||
type: github
|
||||
icon: 'fab fa-github-alt'
|
||||
icon: 'fab fa-github'
|
||||
-
|
||||
type: twitter
|
||||
icon: 'fab fa-twitter'
|
||||
|
|
|
@ -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 %}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: About
|
||||
icon: fas fa-info
|
||||
icon: fas fa-info-circle
|
||||
order: 4
|
||||
---
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
layout: tags
|
||||
title: Tags
|
||||
icon: fas fa-tags
|
||||
icon: fas fa-tag
|
||||
order: 2
|
||||
---
|
||||
|
|
Loading…
Reference in a new issue