style: improve SCSS style
This commit is contained in:
Cotes Chung
parent
294e2985c1
commit
a6ce765082
15 changed files with 242 additions and 296 deletions
|
|
@ -1,3 +1,22 @@
|
|||
{
|
||||
"extends": "stylelint-config-standard-scss"
|
||||
"extends": "stylelint-config-standard-scss",
|
||||
"rules": {
|
||||
"no-descending-specificity": null,
|
||||
"shorthand-property-no-redundant-values": null,
|
||||
"at-rule-no-vendor-prefix": null,
|
||||
"property-no-vendor-prefix": null,
|
||||
"selector-no-vendor-prefix": null,
|
||||
"value-no-vendor-prefix": null,
|
||||
"color-function-notation": "legacy",
|
||||
"alpha-value-notation": "number",
|
||||
"selector-not-notation": "simple",
|
||||
"color-hex-length": "long",
|
||||
"declaration-block-single-line-max-declarations": 3,
|
||||
"font-family-no-missing-generic-family-keyword": [
|
||||
true,
|
||||
{
|
||||
"ignoreFontFamilies": ["Font Awesome 5 Free"]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,22 +5,22 @@
|
|||
html {
|
||||
@media (prefers-color-scheme: light) {
|
||||
&:not([data-mode]),
|
||||
&[data-mode=light] {
|
||||
&[data-mode="light"] {
|
||||
@include light-scheme;
|
||||
}
|
||||
|
||||
&[data-mode=dark] {
|
||||
&[data-mode="dark"] {
|
||||
@include dark-scheme;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:not([data-mode]),
|
||||
&[data-mode=dark] {
|
||||
&[data-mode="dark"] {
|
||||
@include dark-scheme;
|
||||
}
|
||||
|
||||
&[data-mode=light] {
|
||||
&[data-mode="light"] {
|
||||
@include light-scheme;
|
||||
}
|
||||
}
|
||||
|
|
@ -32,7 +32,7 @@ body {
|
|||
background: var(--body-bg);
|
||||
color: var(--text-color);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
|
||||
font-family: "Source Sans Pro", "Microsoft Yahei", sans-serif;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
|
|
@ -114,11 +114,8 @@ blockquote {
|
|||
}
|
||||
|
||||
@include prompt("tip", "\f0eb", 400);
|
||||
|
||||
@include prompt("info", "\f06a");
|
||||
|
||||
@include prompt("warning", "\f06a");
|
||||
|
||||
@include prompt("danger", "\f071");
|
||||
}
|
||||
|
||||
|
|
@ -167,7 +164,6 @@ footer {
|
|||
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
|
||||
@include no-text-decoration;
|
||||
}
|
||||
}
|
||||
|
|
@ -192,7 +188,7 @@ i { /* fontawesome icons */
|
|||
img[data-src] {
|
||||
margin: 0.5rem 0;
|
||||
|
||||
&[data-loaded=true] {
|
||||
&[data-loaded="true"] {
|
||||
animation: fade-in linear 0.5s;
|
||||
}
|
||||
|
||||
|
|
@ -239,7 +235,6 @@ img[data-src] {
|
|||
.post-content {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#panel-wrapper {
|
||||
|
|
@ -261,12 +256,12 @@ img[data-src] {
|
|||
&:hover {
|
||||
background-color: #2a408e;
|
||||
border-color: #2a408e;
|
||||
color: #fff;
|
||||
color: #ffffff;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-topbar-visible=true] & > div {
|
||||
[data-topbar-visible="true"] & > div {
|
||||
top: 6rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -291,7 +286,6 @@ img[data-src] {
|
|||
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.footnotes > ol {
|
||||
|
|
@ -311,7 +305,7 @@ img[data-src] {
|
|||
|
||||
/* [scroll-focus] added by `smooth-scroll.js` */
|
||||
&:target:not([scroll-focus]),
|
||||
&[scroll-focus=true] > p {
|
||||
&[scroll-focus="true"] > p {
|
||||
background-color: var(--footnote-target-bg);
|
||||
width: fit-content;
|
||||
-webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
|
||||
|
|
@ -416,7 +410,6 @@ img[data-src] {
|
|||
}
|
||||
}
|
||||
} /* a */
|
||||
|
||||
}
|
||||
|
||||
.pageviews .fa-spinner {
|
||||
|
|
@ -459,7 +452,6 @@ img[data-src] {
|
|||
&.img-link {
|
||||
@extend %img-caption;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
> ol,
|
||||
|
|
@ -492,20 +484,17 @@ img[data-src] {
|
|||
color: var(--checkbox-checked-color);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
input[type="checkbox"] {
|
||||
margin: 0 0.5rem 0.2rem -1.3rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
} /* ul */
|
||||
|
||||
dl > dd {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
} /* .post-content */
|
||||
|
||||
.tag:hover {
|
||||
|
|
@ -697,7 +686,7 @@ $sidebar-display: "sidebar-display";
|
|||
font-weight: 900;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 0.5px;
|
||||
color: rgba(134, 133, 133, 99%);
|
||||
color: rgba(134, 133, 133, 0.99);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -788,9 +777,7 @@ $sidebar-display: "sidebar-display";
|
|||
@include fix-cursor($top);
|
||||
}
|
||||
}
|
||||
|
||||
} /* @for */
|
||||
|
||||
} /* ul */
|
||||
|
||||
.sidebar-bottom {
|
||||
|
|
@ -841,9 +828,7 @@ $sidebar-display: "sidebar-display";
|
|||
height: 3px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
} /* .sidebar-bottom */
|
||||
|
||||
} /* #sidebar */
|
||||
|
||||
@media (hover: hover) {
|
||||
|
|
@ -884,14 +869,14 @@ $sidebar-display: "sidebar-display";
|
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
|
||||
background-color: var(--topbar-wrapper-bg);
|
||||
|
||||
[data-topbar-visible=false] & {
|
||||
[data-topbar-visible="false"] & {
|
||||
top: -$topbar-height; /* same as topbar height. */
|
||||
}
|
||||
}
|
||||
|
||||
#topbar {
|
||||
i { /* icons */
|
||||
color: #999;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
#breadcrumb {
|
||||
|
|
@ -1139,7 +1124,7 @@ $sidebar-display: "sidebar-display";
|
|||
}
|
||||
|
||||
.toast-body {
|
||||
font-family: 'Lato';
|
||||
font-family: Lato, sans-serif;
|
||||
line-height: 1.25rem;
|
||||
|
||||
button {
|
||||
|
|
@ -1166,7 +1151,6 @@ $sidebar-display: "sidebar-display";
|
|||
animation: popup 0.8s;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -1208,7 +1192,7 @@ $sidebar-display: "sidebar-display";
|
|||
}
|
||||
|
||||
.post-content {
|
||||
> blockquote[class^=prompt-] {
|
||||
> blockquote[class^="prompt-"] {
|
||||
@include pl-pr(1.25rem);
|
||||
@include ml-mr(-1.25rem);
|
||||
|
||||
|
|
@ -1216,7 +1200,6 @@ $sidebar-display: "sidebar-display";
|
|||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#avatar > a {
|
||||
|
|
@ -1227,7 +1210,6 @@ $sidebar-display: "sidebar-display";
|
|||
.site-subtitle {
|
||||
@include ml-mr(1.8rem);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
|
|
@ -1249,6 +1231,7 @@ $sidebar-display: "sidebar-display";
|
|||
@media all and (max-width: 849px) {
|
||||
@mixin slide($append: null) {
|
||||
$basic: transform 0.4s ease;
|
||||
|
||||
@if $append {
|
||||
-webkit-transition: $basic, $append;
|
||||
transition: $basic, $append;
|
||||
|
|
@ -1347,11 +1330,10 @@ $sidebar-display: "sidebar-display";
|
|||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
} /* max-width: 849px */
|
||||
|
||||
@media all and (max-width: 849px) and (orientation: portrait) {
|
||||
[data-topbar-visible=false] #topbar-wrapper {
|
||||
[data-topbar-visible="false"] #topbar-wrapper {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1370,7 +1352,8 @@ $sidebar-display: "sidebar-display";
|
|||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#main-wrapper, footer {
|
||||
#main-wrapper,
|
||||
footer {
|
||||
margin-left: $sidebar-width;
|
||||
}
|
||||
|
||||
|
|
@ -1404,7 +1387,6 @@ $sidebar-display: "sidebar-display";
|
|||
#topbar-title {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Pad horizontal */
|
||||
|
|
@ -1458,7 +1440,8 @@ $sidebar-display: "sidebar-display";
|
|||
font-size: 90%;
|
||||
}
|
||||
|
||||
#main-wrapper, footer {
|
||||
#main-wrapper,
|
||||
footer {
|
||||
margin-left: $sidebar-width-small;
|
||||
}
|
||||
|
||||
|
|
@ -1469,7 +1452,6 @@ $sidebar-display: "sidebar-display";
|
|||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* panel hidden */
|
||||
|
|
@ -1527,7 +1509,6 @@ $sidebar-display: "sidebar-display";
|
|||
width: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media all and (min-width: 1400px) {
|
||||
|
|
@ -1537,7 +1518,8 @@ $sidebar-display: "sidebar-display";
|
|||
}
|
||||
|
||||
@media all and (min-width: 1650px) {
|
||||
#main-wrapper, footer {
|
||||
#main-wrapper,
|
||||
footer {
|
||||
margin-left: $sidebar-width-large;
|
||||
}
|
||||
|
||||
|
|
@ -1609,7 +1591,6 @@ $sidebar-display: "sidebar-display";
|
|||
word-spacing: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
} /* .profile-wrapper (min-width: 1650px) */
|
||||
|
||||
ul {
|
||||
|
|
@ -1635,7 +1616,6 @@ $sidebar-display: "sidebar-display";
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1679,9 +1659,6 @@ $sidebar-display: "sidebar-display";
|
|||
.icon-border {
|
||||
top: 0.9rem;
|
||||
}
|
||||
|
||||
} /* .sidebar-bottom */
|
||||
|
||||
} /* #sidebar */
|
||||
|
||||
} /* min-width: 1650px */
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
%heading {
|
||||
color: var(--heading-color);
|
||||
font-weight: 400;
|
||||
font-family: 'Lato', 'Microsoft Yahei', sans-serif;
|
||||
font-family: Lato, "Microsoft Yahei", sans-serif;
|
||||
}
|
||||
|
||||
%section {
|
||||
|
|
|
|||
|
|
@ -8,22 +8,22 @@
|
|||
html {
|
||||
@media (prefers-color-scheme: light) {
|
||||
&:not([data-mode]),
|
||||
&[data-mode=light] {
|
||||
&[data-mode="light"] {
|
||||
@include light-syntax;
|
||||
}
|
||||
|
||||
&[data-mode=dark] {
|
||||
&[data-mode="dark"] {
|
||||
@include dark-syntax;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:not([data-mode]),
|
||||
&[data-mode=dark] {
|
||||
&[data-mode="dark"] {
|
||||
@include dark-syntax;
|
||||
}
|
||||
|
||||
&[data-mode=light] {
|
||||
&[data-mode="light"] {
|
||||
@include light-syntax;
|
||||
}
|
||||
}
|
||||
|
|
@ -98,7 +98,6 @@ $code-radius: 6px;
|
|||
.gp {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
} /* .highlight */
|
||||
|
||||
code {
|
||||
|
|
@ -152,16 +151,15 @@ td.rouge-code {
|
|||
border-bottom: none !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Hide line numbers for default, console, and terminal code snippets */
|
||||
div {
|
||||
&[class^='highlighter-rouge'],
|
||||
&[class^="highlighter-rouge"],
|
||||
&.nolineno,
|
||||
&.language-plaintext.highlighter-rouge,
|
||||
&.language-console.highlighter-rouge,
|
||||
&.language-terminal.highlighter-rouge,
|
||||
&.nolineno {
|
||||
&.language-terminal.highlighter-rouge {
|
||||
pre.lineno {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -252,6 +250,10 @@ div {
|
|||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:not([timeout]):hover {
|
||||
background-color: rgba(128, 128, 128, 0.37);
|
||||
|
||||
|
|
@ -259,18 +261,12 @@ div {
|
|||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media all and (max-width: 576px) {
|
||||
.post-content {
|
||||
> div[class^='language-'] {
|
||||
> div[class^="language-"] {
|
||||
@include ml-mr(-1.25rem);
|
||||
|
||||
border-radius: 0;
|
||||
|
|
|
|||
|
|
@ -13,20 +13,16 @@ $sidebar-width-large: 350px !default; /* screen width: >= 1650px */
|
|||
$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 */
|
||||
|
||||
$topbar-height: 3rem !default;
|
||||
|
||||
$search-max-width: 210px !default;
|
||||
|
||||
$footer-height: 5rem !default;
|
||||
$footer-height-mobile: 6rem !default; /* screen width: <= 576px */
|
||||
|
||||
$main-content-max-width: 1250px !default;
|
||||
|
||||
$bottom-min-height: 35rem !default;
|
||||
|
||||
/* syntax highlight */
|
||||
|
|
|
|||
|
|
@ -3,7 +3,24 @@
|
|||
*/
|
||||
|
||||
@mixin dark-syntax {
|
||||
--highlight-bg-color: #252525;
|
||||
--highlighter-rouge-color: #de6b18;
|
||||
--highlight-lineno-color: #6c6c6d;
|
||||
--inline-code-bg: #272822;
|
||||
--code-header-text-color: #6a6a6a;
|
||||
--code-header-muted-color: rgb(60, 60, 60);
|
||||
--code-header-icon-color: rgb(86, 86, 86);
|
||||
--clipboard-checked-color: #2bcc2b;
|
||||
--filepath-text-color: #bdbdbd;
|
||||
|
||||
pre { color: #bfbfbf; } /* override Bootstrap */
|
||||
|
||||
.highlight {
|
||||
.gp { color: #818c96; }
|
||||
}
|
||||
|
||||
/* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
|
||||
|
||||
.highlight pre { background-color: var(--highlight-bg-color); }
|
||||
.highlight .hll { background-color: var(--highlight-bg-color); }
|
||||
.highlight .c { color: #75715e; } /* Comment */
|
||||
|
|
@ -67,22 +84,4 @@
|
|||
.highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
|
||||
.highlight .gd { color: #f92672; background-color: #561c08; } /* Generic.Deleted & Diff Deleted */
|
||||
.highlight .gi { color: #a6e22e; background-color: #0b5858; } /* Generic.Inserted & Diff Inserted */
|
||||
|
||||
/* ----- custom styles ------ */
|
||||
|
||||
--highlight-bg-color: #252525;
|
||||
--highlighter-rouge-color: #de6b18;
|
||||
--highlight-lineno-color: #6c6c6d;
|
||||
--inline-code-bg: #272822;
|
||||
--code-header-text-color: #6a6a6a;
|
||||
--code-header-muted-color: rgb(60 60 60);
|
||||
--code-header-icon-color: rgb(86 86 86);
|
||||
--clipboard-checked-color: #2bcc2b;
|
||||
--filepath-text-color: #bdbdbd;
|
||||
|
||||
.highlight {
|
||||
.gp { color: #818c96; }
|
||||
}
|
||||
|
||||
pre { color: #bfbfbf; } /* override Bootstrap */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,15 +24,15 @@
|
|||
--btn-box-shadow: var(--main-bg);
|
||||
--card-header-bg: rgb(51, 50, 50);
|
||||
--label-color: rgb(108, 117, 125);
|
||||
--checkbox-color: rgb(118 120 121);
|
||||
--checkbox-color: rgb(118, 120, 121);
|
||||
--checkbox-checked-color: var(--link-color);
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
|
||||
--sidebar-muted-color: #6d6c6b;
|
||||
--sidebar-active-color: rgb(255 255 255 / 80%);
|
||||
--sidebar-active-color: rgb(255, 255, 255, 0.8);
|
||||
--nav-cursor-color: rgb(183, 182, 182);
|
||||
--sidebar-btn-bg: rgb(117 116 116 / 20%);
|
||||
--sidebar-btn-bg: rgb(117, 116, 116, 0.2);
|
||||
|
||||
/* Topbar */
|
||||
--topbar-text-color: var(--text-color);
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
--btn-paginator-hover-color: rgb(64, 65, 66);
|
||||
--btn-paginator-border-color: var(--btn-border-color);
|
||||
--btn-text-color: var(--text-color);
|
||||
--pin-bg: rgb(34 35 37);
|
||||
--pin-bg: rgb(34, 35, 37);
|
||||
--pin-color: inherit;
|
||||
|
||||
/* Posts */
|
||||
|
|
@ -65,18 +65,18 @@
|
|||
--card-bg: rgb(39, 40, 43);
|
||||
--card-border-color: rgb(53, 53, 60);
|
||||
--card-box-shadow: var(--main-bg);
|
||||
--preview-img-bg: radial-gradient(circle, rgb(22 22 24) 0%, rgb(32 32 32) 100%);
|
||||
--preview-img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
|
||||
--kbd-wrap-color: #6a6a6a;
|
||||
--kbd-text-color: #d3d3d3;
|
||||
--kbd-bg-color: #242424;
|
||||
--prompt-text-color: rgb(216 212 212 / 75%);
|
||||
--prompt-text-color: rgb(216, 212, 212, 0.75);
|
||||
--prompt-tip-bg: rgba(77, 187, 95, 0.2);
|
||||
--prompt-tip-icon-color: rgb(5 223 5 / 68%);
|
||||
--prompt-info-bg: rgb(7 59 104 / 80%);
|
||||
--prompt-tip-icon-color: rgb(5, 223, 5, 0.68);
|
||||
--prompt-info-bg: rgb(7, 59, 104, 0.8);
|
||||
--prompt-info-icon-color: #0075d1;
|
||||
--prompt-warning-bg: rgb(90 69 3 / 95%);
|
||||
--prompt-warning-icon-color: rgb(255 165 0 / 80%);
|
||||
--prompt-danger-bg: rgb(86 28 8 / 80%);
|
||||
--prompt-warning-bg: rgb(90, 69, 3, 0.95);
|
||||
--prompt-warning-icon-color: rgb(255, 165, 0, 0.8);
|
||||
--prompt-danger-bg: rgb(86, 28, 8, 0.8);
|
||||
--prompt-danger-icon-color: #cd0202;
|
||||
|
||||
/* tags */
|
||||
|
|
@ -104,11 +104,11 @@
|
|||
}
|
||||
|
||||
/* posts' toc, override BS */
|
||||
nav[data-toggle=toc] .nav-link.active,
|
||||
nav[data-toggle=toc] .nav-link.active:focus,
|
||||
nav[data-toggle=toc] .nav-link.active:hover,
|
||||
nav[data-toggle=toc] .nav > li > a:focus,
|
||||
nav[data-toggle=toc] .nav > li > a:hover {
|
||||
nav[data-toggle="toc"] .nav-link.active,
|
||||
nav[data-toggle="toc"] .nav-link.active:focus,
|
||||
nav[data-toggle="toc"] .nav-link.active:hover,
|
||||
nav[data-toggle="toc"] .nav > li > a:focus,
|
||||
nav[data-toggle="toc"] .nav > li > a:hover {
|
||||
color: var(--toc-highlight) !important;
|
||||
border-left-color: var(--toc-highlight) !important;
|
||||
}
|
||||
|
|
@ -150,8 +150,7 @@
|
|||
|
||||
color-scheme: dark;
|
||||
|
||||
#disqus_thread {
|
||||
#disqus_thread { /* stylelint-disable-line selector-id-pattern */
|
||||
color-scheme: none;
|
||||
}
|
||||
|
||||
} /* dark-scheme */
|
||||
|
|
|
|||
|
|
@ -76,9 +76,8 @@
|
|||
--code-header-icon-color: #d1d1d1;
|
||||
--clipboard-checked-color: #43c743;
|
||||
|
||||
[class^=prompt-] {
|
||||
[class^="prompt-"] {
|
||||
--inline-code-bg: #fbfafa;
|
||||
--highlighter-rouge-color: rgb(82 82 82);
|
||||
--highlighter-rouge-color: rgb(82, 82, 82);
|
||||
}
|
||||
|
||||
} /* light-syntax */
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@
|
|||
--text-color: #34343c;
|
||||
--text-muted-color: gray;
|
||||
--heading-color: black;
|
||||
--blockquote-border-color: #eee;
|
||||
--blockquote-border-color: #eeeeee;
|
||||
--blockquote-text-color: #9a9a9a;
|
||||
--link-color: #2a408e;
|
||||
--link-underline-color: #dee2e6;
|
||||
--button-bg: #fff;
|
||||
--button-bg: #ffffff;
|
||||
--btn-border-color: #e9ecef;
|
||||
--btn-backtotop-color: #686868;
|
||||
--btn-backtotop-border-color: #f1f1f1;
|
||||
|
|
@ -35,8 +35,8 @@
|
|||
/* Topbar */
|
||||
--topbar-text-color: rgb(78, 78, 78);
|
||||
--topbar-wrapper-bg: white;
|
||||
--search-wrapper-bg: rgb(245 245 245 / 50%);
|
||||
--search-wrapper-border-color: rgb(245 245 245);
|
||||
--search-wrapper-bg: rgb(245, 245, 245, 0.5);
|
||||
--search-wrapper-border-color: rgb(245, 245, 245);
|
||||
--search-tag-bg: #f8f9fa;
|
||||
--search-icon-color: #c2c6cc;
|
||||
--input-focus-border-color: var(--btn-border-color);
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
/* Posts */
|
||||
--btn-share-hover-color: var(--link-color);
|
||||
--card-border-color: #f1f1f1;
|
||||
--card-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
|
||||
--card-box-shadow: rgba(234, 234, 234, 0.76);
|
||||
--label-color: #616161;
|
||||
--relate-post-date: rgba(30, 55, 70, 0.4);
|
||||
--footnote-target-bg: lightcyan;
|
||||
|
|
@ -64,22 +64,22 @@
|
|||
--tb-odd-bg: #fbfcfd;
|
||||
--tb-border-color: #eaeaea;
|
||||
--dash-color: silver;
|
||||
--preview-img-bg: radial-gradient(circle, rgb(255 255 255) 0%, rgb(249 249 249) 100%);
|
||||
--preview-img-bg: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 100%);
|
||||
--kbd-wrap-color: #bdbdbd;
|
||||
--kbd-text-color: var(--text-color);
|
||||
--kbd-bg-color: white;
|
||||
--prompt-text-color: rgb(46 46 46 / 77%);
|
||||
--prompt-tip-bg: rgb(123 247 144 / 20%);
|
||||
--prompt-text-color: rgb(46, 46, 46, 0.77);
|
||||
--prompt-tip-bg: rgb(123, 247, 144, 0.2);
|
||||
--prompt-tip-icon-color: #03b303;
|
||||
--prompt-info-bg: #e1f5fe;
|
||||
--prompt-info-icon-color: #0070cb;
|
||||
--prompt-warning-bg: rgb(255 243 205);
|
||||
--prompt-warning-bg: rgb(255, 243, 205);
|
||||
--prompt-warning-icon-color: #ef9c03;
|
||||
--prompt-danger-bg: rgb(248 215 218 / 56%);
|
||||
--prompt-danger-bg: rgb(248, 215, 218, 0.56);
|
||||
--prompt-danger-icon-color: #df3c30;
|
||||
|
||||
[class^=prompt-] {
|
||||
--link-underline-color: rgb(219 216 216);
|
||||
[class^="prompt-"] {
|
||||
--link-underline-color: rgb(219, 216, 216);
|
||||
}
|
||||
|
||||
/* Categories */
|
||||
|
|
@ -90,5 +90,4 @@
|
|||
--timeline-color: rgba(0, 0, 0, 0.075);
|
||||
--timeline-node-bg: #c2c6cc;
|
||||
--timeline-year-dot-color: #ffffff;
|
||||
|
||||
} /* light-scheme */
|
||||
|
|
|
|||
|
|
@ -41,8 +41,6 @@
|
|||
content: "";
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
|
@ -53,7 +51,6 @@
|
|||
box-shadow: 0 0 2px 0 #c2c6cc;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -65,8 +62,8 @@
|
|||
text-overflow: ellipsis;
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: var(--main-bg, #fff);
|
||||
background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
|
||||
background-color: var(--main-bg, #ffffff);
|
||||
background-image: linear-gradient(to left, #ffffff, #fbfbfb, #fbfbfb, #fbfbfb, #ffffff);
|
||||
}
|
||||
|
||||
&::before {
|
||||
|
|
@ -81,7 +78,6 @@
|
|||
&:last-child li:last-child::before {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
} /* #archives ul */
|
||||
|
||||
.date {
|
||||
|
|
@ -97,8 +93,7 @@
|
|||
|
||||
&.day {
|
||||
font-size: 85%;
|
||||
font-family: 'Lato', sans-serif;
|
||||
|
||||
font-family: Lato, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -117,8 +112,6 @@
|
|||
content: "";
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
|
|
@ -130,8 +123,7 @@
|
|||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
} // #archives
|
||||
} /* #archives */
|
||||
|
||||
@media all and (max-width: 576px) {
|
||||
#archives {
|
||||
|
|
|
|||
|
|
@ -28,10 +28,8 @@
|
|||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
} // .categories
|
||||
} /* .categories */
|
||||
|
||||
.category-trigger {
|
||||
width: 1.7rem;
|
||||
|
|
@ -40,18 +38,18 @@
|
|||
text-align: center;
|
||||
color: #6c757d !important;
|
||||
|
||||
&:hover {
|
||||
i {
|
||||
color: var(--categories-icon-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
position: relative;
|
||||
height: 0.7rem;
|
||||
width: 1rem;
|
||||
transition: transform 300ms ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
i {
|
||||
color: var(--categories-icon-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) { // only works on desktop
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
padding: 0.6rem 0;
|
||||
|
||||
&::before { // dot
|
||||
background: #999;
|
||||
background: #999999;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
.pagination {
|
||||
color: var(--btn-patinator-text-color);
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-family: Lato, sans-serif;
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
|
|
@ -49,9 +49,8 @@
|
|||
&:last-child .page-link {
|
||||
border-radius: 50%;
|
||||
}
|
||||
} // .page-item
|
||||
|
||||
} // .pagination
|
||||
} /* .page-item */
|
||||
} /* .pagination */
|
||||
|
||||
#post-list {
|
||||
margin-top: 1rem;
|
||||
|
|
@ -83,6 +82,18 @@
|
|||
em {
|
||||
@extend %normal-font-style;
|
||||
}
|
||||
|
||||
.pin {
|
||||
i {
|
||||
transform: rotate(45deg);
|
||||
padding-left: 3px;
|
||||
color: var(--pin-color);
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-content {
|
||||
|
|
@ -100,21 +111,8 @@
|
|||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.pin {
|
||||
> i {
|
||||
transform: rotate(45deg);
|
||||
padding-left: 3px;
|
||||
color: var(--pin-color);
|
||||
}
|
||||
|
||||
> span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
} // .post-preview
|
||||
} // #post-list
|
||||
} /* .post-preview */
|
||||
} /* #post-list */
|
||||
|
||||
/* Hide SideBar and TOC */
|
||||
@media all and (max-width: 830px) {
|
||||
|
|
@ -125,9 +123,7 @@
|
|||
&:not(:first-child):not(:last-child) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -165,15 +161,12 @@
|
|||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.page-index {
|
||||
display: none;
|
||||
}
|
||||
|
||||
} // .pagination
|
||||
|
||||
} /* .pagination */
|
||||
}
|
||||
|
||||
/* Panel hidden */
|
||||
|
|
|
|||
|
|
@ -26,6 +26,15 @@
|
|||
color: var(--text-color);
|
||||
}
|
||||
|
||||
img.preview-img {
|
||||
margin: 0;
|
||||
border-radius: 6px;
|
||||
|
||||
&.bg[data-loaded="true"] {
|
||||
background: var(--preview-img-bg);
|
||||
}
|
||||
}
|
||||
|
||||
h1 + .post-meta {
|
||||
span + span::before {
|
||||
@include dot;
|
||||
|
|
@ -40,23 +49,94 @@ h1 + .post-meta {
|
|||
}
|
||||
}
|
||||
|
||||
img.preview-img {
|
||||
margin: 0;
|
||||
border-radius: 6px;
|
||||
|
||||
&.bg[data-loaded=true] {
|
||||
background: var(--preview-img-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.post-tail-wrapper {
|
||||
margin-top: 6rem;
|
||||
border-bottom: 1px double var(--main-border-color);
|
||||
font-size: 0.85rem;
|
||||
|
||||
.post-tail-bottom a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.license-wrapper {
|
||||
line-height: 1.2rem;
|
||||
|
||||
> a {
|
||||
color: var(--text-color);
|
||||
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
}
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
} /* .license-wrapper */
|
||||
|
||||
.post-meta a:not(:hover) {
|
||||
@extend %link-underline;
|
||||
}
|
||||
|
||||
.share-wrapper {
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
|
||||
.share-icons {
|
||||
font-size: 1.2rem;
|
||||
|
||||
> i {
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
|
||||
@extend %cursor-pointer;
|
||||
|
||||
&:hover {
|
||||
@extend %btn-share-hovor;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&:not(:last-child) {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
||||
>i {
|
||||
@extend %btn-share-hovor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fab {
|
||||
&.fa-twitter {
|
||||
@include btn-sharing-color(rgba(29, 161, 242, 1));
|
||||
}
|
||||
|
||||
&.fa-facebook-square {
|
||||
@include btn-sharing-color(rgb(66, 95, 156));
|
||||
}
|
||||
|
||||
&.fa-telegram {
|
||||
@include btn-sharing-color(rgb(39, 159, 217));
|
||||
}
|
||||
|
||||
&.fa-linkedin {
|
||||
@include btn-sharing-color(rgb(0, 119, 181));
|
||||
}
|
||||
|
||||
&.fa-weibo {
|
||||
@include btn-sharing-color(rgb(229, 20, 43));
|
||||
}
|
||||
}
|
||||
} /* .share-icons */
|
||||
|
||||
.fas.fa-link {
|
||||
@include btn-sharing-color(rgb(171, 171, 171));
|
||||
}
|
||||
} /* .share-wrapper */
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
|
|
@ -74,7 +154,7 @@ img.preview-img {
|
|||
|
||||
&:hover {
|
||||
background: #2a408e;
|
||||
color: #fff;
|
||||
color: #ffffff;
|
||||
border-color: #2a408e;
|
||||
}
|
||||
|
||||
|
|
@ -121,7 +201,6 @@ img.preview-img {
|
|||
margin-top: 0.3rem;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
} /* .post-navigation */
|
||||
|
||||
@keyframes fade-up {
|
||||
|
|
@ -130,6 +209,7 @@ img.preview-img {
|
|||
position: relative;
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
|
|
@ -158,7 +238,7 @@ img.preview-img {
|
|||
}
|
||||
}
|
||||
|
||||
nav[data-toggle=toc] {
|
||||
nav[data-toggle="toc"] {
|
||||
.nav {
|
||||
.nav > li > a.active {
|
||||
font-weight: 600 !important;
|
||||
|
|
@ -179,6 +259,20 @@ nav[data-toggle=toc] {
|
|||
color: var(--relate-post-date);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-color: var(--card-border-color);
|
||||
background-color: var(--card-bg);
|
||||
|
|
@ -197,37 +291,6 @@ nav[data-toggle=toc] {
|
|||
box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding-inline-start: 1.5rem;
|
||||
|
||||
> li::before {
|
||||
background: #c2c9d4;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 1px;
|
||||
display: block;
|
||||
content: "";
|
||||
position: relative;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#tail-wrapper {
|
||||
|
|
@ -237,82 +300,15 @@ nav[data-toggle=toc] {
|
|||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
#disqus_thread {
|
||||
#disqus_thread { /* stylelint-disable-line selector-id-pattern */
|
||||
min-height: 8.5rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.post-tail-bottom a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
%btn-share-hovor {
|
||||
color: var(--btn-share-hover-color) !important;
|
||||
}
|
||||
|
||||
.share-wrapper {
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
|
||||
.share-icons {
|
||||
font-size: 1.2rem;
|
||||
|
||||
a {
|
||||
&:not(:last-child) {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
||||
> i {
|
||||
@extend %btn-share-hovor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
|
||||
@extend %cursor-pointer;
|
||||
|
||||
&:hover {
|
||||
@extend %btn-share-hovor;
|
||||
}
|
||||
}
|
||||
|
||||
.fab {
|
||||
&.fa-twitter {
|
||||
@include btn-sharing-color(rgba(29, 161, 242, 1));
|
||||
}
|
||||
|
||||
&.fa-facebook-square {
|
||||
@include btn-sharing-color(rgb(66, 95, 156));
|
||||
}
|
||||
|
||||
&.fa-telegram {
|
||||
@include btn-sharing-color(rgb(39, 159, 217));
|
||||
}
|
||||
|
||||
&.fa-linkedin {
|
||||
@include btn-sharing-color(rgb(0, 119, 181));
|
||||
}
|
||||
|
||||
&.fa-weibo {
|
||||
@include btn-sharing-color(rgb(229, 20, 43));
|
||||
}
|
||||
}
|
||||
|
||||
} /* .share-icons */
|
||||
|
||||
.fas.fa-link {
|
||||
@include btn-sharing-color(rgb(171, 171, 171));
|
||||
}
|
||||
|
||||
} /* .share-wrapper */
|
||||
|
||||
.share-label {
|
||||
@include label(inherit, 400, inherit);
|
||||
|
||||
|
|
@ -321,23 +317,6 @@ nav[data-toggle=toc] {
|
|||
}
|
||||
}
|
||||
|
||||
.license-wrapper {
|
||||
line-height: 1.2rem;
|
||||
|
||||
> a {
|
||||
color: var(--text-color);
|
||||
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
}
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
} /* .license-wrapper */
|
||||
|
||||
@media all and (max-width: 576px) {
|
||||
.preview-img[data-src] {
|
||||
margin-top: 2.2rem;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,6 @@
|
|||
span {
|
||||
margin-left: 0.6em;
|
||||
font-size: 0.7em;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-family: Oswald, sans-serif;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue