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