feat(ui): redesign the sidebar
This commit is contained in:
Cotes Chung
parent
6d99f5cc36
commit
83bbe4ac93
|
|
@ -11,7 +11,7 @@ cdns:
|
|||
|
||||
# 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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
<!-- The Side Bar -->
|
||||
|
||||
<div id="sidebar" class="d-flex flex-column align-items-end">
|
||||
<div class="profile-wrapper text-center">
|
||||
<div id="avatar">
|
||||
<a href="{{ '/' | relative_url }}" class="mx-auto">
|
||||
{% if site.avatar != empty and site.avatar %}
|
||||
{% capture avatar_url %}
|
||||
<div class="profile-wrapper">
|
||||
<a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
|
||||
{% if site.avatar != empty and site.avatar %}
|
||||
{% capture avatar_url %}
|
||||
{% if site.avatar contains '://' %}
|
||||
{{ site.avatar }}
|
||||
{% elsif site.img_cdn != empty and site.img_cdn %}
|
||||
|
|
@ -14,10 +13,9 @@
|
|||
{{ site.avatar | relative_url }}
|
||||
{% endif %}
|
||||
{% endcapture %}
|
||||
<img src="{{ avatar_url | strip }}" alt="avatar" onerror="this.style.display='none'">
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
<img src="{{ avatar_url | strip }}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
<div class="site-title">
|
||||
<a href="{{ '/' | relative_url }}">{{ site.title }}</a>
|
||||
|
|
@ -26,11 +24,11 @@
|
|||
</div>
|
||||
<!-- .profile-wrapper -->
|
||||
|
||||
<ul class="w-100">
|
||||
<ul class="flex-grow-1 w-100 pl-0">
|
||||
<!-- home -->
|
||||
<li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
|
||||
<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>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -38,7 +36,7 @@
|
|||
{% for tab in site.tabs %}
|
||||
<li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
|
||||
<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 %}
|
||||
|
||||
<span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
|
||||
|
|
@ -49,7 +47,7 @@
|
|||
</ul>
|
||||
<!-- 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 %}
|
||||
<button class="mode-toggle btn" aria-label="Switch Mode">
|
||||
<i class="fas fa-adjust"></i>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: tags
|
||||
icon: fas fa-tag
|
||||
icon: fas fa-tags
|
||||
order: 2
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,12 +1,6 @@
|
|||
---
|
||||
---
|
||||
|
||||
/*
|
||||
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 }}";
|
||||
@import '{{ site.theme }}';
|
||||
|
||||
/* append your custom style below */
|
||||
|
|
|
|||
Loading…
Reference in New Issue