mirror of
https://github.com/cotes2020/jekyll-theme-chirpy.git
synced 2025-12-18 05:41:31 +00:00
feat(ui): redesign the sidebar
This commit is contained in:
Cotes Chung
@@ -35,7 +35,6 @@ body {
|
||||
color: var(--text-color);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: $font-family-base;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
/* --- Typography --- */
|
||||
@@ -732,6 +731,9 @@ mjx-container {
|
||||
/* --- sidebar layout --- */
|
||||
|
||||
$sidebar-display: 'sidebar-display';
|
||||
$btn-gap: 0.8rem; // for the bottom icons
|
||||
$btn-border-width: 3px;
|
||||
$btn-mb: 0.5rem;
|
||||
|
||||
#sidebar {
|
||||
@include pl-pr(0);
|
||||
@@ -754,198 +756,177 @@ $sidebar-display: 'sidebar-display';
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
|
||||
%sidebar-link-hover {
|
||||
&:hover {
|
||||
color: var(--sidebar-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@extend %sidebar-links;
|
||||
|
||||
&:hover {
|
||||
@extend %no-decoration;
|
||||
|
||||
color: var(--sidebar-active-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#avatar {
|
||||
> a {
|
||||
display: block;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(222, 222, 222, 0.7);
|
||||
overflow: hidden;
|
||||
transform: translateZ(0); /* fixed the zoom in Safari */
|
||||
transition: border-color 0.35s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
border-color: white;
|
||||
}
|
||||
}
|
||||
display: block;
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--avatar-border-color) 0 0 0 2px;
|
||||
transform: translateZ(0); /* fixed the zoom in Safari */
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.5s;
|
||||
|
||||
&:hover {
|
||||
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 {
|
||||
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 {
|
||||
@extend %clickable-transition;
|
||||
|
||||
font-weight: 900;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 0.5px;
|
||||
color: rgba(134, 133, 133, 0.99);
|
||||
@extend %sidebar-link-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.site-subtitle {
|
||||
font-size: 95%;
|
||||
color: var(--sidebar-muted-color);
|
||||
line-height: 1.25rem;
|
||||
margin-top: 0.25rem;
|
||||
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;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
border-radius: 0;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
text-align: center;
|
||||
display: table;
|
||||
height: $tab-height;
|
||||
|
||||
&.active {
|
||||
.nav-link {
|
||||
color: var(--sidebar-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.active) > a {
|
||||
@extend %clickable-transition;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
height: $tab-height * $tab-count;
|
||||
margin-bottom: 2rem;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
li.nav-item {
|
||||
opacity: 0.9;
|
||||
width: 100%;
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
|
||||
&:last-child {
|
||||
a {
|
||||
position: relative;
|
||||
left: calc($cursor-width / 2);
|
||||
width: 100%;
|
||||
a.nav-link {
|
||||
@include pt-pb(0.6rem);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--sidebar-hover-bg);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
i {
|
||||
font-size: 95%;
|
||||
opacity: 0.8;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 90%;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
}
|
||||
} /* li */
|
||||
|
||||
@mixin fix-cursor($top) {
|
||||
top: $top;
|
||||
visibility: visible;
|
||||
}
|
||||
&.active {
|
||||
.nav-link {
|
||||
color: var(--sidebar-active-color);
|
||||
background-color: var(--sidebar-hover-bg);
|
||||
|
||||
@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);
|
||||
span {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
} @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 */
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-bottom {
|
||||
margin-bottom: 2.1rem;
|
||||
@include pl-pr(2rem);
|
||||
|
||||
@include ml-mr(auto);
|
||||
@include pl-pr(1rem);
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
%icon {
|
||||
width: 2.4rem;
|
||||
%button {
|
||||
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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--sidebar-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@extend %icon;
|
||||
@extend %button;
|
||||
@extend %sidebar-link-hover;
|
||||
@extend %clickable-transition;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: $btn-gap;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.mode-toggle {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin-bottom: 1px;
|
||||
background-color: transparent;
|
||||
|
||||
@extend %icon;
|
||||
@extend %button;
|
||||
@extend %sidebar-links;
|
||||
|
||||
> i {
|
||||
@extend %clickable-transition;
|
||||
}
|
||||
|
||||
&:hover > i {
|
||||
color: var(--sidebar-active-color);
|
||||
}
|
||||
@extend %sidebar-link-hover;
|
||||
}
|
||||
|
||||
.icon-border {
|
||||
@extend %no-cursor;
|
||||
@include ml-mr(calc(($btn-gap - $btn-border-width) / 2));
|
||||
|
||||
background-color: var(--sidebar-muted-color);
|
||||
content: '';
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
width: $btn-border-width;
|
||||
height: $btn-border-width;
|
||||
border-radius: 50%;
|
||||
margin-bottom: $btn-mb;
|
||||
}
|
||||
} /* .sidebar-bottom */
|
||||
} /* #sidebar */
|
||||
@@ -955,16 +936,15 @@ $sidebar-display: 'sidebar-display';
|
||||
transition: top 0.5s ease;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
transition: background-color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.post-preview {
|
||||
transition: background-color 0.35s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-wrapper {
|
||||
margin-top: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#search-result-wrapper {
|
||||
display: none;
|
||||
height: 100%;
|
||||
@@ -1162,6 +1142,8 @@ $sidebar-display: 'sidebar-display';
|
||||
}
|
||||
|
||||
#core-wrapper {
|
||||
line-height: 1.75;
|
||||
|
||||
.categories,
|
||||
#tags,
|
||||
#archives {
|
||||
@@ -1337,14 +1319,10 @@ $sidebar-display: 'sidebar-display';
|
||||
}
|
||||
}
|
||||
|
||||
#avatar > a {
|
||||
#avatar {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.site-subtitle {
|
||||
@include ml-mr(1.8rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
@@ -1400,10 +1378,6 @@ $sidebar-display: 'sidebar-display';
|
||||
|
||||
transform: translateX(-#{$sidebar-width}); /* hide */
|
||||
-webkit-transform: translateX(-#{$sidebar-width});
|
||||
|
||||
.cursor {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
#main-wrapper {
|
||||
@@ -1486,8 +1460,10 @@ $sidebar-display: 'sidebar-display';
|
||||
margin-left: $sidebar-width;
|
||||
}
|
||||
|
||||
.profile-wrapper {
|
||||
margin-top: 3rem;
|
||||
#sidebar {
|
||||
.profile-wrapper {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
#search-hints {
|
||||
@@ -1528,50 +1504,10 @@ $sidebar-display: 'sidebar-display';
|
||||
|
||||
/* Compact icons in sidebar & panel hidden */
|
||||
@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 {
|
||||
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 {
|
||||
width: 65%;
|
||||
overflow: hidden;
|
||||
@@ -1642,6 +1578,8 @@ $sidebar-display: 'sidebar-display';
|
||||
}
|
||||
|
||||
@media all and (min-width: 1650px) {
|
||||
$icon-gap: 1rem;
|
||||
|
||||
#main-wrapper,
|
||||
footer {
|
||||
margin-left: $sidebar-width-large;
|
||||
@@ -1677,114 +1615,31 @@ $sidebar-display: 'sidebar-display';
|
||||
#sidebar {
|
||||
width: $sidebar-width-large;
|
||||
|
||||
$icon-gap: 1rem; // for the bottom icons
|
||||
|
||||
.profile-wrapper {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&.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) */
|
||||
margin-top: 3.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
padding-left: 3.5rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 2.5rem;
|
||||
|
||||
> li:last-child {
|
||||
> a {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
text-align: left;
|
||||
|
||||
.nav-link {
|
||||
> span {
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
> i {
|
||||
&.unloaded {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
li.nav-item {
|
||||
@include pl-pr(2.75rem);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-bottom {
|
||||
padding-left: 3.5rem;
|
||||
width: 100%;
|
||||
padding-left: 2.75rem;
|
||||
margin-bottom: 1.75rem;
|
||||
|
||||
$icon-block-size: 2rem;
|
||||
|
||||
&.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%);
|
||||
}
|
||||
a:not(:last-child) {
|
||||
margin-right: $icon-gap;
|
||||
}
|
||||
|
||||
.icon-border {
|
||||
top: 0.9rem;
|
||||
@include ml-mr(calc(($icon-gap - $btn-border-width) / 2));
|
||||
}
|
||||
} /* .sidebar-bottom */
|
||||
} /* #sidebar */
|
||||
}
|
||||
}
|
||||
} /* min-width: 1650px */
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
}
|
||||
|
||||
%clickable-transition {
|
||||
transition: color 0.35s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
%no-cursor {
|
||||
@@ -138,6 +138,11 @@
|
||||
margin-right: $value;
|
||||
}
|
||||
|
||||
@mixin pt-pb($val) {
|
||||
padding-top: $val;
|
||||
padding-bottom: $val;
|
||||
}
|
||||
|
||||
@mixin pl-pr($val) {
|
||||
padding-left: $val;
|
||||
padding-right: $val;
|
||||
|
||||
@@ -5,15 +5,7 @@
|
||||
/* sidebar */
|
||||
|
||||
$sidebar-width: 260px !default; /* the basic width */
|
||||
$sidebar-width-small: 210px !default; /* screen width: >= 850px, <= 1199px (iPad landscape) */
|
||||
$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 */
|
||||
$sidebar-width-large: 300px !default; /* screen width: >= 1650px */
|
||||
|
||||
/* other framework sizes */
|
||||
|
||||
|
||||
@@ -36,9 +36,11 @@
|
||||
/* Sidebar */
|
||||
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
|
||||
--sidebar-muted-color: #6d6c6b;
|
||||
--sidebar-active-color: rgb(255, 255, 255, 0.8);
|
||||
--nav-cursor-color: rgb(183, 182, 182);
|
||||
--sidebar-btn-bg: rgb(117, 116, 116, 0.2);
|
||||
--sidebar-active-color: rgb(255, 255, 255, 0.95);
|
||||
--sidebar-hover-bg: rgb(54, 54, 54, 0.33);
|
||||
--sidebar-btn-bg: rgb(84, 83, 83, 0.3);
|
||||
--sidebar-btn-color: #787878;
|
||||
--avatar-border-color: rgb(206, 206, 206, 0.9);
|
||||
|
||||
/* Topbar */
|
||||
--topbar-text-color: var(--text-color);
|
||||
@@ -68,8 +70,8 @@
|
||||
--relate-post-date: var(--text-muted-color);
|
||||
--card-bg: #1e1e1e;
|
||||
--card-hovor-bg: #464d51;
|
||||
--card-shadow: rgb(21, 21, 21, 0.72) 0 6px 10px 0,
|
||||
rgb(137, 135, 135, 0.3) 0 0 0 1px;
|
||||
--card-shadow: rgb(21, 21, 21, 0.72) 0 6px 18px 0,
|
||||
rgb(137, 135, 135, 0.24) 0 0 0 1px;
|
||||
--kbd-wrap-color: #6a6a6a;
|
||||
--kbd-text-color: #d3d3d3;
|
||||
--kbd-bg-color: #242424;
|
||||
|
||||
@@ -36,11 +36,13 @@
|
||||
);
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar-bg: #eeeeee;
|
||||
--sidebar-bg: #f6f8fa;
|
||||
--sidebar-muted-color: #a2a19f;
|
||||
--sidebar-active-color: #424242;
|
||||
--nav-cursor-color: #757575;
|
||||
--sidebar-active-color: #1d1d1d;
|
||||
--sidebar-hover-bg: rgb(227, 227, 227, 0.64);
|
||||
--sidebar-btn-bg: white;
|
||||
--sidebar-btn-color: #8e8e8e;
|
||||
--avatar-border-color: white;
|
||||
|
||||
/* Topbar */
|
||||
--topbar-text-color: rgb(78, 78, 78);
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
/*!
|
||||
* The styles for Jekyll theme Chirpy
|
||||
*
|
||||
* Chirpy v5.6.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
|
||||
* Chirpy v5.6.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
|
||||
* © 2019 Cotes Chung
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user