mirror of
https://github.com/cotes2020/jekyll-theme-chirpy.git
synced 2025-06-13 11:08:05 +00:00
Compare commits
3 Commits
fd0dc6c670
...
9706811c3a
| Author | SHA1 | Date | |
|---|---|---|---|
|
9706811c3a | ||
|
|
a4812e4a1f | ||
|
|
81d3d055e4 |
@ -1,3 +1,8 @@
|
|||||||
|
@use '../colors/typography-dark';
|
||||||
|
@use '../colors/typography-light';
|
||||||
|
@use 'module';
|
||||||
|
@use 'variables';
|
||||||
|
|
||||||
/* The common styles */
|
/* The common styles */
|
||||||
|
|
||||||
html {
|
html {
|
||||||
@ -6,22 +11,22 @@ html {
|
|||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
&:not([data-mode]),
|
&:not([data-mode]),
|
||||||
&[data-mode='light'] {
|
&[data-mode='light'] {
|
||||||
@include light-scheme;
|
@include typography-light.light-scheme;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-mode='dark'] {
|
&[data-mode='dark'] {
|
||||||
@include dark-scheme;
|
@include typography-dark.dark-scheme;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
&:not([data-mode]),
|
&:not([data-mode]),
|
||||||
&[data-mode='dark'] {
|
&[data-mode='dark'] {
|
||||||
@include dark-scheme;
|
@include typography-dark.dark-scheme;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-mode='light'] {
|
&[data-mode='light'] {
|
||||||
@include light-scheme;
|
@include typography-light.light-scheme;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -32,17 +37,17 @@ body {
|
|||||||
env(safe-area-inset-bottom) env(safe-area-inset-left);
|
env(safe-area-inset-bottom) env(safe-area-inset-left);
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
font-family: $font-family-base;
|
font-family: variables.$font-family-base;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Typography --- */
|
/* --- Typography --- */
|
||||||
|
|
||||||
@for $i from 1 through 5 {
|
@for $i from 1 through 5 {
|
||||||
h#{$i} {
|
h#{$i} {
|
||||||
@extend %heading;
|
@extend %heading !optional;
|
||||||
|
|
||||||
@if $i > 1 {
|
@if $i > 1 {
|
||||||
@extend %anchor;
|
@extend %anchor !optional;
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $i < 5 {
|
@if $i < 5 {
|
||||||
@ -70,7 +75,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@extend %link-color;
|
@extend %link-color !optional;
|
||||||
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
@ -104,7 +109,7 @@ blockquote {
|
|||||||
padding: 1rem 1rem 1rem 3rem;
|
padding: 1rem 1rem 1rem 3rem;
|
||||||
color: var(--prompt-text-color);
|
color: var(--prompt-text-color);
|
||||||
|
|
||||||
@extend %rounded;
|
@extend %rounded !optional;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -117,10 +122,10 @@ blockquote {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include prompt('tip', '\f0eb', $fa-style: 'regular');
|
@include module.prompt('tip', '\f0eb', $fa-style: 'regular');
|
||||||
@include prompt('info', '\f06a', $rotate: 180);
|
@include module.prompt('info', '\f06a', $rotate: 180);
|
||||||
@include prompt('warning', '\f06a');
|
@include module.prompt('warning', '\f06a');
|
||||||
@include prompt('danger', '\f071');
|
@include module.prompt('danger', '\f071');
|
||||||
}
|
}
|
||||||
|
|
||||||
kbd {
|
kbd {
|
||||||
@ -134,7 +139,7 @@ kbd {
|
|||||||
padding-top: 0.1rem;
|
padding-top: 0.1rem;
|
||||||
color: var(--kbd-text-color);
|
color: var(--kbd-text-color);
|
||||||
background-color: var(--kbd-bg-color);
|
background-color: var(--kbd-bg-color);
|
||||||
border-radius: $radius-sm;
|
border-radius: variables.$radius-sm;
|
||||||
border: solid 1px var(--kbd-wrap-color);
|
border: solid 1px var(--kbd-wrap-color);
|
||||||
box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
|
box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
|
||||||
}
|
}
|
||||||
@ -146,21 +151,21 @@ hr {
|
|||||||
|
|
||||||
footer {
|
footer {
|
||||||
background-color: var(--main-bg);
|
background-color: var(--main-bg);
|
||||||
height: $footer-height;
|
height: variables.$footer-height;
|
||||||
border-top: 1px solid var(--main-border-color);
|
border-top: 1px solid var(--main-border-color);
|
||||||
|
|
||||||
@extend %text-xs;
|
@extend %text-xs !optional;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@extend %text-highlight;
|
@extend %text-highlight !optional;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@extend %link-hover;
|
@extend %link-hover !optional;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
em {
|
em {
|
||||||
@extend %text-highlight;
|
@extend %text-highlight !optional;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
@ -173,7 +178,7 @@ footer {
|
|||||||
i {
|
i {
|
||||||
&.far,
|
&.far,
|
||||||
&.fas {
|
&.fas {
|
||||||
@extend %no-cursor;
|
@extend %no-cursor !optional;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -210,7 +215,7 @@ i {
|
|||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
|
|
||||||
@include label(inherit);
|
@include module.label(inherit);
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-tag {
|
.post-tag {
|
||||||
@ -231,10 +236,10 @@ i {
|
|||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@extend %link-hover;
|
@extend %link-hover !optional;
|
||||||
}
|
}
|
||||||
|
|
||||||
@extend %no-bottom-border;
|
@extend %no-bottom-border !optional;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -247,27 +252,27 @@ i {
|
|||||||
margin-bottom: 0.3rem;
|
margin-bottom: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@extend %sup-fn-target;
|
@extend %sup-fn-target !optional;
|
||||||
|
|
||||||
> p {
|
> p {
|
||||||
margin-left: 0.25em;
|
margin-left: 0.25em;
|
||||||
|
|
||||||
@include mt-mb(0);
|
@include module.mt-mb(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.footnote {
|
.footnote {
|
||||||
@at-root a#{&} {
|
@at-root a#{&} {
|
||||||
@include ml-mr(1px);
|
@include module.ml-mr(1px);
|
||||||
@include pl-pr(2px);
|
@include module.pl-pr(2px);
|
||||||
|
|
||||||
border-bottom-style: none !important;
|
border-bottom-style: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
sup {
|
sup {
|
||||||
@extend %sup-fn-target;
|
@extend %sup-fn-target !optional;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reversefootnote {
|
.reversefootnote {
|
||||||
@ -297,7 +302,7 @@ sup {
|
|||||||
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 !optional;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -314,7 +319,7 @@ sup {
|
|||||||
}
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
@extend %table-cell;
|
@extend %table-cell !optional;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} /* tbody */
|
} /* tbody */
|
||||||
@ -329,7 +334,7 @@ sup {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
@extend %rounded;
|
@extend %rounded !optional;
|
||||||
|
|
||||||
&:not(.no-bg) {
|
&:not(.no-bg) {
|
||||||
background: var(--img-bg);
|
background: var(--img-bg);
|
||||||
@ -340,7 +345,7 @@ sup {
|
|||||||
-o-object-fit: cover;
|
-o-object-fit: cover;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
|
||||||
@extend %rounded;
|
@extend %rounded !optional;
|
||||||
|
|
||||||
@at-root #post-list & {
|
@at-root #post-list & {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -349,14 +354,14 @@ sup {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.post-preview {
|
.post-preview {
|
||||||
@extend %rounded;
|
@extend %rounded !optional;
|
||||||
|
|
||||||
border: 0;
|
border: 0;
|
||||||
background: var(--card-bg);
|
background: var(--card-bg);
|
||||||
box-shadow: var(--card-shadow);
|
box-shadow: var(--card-shadow);
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
@extend %rounded;
|
@extend %rounded !optional;
|
||||||
|
|
||||||
content: '';
|
content: '';
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -384,7 +389,7 @@ main {
|
|||||||
p {
|
p {
|
||||||
> a.popup {
|
> a.popup {
|
||||||
&:not(.normal):not(.left):not(.right) {
|
&:not(.normal):not(.left):not(.right) {
|
||||||
@include align-center;
|
@include module.align-center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -393,22 +398,22 @@ main {
|
|||||||
#tags,
|
#tags,
|
||||||
#archives {
|
#archives {
|
||||||
a:not(:hover) {
|
a:not(:hover) {
|
||||||
@extend %no-bottom-border;
|
@extend %no-bottom-border !optional;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-meta {
|
.post-meta {
|
||||||
@extend %text-sm;
|
@extend %text-sm !optional;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
&:not([class]):hover {
|
&:not([class]):hover {
|
||||||
@extend %link-hover;
|
@extend %link-hover !optional;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
em {
|
em {
|
||||||
@extend %normal-font-style;
|
@extend %normal-font-style !optional;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -419,18 +424,18 @@ main {
|
|||||||
|
|
||||||
a {
|
a {
|
||||||
&.popup {
|
&.popup {
|
||||||
@extend %no-cursor;
|
@extend %no-cursor !optional;
|
||||||
@extend %img-caption;
|
@extend %img-caption !optional;
|
||||||
@include mt-mb(0.5rem);
|
@include module.mt-mb(0.5rem);
|
||||||
|
|
||||||
cursor: zoom-in;
|
cursor: zoom-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.img-link) {
|
&:not(.img-link) {
|
||||||
@extend %link-underline;
|
@extend %link-underline !optional;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@extend %link-hover;
|
@extend %link-hover !optional;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -497,7 +502,7 @@ main {
|
|||||||
} /* .content */
|
} /* .content */
|
||||||
|
|
||||||
.tag:hover {
|
.tag:hover {
|
||||||
@extend %tag-hover;
|
@extend %tag-hover !optional;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-tag {
|
.post-tag {
|
||||||
@ -566,7 +571,7 @@ main {
|
|||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
aspect-ratio: 16 / 9;
|
aspect-ratio: 16 / 9;
|
||||||
|
|
||||||
@extend %rounded;
|
@extend %rounded !optional;
|
||||||
|
|
||||||
&.twitch {
|
&.twitch {
|
||||||
aspect-ratio: 310 / 189;
|
aspect-ratio: 310 / 189;
|
||||||
@ -582,14 +587,14 @@ main {
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@extend %img-caption;
|
@extend %img-caption !optional;
|
||||||
}
|
}
|
||||||
|
|
||||||
.embed-audio {
|
.embed-audio {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
@extend %img-caption;
|
@extend %img-caption !optional;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- buttons --- */
|
/* --- buttons --- */
|
||||||
@ -680,14 +685,14 @@ $btn-border-width: 3px;
|
|||||||
$btn-mb: 0.5rem;
|
$btn-mb: 0.5rem;
|
||||||
|
|
||||||
#sidebar {
|
#sidebar {
|
||||||
@include pl-pr(0);
|
@include module.pl-pr(0);
|
||||||
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
width: $sidebar-width;
|
width: variables.$sidebar-width;
|
||||||
background: var(--sidebar-bg);
|
background: var(--sidebar-bg);
|
||||||
border-right: 1px solid var(--sidebar-border-color);
|
border-right: 1px solid var(--sidebar-border-color);
|
||||||
|
|
||||||
@ -707,7 +712,7 @@ $btn-mb: 0.5rem;
|
|||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@extend %sidebar-links;
|
@extend %sidebar-links !optional;
|
||||||
}
|
}
|
||||||
|
|
||||||
#avatar {
|
#avatar {
|
||||||
@ -728,8 +733,8 @@ $btn-mb: 0.5rem;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.profile-wrapper {
|
.profile-wrapper {
|
||||||
@include mt-mb(2.5rem);
|
@include module.mt-mb(2.5rem);
|
||||||
@extend %clickable-transition;
|
@extend %clickable-transition !optional;
|
||||||
|
|
||||||
padding-left: 2.5rem;
|
padding-left: 2.5rem;
|
||||||
padding-right: 1.25rem;
|
padding-right: 1.25rem;
|
||||||
@ -737,8 +742,8 @@ $btn-mb: 0.5rem;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.site-title {
|
.site-title {
|
||||||
@extend %clickable-transition;
|
@extend %clickable-transition !optional;
|
||||||
@extend %sidebar-link-hover;
|
@extend %sidebar-link-hover !optional;
|
||||||
|
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
@ -769,10 +774,10 @@ $btn-mb: 0.5rem;
|
|||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
@include pl-pr(1.5rem);
|
@include module.pl-pr(1.5rem);
|
||||||
|
|
||||||
a.nav-link {
|
a.nav-link {
|
||||||
@include pt-pb(0.6rem);
|
@include module.pt-pb(0.6rem);
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -841,12 +846,12 @@ $btn-mb: 0.5rem;
|
|||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@extend %button;
|
@extend %button !optional;
|
||||||
@extend %sidebar-link-hover;
|
@extend %sidebar-link-hover !optional;
|
||||||
@extend %clickable-transition;
|
@extend %clickable-transition !optional;
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
margin-right: $sb-btn-gap;
|
margin-right: variables.$sb-btn-gap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -855,14 +860,14 @@ $btn-mb: 0.5rem;
|
|||||||
}
|
}
|
||||||
|
|
||||||
#mode-toggle {
|
#mode-toggle {
|
||||||
@extend %button;
|
@extend %button !optional;
|
||||||
@extend %sidebar-links;
|
@extend %sidebar-links !optional;
|
||||||
@extend %sidebar-link-hover;
|
@extend %sidebar-link-hover !optional;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-border {
|
.icon-border {
|
||||||
@extend %no-cursor;
|
@extend %no-cursor !optional;
|
||||||
@include ml-mr(calc(($sb-btn-gap - $btn-border-width) / 2));
|
@include module.ml-mr(calc((variables.$sb-btn-gap - $btn-border-width) / 2));
|
||||||
|
|
||||||
background-color: var(--sidebar-btn-color);
|
background-color: var(--sidebar-btn-color);
|
||||||
content: '';
|
content: '';
|
||||||
@ -902,12 +907,12 @@ $btn-mb: 0.5rem;
|
|||||||
/* --- top-bar --- */
|
/* --- top-bar --- */
|
||||||
|
|
||||||
#topbar-wrapper {
|
#topbar-wrapper {
|
||||||
height: $topbar-height;
|
height: variables.$topbar-height;
|
||||||
background-color: var(--topbar-bg);
|
background-color: var(--topbar-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
#topbar {
|
#topbar {
|
||||||
@extend %btn-color;
|
@extend %btn-color !optional;
|
||||||
|
|
||||||
#breadcrumb {
|
#breadcrumb {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
@ -915,7 +920,7 @@ $btn-mb: 0.5rem;
|
|||||||
padding-left: 0.5rem;
|
padding-left: 0.5rem;
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
@extend %link-hover;
|
@extend %link-hover !optional;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
@ -930,43 +935,43 @@ $btn-mb: 0.5rem;
|
|||||||
} /* #topbar */
|
} /* #topbar */
|
||||||
|
|
||||||
::-webkit-input-placeholder {
|
::-webkit-input-placeholder {
|
||||||
@include placeholder;
|
@include module.placeholder;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-moz-placeholder {
|
::-moz-placeholder {
|
||||||
@include placeholder;
|
@include module.placeholder;
|
||||||
}
|
}
|
||||||
|
|
||||||
:-ms-input-placeholder {
|
:-ms-input-placeholder {
|
||||||
@include placeholder;
|
@include module.placeholder;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-ms-input-placeholder {
|
::-ms-input-placeholder {
|
||||||
@include placeholder;
|
@include module.placeholder;
|
||||||
}
|
}
|
||||||
|
|
||||||
::placeholder {
|
::placeholder {
|
||||||
@include placeholder;
|
@include module.placeholder;
|
||||||
}
|
}
|
||||||
|
|
||||||
:focus::-webkit-input-placeholder {
|
:focus::-webkit-input-placeholder {
|
||||||
@include placeholder-focus;
|
@include module.placeholder-focus;
|
||||||
}
|
}
|
||||||
|
|
||||||
:focus::-moz-placeholder {
|
:focus::-moz-placeholder {
|
||||||
@include placeholder-focus;
|
@include module.placeholder-focus;
|
||||||
}
|
}
|
||||||
|
|
||||||
:focus:-ms-input-placeholder {
|
:focus:-ms-input-placeholder {
|
||||||
@include placeholder-focus;
|
@include module.placeholder-focus;
|
||||||
}
|
}
|
||||||
|
|
||||||
:focus::-ms-input-placeholder {
|
:focus::-ms-input-placeholder {
|
||||||
@include placeholder-focus;
|
@include module.placeholder-focus;
|
||||||
}
|
}
|
||||||
|
|
||||||
:focus::placeholder {
|
:focus::placeholder {
|
||||||
@include placeholder-focus;
|
@include module.placeholder-focus;
|
||||||
}
|
}
|
||||||
|
|
||||||
search {
|
search {
|
||||||
@ -995,7 +1000,7 @@ search {
|
|||||||
display: none;
|
display: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
@extend %cursor-pointer;
|
@extend %cursor-pointer !optional;
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-input {
|
#search-input {
|
||||||
@ -1033,7 +1038,7 @@ search {
|
|||||||
padding-right: 0.2rem;
|
padding-right: 0.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@extend %link-color;
|
@extend %link-color !optional;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1045,12 +1050,12 @@ search {
|
|||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@extend %link-hover;
|
@extend %link-hover !optional;
|
||||||
}
|
}
|
||||||
|
|
||||||
@extend %link-color;
|
@extend %link-color !optional;
|
||||||
@extend %no-bottom-border;
|
@extend %no-bottom-border !optional;
|
||||||
@extend %heading;
|
@extend %heading !optional;
|
||||||
}
|
}
|
||||||
|
|
||||||
> article {
|
> article {
|
||||||
@ -1068,7 +1073,7 @@ search {
|
|||||||
}
|
}
|
||||||
|
|
||||||
> p {
|
> p {
|
||||||
@extend %text-ellipsis;
|
@extend %text-ellipsis !optional;
|
||||||
|
|
||||||
white-space: break-spaces;
|
white-space: break-spaces;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
@ -1098,7 +1103,7 @@ search {
|
|||||||
#main-wrapper {
|
#main-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@include pl-pr(0);
|
@include module.pl-pr(0);
|
||||||
|
|
||||||
> .container {
|
> .container {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@ -1108,7 +1113,7 @@ search {
|
|||||||
#topbar-wrapper.row,
|
#topbar-wrapper.row,
|
||||||
#main-wrapper > .container > .row,
|
#main-wrapper > .container > .row,
|
||||||
#search-result-wrapper > .row {
|
#search-result-wrapper > .row {
|
||||||
@include ml-mr(0);
|
@include module.ml-mr(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
#tail-wrapper {
|
#tail-wrapper {
|
||||||
@ -1126,12 +1131,12 @@ search {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 1rem;
|
right: 1rem;
|
||||||
bottom: calc($footer-height-large - $back2top-size / 2);
|
bottom: calc(variables.$footer-height-large - variables.$back2top-size / 2);
|
||||||
background: var(--button-bg);
|
background: var(--button-bg);
|
||||||
color: var(--btn-backtotop-color);
|
color: var(--btn-backtotop-color);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: $back2top-size;
|
width: variables.$back2top-size;
|
||||||
height: $back2top-size;
|
height: variables.$back2top-size;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 1px solid var(--btn-backtotop-border-color);
|
border: 1px solid var(--btn-backtotop-border-color);
|
||||||
transition: opacity 0.5s ease-in-out, transform 0.2s ease-out;
|
transition: opacity 0.5s ease-in-out, transform 0.2s ease-out;
|
||||||
@ -1142,7 +1147,7 @@ search {
|
|||||||
}
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
line-height: $back2top-size;
|
line-height: variables.$back2top-size;
|
||||||
position: relative;
|
position: relative;
|
||||||
bottom: 2px;
|
bottom: 2px;
|
||||||
}
|
}
|
||||||
@ -1216,7 +1221,7 @@ search {
|
|||||||
main {
|
main {
|
||||||
.content {
|
.content {
|
||||||
> blockquote[class^='prompt-'] {
|
> blockquote[class^='prompt-'] {
|
||||||
@include ml-mr(-1rem);
|
@include module.ml-mr(-1rem);
|
||||||
|
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
max-width: none;
|
max-width: none;
|
||||||
@ -1236,12 +1241,12 @@ search {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#topbar {
|
#topbar {
|
||||||
@extend %full-width;
|
@extend %full-width !optional;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-wrapper > .container {
|
#main-wrapper > .container {
|
||||||
@extend %full-width;
|
@extend %full-width !optional;
|
||||||
@include pl-pr(0);
|
@include module.pl-pr(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1260,7 +1265,7 @@ search {
|
|||||||
footer {
|
footer {
|
||||||
@include slide;
|
@include slide;
|
||||||
|
|
||||||
height: $footer-height-large;
|
height: variables.$footer-height-large;
|
||||||
padding: 1.5rem 0;
|
padding: 1.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1270,7 +1275,7 @@ search {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#main-wrapper {
|
#main-wrapper {
|
||||||
transform: translateX($sidebar-width);
|
transform: translateX(variables.$sidebar-width);
|
||||||
}
|
}
|
||||||
|
|
||||||
#back-to-top {
|
#back-to-top {
|
||||||
@ -1281,8 +1286,8 @@ search {
|
|||||||
#sidebar {
|
#sidebar {
|
||||||
@include slide;
|
@include slide;
|
||||||
|
|
||||||
transform: translateX(-$sidebar-width); /* hide */
|
transform: translateX(-(variables.$sidebar-width)); /* hide */
|
||||||
-webkit-transform: translateX(-$sidebar-width);
|
-webkit-transform: translateX(-(variables.$sidebar-width));
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-wrapper {
|
#main-wrapper {
|
||||||
@ -1345,7 +1350,7 @@ search {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#main-wrapper {
|
#main-wrapper {
|
||||||
margin-left: $sidebar-width;
|
margin-left: variables.$sidebar-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar {
|
#sidebar {
|
||||||
@ -1359,11 +1364,11 @@ search {
|
|||||||
}
|
}
|
||||||
|
|
||||||
search {
|
search {
|
||||||
max-width: $search-max-width;
|
max-width: variables.$search-max-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-result-wrapper {
|
#search-result-wrapper {
|
||||||
max-width: $main-content-max-width;
|
max-width: variables.$main-content-max-width;
|
||||||
justify-content: start !important;
|
justify-content: start !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1380,7 +1385,7 @@ search {
|
|||||||
/* button 'back-to-Top' position */
|
/* button 'back-to-Top' position */
|
||||||
#back-to-top {
|
#back-to-top {
|
||||||
right: 5%;
|
right: 5%;
|
||||||
bottom: calc($footer-height - $back2top-size / 2);
|
bottom: calc(variables.$footer-height - variables.$back2top-size / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
#topbar-title {
|
#topbar-title {
|
||||||
@ -1457,7 +1462,7 @@ search {
|
|||||||
|
|
||||||
@media all and (min-width: 1400px) {
|
@media all and (min-width: 1400px) {
|
||||||
#back-to-top {
|
#back-to-top {
|
||||||
right: calc((100vw - $sidebar-width - 1140px) / 2 + 3rem);
|
right: calc((100vw - variables.$sidebar-width - 1140px) / 2 + 3rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1465,23 +1470,23 @@ search {
|
|||||||
$icon-gap: 1rem;
|
$icon-gap: 1rem;
|
||||||
|
|
||||||
#main-wrapper {
|
#main-wrapper {
|
||||||
margin-left: $sidebar-width-large;
|
margin-left: variables.$sidebar-width-large;
|
||||||
}
|
}
|
||||||
|
|
||||||
#topbar-wrapper {
|
#topbar-wrapper {
|
||||||
left: $sidebar-width-large;
|
left: variables.$sidebar-width-large;
|
||||||
}
|
}
|
||||||
|
|
||||||
search {
|
search {
|
||||||
margin-right: calc(
|
margin-right: calc(
|
||||||
$main-content-max-width / 4 - $search-max-width - 0.75rem
|
variables.$main-content-max-width / 4 - variables.$search-max-width - 0.75rem
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-wrapper > .container {
|
#main-wrapper > .container {
|
||||||
max-width: $main-content-max-width;
|
max-width: variables.$main-content-max-width;
|
||||||
|
|
||||||
@include pl-pr(1.75rem, true);
|
@include module.pl-pr(1.75rem, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
main.col-12,
|
main.col-12,
|
||||||
@ -1491,12 +1496,12 @@ search {
|
|||||||
|
|
||||||
#back-to-top {
|
#back-to-top {
|
||||||
right: calc(
|
right: calc(
|
||||||
(100vw - $sidebar-width-large - $main-content-max-width) / 2 + 2rem
|
(100vw - variables.$sidebar-width-large - variables.$main-content-max-width) / 2 + 2rem
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar {
|
#sidebar {
|
||||||
width: $sidebar-width-large;
|
width: variables.$sidebar-width-large;
|
||||||
|
|
||||||
.profile-wrapper {
|
.profile-wrapper {
|
||||||
margin-top: 3.5rem;
|
margin-top: 3.5rem;
|
||||||
@ -1506,7 +1511,7 @@ search {
|
|||||||
|
|
||||||
ul {
|
ul {
|
||||||
li.nav-item {
|
li.nav-item {
|
||||||
@include pl-pr(2.75rem);
|
@include module.pl-pr(2.75rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1515,11 +1520,11 @@ search {
|
|||||||
margin-bottom: 1.75rem;
|
margin-bottom: 1.75rem;
|
||||||
|
|
||||||
a:not(:last-child) {
|
a:not(:last-child) {
|
||||||
margin-right: $sb-btn-gap-lg;
|
margin-right: variables.$sb-btn-gap-lg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-border {
|
.icon-border {
|
||||||
@include ml-mr(calc(($sb-btn-gap-lg - $btn-border-width) / 2));
|
@include module.ml-mr(calc((variables.$sb-btn-gap-lg - $btn-border-width) / 2));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
@use 'variables';
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Mainly scss modules, only imported to `assets/css/main.scss`
|
* Mainly scss modules, only imported to `assets/css/main.scss`
|
||||||
*/
|
*/
|
||||||
@ -7,7 +9,7 @@
|
|||||||
%heading {
|
%heading {
|
||||||
color: var(--heading-color);
|
color: var(--heading-color);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-family: $font-family-heading;
|
font-family: variables.$font-family-heading;
|
||||||
scroll-margin-top: 3.5rem;
|
scroll-margin-top: 3.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -82,7 +84,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
%rounded {
|
%rounded {
|
||||||
border-radius: $radius-lg;
|
border-radius: variables.$radius-lg;
|
||||||
}
|
}
|
||||||
|
|
||||||
%img-caption {
|
%img-caption {
|
||||||
|
|||||||
@ -2,29 +2,31 @@
|
|||||||
* The syntax highlight.
|
* The syntax highlight.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import 'colors/syntax-light';
|
@use '../colors/syntax-light';
|
||||||
@import 'colors/syntax-dark';
|
@use '../colors/syntax-dark';
|
||||||
|
@use 'module';
|
||||||
|
@use 'variables';
|
||||||
|
|
||||||
html {
|
html {
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
&:not([data-mode]),
|
&:not([data-mode]),
|
||||||
&[data-mode='light'] {
|
&[data-mode='light'] {
|
||||||
@include light-syntax;
|
@include syntax-light.light-syntax;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-mode='dark'] {
|
&[data-mode='dark'] {
|
||||||
@include dark-syntax;
|
@include syntax-dark.dark-syntax;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
&:not([data-mode]),
|
&:not([data-mode]),
|
||||||
&[data-mode='dark'] {
|
&[data-mode='dark'] {
|
||||||
@include dark-syntax;
|
@include syntax-dark.dark-syntax;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-mode='light'] {
|
&[data-mode='light'] {
|
||||||
@include light-syntax;
|
@include syntax-light.light-syntax;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -47,19 +49,19 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.highlight {
|
.highlight {
|
||||||
@extend %rounded;
|
@extend %rounded !optional;
|
||||||
@extend %code-snippet-bg;
|
@extend %code-snippet-bg !optional;
|
||||||
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding-bottom: 0.75rem;
|
padding-bottom: 0.75rem;
|
||||||
|
|
||||||
@at-root figure#{&} {
|
@at-root figure#{&} {
|
||||||
@extend %code-snippet-bg;
|
@extend %code-snippet-bg !optional;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
font-size: $code-font-size;
|
font-size: variables.$code-font-size;
|
||||||
line-height: 1.4rem;
|
line-height: 1.4rem;
|
||||||
word-wrap: normal; /* Fixed Safari overflow-x */
|
word-wrap: normal; /* Fixed Safari overflow-x */
|
||||||
}
|
}
|
||||||
@ -101,10 +103,10 @@ code {
|
|||||||
color: var(--code-color);
|
color: var(--code-color);
|
||||||
|
|
||||||
&.highlighter-rouge {
|
&.highlighter-rouge {
|
||||||
font-size: $code-font-size;
|
font-size: variables.$code-font-size;
|
||||||
padding: 3px 5px;
|
padding: 3px 5px;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
border-radius: $radius-sm;
|
border-radius: variables.$radius-sm;
|
||||||
background-color: var(--inline-code-bg);
|
background-color: var(--inline-code-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -130,7 +132,7 @@ code {
|
|||||||
}
|
}
|
||||||
|
|
||||||
td.rouge-code {
|
td.rouge-code {
|
||||||
@extend %code-snippet-padding;
|
@extend %code-snippet-padding !optional;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Prevent some browser extends from
|
Prevent some browser extends from
|
||||||
@ -144,13 +146,13 @@ td.rouge-code {
|
|||||||
}
|
}
|
||||||
|
|
||||||
div[class^='language-'] {
|
div[class^='language-'] {
|
||||||
@extend %rounded;
|
@extend %rounded !optional;
|
||||||
@extend %code-snippet-bg;
|
@extend %code-snippet-bg !optional;
|
||||||
|
|
||||||
box-shadow: var(--language-border-color) 0 0 0 1px;
|
box-shadow: var(--language-border-color) 0 0 0 1px;
|
||||||
|
|
||||||
.content > & {
|
.content > & {
|
||||||
@include ml-mr(-1rem);
|
@include module.ml-mr(-1rem);
|
||||||
|
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
@ -179,23 +181,23 @@ div {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.code-header {
|
.code-header {
|
||||||
@extend %no-cursor;
|
@extend %no-cursor !optional;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: $code-header-height;
|
height: variables.$code-header-height;
|
||||||
margin-left: 0.75rem;
|
margin-left: 0.75rem;
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.25rem;
|
||||||
|
|
||||||
/* the label block */
|
/* the label block */
|
||||||
span {
|
span {
|
||||||
line-height: $code-header-height;
|
line-height: variables.$code-header-height;
|
||||||
|
|
||||||
/* label icon */
|
/* label icon */
|
||||||
i {
|
i {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
width: $code-icon-width;
|
width: variables.$code-icon-width;
|
||||||
color: var(--code-header-icon-color);
|
color: var(--code-header-icon-color);
|
||||||
|
|
||||||
&.small {
|
&.small {
|
||||||
@ -219,12 +221,12 @@ div {
|
|||||||
|
|
||||||
/* clipboard */
|
/* clipboard */
|
||||||
button {
|
button {
|
||||||
@extend %cursor-pointer;
|
@extend %cursor-pointer !optional;
|
||||||
@extend %rounded;
|
@extend %rounded !optional;
|
||||||
|
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
height: $code-header-height;
|
height: variables.$code-header-height;
|
||||||
width: $code-header-height;
|
width: variables.$code-header-height;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background-color: inherit;
|
background-color: inherit;
|
||||||
|
|
||||||
@ -259,13 +261,13 @@ div {
|
|||||||
@media all and (min-width: 576px) {
|
@media all and (min-width: 576px) {
|
||||||
div[class^='language-'] {
|
div[class^='language-'] {
|
||||||
.content > & {
|
.content > & {
|
||||||
@include ml-mr(0);
|
@include module.ml-mr(0);
|
||||||
|
|
||||||
border-radius: $radius-lg;
|
border-radius: variables.$radius-lg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.code-header {
|
.code-header {
|
||||||
@include ml-mr(0);
|
@include module.ml-mr(0);
|
||||||
|
|
||||||
$dot-margin: 1rem;
|
$dot-margin: 1rem;
|
||||||
|
|
||||||
@ -273,19 +275,19 @@ div {
|
|||||||
content: '';
|
content: '';
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: $dot-margin;
|
margin-left: $dot-margin;
|
||||||
width: $code-dot-size;
|
width: variables.$code-dot-size;
|
||||||
height: $code-dot-size;
|
height: variables.$code-dot-size;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(--code-header-muted-color);
|
background-color: var(--code-header-muted-color);
|
||||||
box-shadow: ($code-dot-size + $code-dot-gap) 0 0
|
box-shadow: (variables.$code-dot-size + variables.$code-dot-gap) 0 0
|
||||||
var(--code-header-muted-color),
|
var(--code-header-muted-color),
|
||||||
($code-dot-size + $code-dot-gap) * 2 0 0
|
(variables.$code-dot-size + variables.$code-dot-gap) * 2 0 0
|
||||||
var(--code-header-muted-color);
|
var(--code-header-muted-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
// center the text of label
|
// center the text of label
|
||||||
margin-left: calc(($dot-margin + $code-dot-size) / 2 * -1);
|
margin-left: calc(($dot-margin + variables.$code-dot-size) / 2 * -1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -23,7 +23,7 @@
|
|||||||
margin-left: -$timeline-width;
|
margin-left: -$timeline-width;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
@extend %timeline;
|
@extend %timeline !optional;
|
||||||
|
|
||||||
height: 72px;
|
height: 72px;
|
||||||
left: 79px;
|
left: 79px;
|
||||||
@ -31,7 +31,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:first-child::before {
|
&:first-child::before {
|
||||||
@extend %timeline;
|
@extend %timeline !optional;
|
||||||
|
|
||||||
height: 32px;
|
height: 32px;
|
||||||
top: 24px;
|
top: 24px;
|
||||||
@ -59,7 +59,7 @@
|
|||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
line-height: 3rem;
|
line-height: 3rem;
|
||||||
|
|
||||||
@extend %text-ellipsis;
|
@extend %text-ellipsis !optional;
|
||||||
|
|
||||||
&:nth-child(odd) {
|
&:nth-child(odd) {
|
||||||
background-color: var(--main-bg, #ffffff);
|
background-color: var(--main-bg, #ffffff);
|
||||||
@ -74,7 +74,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
@extend %timeline;
|
@extend %timeline !optional;
|
||||||
|
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 77px;
|
left: 77px;
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
@use '../addon/variables';
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Style for Tab Categories
|
Style for Tab Categories
|
||||||
*/
|
*/
|
||||||
@ -12,11 +14,11 @@
|
|||||||
|
|
||||||
&.card,
|
&.card,
|
||||||
.list-group {
|
.list-group {
|
||||||
@extend %rounded;
|
@extend %rounded !optional;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
$radius: calc($radius-lg - 1px);
|
$radius: calc(variables.$radius-lg - 1px);
|
||||||
|
|
||||||
padding: 0.75rem;
|
padding: 0.75rem;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
@ -29,7 +31,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
@extend %category-icon-color;
|
@extend %category-icon-color !optional;
|
||||||
|
|
||||||
font-size: 86%; /* fontawesome icons */
|
font-size: 86%; /* fontawesome icons */
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
@use '../addon/module';
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Style for page Category and Tag
|
Style for page Category and Tag
|
||||||
*/
|
*/
|
||||||
@ -28,7 +30,7 @@
|
|||||||
|
|
||||||
/* post's title */
|
/* post's title */
|
||||||
> a {
|
> a {
|
||||||
@extend %no-bottom-border;
|
@extend %no-bottom-border !optional;
|
||||||
|
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
}
|
}
|
||||||
@ -48,7 +50,7 @@
|
|||||||
#page-tag,
|
#page-tag,
|
||||||
#access-lastmod {
|
#access-lastmod {
|
||||||
a:hover {
|
a:hover {
|
||||||
@extend %link-hover;
|
@extend %link-hover !optional;
|
||||||
|
|
||||||
margin-bottom: -1px; /* Avoid jumping */
|
margin-bottom: -1px; /* Avoid jumping */
|
||||||
}
|
}
|
||||||
@ -63,7 +65,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
@include text-ellipsis;
|
@include module.text-ellipsis;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
@use '../addon/variables';
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Style for Homepage
|
Style for Homepage
|
||||||
*/
|
*/
|
||||||
@ -20,14 +22,14 @@
|
|||||||
background: none;
|
background: none;
|
||||||
|
|
||||||
%img-radius {
|
%img-radius {
|
||||||
border-radius: $radius-lg $radius-lg 0 0;
|
border-radius: variables.$radius-lg variables.$radius-lg 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-img {
|
.preview-img {
|
||||||
@extend %img-radius;
|
@extend %img-radius !optional;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
@extend %img-radius;
|
@extend %img-radius !optional;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -36,7 +38,7 @@
|
|||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
@extend %text-clip;
|
@extend %text-clip !optional;
|
||||||
|
|
||||||
color: var(--heading-color) !important;
|
color: var(--heading-color) !important;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
@ -47,10 +49,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card-text.content {
|
.card-text.content {
|
||||||
@extend %muted;
|
@extend %muted !optional;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
@extend %text-clip;
|
@extend %text-clip !optional;
|
||||||
|
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -58,7 +60,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.post-meta {
|
.post-meta {
|
||||||
@extend %muted;
|
@extend %muted !optional;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
&:not(:first-child) {
|
&:not(:first-child) {
|
||||||
@ -67,7 +69,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
em {
|
em {
|
||||||
@extend %normal-font-style;
|
@extend %normal-font-style !optional;
|
||||||
|
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
@ -75,7 +77,7 @@
|
|||||||
> div:first-child {
|
> div:first-child {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
@extend %text-ellipsis;
|
@extend %text-ellipsis !optional;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -130,7 +132,7 @@
|
|||||||
/* Tablet */
|
/* Tablet */
|
||||||
@media all and (min-width: 768px) {
|
@media all and (min-width: 768px) {
|
||||||
%img-radius {
|
%img-radius {
|
||||||
border-radius: 0 $radius-lg $radius-lg 0;
|
border-radius: 0 variables.$radius-lg variables.$radius-lg 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#post-list {
|
#post-list {
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
@use '../addon/module';
|
||||||
|
@use '../addon/variables';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Post-specific styles
|
* Post-specific styles
|
||||||
*/
|
*/
|
||||||
@ -16,7 +19,7 @@
|
|||||||
|
|
||||||
header {
|
header {
|
||||||
.post-desc {
|
.post-desc {
|
||||||
@extend %heading;
|
@extend %heading !optional;
|
||||||
|
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
@ -29,7 +32,7 @@ header {
|
|||||||
|
|
||||||
em,
|
em,
|
||||||
time {
|
time {
|
||||||
@extend %text-highlight;
|
@extend %text-highlight !optional;
|
||||||
}
|
}
|
||||||
|
|
||||||
em {
|
em {
|
||||||
@ -45,7 +48,7 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.post-tail-wrapper {
|
.post-tail-wrapper {
|
||||||
@extend %text-sm;
|
@extend %text-sm !optional;
|
||||||
|
|
||||||
margin-top: 6rem;
|
margin-top: 6rem;
|
||||||
border-bottom: 1px double var(--main-border-color);
|
border-bottom: 1px double var(--main-border-color);
|
||||||
@ -54,20 +57,20 @@ header {
|
|||||||
line-height: 1.2rem;
|
line-height: 1.2rem;
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
@extend %text-highlight;
|
@extend %text-highlight !optional;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@extend %link-hover;
|
@extend %link-hover !optional;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
span:last-child {
|
span:last-child {
|
||||||
@extend %text-sm;
|
@extend %text-sm !optional;
|
||||||
}
|
}
|
||||||
} /* .license-wrapper */
|
} /* .license-wrapper */
|
||||||
|
|
||||||
.post-meta a:not(:hover) {
|
.post-meta a:not(:hover) {
|
||||||
@extend %link-underline;
|
@extend %link-underline !optional;
|
||||||
}
|
}
|
||||||
|
|
||||||
.share-wrapper {
|
.share-wrapper {
|
||||||
@ -87,17 +90,17 @@ header {
|
|||||||
i {
|
i {
|
||||||
color: var(--btn-share-color);
|
color: var(--btn-share-color);
|
||||||
|
|
||||||
@extend %icon-size;
|
@extend %icon-size !optional;
|
||||||
}
|
}
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
@extend %icon-size;
|
@extend %icon-size !optional;
|
||||||
|
|
||||||
margin-left: 0.5rem;
|
margin-left: 0.5rem;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
i {
|
i {
|
||||||
@extend %btn-share-hover;
|
@extend %btn-share-hover !optional;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -107,7 +110,7 @@ header {
|
|||||||
border: none;
|
border: none;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
|
|
||||||
@extend %cursor-pointer;
|
@extend %cursor-pointer !optional;
|
||||||
}
|
}
|
||||||
} /* .share-icons */
|
} /* .share-icons */
|
||||||
} /* .share-wrapper */
|
} /* .share-wrapper */
|
||||||
@ -131,16 +134,16 @@ header {
|
|||||||
|
|
||||||
.post-tag {
|
.post-tag {
|
||||||
&:hover {
|
&:hover {
|
||||||
@extend %link-hover;
|
@extend %link-hover !optional;
|
||||||
@extend %tag-hover;
|
@extend %tag-hover !optional;
|
||||||
@extend %no-bottom-border;
|
@extend %no-bottom-border !optional;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-navigation {
|
.post-navigation {
|
||||||
.btn {
|
.btn {
|
||||||
@extend %btn-post-nav;
|
@extend %btn-post-nav !optional;
|
||||||
|
|
||||||
&:not(:hover) {
|
&:not(:hover) {
|
||||||
color: var(--link-color);
|
color: var(--link-color);
|
||||||
@ -153,7 +156,7 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
@extend %btn-post-nav;
|
@extend %btn-post-nav !optional;
|
||||||
|
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
@ -173,12 +176,12 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
border-radius: $radius-lg 0 0 $radius-lg;
|
border-radius: variables.$radius-lg 0 0 variables.$radius-lg;
|
||||||
left: 0.5px;
|
left: 0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-radius: 0 $radius-lg $radius-lg 0;
|
border-radius: 0 variables.$radius-lg variables.$radius-lg 0;
|
||||||
right: 0.5px;
|
right: 0.5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -259,7 +262,7 @@ header {
|
|||||||
.toc-link {
|
.toc-link {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
@extend %text-ellipsis;
|
@extend %text-ellipsis !optional;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--toc-highlight);
|
color: var(--toc-highlight);
|
||||||
@ -298,15 +301,15 @@ header {
|
|||||||
top: 0;
|
top: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
margin: 0 -1rem;
|
margin: 0 -1rem;
|
||||||
height: $topbar-height;
|
height: variables.$topbar-height;
|
||||||
background: var(--main-bg);
|
background: var(--main-bg);
|
||||||
border-bottom: 1px solid var(--main-border-color);
|
border-bottom: 1px solid var(--main-border-color);
|
||||||
transition: all 0.2s ease-in-out;
|
transition: all 0.2s ease-in-out;
|
||||||
|
|
||||||
@extend %btn-color;
|
@extend %btn-color !optional;
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
@extend %heading;
|
@extend %heading !optional;
|
||||||
|
|
||||||
margin-left: 0.25rem;
|
margin-left: 0.25rem;
|
||||||
padding: 0 0.75rem;
|
padding: 0 0.75rem;
|
||||||
@ -314,7 +317,7 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.invisible {
|
&.invisible {
|
||||||
top: -$topbar-height;
|
top: -(variables.$topbar-height);
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -322,11 +325,11 @@ header {
|
|||||||
#toc-solo-trigger {
|
#toc-solo-trigger {
|
||||||
color: var(--text-muted-color);
|
color: var(--text-muted-color);
|
||||||
border-color: var(--btn-border-color);
|
border-color: var(--btn-border-color);
|
||||||
border-radius: $radius-lg;
|
border-radius: variables.$radius-lg;
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-family: $font-family-heading;
|
font-family: variables.$font-family-heading;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@ -338,7 +341,7 @@ header {
|
|||||||
@mixin slide-in {
|
@mixin slide-in {
|
||||||
from {
|
from {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
transform: translateY(-$topbar-height);
|
transform: translateY(-(variables.$topbar-height));
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
@ -354,7 +357,7 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: translateY(-$topbar-height);
|
transform: translateY(-(variables.$topbar-height));
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -383,10 +386,10 @@ header {
|
|||||||
|
|
||||||
border-color: var(--toc-popup-border-color);
|
border-color: var(--toc-popup-border-color);
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-radius: $radius-lg;
|
border-radius: variables.$radius-lg;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
background: var(--card-bg);
|
background: var(--card-bg);
|
||||||
margin-top: $topbar-height;
|
margin-top: variables.$topbar-height;
|
||||||
min-width: 20rem;
|
min-width: 20rem;
|
||||||
font-size: 1.05rem;
|
font-size: 1.05rem;
|
||||||
|
|
||||||
@ -405,11 +408,11 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 850px) {
|
@media all and (min-width: 850px) {
|
||||||
left: $sidebar-width;
|
left: variables.$sidebar-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
@extend %btn-color;
|
@extend %btn-color !optional;
|
||||||
|
|
||||||
position: -webkit-sticky;
|
position: -webkit-sticky;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
@ -418,7 +421,7 @@ header {
|
|||||||
border-bottom: 1px solid var(--main-border-color);
|
border-bottom: 1px solid var(--main-border-color);
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
font-family: $font-family-heading;
|
font-family: variables.$font-family-heading;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -487,8 +490,8 @@ header {
|
|||||||
|
|
||||||
#toc-popup-content {
|
#toc-popup-content {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
max-height: calc(100vh - 4 * $topbar-height);
|
max-height: calc(100vh - 4 * variables.$topbar-height);
|
||||||
font-family: $font-family-heading;
|
font-family: variables.$font-family-heading;
|
||||||
margin-bottom: -$curtain-height;
|
margin-bottom: -$curtain-height;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -497,18 +500,18 @@ header {
|
|||||||
|
|
||||||
#related-posts {
|
#related-posts {
|
||||||
> h3 {
|
> h3 {
|
||||||
@include label(1.1rem, 600);
|
@include module.label(1.1rem, 600);
|
||||||
}
|
}
|
||||||
|
|
||||||
time {
|
time {
|
||||||
@extend %normal-font-style;
|
@extend %normal-font-style !optional;
|
||||||
@extend %text-xs;
|
@extend %text-xs !optional;
|
||||||
|
|
||||||
color: var(--text-muted-color);
|
color: var(--text-muted-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
@extend %text-ellipsis;
|
@extend %text-ellipsis !optional;
|
||||||
|
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
@ -520,7 +523,7 @@ header {
|
|||||||
|
|
||||||
.card {
|
.card {
|
||||||
h4 {
|
h4 {
|
||||||
@extend %text-clip;
|
@extend %text-clip !optional;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -540,7 +543,7 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.share-label {
|
.share-label {
|
||||||
@include label(inherit, 400, inherit);
|
@include module.label(inherit, 400, inherit);
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: ':';
|
content: ':';
|
||||||
@ -567,8 +570,8 @@ header {
|
|||||||
/* Hide SideBar and TOC */
|
/* Hide SideBar and TOC */
|
||||||
@media all and (max-width: 849px) {
|
@media all and (max-width: 849px) {
|
||||||
.post-navigation {
|
.post-navigation {
|
||||||
@include pl-pr(0);
|
@include module.pl-pr(0);
|
||||||
@include ml-mr(-0.5rem);
|
@include module.ml-mr(-0.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
@import 'dist/bootstrap';
|
@use 'dist/bootstrap';
|
||||||
@import 'main';
|
@use 'main';
|
||||||
|
|||||||
@ -1,13 +1,13 @@
|
|||||||
@import 'colors/typography-light';
|
@use 'colors/typography-light';
|
||||||
@import 'colors/typography-dark';
|
@use 'colors/typography-dark';
|
||||||
@import 'addon/variables';
|
@use 'addon/variables';
|
||||||
@import 'variables-hook';
|
@use 'variables-hook';
|
||||||
@import 'addon/module';
|
@use 'addon/module';
|
||||||
@import 'addon/syntax';
|
@use 'addon/syntax';
|
||||||
@import 'addon/commons';
|
@use 'addon/commons';
|
||||||
@import 'layout/home';
|
@use 'layout/home';
|
||||||
@import 'layout/post';
|
@use 'layout/post';
|
||||||
@import 'layout/tags';
|
@use 'layout/tags';
|
||||||
@import 'layout/archives';
|
@use 'layout/archives';
|
||||||
@import 'layout/categories';
|
@use 'layout/categories';
|
||||||
@import 'layout/category-tag';
|
@use 'layout/category-tag';
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
---
|
---
|
||||||
|
|
||||||
@import 'main
|
@use 'main
|
||||||
{%- if jekyll.environment == 'production' -%}
|
{%- if jekyll.environment == 'production' -%}
|
||||||
.bundle
|
.bundle
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user