f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 05:41:31 +00:00
Code Issues Packages Releases Activity

style: improve SCSS style

Browse Source
This commit is contained in:
Cotes Chung
2022-10-20 02:05:29 +08:00
parent 294e2985c1
commit a6ce765082
15 changed files with 242 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
_sass/addon/commons.scss
View File

@@ -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 */