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

Merge branch 'feature/color-scheme' into develop

Browse source
This commit is contained in:
Cotes Chung 2021-09-24 15:09:14 +08:00
commit 89b76dc2a0
11 changed files with 91 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_data/contact.yml
View file

@ -2,7 +2,7 @@
- -
type: github type: github
icon: 'fab fa-github-alt' icon: 'fab fa-github'
- -
type: twitter type: twitter
icon: 'fab fa-twitter' icon: 'fab fa-twitter'

2
_includes/sidebar.html
View file

@ -49,7 +49,7 @@
</ul> <!-- ul.nav.flex-column --> </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 %} {% for entry in site.data.contact %}
{% capture url %} {% capture url %}

111
_sass/addon/commons.scss
View file

@ -7,16 +7,9 @@
@if $dark-mode { @if $dark-mode {
@include dark-scheme; @include dark-scheme;
.mode-toggle {
transform: rotateY(180deg);
}
} @else { } @else {
@include light-scheme; @include light-scheme;
.mode-toggle {
transform: none;
}
} }
} }
@ -645,26 +638,25 @@ $sidebar-display: "sidebar-display";
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
a { a {
@include sidebar-links; @extend %sidebar-links;
&:hover { &:hover {
@include no-text-decoration; @include no-text-decoration;
color: #fff; color: var(--sidebar-active-color) !important;
} }
} }
#avatar { #avatar {
&:hover > a {
border-color: #fff;
}
> a { > a {
&:hover {
border-color: white;
}
display: block; display: block;
width: 6rem; width: 6rem;
height: 6rem; height: 6rem;
border-radius: 50%; border-radius: 50%;
border: 2px solid #b6b6b6; border: 2px solid rgba(222, 222, 222, 0.7);
overflow: hidden; overflow: hidden;
transform: translateZ(0); // fixed the zoom in Safari transform: translateZ(0); // fixed the zoom in Safari
-webkit-transition: border-color 0.35s ease-in-out; -webkit-transition: border-color 0.35s ease-in-out;
@ -690,15 +682,18 @@ $sidebar-display: "sidebar-display";
.site-title { .site-title {
a { a {
@extend %clickable-transition;
font-weight: 900; font-weight: 900;
font-size: 1.5rem; font-size: 1.5rem;
letter-spacing: 0.5px; letter-spacing: 0.5px;
color: rgba(134, 133, 133, 99%);
} }
} }
.site-subtitle { .site-subtitle {
font-size: 95%; font-size: 95%;
color: #828282; color: var(--sidebar-muted-color);
line-height: 1.2rem; line-height: 1.2rem;
word-spacing: 1px; word-spacing: 1px;
margin: 0.5rem 1.5rem 0.5rem 1.5rem; margin: 0.5rem 1.5rem 0.5rem 1.5rem;
@ -719,16 +714,16 @@ $sidebar-display: "sidebar-display";
text-align: center; text-align: center;
display: table; display: table;
height: $tab-height; height: $tab-height;
&:hover {
.nav-link {
color: #f8f9facf;
}
}
&.active { &.active {
.nav-link { .nav-link {
color: #fcfcfc; color: var(--sidebar-active-color);
} }
} }
&:not(.active) > a {
@extend %clickable-transition;
}
} }
ul { ul {
@ -803,38 +798,35 @@ $sidebar-display: "sidebar-display";
a { a {
@extend %icon; @extend %icon;
@extend %clickable-transition;
}
i {
line-height: 1.75rem; // default line-height in body
vertical-align: middle;
} }
#mode-toggle-wrapper { #mode-toggle-wrapper {
@extend %icon; @extend %icon;
i { i {
@include sidebar-links; @extend %sidebar-links;
@extend %cursor-pointer; @extend %cursor-pointer;
@extend %clickable-transition;
margin: 0;
font-size: 1.05rem;
text-align: center;
position: relative;
bottom: 1px;
} }
} }
.icon-border { .icon-border {
background-color: #525354; background-color: var(--sidebar-muted-color);
content: ""; content: "";
width: 3px; width: 3px;
height: 3px; height: 3px;
border-radius: 50%; border-radius: 50%;
position: relative;
top: 12px;
} }
a:hover, #mode-toggle-wrapper:hover > i {
#mode-toggle-wrapper i:hover { color: var(--sidebar-active-color);
color: #fff;
} }
} // .sidebar-bottom } // .sidebar-bottom
@ -875,7 +867,6 @@ $sidebar-display: "sidebar-display";
transition: top 0.2s ease-in-out; transition: top 0.2s ease-in-out;
z-index: 50; z-index: 50;
border-bottom: 1px solid rgba(0, 0, 0, 0.07); border-bottom: 1px solid rgba(0, 0, 0, 0.07);
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
background-color: var(--topbar-wrapper-bg); background-color: var(--topbar-wrapper-bg);
} }
@ -913,7 +904,7 @@ $sidebar-display: "sidebar-display";
display: flex; display: flex;
width: 85%; width: 85%;
border-radius: 1rem; border-radius: 1rem;
border: 1px solid var(--search-wrapper-bg); border: 1px solid var(--search-wrapper-border-color);
background: var(--search-wrapper-bg); background: var(--search-wrapper-bg);
padding: 0 0.5rem; padding: 0 0.5rem;
@ -1599,19 +1590,10 @@ $sidebar-display: "sidebar-display";
.nav-link { .nav-link {
> span { > span {
letter-spacing: 3px; letter-spacing: 2px;
} }
> i { > 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 { &.unloaded {
display: inline-block !important; display: inline-block !important;
} }
@ -1625,35 +1607,40 @@ $sidebar-display: "sidebar-display";
padding-left: 3.5rem; padding-left: 3.5rem;
width: 100%; width: 100%;
$icon-block-size: 2rem;
&.justify-content-center { &.justify-content-center {
-webkit-box-pack: start !important; -webkit-box-pack: start !important;
-ms-flex-pack: start !important; -ms-flex-pack: start !important;
justify-content: flex-start !important; justify-content: flex-start !important;
} }
a { > span,
font-size: 1rem; > a {
width: 3rem; @include ml-mr(0.15rem);
height: $icon-block-size;
margin-bottom: 0.5rem; // wrap line
} }
i { 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; &::before {
margin-top: .7rem; // multi line space position: absolute;
bottom: 0; top: 50%;
} left: 50%;
transform: translate(-50%, -50%);
#mode-toggle-wrapper {
width: 3rem;
i {
top: 11px;
} }
} }
.icon-border { .icon-border {
top: 26px; top: 0.9rem;
} }
} // .sidebar-bottom } // .sidebar-bottom

16
_sass/addon/module.scss
View file

@ -35,6 +35,10 @@
border-bottom: 1px solid var(--link-underline-color); border-bottom: 1px solid var(--link-underline-color);
} }
%clickable-transition {
transition: color 0.35s ease-in-out;
}
%no-bottom-border { %no-bottom-border {
border-bottom: none; border-bottom: none;
} }
@ -61,19 +65,11 @@
text-decoration: none; text-decoration: none;
} }
@mixin sidebar-links($color: rgba(255, 255, 255, 0.5)) { %sidebar-links {
color: $color; color: rgba(117, 117, 117, 0.9);
transition: color 0.35s ease-in-out;
user-select: none; user-select: none;
} }
@mixin icon-round($diameter) {
border: 1px solid;
border-radius: 50%;
width: $diameter;
height: $diameter;
}
@mixin ml-mr($value) { @mixin ml-mr($value) {
margin-left: $value; margin-left: $value;
margin-right: $value; margin-right: $value;

4
_sass/addon/variables.scss
View file

@ -11,10 +11,10 @@ $sidebar-width-large: 350px !default; // screen width: >= 1650px
/* tabs of sidebar */ /* tabs of sidebar */
$tab-count: 5 !default; // backward compatible (version <= 4.0.2) $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; $tab-cursor-height: 1.6rem !default;
$cursor-width: 3px !default; // the cursor width of the selected tab $cursor-width: 2px !default; // the cursor width of the selected tab
/* other framework sizes */ /* other framework sizes */

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

@ -30,13 +30,17 @@
--checkbox-checked-color: var(--link-color); --checkbox-checked-color: var(--link-color);
/* Sidebar */ /* Sidebar */
--nav-cursor-color: rgb(183, 182, 182);
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%); --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
--sidebar-muted-color: #6d6c6b;
--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 */
--topbar-text-color: var(--text-color); --topbar-text-color: var(--text-color);
--topbar-wrapper-bg: rgb(39, 40, 43); --topbar-wrapper-bg: rgb(39, 40, 43);
--search-wrapper-bg: rgb(34, 34, 39); --search-wrapper-bg: rgb(34, 34, 39);
--search-wrapper-border-color: rgb(34, 34, 39);
--search-icon-color: rgb(100, 102, 105); --search-icon-color: rgb(100, 102, 105);
--input-focus-border-color: rgb(112, 114, 115); --input-focus-border-color: rgb(112, 114, 115);
@ -44,11 +48,8 @@
--post-list-text-color: rgb(175, 176, 177); --post-list-text-color: rgb(175, 176, 177);
--btn-patinator-text-color: var(--text-color); --btn-patinator-text-color: var(--text-color);
--btn-paginator-hover-color: rgb(64, 65, 66); --btn-paginator-hover-color: rgb(64, 65, 66);
--btn-active-bg: rgba(28, 52, 94, 1);
--btn-active-border-color: rgb(66, 94, 138);
--btn-text-color: var(--text-color);
--btn-paginator-border-color: var(--btn-border-color); --btn-paginator-border-color: var(--btn-border-color);
--btn-paginator-shadow: var(--main-wrapper-bg); --btn-text-color: var(--text-color);
--pin-bg: rgb(34 35 37); --pin-bg: rgb(34 35 37);
--pin-color: inherit; --pin-color: inherit;
@ -98,12 +99,13 @@
nav[data-toggle=toc] .nav-link.active, nav[data-toggle=toc] .nav-link.active,
nav[data-toggle=toc] .nav-link.active:focus, nav[data-toggle=toc] .nav-link.active:focus,
nav[data-toggle=toc] .nav-link.active:hover, nav[data-toggle=toc] .nav-link.active:hover,
nav[data-toggle=toc] .nav > li > a:focus, nav[data-toggle=toc] .nav>li>a:focus,
nav[data-toggle=toc] .nav > li > a:hover { nav[data-toggle=toc] .nav>li>a:hover {
color: var(--toc-highlight) !important; color: var(--toc-highlight) !important;
border-left-color: var(--toc-highlight) !important; border-left-color: var(--toc-highlight) !important;
} }
/* categories */ /* categories */
.categories.card, .categories.card,
.list-group-item { .list-group-item {

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

@ -28,13 +28,17 @@
--checkbox-checked-color: #07a8f7; --checkbox-checked-color: #07a8f7;
/* Sidebar */ /* Sidebar */
--sidebar-bg: radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%); --sidebar-bg: #eeeeee;
--nav-cursor-color: #fcfcfc; --sidebar-muted-color: #a2a19f;
--sidebar-active-color: #424242;
--nav-cursor-color: #757575;
--sidebar-btn-bg: white;
/* Topbar */ /* Topbar */
--topbar-text-color: rgb(78, 78, 78); --topbar-text-color: rgb(78, 78, 78);
--topbar-wrapper-bg: white; --topbar-wrapper-bg: white;
--search-wrapper-bg: #f5f5f5; --search-wrapper-bg: rgb(245 245 245 / 50%);
--search-wrapper-border-color: rgb(245 245 245);
--search-tag-bg: #f8f9fa; --search-tag-bg: #f8f9fa;
--search-icon-color: #c2c6cc; --search-icon-color: #c2c6cc;
--input-focus-border-color: var(--btn-border-color); --input-focus-border-color: var(--btn-border-color);
@ -42,12 +46,9 @@
/* Home page */ /* Home page */
--post-list-text-color: dimgray; --post-list-text-color: dimgray;
--btn-patinator-text-color: #555555; --btn-patinator-text-color: #555555;
--btn-paginator-hover-color: #e9ecef; --btn-paginator-hover-color: var(--sidebar-bg);
--btn-active-bg: #2a408e; --btn-paginator-border-color: var(--sidebar-bg);
--btn-active-border-color: #007bff; --btn-text-color: #676666;
--btn-text-color: #f8f8f8;
--btn-paginator-border-color: #f1f1f1;
--btn-paginator-shadow: #4b92d2;
--pin-bg: #f5f5f5; --pin-bg: #f5f5f5;
--pin-color: #999fa4; --pin-color: #999fa4;

4
_sass/layout/home.scss
View file

@ -28,9 +28,7 @@
} }
&.active { &.active {
.page-link { .page-link {
background-color: var(--btn-active-bg); background-color: var(--btn-paginator-hover-color);
border-color: var(--btn-active-border-color);
box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important;
color: var(--btn-text-color); color: var(--btn-text-color);
} }
} }

10
_sass/layout/post.scss
View file

@ -143,12 +143,22 @@
line-height: 1rem; line-height: 1rem;
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
font-size: 0.8rem;
&.nav-link:not(.active) { &.nav-link:not(.active) {
color: inherit; color: inherit;
} }
} }
nav[data-toggle=toc] {
.nav {
.nav > li > a.active {
font-weight: 600 !important;
}
}
}
/* --- Related Posts --- */ /* --- Related Posts --- */
#related-posts { #related-posts {

2
_tabs/about.md
View file

@ -1,6 +1,6 @@
--- ---
title: About title: About
icon: fas fa-info icon: fas fa-info-circle
order: 4 order: 4
--- ---

2
_tabs/tags.md
View file

@ -1,6 +1,6 @@
--- ---
layout: tags layout: tags
title: Tags title: Tags
icon: fas fa-tags icon: fas fa-tag
order: 2 order: 2
--- ---