Fix SCSS code style
This commit is contained in:
Cotes Chung
parent
2dc2175723
commit
b5c26fed08
8 changed files with 103 additions and 33 deletions
|
|
@ -6,12 +6,9 @@
|
|||
@mixin mode-toggle($dark-mode: false) {
|
||||
@if $dark-mode {
|
||||
@include dark-scheme;
|
||||
|
||||
} @else {
|
||||
@include light-scheme;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
html:not([mode]),
|
||||
|
|
@ -175,15 +172,18 @@ footer {
|
|||
|
||||
a {
|
||||
color: var(--footer-link);
|
||||
|
||||
&:link {
|
||||
@include no-text-decoration;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
|
||||
@include no-text-decoration;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -202,22 +202,28 @@ footer {
|
|||
position: -webkit-sticky; /* Safari */
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
&.topbar-down {
|
||||
top: 6rem;
|
||||
}
|
||||
|
||||
> div {
|
||||
padding-left: 1rem;
|
||||
border-left: 1px solid var(--main-border-color);
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@include panel-label;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#access-tags {
|
||||
|
|
@ -234,6 +240,7 @@ footer {
|
|||
border-radius: 0.8rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
margin: 0 0.35rem 0.5rem 0;
|
||||
|
||||
&:hover {
|
||||
background-color: #2a408e;
|
||||
border-color: #2a408e;
|
||||
|
|
@ -244,7 +251,6 @@ footer {
|
|||
}
|
||||
|
||||
#access-lastmod {
|
||||
|
||||
li {
|
||||
height: 1.8rem;
|
||||
overflow: hidden;
|
||||
|
|
@ -270,15 +276,18 @@ footer {
|
|||
.footnotes > ol {
|
||||
padding-left: 2rem;
|
||||
margin-top: 0.5rem;
|
||||
|
||||
> li {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
> p {
|
||||
margin-left: 0.25em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// [scroll-focus] added by `smooth-scroll.js`
|
||||
&:target:not([scroll-focus]),
|
||||
&[scroll-focus=true] > p {
|
||||
|
|
@ -323,9 +332,11 @@ footer {
|
|||
margin-top: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
em { /* MarkDown italic */
|
||||
padding-right: 0.2rem;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
code {
|
||||
@extend %link-hover;
|
||||
|
|
@ -346,6 +357,7 @@ footer {
|
|||
|
||||
thead {
|
||||
border-bottom: solid 2px rgba(210, 215, 217, 0.75);
|
||||
|
||||
th {
|
||||
@extend %table-cell;
|
||||
}
|
||||
|
|
@ -354,18 +366,21 @@ footer {
|
|||
tbody {
|
||||
tr {
|
||||
border-bottom: 1px solid var(--tb-border-color);
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: var(--tb-even-bg);
|
||||
}
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
background-color: var(--tb-odd-bg);
|
||||
}
|
||||
|
||||
td {
|
||||
@extend %table-cell;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} // tbody
|
||||
}// table
|
||||
}
|
||||
|
||||
/* --- post --- */
|
||||
|
|
@ -377,12 +392,15 @@ footer {
|
|||
.post-meta {
|
||||
font-size: 0.85rem;
|
||||
word-spacing: 1px;
|
||||
|
||||
a {
|
||||
@extend %link-color;
|
||||
@extend %link-underline;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
}
|
||||
|
|
@ -416,7 +434,7 @@ footer {
|
|||
margin: 0.5rem 0;
|
||||
|
||||
&[data-loaded=true] {
|
||||
animation: fade-in linear .5s;
|
||||
animation: fade-in linear 0.5s;
|
||||
}
|
||||
|
||||
&.left {
|
||||
|
|
@ -445,6 +463,7 @@ footer {
|
|||
&:not(.img-link) {
|
||||
@extend %link-color;
|
||||
@extend %link-underline;
|
||||
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
}
|
||||
|
|
@ -473,6 +492,7 @@ footer {
|
|||
margin: 0 0.4rem 0.2rem -1.4rem;
|
||||
vertical-align: middle;
|
||||
color: var(--checkbox-color);
|
||||
|
||||
&.checked {
|
||||
color: var(--checkbox-checked-color);
|
||||
}
|
||||
|
|
@ -546,6 +566,7 @@ footer {
|
|||
padding: 1px 3px;
|
||||
border-radius: 3px;
|
||||
color: var(--link-color);
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -755,7 +776,6 @@ $sidebar-display: "sidebar-display";
|
|||
width: 100%;
|
||||
|
||||
&:last-child {
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
left: $cursor-width / 2;
|
||||
|
|
@ -871,6 +891,7 @@ $sidebar-display: "sidebar-display";
|
|||
display: none;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.post-content {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
|
@ -959,6 +980,7 @@ $sidebar-display: "sidebar-display";
|
|||
&:focus {
|
||||
box-shadow: none;
|
||||
background: center;
|
||||
|
||||
&.form-control {
|
||||
&::-webkit-input-placeholder { @include input-placeholder; }
|
||||
&::-moz-placeholder { @include input-placeholder; }
|
||||
|
|
@ -979,6 +1001,7 @@ $sidebar-display: "sidebar-display";
|
|||
border: none;
|
||||
padding: 0.5rem;
|
||||
margin: 0 1rem 1rem 0;
|
||||
|
||||
&::before {
|
||||
content: "#";
|
||||
color: var(--text-muted-color);
|
||||
|
|
@ -989,6 +1012,7 @@ $sidebar-display: "sidebar-display";
|
|||
|
||||
#search-results {
|
||||
padding-bottom: 6rem;
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
|
|
@ -1081,6 +1105,7 @@ $sidebar-display: "sidebar-display";
|
|||
&:nth-child(2) {
|
||||
margin-top: $topbar-height; /* same as the height of topbar */
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
/* 3rem for topbar, 6rem for footer */
|
||||
min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height});
|
||||
|
|
@ -1088,8 +1113,7 @@ $sidebar-display: "sidebar-display";
|
|||
}
|
||||
|
||||
#post-wrapper {
|
||||
min-height: calc(
|
||||
100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
|
||||
min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
|
||||
}
|
||||
|
||||
#topbar-wrapper.row,
|
||||
|
|
@ -1147,8 +1171,8 @@ $sidebar-display: "sidebar-display";
|
|||
}
|
||||
|
||||
#post-wrapper {
|
||||
min-height: calc(
|
||||
100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
|
||||
min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
|
||||
|
||||
h1 {
|
||||
margin-top: 2.2rem;
|
||||
font-size: 1.55rem;
|
||||
|
|
@ -1170,6 +1194,7 @@ $sidebar-display: "sidebar-display";
|
|||
|
||||
footer {
|
||||
height: $footer-height;
|
||||
|
||||
> div.d-flex {
|
||||
width: 100%;
|
||||
padding: 1.5rem 0;
|
||||
|
|
@ -1178,6 +1203,7 @@ $sidebar-display: "sidebar-display";
|
|||
-ms-flex-pack: distribute !important;
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
|
||||
.footer-left,
|
||||
.footer-right {
|
||||
text-align: center;
|
||||
|
|
@ -1201,13 +1227,13 @@ $sidebar-display: "sidebar-display";
|
|||
.footnotes ol > li {
|
||||
padding-top: 3.5rem;
|
||||
margin-top: -3.2rem;
|
||||
|
||||
&:first-child {
|
||||
margin-top: -3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
[#{$sidebar-display}] {
|
||||
|
||||
#sidebar {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
|
@ -1272,6 +1298,7 @@ $sidebar-display: "sidebar-display";
|
|||
&.loaded ~ a {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.fa-times-circle {
|
||||
right: 5.2rem;
|
||||
}
|
||||
|
|
@ -1299,6 +1326,7 @@ $sidebar-display: "sidebar-display";
|
|||
|
||||
#page h1.dynamic-title {
|
||||
display: none;
|
||||
|
||||
~ .post-content {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
|
@ -1373,7 +1401,6 @@ $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;
|
||||
|
||||
|
|
@ -1387,6 +1414,7 @@ $sidebar-display: "sidebar-display";
|
|||
span {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.icon-border {
|
||||
left: -3px;
|
||||
}
|
||||
|
|
@ -1446,7 +1474,6 @@ $sidebar-display: "sidebar-display";
|
|||
/* --- desktop mode, both sidebar and panel are visible --- */
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
|
||||
#main > div.row > div.col-xl-8 {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 75%;
|
||||
|
|
@ -1476,12 +1503,15 @@ $sidebar-display: "sidebar-display";
|
|||
|
||||
#search-results > div {
|
||||
width: 46%;
|
||||
|
||||
&:nth-child(odd) {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
&:last-child:nth-child(odd) {
|
||||
position: relative;
|
||||
right: 24.3%;
|
||||
|
|
@ -1499,9 +1529,9 @@ $sidebar-display: "sidebar-display";
|
|||
}
|
||||
|
||||
@media all and (min-width: 1400px) {
|
||||
|
||||
#main > div.row {
|
||||
padding-left: calc((100% - #{$main-content-max-width}) / 2);
|
||||
|
||||
> div.col-xl-8 {
|
||||
max-width: 850px;
|
||||
}
|
||||
|
|
@ -1509,6 +1539,7 @@ $sidebar-display: "sidebar-display";
|
|||
|
||||
#search-result-wrapper {
|
||||
padding-right: 2rem;
|
||||
|
||||
> div {
|
||||
max-width: 1110px;
|
||||
}
|
||||
|
|
@ -1527,13 +1558,13 @@ $sidebar-display: "sidebar-display";
|
|||
}
|
||||
|
||||
@media all and (min-width: 1650px) {
|
||||
|
||||
#breadcrumb {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#main > div.row > div.col-xl-8 {
|
||||
padding-left: 0;
|
||||
|
||||
> div:first-child {
|
||||
padding-left: 0.55rem !important;
|
||||
padding-right: 1.9rem !important;
|
||||
|
|
@ -1581,6 +1612,7 @@ $sidebar-display: "sidebar-display";
|
|||
> a {
|
||||
width: 6.2rem;
|
||||
height: 6.2rem;
|
||||
|
||||
&.mx-auto {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@ div > pre {
|
|||
table {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
td pre {
|
||||
overflow: visible; /* Fixed iOS safari overflow-x */
|
||||
word-break: normal; /* Fixed iOS safari linenos code break */
|
||||
|
|
@ -157,6 +158,7 @@ div {
|
|||
pre.lineno {
|
||||
display: none;
|
||||
}
|
||||
|
||||
td.rouge-code {
|
||||
@extend %code-snippet-padding;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -116,11 +116,13 @@
|
|||
.card-header {
|
||||
background-color: var(--card-header-bg);
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
padding-left: 2rem;
|
||||
border-color: var(--categories-border);
|
||||
|
||||
&:last-child {
|
||||
border-bottom-color: var(--card-bg);
|
||||
}
|
||||
|
|
@ -128,13 +130,16 @@
|
|||
}
|
||||
|
||||
#archives li:nth-child(odd) {
|
||||
background-image: linear-gradient(
|
||||
background-image:
|
||||
linear-gradient(
|
||||
to left,
|
||||
rgb(26, 26, 30),
|
||||
rgb(39, 39, 45),
|
||||
rgb(39, 39, 45),
|
||||
rgb(39, 39, 45),
|
||||
rgb(26, 26, 30));
|
||||
rgb(26, 26, 30)
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
} // dark-scheme
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
&:not(:first-child) {
|
||||
position: relative;
|
||||
left: 4px;
|
||||
|
||||
&::after {
|
||||
left: 67px;
|
||||
}
|
||||
|
|
@ -98,6 +99,7 @@
|
|||
.date {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
|
||||
&.month {
|
||||
width: 1.4rem;
|
||||
text-align: center;
|
||||
|
|
@ -120,6 +122,7 @@
|
|||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.day {
|
||||
font-size: 85%;
|
||||
font-family: 'Lato', sans-serif;
|
||||
|
|
@ -127,7 +130,7 @@
|
|||
margin-right: -2px;
|
||||
width: 1.2rem;
|
||||
position: relative;
|
||||
left: -.15rem;
|
||||
left: -0.15rem;
|
||||
}
|
||||
} // #archives .date
|
||||
|
||||
|
|
@ -136,6 +139,7 @@
|
|||
@media all and (max-width: 576px) {
|
||||
#archives {
|
||||
margin-top: -1rem;
|
||||
|
||||
ul {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
*/
|
||||
|
||||
.dash {
|
||||
margin: 0 .5rem .6rem .5rem;
|
||||
margin: 0 0.5rem 0.6rem 0.5rem;
|
||||
border-bottom: 2px dotted var(--dash-color);
|
||||
}
|
||||
|
||||
|
|
@ -60,8 +60,9 @@
|
|||
#page-tag {
|
||||
ul > li {
|
||||
&::before {
|
||||
margin: 0 .5rem;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
> a {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -22,24 +22,29 @@
|
|||
border-radius: 50%;
|
||||
border: 1px solid var(--btn-paginator-border-color);
|
||||
background-color: var(--button-bg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--btn-paginator-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.page-link {
|
||||
background-color: var(--btn-paginator-hover-color);
|
||||
color: var(--btn-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
.page-link {
|
||||
color: rgba(108, 117, 125, 0.57);
|
||||
border-color: var(--btn-paginator-border-color);
|
||||
background-color: var(--button-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child .page-link,
|
||||
&:last-child .page-link {
|
||||
border-radius: 50%;
|
||||
|
|
@ -70,6 +75,7 @@
|
|||
i {
|
||||
font-size: 0.73rem;
|
||||
}
|
||||
|
||||
span:not(:last-child) {
|
||||
margin-right: 1.2rem;
|
||||
}
|
||||
|
|
@ -79,6 +85,7 @@
|
|||
margin-top: 0.6rem;
|
||||
margin-bottom: 0.6rem;
|
||||
color: var(--post-list-text-color);
|
||||
|
||||
> p {
|
||||
/* Make preview shorter on the homepage */
|
||||
margin: 0;
|
||||
|
|
@ -96,13 +103,13 @@
|
|||
padding-left: 3px;
|
||||
color: var(--pin-color);
|
||||
}
|
||||
|
||||
> span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
} // .post-preview
|
||||
|
||||
} // #post-list
|
||||
|
||||
/* Hide SideBar and TOC */
|
||||
|
|
@ -122,9 +129,9 @@
|
|||
|
||||
/* Sidebar is visible */
|
||||
@media all and (min-width: 831px) {
|
||||
|
||||
#post-list {
|
||||
margin-top: 1.5rem;
|
||||
|
||||
.post-preview .post-meta {
|
||||
.pin {
|
||||
background: var(--pin-bg);
|
||||
|
|
|
|||
|
|
@ -131,9 +131,11 @@
|
|||
top: 4rem;
|
||||
transition: top 0.2s ease-in-out;
|
||||
animation: fade-up 0.8s;
|
||||
|
||||
&.topbar-down {
|
||||
top: 6rem;
|
||||
}
|
||||
|
||||
> span {
|
||||
@include panel-label;
|
||||
}
|
||||
|
|
@ -162,6 +164,7 @@ nav[data-toggle=toc] {
|
|||
> h3 {
|
||||
@include label(1.1rem, 600);
|
||||
}
|
||||
|
||||
.card {
|
||||
border-color: var(--card-border-color);
|
||||
background-color: var(--card-bg);
|
||||
|
|
@ -169,9 +172,11 @@ nav[data-toggle=toc] {
|
|||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
h3 {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
-webkit-transform: translate3d(0, -3px, 0);
|
||||
transform: translate3d(0, -3px, 0);
|
||||
|
|
@ -200,6 +205,7 @@ nav[data-toggle=toc] {
|
|||
ul {
|
||||
list-style-type: none;
|
||||
padding-inline-start: 1.5rem;
|
||||
|
||||
> li::before {
|
||||
background: #c2c9d4;
|
||||
width: 5px;
|
||||
|
|
@ -238,17 +244,21 @@ nav[data-toggle=toc] {
|
|||
|
||||
.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;
|
||||
|
|
@ -259,16 +269,20 @@ nav[data-toggle=toc] {
|
|||
@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-weibo {
|
||||
@include btn-sharing-color(rgb(229, 20, 43));
|
||||
}
|
||||
|
|
@ -292,8 +306,10 @@ nav[data-toggle=toc] {
|
|||
|
||||
.license-wrapper {
|
||||
line-height: 1.2rem;
|
||||
|
||||
> a {
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
}
|
||||
|
|
@ -308,6 +324,7 @@ nav[data-toggle=toc] {
|
|||
.post-tail-bottom {
|
||||
-ms-flex-wrap: wrap-reverse !important;
|
||||
flex-wrap: wrap-reverse !important;
|
||||
|
||||
> div:first-child {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
|
|
@ -327,6 +344,7 @@ nav[data-toggle=toc] {
|
|||
> div:not(:first-child)::before {
|
||||
@include dot(0.5rem, 0.2rem);
|
||||
}
|
||||
|
||||
&.flex-column {
|
||||
-webkit-box-orient: horizontal !important;
|
||||
-webkit-box-direction: normal !important;
|
||||
|
|
@ -342,7 +360,7 @@ nav[data-toggle=toc] {
|
|||
.post-navigation {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-left: -.5rem;
|
||||
margin-right: -.5rem;
|
||||
margin-left: -0.5rem;
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
letter-spacing: 0;
|
||||
border: 1px solid var(--tag-border) !important;
|
||||
box-shadow: 0 0 3px 0 var(--tag-shadow);
|
||||
|
||||
span {
|
||||
margin-left: 0.6em;
|
||||
font-size: 0.7em;
|
||||
|
|
|
|||
Loading…
Reference in a new issue