Fix SCSS code style

This commit is contained in:
Cotes Chung 2021-10-26 03:04:15 +08:00
parent 2dc2175723
commit b5c26fed08
8 changed files with 103 additions and 33 deletions

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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(
to left,
rgb(26, 26, 30),
rgb(39, 39, 45),
rgb(39, 39, 45),
rgb(39, 39, 45),
rgb(26, 26, 30));
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)
);
}
} // dark-scheme

View file

@ -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;
}

View file

@ -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;

View file

@ -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);

View file

@ -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,7 +324,8 @@ nav[data-toggle=toc] {
.post-tail-bottom {
-ms-flex-wrap: wrap-reverse !important;
flex-wrap: wrap-reverse !important;
>div:first-child {
> div:first-child {
width: 100%;
margin-top: 1rem;
}
@ -324,9 +341,10 @@ nav[data-toggle=toc] {
@media all and (min-width: 768px) {
#post-wrapper {
.post-meta {
>div:not(:first-child)::before {
> 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;
}
}

View file

@ -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;