feat(ui): redesign the sidebar
This commit is contained in:
parent
6d99f5cc36
commit
83bbe4ac93
10 changed files with 159 additions and 313 deletions
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
<!-- 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 '://' %}
|
||||||
{{ site.avatar }}
|
{{ site.avatar }}
|
||||||
{% elsif site.img_cdn != empty and site.img_cdn %}
|
{% elsif site.img_cdn != empty and site.img_cdn %}
|
||||||
|
@ -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>
|
||||||
|
|
|
@ -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: 7rem;
|
||||||
width: 6rem;
|
height: 7rem;
|
||||||
height: 6rem;
|
overflow: hidden;
|
||||||
border-radius: 50%;
|
box-shadow: var(--avatar-border-color) 0 0 0 2px;
|
||||||
border: 2px solid rgba(222, 222, 222, 0.7);
|
transform: translateZ(0); /* fixed the zoom in Safari */
|
||||||
overflow: hidden;
|
|
||||||
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 {
|
|
||||||
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 {
|
ul {
|
||||||
height: $tab-height * $tab-count;
|
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
padding-left: 0;
|
|
||||||
|
|
||||||
li {
|
li.nav-item {
|
||||||
|
opacity: 0.9;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
|
||||||
&:last-child {
|
a.nav-link {
|
||||||
a {
|
@include pt-pb(0.6rem);
|
||||||
position: relative;
|
|
||||||
left: calc($cursor-width / 2);
|
display: flex;
|
||||||
width: 100%;
|
align-items: center;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--sidebar-hover-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* the cursor */
|
i {
|
||||||
&::after {
|
font-size: 95%;
|
||||||
display: table;
|
opacity: 0.8;
|
||||||
visibility: hidden;
|
margin-right: 1.5rem;
|
||||||
content: '';
|
}
|
||||||
position: relative;
|
|
||||||
right: 1px;
|
span {
|
||||||
width: $cursor-width;
|
font-size: 90%;
|
||||||
height: $tab-cursor-height;
|
letter-spacing: 0.2px;
|
||||||
border-radius: 1px;
|
|
||||||
background-color: var(--nav-cursor-color);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} /* li */
|
|
||||||
|
|
||||||
@mixin fix-cursor($top) {
|
&.active {
|
||||||
top: $top;
|
.nav-link {
|
||||||
visibility: visible;
|
color: var(--sidebar-active-color);
|
||||||
}
|
background-color: var(--sidebar-hover-bg);
|
||||||
|
|
||||||
@for $i from 1 through $tab-count {
|
span {
|
||||||
$offset: $tab-count - $i;
|
opacity: 1;
|
||||||
$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 */
|
&:not(:first-child) {
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.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,8 +1460,10 @@ $sidebar-display: 'sidebar-display';
|
||||||
margin-left: $sidebar-width;
|
margin-left: $sidebar-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-wrapper {
|
#sidebar {
|
||||||
margin-top: 3rem;
|
.profile-wrapper {
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-hints {
|
#search-hints {
|
||||||
|
@ -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 */
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 */
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
layout: tags
|
layout: tags
|
||||||
icon: fas fa-tag
|
icon: fas fa-tags
|
||||||
order: 2
|
order: 2
|
||||||
---
|
---
|
||||||
|
|
|
@ -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 */
|
||||||
|
|
Loading…
Reference in a new issue