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

feat(ui): redesign the sidebar

Browse source
This commit is contained in:
Cotes Chung 2023-03-25 02:58:58 +08:00
parent 6d99f5cc36
commit 83bbe4ac93
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
10 changed files with 159 additions and 313 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_data/assets/cross_origin.yml
View file

@ -11,7 +11,7 @@ cdns:
# fonts # fonts
webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;700;900&display=swap webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap
# Libraries # Libraries

16
_includes/sidebar.html
View file

@ -1,9 +1,8 @@
<!-- The Side Bar --> <!-- The Side Bar -->
<div id="sidebar" class="d-flex flex-column align-items-end"> <div id="sidebar" class="d-flex flex-column align-items-end">
<div class="profile-wrapper text-center"> <div class="profile-wrapper">
<div id="avatar"> <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
<a href="{{ '/' | relative_url }}" class="mx-auto">
{% if site.avatar != empty and site.avatar %} {% if site.avatar != empty and site.avatar %}
{% capture avatar_url %} {% capture avatar_url %}
{% if site.avatar contains '://' %} {% if site.avatar contains '://' %}
@ -14,10 +13,9 @@
{{ site.avatar | relative_url }} {{ site.avatar | relative_url }}
{% endif %} {% endif %}
{% endcapture %} {% endcapture %}
<img src="{{ avatar_url | strip }}" alt="avatar" onerror="this.style.display='none'"> <img src="{{ avatar_url | strip }}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
{% endif %} {% endif %}
</a> </a>
</div>
<div class="site-title"> <div class="site-title">
<a href="{{ '/' | relative_url }}">{{ site.title }}</a> <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
@ -26,11 +24,11 @@
</div> </div>
<!-- .profile-wrapper --> <!-- .profile-wrapper -->
<ul class="w-100"> <ul class="flex-grow-1 w-100 pl-0">
<!-- home --> <!-- home -->
<li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}"> <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
<a href="{{ '/' | relative_url }}" class="nav-link"> <a href="{{ '/' | relative_url }}" class="nav-link">
<i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded"></i> <i class="fa-fw fas fa-home"></i>
<span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span> <span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
</a> </a>
</li> </li>
@ -38,7 +36,7 @@
{% for tab in site.tabs %} {% for tab in site.tabs %}
<li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}"> <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
<a href="{{ tab.url | relative_url }}" class="nav-link"> <a href="{{ tab.url | relative_url }}" class="nav-link">
<i class="fa-fw {{ tab.icon }} ml-xl-3 mr-xl-3 unloaded"></i> <i class="fa-fw {{ tab.icon }}"></i>
{% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %} {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
<span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span> <span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
@ -49,7 +47,7 @@
</ul> </ul>
<!-- ul.nav.flex-column --> <!-- ul.nav.flex-column -->
<div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center align-items-center"> <div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
{% unless site.theme_mode %} {% unless site.theme_mode %}
<button class="mode-toggle btn" aria-label="Switch Mode"> <button class="mode-toggle btn" aria-label="Switch Mode">
<i class="fas fa-adjust"></i> <i class="fas fa-adjust"></i>

385
_sass/addon/commons.scss
View file

@ -35,7 +35,6 @@ body {
color: var(--text-color); color: var(--text-color);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-family: $font-family-base; font-family: $font-family-base;
line-height: 1.75;
} }
/* --- Typography --- */ /* --- Typography --- */
@ -732,6 +731,9 @@ mjx-container {
/* --- sidebar layout --- */ /* --- sidebar layout --- */
$sidebar-display: 'sidebar-display'; $sidebar-display: 'sidebar-display';
$btn-gap: 0.8rem; // for the bottom icons
$btn-border-width: 3px;
$btn-mb: 0.5rem;
#sidebar { #sidebar {
@include pl-pr(0); @include pl-pr(0);
@ -754,198 +756,177 @@ $sidebar-display: 'sidebar-display';
-ms-overflow-style: none; /* IE and Edge */ -ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
%sidebar-link-hover {
&:hover {
color: var(--sidebar-active-color);
}
}
a { a {
@extend %sidebar-links; @extend %sidebar-links;
&:hover { &:hover {
@extend %no-decoration; @extend %no-decoration;
color: var(--sidebar-active-color) !important;
} }
} }
#avatar { #avatar {
> a {
display: block; display: block;
width: 6rem; width: 7rem;
height: 6rem; height: 7rem;
border-radius: 50%;
border: 2px solid rgba(222, 222, 222, 0.7);
overflow: hidden; overflow: hidden;
box-shadow: var(--avatar-border-color) 0 0 0 2px;
transform: translateZ(0); /* fixed the zoom in Safari */ transform: translateZ(0); /* fixed the zoom in Safari */
transition: border-color 0.35s ease-in-out;
&:hover {
border-color: white;
}
}
img { img {
width: 100%;
height: 100%;
transition: transform 0.5s; transition: transform 0.5s;
&:hover { &:hover {
transform: scale(1.2); transform: scale(1.2);
} }
} }
} /* #avatar */ }
.profile-wrapper {
@include mt-mb(2.5rem);
@extend %clickable-transition;
padding-left: 2.5rem;
padding-right: 1.25rem;
width: 100%;
}
.site-title { .site-title {
margin-top: 0.55rem; font-weight: 900;
font-size: 1.75rem;
line-height: 1.2;
letter-spacing: 0.25px;
color: rgba(134, 133, 133, 0.99);
margin-top: 1.25rem;
margin-bottom: 0.5rem;
a { a {
@extend %clickable-transition; @extend %clickable-transition;
@extend %sidebar-link-hover;
font-weight: 900;
font-size: 1.5rem;
letter-spacing: 0.5px;
color: rgba(134, 133, 133, 0.99);
} }
} }
.site-subtitle { .site-subtitle {
font-size: 95%; font-size: 95%;
color: var(--sidebar-muted-color); color: var(--sidebar-muted-color);
line-height: 1.25rem; margin-top: 0.25rem;
word-spacing: 1px; word-spacing: 1px;
margin: 0.2rem 1.5rem 0.5rem 1.5rem;
min-height: 3rem; /* avoid vertical shifting in multi-line words */
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.nav-link { ul {
border-radius: 0; margin-bottom: 2rem;
font-size: 0.95rem;
li.nav-item {
opacity: 0.9;
width: 100%;
padding-left: 1.5rem;
padding-right: 1.5rem;
a.nav-link {
@include pt-pb(0.6rem);
display: flex;
align-items: center;
border-radius: 0.75rem;
font-weight: 600; font-weight: 600;
letter-spacing: 1px;
display: table-cell; &:hover {
vertical-align: middle; background-color: var(--sidebar-hover-bg);
} }
.nav-item { i {
text-align: center; font-size: 95%;
display: table; opacity: 0.8;
height: $tab-height; margin-right: 1.5rem;
}
span {
font-size: 90%;
letter-spacing: 0.2px;
}
}
&.active { &.active {
.nav-link { .nav-link {
color: var(--sidebar-active-color); color: var(--sidebar-active-color);
background-color: var(--sidebar-hover-bg);
span {
opacity: 1;
}
} }
} }
&:not(.active) > a { &:not(:first-child) {
@extend %clickable-transition; margin-top: 0.25rem;
} }
} }
ul {
height: $tab-height * $tab-count;
margin-bottom: 2rem;
padding-left: 0;
li {
width: 100%;
&:last-child {
a {
position: relative;
left: calc($cursor-width / 2);
width: 100%;
} }
/* the cursor */
&::after {
display: table;
visibility: hidden;
content: '';
position: relative;
right: 1px;
width: $cursor-width;
height: $tab-cursor-height;
border-radius: 1px;
background-color: var(--nav-cursor-color);
pointer-events: none;
}
}
} /* li */
@mixin fix-cursor($top) {
top: $top;
visibility: visible;
}
@for $i from 1 through $tab-count {
$offset: $tab-count - $i;
$top: (-$offset * $tab-height) +
(($tab-height - $tab-cursor-height) * 0.5);
@if $i < $tab-count {
> li.active:nth-child(#{$i}),
> li.nav-item:nth-child(#{$i}):hover {
~ li:last-child::after {
@include fix-cursor($top);
}
}
} @else {
> li.active:nth-child(#{$i}):last-child::after,
> li.nav-item:nth-child(#{$i}):last-child:hover::after {
@include fix-cursor($top);
}
}
} /* @for */
} /* ul */
.sidebar-bottom { .sidebar-bottom {
margin-bottom: 2.1rem; @include pl-pr(2rem);
@include ml-mr(auto); margin-bottom: 1.5rem;
@include pl-pr(1rem);
%icon { %button {
width: 2.4rem; width: 1.75rem;
height: 1.75rem;
margin-bottom: $btn-mb; // multi line gap
border-radius: 50%;
color: var(--sidebar-btn-color);
background-color: var(--sidebar-btn-bg);
text-align: center; text-align: center;
display: flex;
align-items: center;
justify-content: center;
&:hover {
background-color: var(--sidebar-hover-bg);
}
} }
a { a {
@extend %icon; @extend %button;
@extend %sidebar-link-hover;
@extend %clickable-transition; @extend %clickable-transition;
&:not(:last-child) {
margin-right: $btn-gap;
}
} }
i { i {
font-size: 1.2rem;
line-height: 1.75rem; line-height: 1.75rem;
} }
.mode-toggle { .mode-toggle {
padding: 0; padding: 0;
border: 0; border: 0;
margin-bottom: 1px;
background-color: transparent;
@extend %icon; @extend %button;
@extend %sidebar-links; @extend %sidebar-links;
@extend %sidebar-link-hover;
> i {
@extend %clickable-transition;
}
&:hover > i {
color: var(--sidebar-active-color);
}
} }
.icon-border { .icon-border {
@extend %no-cursor; @extend %no-cursor;
@include ml-mr(calc(($btn-gap - $btn-border-width) / 2));
background-color: var(--sidebar-muted-color); background-color: var(--sidebar-muted-color);
content: ''; content: '';
width: 3px; width: $btn-border-width;
height: 3px; height: $btn-border-width;
border-radius: 50%; border-radius: 50%;
margin-bottom: $btn-mb;
} }
} /* .sidebar-bottom */ } /* .sidebar-bottom */
} /* #sidebar */ } /* #sidebar */
@ -955,16 +936,15 @@ $sidebar-display: 'sidebar-display';
transition: top 0.5s ease; transition: top 0.5s ease;
} }
.nav-link {
transition: background-color 0.3s ease-in-out;
}
.post-preview { .post-preview {
transition: background-color 0.35s ease-in-out; transition: background-color 0.35s ease-in-out;
} }
} }
.profile-wrapper {
margin-top: 2rem;
width: 100%;
}
#search-result-wrapper { #search-result-wrapper {
display: none; display: none;
height: 100%; height: 100%;
@ -1162,6 +1142,8 @@ $sidebar-display: 'sidebar-display';
} }
#core-wrapper { #core-wrapper {
line-height: 1.75;
.categories, .categories,
#tags, #tags,
#archives { #archives {
@ -1337,14 +1319,10 @@ $sidebar-display: 'sidebar-display';
} }
} }
#avatar > a { #avatar {
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
} }
.site-subtitle {
@include ml-mr(1.8rem);
}
} }
@media all and (max-width: 768px) { @media all and (max-width: 768px) {
@ -1400,10 +1378,6 @@ $sidebar-display: 'sidebar-display';
transform: translateX(-#{$sidebar-width}); /* hide */ transform: translateX(-#{$sidebar-width}); /* hide */
-webkit-transform: translateX(-#{$sidebar-width}); -webkit-transform: translateX(-#{$sidebar-width});
.cursor {
transition: none;
}
} }
#main-wrapper { #main-wrapper {
@ -1486,9 +1460,11 @@ $sidebar-display: 'sidebar-display';
margin-left: $sidebar-width; margin-left: $sidebar-width;
} }
#sidebar {
.profile-wrapper { .profile-wrapper {
margin-top: 3rem; margin-top: 3rem;
} }
}
#search-hints { #search-hints {
display: none; display: none;
@ -1528,50 +1504,10 @@ $sidebar-display: 'sidebar-display';
/* Compact icons in sidebar & panel hidden */ /* Compact icons in sidebar & panel hidden */
@media all and (min-width: 850px) and (max-width: 1199px) { @media all and (min-width: 850px) and (max-width: 1199px) {
#sidebar {
width: $sidebar-width-small;
.site-subtitle {
margin-left: 1rem;
margin-right: 1rem;
}
.sidebar-bottom {
a,
span {
width: 2rem;
}
.icon-border {
left: -3px;
}
}
}
#topbar-wrapper {
left: $sidebar-width-small;
}
#search-results > div { #search-results > div {
max-width: 700px; max-width: 700px;
} }
.site-title {
font-size: 1.3rem;
margin-left: 0 !important;
}
.site-subtitle {
@include ml-mr(1rem);
font-size: 90%;
}
#main-wrapper,
footer {
margin-left: $sidebar-width-small;
}
#breadcrumb { #breadcrumb {
width: 65%; width: 65%;
overflow: hidden; overflow: hidden;
@ -1642,6 +1578,8 @@ $sidebar-display: 'sidebar-display';
} }
@media all and (min-width: 1650px) { @media all and (min-width: 1650px) {
$icon-gap: 1rem;
#main-wrapper, #main-wrapper,
footer { footer {
margin-left: $sidebar-width-large; margin-left: $sidebar-width-large;
@ -1677,114 +1615,31 @@ $sidebar-display: 'sidebar-display';
#sidebar { #sidebar {
width: $sidebar-width-large; width: $sidebar-width-large;
$icon-gap: 1rem; // for the bottom icons
.profile-wrapper { .profile-wrapper {
margin-top: 4rem; margin-top: 3.5rem;
margin-bottom: 1rem; margin-bottom: 2.5rem;
padding-left: 3.5rem;
&.text-center {
text-align: left !important;
} }
%profile-ml {
margin-left: 4.5rem;
}
#avatar {
@extend %profile-ml;
> a {
width: 6.2rem;
height: 6.2rem;
&.mx-auto {
margin-left: 0 !important;
}
}
}
.site-title {
@extend %profile-ml;
margin-top: 0.4rem;
a {
font-size: 1.7rem;
letter-spacing: 1px;
}
}
.site-subtitle {
@extend %profile-ml;
word-spacing: 0;
margin-top: 0;
}
} /* .profile-wrapper (min-width: 1650px) */
ul { ul {
padding-left: 2.5rem; li.nav-item {
@include pl-pr(2.75rem);
> li:last-child {
> a {
position: static;
}
}
.nav-item {
text-align: left;
.nav-link {
> span {
letter-spacing: 2px;
}
> i {
&.unloaded {
display: inline-block !important;
}
}
}
} }
} }
.sidebar-bottom { .sidebar-bottom {
padding-left: 3.5rem; padding-left: 2.75rem;
width: 100%; margin-bottom: 1.75rem;
$icon-block-size: 2rem; a:not(:last-child) {
margin-right: $icon-gap;
&.justify-content-center {
justify-content: flex-start !important;
}
> span,
> button.mode-toggle,
> a {
@include ml-mr(0.15rem);
height: $icon-block-size;
margin-bottom: 0.5rem; /* wrap line */
}
i {
background-color: var(--sidebar-btn-bg);
font-size: 1rem;
width: $icon-block-size;
height: $icon-block-size;
border-radius: 50%;
position: relative;
&::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
} }
.icon-border { .icon-border {
top: 0.9rem; @include ml-mr(calc(($icon-gap - $btn-border-width) / 2));
}
}
} }
} /* .sidebar-bottom */
} /* #sidebar */
} /* min-width: 1650px */ } /* min-width: 1650px */

7
_sass/addon/module.scss
View file

@ -69,7 +69,7 @@
} }
%clickable-transition { %clickable-transition {
transition: color 0.35s ease-in-out; transition: all 0.3s ease-in-out;
} }
%no-cursor { %no-cursor {
@ -138,6 +138,11 @@
margin-right: $value; margin-right: $value;
} }
@mixin pt-pb($val) {
padding-top: $val;
padding-bottom: $val;
}
@mixin pl-pr($val) { @mixin pl-pr($val) {
padding-left: $val; padding-left: $val;
padding-right: $val; padding-right: $val;

10
_sass/addon/variables.scss
View file

@ -5,15 +5,7 @@
/* sidebar */ /* sidebar */
$sidebar-width: 260px !default; /* the basic width */ $sidebar-width: 260px !default; /* the basic width */
$sidebar-width-small: 210px !default; /* screen width: >= 850px, <= 1199px (iPad landscape) */ $sidebar-width-large: 300px !default; /* screen width: >= 1650px */
$sidebar-width-large: 350px !default; /* screen width: >= 1650px */
/* tabs of sidebar */
$tab-count: 5 !default; /* backward compatible (version <= 4.0.2) */
$tab-height: 3rem !default;
$tab-cursor-height: 1.6rem !default;
$cursor-width: 2px !default; /* the cursor width of the selected tab */
/* other framework sizes */ /* other framework sizes */

12
_sass/colors/dark-typography.scss
View file

@ -36,9 +36,11 @@
/* Sidebar */ /* Sidebar */
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%); --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
--sidebar-muted-color: #6d6c6b; --sidebar-muted-color: #6d6c6b;
--sidebar-active-color: rgb(255, 255, 255, 0.8); --sidebar-active-color: rgb(255, 255, 255, 0.95);
--nav-cursor-color: rgb(183, 182, 182); --sidebar-hover-bg: rgb(54, 54, 54, 0.33);
--sidebar-btn-bg: rgb(117, 116, 116, 0.2); --sidebar-btn-bg: rgb(84, 83, 83, 0.3);
--sidebar-btn-color: #787878;
--avatar-border-color: rgb(206, 206, 206, 0.9);
/* Topbar */ /* Topbar */
--topbar-text-color: var(--text-color); --topbar-text-color: var(--text-color);
@ -68,8 +70,8 @@
--relate-post-date: var(--text-muted-color); --relate-post-date: var(--text-muted-color);
--card-bg: #1e1e1e; --card-bg: #1e1e1e;
--card-hovor-bg: #464d51; --card-hovor-bg: #464d51;
--card-shadow: rgb(21, 21, 21, 0.72) 0 6px 10px 0, --card-shadow: rgb(21, 21, 21, 0.72) 0 6px 18px 0,
rgb(137, 135, 135, 0.3) 0 0 0 1px; rgb(137, 135, 135, 0.24) 0 0 0 1px;
--kbd-wrap-color: #6a6a6a; --kbd-wrap-color: #6a6a6a;
--kbd-text-color: #d3d3d3; --kbd-text-color: #d3d3d3;
--kbd-bg-color: #242424; --kbd-bg-color: #242424;

8
_sass/colors/light-typography.scss
View file

@ -36,11 +36,13 @@
); );
/* Sidebar */ /* Sidebar */
--sidebar-bg: #eeeeee; --sidebar-bg: #f6f8fa;
--sidebar-muted-color: #a2a19f; --sidebar-muted-color: #a2a19f;
--sidebar-active-color: #424242; --sidebar-active-color: #1d1d1d;
--nav-cursor-color: #757575; --sidebar-hover-bg: rgb(227, 227, 227, 0.64);
--sidebar-btn-bg: white; --sidebar-btn-bg: white;
--sidebar-btn-color: #8e8e8e;
--avatar-border-color: white;
/* Topbar */ /* Topbar */
--topbar-text-color: rgb(78, 78, 78); --topbar-text-color: rgb(78, 78, 78);

4
_sass/jekyll-theme-chirpy.scss
View file

@ -1,7 +1,5 @@
/*! /*!
* The styles for Jekyll theme Chirpy * Chirpy v5.6.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
*
* Chirpy v5.6.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
* © 2019 Cotes Chung * © 2019 Cotes Chung
* MIT Licensed * MIT Licensed
*/ */

2
_tabs/tags.md
View file

@ -1,5 +1,5 @@
--- ---
layout: tags layout: tags
icon: fas fa-tag icon: fas fa-tags
order: 2 order: 2
--- ---

8
assets/css/style.scss
View file

@ -1,12 +1,6 @@
--- ---
--- ---
/* @import '{{ site.theme }}';
If the number of TAB files has changed, the following variable is required.
And it must be defined before `@import`.
*/
$tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab
@import "{{ site.theme }}";
/* append your custom style below */ /* append your custom style below */