mirror of
https://github.com/cotes2020/jekyll-theme-chirpy.git
synced 2025-12-18 05:41:31 +00:00
perf: modular sass architecture (#2052)
- Modularized the Sass architecture to enhance code maintainability and reduce the output file size - Replaced deprecated `@import` with `@use` / `@forward`
This commit is contained in:
Cotes Chung
36
_sass/layout/_footer.scss
Normal file
36
_sass/layout/_footer.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/mixins' as mx;
|
||||
@use '../abstracts/placeholders';
|
||||
|
||||
footer {
|
||||
background-color: var(--main-bg);
|
||||
height: v.$footer-height;
|
||||
border-top: 1px solid var(--main-border-color);
|
||||
|
||||
@extend %text-xs;
|
||||
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
@include mx.slide;
|
||||
|
||||
height: v.$footer-height-large;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
@extend %text-highlight;
|
||||
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
}
|
||||
}
|
||||
|
||||
em {
|
||||
@extend %text-highlight;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
4
_sass/layout/_index.scss
Normal file
4
_sass/layout/_index.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@forward 'sidebar';
|
||||
@forward 'topbar';
|
||||
@forward 'panel';
|
||||
@forward 'footer';
|
||||
66
_sass/layout/_panel.scss
Normal file
66
_sass/layout/_panel.scss
Normal file
@@ -0,0 +1,66 @@
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/mixins' as mx;
|
||||
@use '../abstracts/placeholders';
|
||||
|
||||
.access {
|
||||
top: 2rem;
|
||||
transition: top 0.2s ease-in-out;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 4rem;
|
||||
|
||||
&:only-child {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
> section {
|
||||
padding-left: 1rem;
|
||||
border-left: 1px solid var(--main-border-color);
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
#panel-wrapper {
|
||||
/* the headings */
|
||||
.panel-heading {
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
|
||||
@include mx.label(inherit);
|
||||
}
|
||||
|
||||
.post-tag {
|
||||
line-height: 1.05rem;
|
||||
font-size: 0.85rem;
|
||||
border-radius: 0.8rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
margin: 0 0.35rem 0.5rem 0;
|
||||
|
||||
&:hover {
|
||||
transition: all 0.3s ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
@include bp.lt(bp.get(xl)) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#access-lastmod {
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
}
|
||||
|
||||
@extend %no-bottom-border;
|
||||
}
|
||||
}
|
||||
258
_sass/layout/_sidebar.scss
Normal file
258
_sass/layout/_sidebar.scss
Normal file
@@ -0,0 +1,258 @@
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/mixins' as mx;
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/placeholders';
|
||||
|
||||
$btn-border-width: 3px;
|
||||
$btn-mb: 0.5rem;
|
||||
$sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
|
||||
|
||||
#sidebar {
|
||||
@include mx.pl-pr(0);
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
width: v.$sidebar-width;
|
||||
background: var(--sidebar-bg);
|
||||
border-right: 1px solid var(--sidebar-border-color);
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
@include mx.slide;
|
||||
|
||||
transform: translateX(-#{v.$sidebar-width}); /* hide */
|
||||
-webkit-transform: translateX(-#{v.$sidebar-width});
|
||||
|
||||
[#{$sidebar-display}] & {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@include bp.xxxl {
|
||||
width: v.$sidebar-width-large;
|
||||
}
|
||||
|
||||
%sidebar-link-hover {
|
||||
&:hover {
|
||||
color: var(--sidebar-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@extend %sidebar-links;
|
||||
}
|
||||
|
||||
#avatar {
|
||||
display: block;
|
||||
width: 6.5rem;
|
||||
height: 6.5rem;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--avatar-border-color) 0 0 0 2px;
|
||||
transform: translateZ(0); /* fixed the zoom in Safari */
|
||||
|
||||
@include bp.sm {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
}
|
||||
|
||||
img {
|
||||
transition: transform 0.5s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-wrapper {
|
||||
@include mx.mt-mb(2.5rem);
|
||||
@extend %clickable-transition;
|
||||
|
||||
padding-left: 2.5rem;
|
||||
padding-right: 1.25rem;
|
||||
width: 100%;
|
||||
|
||||
@include bp.lg {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@include bp.xxxl {
|
||||
margin-top: 3.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
padding-left: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.site-title {
|
||||
@extend %clickable-transition;
|
||||
@extend %sidebar-link-hover;
|
||||
|
||||
font-family: inherit;
|
||||
font-weight: 900;
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.25px;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
width: fit-content;
|
||||
color: var(--site-title-color);
|
||||
}
|
||||
|
||||
.site-subtitle {
|
||||
font-size: 95%;
|
||||
color: var(--site-subtitle-color);
|
||||
margin-top: 0.25rem;
|
||||
word-spacing: 1px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
li.nav-item {
|
||||
opacity: 0.9;
|
||||
width: 100%;
|
||||
|
||||
@include mx.pl-pr(1.5rem);
|
||||
|
||||
@include bp.xxxl {
|
||||
@include mx.pl-pr(2.75rem);
|
||||
}
|
||||
|
||||
a.nav-link {
|
||||
@include mx.pt-pb(0.6rem);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--sidebar-hover-bg);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 95%;
|
||||
opacity: 0.8;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 90%;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.nav-link {
|
||||
color: var(--sidebar-active-color);
|
||||
background-color: var(--sidebar-hover-bg);
|
||||
|
||||
span {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-bottom {
|
||||
padding-left: 2rem;
|
||||
padding-right: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
@include bp.xxxl {
|
||||
padding-left: 2.75rem;
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
$btn-size: 1.75rem;
|
||||
|
||||
%button {
|
||||
width: $btn-size;
|
||||
height: $btn-size;
|
||||
margin-bottom: $btn-mb; // multi line gap
|
||||
border-radius: 50%;
|
||||
color: var(--sidebar-btn-color);
|
||||
background-color: var(--sidebar-btn-bg);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:not(:focus-visible) {
|
||||
box-shadow: var(--sidebar-border-color) 0 0 0 1px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--sidebar-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@extend %button;
|
||||
@extend %sidebar-link-hover;
|
||||
@extend %clickable-transition;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: v.$sb-btn-gap;
|
||||
|
||||
@include bp.xxxl {
|
||||
margin-right: v.$sb-btn-gap-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
line-height: $btn-size;
|
||||
}
|
||||
|
||||
#mode-toggle {
|
||||
@extend %button;
|
||||
@extend %sidebar-links;
|
||||
@extend %sidebar-link-hover;
|
||||
}
|
||||
|
||||
.icon-border {
|
||||
@extend %no-cursor;
|
||||
@include mx.ml-mr(calc((v.$sb-btn-gap - $btn-border-width) / 2));
|
||||
|
||||
background-color: var(--sidebar-btn-color);
|
||||
content: '';
|
||||
width: $btn-border-width;
|
||||
height: $btn-border-width;
|
||||
border-radius: 50%;
|
||||
margin-bottom: $btn-mb;
|
||||
|
||||
@include bp.xxxl {
|
||||
@include mx.ml-mr(calc((v.$sb-btn-gap-lg - $btn-border-width) / 2));
|
||||
}
|
||||
}
|
||||
} /* .sidebar-bottom */
|
||||
} /* #sidebar */
|
||||
|
||||
[#{$sidebar-display}] {
|
||||
#main-wrapper {
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
transform: translateX(v.$sidebar-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
86
_sass/layout/_topbar.scss
Normal file
86
_sass/layout/_topbar.scss
Normal file
@@ -0,0 +1,86 @@
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/mixins' as mx;
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/placeholders';
|
||||
|
||||
#topbar-wrapper {
|
||||
height: v.$topbar-height;
|
||||
background-color: var(--topbar-bg);
|
||||
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
@include mx.slide(top 0.2s ease);
|
||||
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#topbar {
|
||||
@extend %btn-color;
|
||||
|
||||
#breadcrumb {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted-color);
|
||||
padding-left: 0.5rem;
|
||||
|
||||
a:hover {
|
||||
@extend %link-hover;
|
||||
}
|
||||
|
||||
span {
|
||||
&:not(:last-child) {
|
||||
&::after {
|
||||
content: '›';
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include bp.between(bp.get(lg), calc(#{bp.get(xl)} - 1px)) {
|
||||
width: 65%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@include bp.lte(bp.get(md)) {
|
||||
@include mx.max-w-100;
|
||||
}
|
||||
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#topbar-title {
|
||||
display: none;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
font-family: sans-serif;
|
||||
color: var(--topbar-text-color);
|
||||
text-align: center;
|
||||
width: 70%;
|
||||
word-break: keep-all;
|
||||
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include bp.lg {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-trigger,
|
||||
#search-trigger {
|
||||
display: none;
|
||||
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -1,143 +0,0 @@
|
||||
/*
|
||||
Style for Archives
|
||||
*/
|
||||
|
||||
#archives {
|
||||
letter-spacing: 0.03rem;
|
||||
|
||||
$timeline-width: 4px;
|
||||
|
||||
%timeline {
|
||||
content: '';
|
||||
width: $timeline-width;
|
||||
position: relative;
|
||||
float: left;
|
||||
background-color: var(--timeline-color);
|
||||
}
|
||||
|
||||
.year {
|
||||
height: 3.5rem;
|
||||
font-size: 1.5rem;
|
||||
position: relative;
|
||||
left: 2px;
|
||||
margin-left: -$timeline-width;
|
||||
|
||||
&::before {
|
||||
@extend %timeline;
|
||||
|
||||
height: 72px;
|
||||
left: 79px;
|
||||
bottom: 16px;
|
||||
}
|
||||
|
||||
&:first-child::before {
|
||||
@extend %timeline;
|
||||
|
||||
height: 32px;
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
/* Year dot */
|
||||
&::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
left: 21.5px;
|
||||
border: 3px solid;
|
||||
background-color: var(--timeline-year-dot-color);
|
||||
border-color: var(--timeline-node-bg);
|
||||
box-shadow: 0 0 2px 0 #c2c6cc;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
font-size: 1.1rem;
|
||||
line-height: 3rem;
|
||||
|
||||
@extend %text-ellipsis;
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: var(--main-bg, #ffffff);
|
||||
background-image: linear-gradient(
|
||||
to left,
|
||||
#ffffff,
|
||||
#fbfbfb,
|
||||
#fbfbfb,
|
||||
#fbfbfb,
|
||||
#ffffff
|
||||
);
|
||||
}
|
||||
|
||||
&::before {
|
||||
@extend %timeline;
|
||||
|
||||
top: 0;
|
||||
left: 77px;
|
||||
height: 3.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child li:last-child::before {
|
||||
height: 1.5rem;
|
||||
}
|
||||
} /* #archives ul */
|
||||
|
||||
.date {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
right: 0.5rem;
|
||||
|
||||
&.month {
|
||||
width: 1.4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.day {
|
||||
font-size: 85%;
|
||||
font-family: Lato, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
/* post title in Archvies */
|
||||
margin-left: 2.5rem;
|
||||
position: relative;
|
||||
top: 0.1rem;
|
||||
|
||||
&:hover {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
/* the dot before post title */
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
float: left;
|
||||
top: 1.35rem;
|
||||
left: 71px;
|
||||
background-color: var(--timeline-node-bg);
|
||||
box-shadow: 0 0 3px 0 #c2c6cc;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
} /* #archives */
|
||||
|
||||
@media all and (max-width: 576px) {
|
||||
#archives {
|
||||
margin-top: -1rem;
|
||||
|
||||
ul {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
/*
|
||||
Style for Tab Categories
|
||||
*/
|
||||
|
||||
%category-icon-color {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.categories {
|
||||
margin-bottom: 2rem;
|
||||
border-color: var(--categories-border);
|
||||
|
||||
&.card,
|
||||
.list-group {
|
||||
@extend %rounded;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
$radius: calc($radius-lg - 1px);
|
||||
|
||||
padding: 0.75rem;
|
||||
border-radius: $radius;
|
||||
border-bottom: 0;
|
||||
|
||||
&.hide-border-bottom {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
@extend %category-icon-color;
|
||||
|
||||
font-size: 86%; /* fontawesome icons */
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
padding-left: 2rem;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
} /* .categories */
|
||||
|
||||
.category-trigger {
|
||||
width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
color: #6c757d !important;
|
||||
|
||||
i {
|
||||
position: relative;
|
||||
height: 0.7rem;
|
||||
width: 1rem;
|
||||
transition: transform 300ms ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
i {
|
||||
color: var(--categories-icon-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* only works on desktop */
|
||||
@media (hover: hover) {
|
||||
.category-trigger:hover {
|
||||
background-color: var(--categories-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.rotate {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
/*
|
||||
Style for page Category and Tag
|
||||
*/
|
||||
|
||||
.dash {
|
||||
margin: 0 0.5rem 0.6rem 0.5rem;
|
||||
border-bottom: 2px dotted var(--dash-color);
|
||||
}
|
||||
|
||||
#page-category,
|
||||
#page-tag {
|
||||
ul > li {
|
||||
line-height: 1.5rem;
|
||||
padding: 0.6rem 0;
|
||||
|
||||
/* dot */
|
||||
&::before {
|
||||
background: #999999;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
content: '';
|
||||
position: relative;
|
||||
top: 0.6rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* post's title */
|
||||
> a {
|
||||
@extend %no-bottom-border;
|
||||
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* tag icon */
|
||||
#page-tag h1 > i {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
#page-category h1 > i {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
#page-category,
|
||||
#page-tag,
|
||||
#access-lastmod {
|
||||
a:hover {
|
||||
@extend %link-hover;
|
||||
|
||||
margin-bottom: -1px; /* Avoid jumping */
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 576px) {
|
||||
#page-category,
|
||||
#page-tag {
|
||||
ul > li {
|
||||
&::before {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
> a {
|
||||
@include text-ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,188 +0,0 @@
|
||||
/*
|
||||
Style for Homepage
|
||||
*/
|
||||
|
||||
#post-list {
|
||||
margin-top: 2rem;
|
||||
|
||||
.card-wrapper {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 0;
|
||||
background: none;
|
||||
|
||||
%img-radius {
|
||||
border-radius: $radius-lg $radius-lg 0 0;
|
||||
}
|
||||
|
||||
.preview-img {
|
||||
@extend %img-radius;
|
||||
|
||||
img {
|
||||
@extend %img-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
|
||||
.card-title {
|
||||
@extend %text-clip;
|
||||
|
||||
color: var(--heading-color) !important;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
%muted {
|
||||
color: var(--text-muted-color) !important;
|
||||
}
|
||||
|
||||
.card-text.content {
|
||||
@extend %muted;
|
||||
|
||||
p {
|
||||
@extend %text-clip;
|
||||
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
@extend %muted;
|
||||
|
||||
i {
|
||||
&:not(:first-child) {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
em {
|
||||
@extend %normal-font-style;
|
||||
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
> div:first-child {
|
||||
display: block;
|
||||
|
||||
@extend %text-ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} /* #post-list */
|
||||
|
||||
.pagination {
|
||||
color: var(--text-color);
|
||||
font-family: Lato, sans-serif;
|
||||
justify-content: space-evenly;
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
.page-link {
|
||||
color: var(--btn-patinator-text-color);
|
||||
padding: 0 0.6rem;
|
||||
display: -webkit-box;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-box-align: center;
|
||||
border-radius: 0.5rem;
|
||||
border: 0;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.page-link {
|
||||
background-color: var(--btn-paginator-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
.page-link {
|
||||
&:hover {
|
||||
box-shadow: inset var(--btn-border-color) 0 0 0 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
.page-link {
|
||||
color: rgba(108, 117, 125, 0.57);
|
||||
}
|
||||
}
|
||||
} /* .page-item */
|
||||
} /* .pagination */
|
||||
|
||||
/* Tablet */
|
||||
@media all and (min-width: 768px) {
|
||||
%img-radius {
|
||||
border-radius: 0 $radius-lg $radius-lg 0;
|
||||
}
|
||||
|
||||
#post-list {
|
||||
.card {
|
||||
.card-body {
|
||||
padding: 1.75rem 1.75rem 1.25rem 1.75rem;
|
||||
|
||||
.card-text {
|
||||
display: inherit !important;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
i {
|
||||
&:not(:first-child) {
|
||||
margin-left: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide SideBar and TOC */
|
||||
@media all and (max-width: 830px) {
|
||||
.pagination {
|
||||
.page-item {
|
||||
&:not(:first-child):not(:last-child) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar is visible */
|
||||
@media all and (min-width: 831px) {
|
||||
#post-list {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
font-size: 0.85rem;
|
||||
justify-content: center;
|
||||
|
||||
.page-item {
|
||||
&:not(:last-child) {
|
||||
margin-right: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page-index {
|
||||
display: none;
|
||||
}
|
||||
} /* .pagination */
|
||||
}
|
||||
@@ -1,586 +0,0 @@
|
||||
/**
|
||||
* Post-specific styles
|
||||
*/
|
||||
|
||||
%btn-post-nav {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
border-color: var(--btn-border-color);
|
||||
}
|
||||
|
||||
@mixin dot($pl: 0.25rem, $pr: 0.25rem) {
|
||||
content: '\2022';
|
||||
padding-left: $pl;
|
||||
padding-right: $pr;
|
||||
}
|
||||
|
||||
header {
|
||||
.post-desc {
|
||||
@extend %heading;
|
||||
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
span + span::before {
|
||||
@include dot;
|
||||
}
|
||||
|
||||
em,
|
||||
time {
|
||||
@extend %text-highlight;
|
||||
}
|
||||
|
||||
em {
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 + .post-meta {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.post-tail-wrapper {
|
||||
@extend %text-sm;
|
||||
|
||||
margin-top: 6rem;
|
||||
border-bottom: 1px double var(--main-border-color);
|
||||
|
||||
.license-wrapper {
|
||||
line-height: 1.2rem;
|
||||
|
||||
> a {
|
||||
@extend %text-highlight;
|
||||
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
}
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
@extend %text-sm;
|
||||
}
|
||||
} /* .license-wrapper */
|
||||
|
||||
.post-meta a:not(:hover) {
|
||||
@extend %link-underline;
|
||||
}
|
||||
|
||||
.share-wrapper {
|
||||
vertical-align: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
%icon-size {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.share-icons {
|
||||
display: flex;
|
||||
|
||||
i {
|
||||
color: var(--btn-share-color);
|
||||
|
||||
@extend %icon-size;
|
||||
}
|
||||
|
||||
> * {
|
||||
@extend %icon-size;
|
||||
|
||||
margin-left: 0.5rem;
|
||||
|
||||
&:hover {
|
||||
i {
|
||||
@extend %btn-share-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
border: none;
|
||||
line-height: inherit;
|
||||
|
||||
@extend %cursor-pointer;
|
||||
}
|
||||
} /* .share-icons */
|
||||
} /* .share-wrapper */
|
||||
}
|
||||
|
||||
.share-mastodon {
|
||||
/* See: https://github.com/justinribeiro/share-to-mastodon#properties */
|
||||
--wc-stm-font-family: $font-family-base;
|
||||
--wc-stm-dialog-background-color: var(--card-bg);
|
||||
--wc-stm-form-button-border: 1px solid var(--btn-border-color);
|
||||
--wc-stm-form-submit-background-color: var(--sidebar-btn-bg);
|
||||
--wc-stm-form-cancel-background-color: var(--sidebar-btn-bg);
|
||||
--wc-stm-form-button-background-color-hover: #007bff;
|
||||
--wc-stm-form-button-color-hover: white;
|
||||
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
line-height: 2rem;
|
||||
|
||||
.post-tag {
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
@extend %tag-hover;
|
||||
@extend %no-bottom-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-navigation {
|
||||
.btn {
|
||||
@extend %btn-post-nav;
|
||||
|
||||
&:not(:hover) {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:not(.disabled)::before {
|
||||
color: whitesmoke;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@extend %btn-post-nav;
|
||||
|
||||
pointer-events: auto;
|
||||
cursor: not-allowed;
|
||||
background: none;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
&.btn-outline-primary.disabled:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
color: var(--text-muted-color);
|
||||
font-size: 0.65rem;
|
||||
text-transform: uppercase;
|
||||
content: attr(aria-label);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: $radius-lg 0 0 $radius-lg;
|
||||
left: 0.5px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 $radius-lg $radius-lg 0;
|
||||
right: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.5rem;
|
||||
margin-top: 0.3rem;
|
||||
white-space: normal;
|
||||
}
|
||||
} /* .post-navigation */
|
||||
|
||||
@media (hover: hover) {
|
||||
.post-navigation {
|
||||
.btn,
|
||||
.btn::before {
|
||||
transition: all 0.35s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* TOC panel */
|
||||
#toc-wrapper {
|
||||
border-left: 1px solid rgba(158, 158, 158, 0.17);
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 4rem;
|
||||
transition: top 0.2s ease-in-out;
|
||||
-webkit-animation: fade-up 0.8s;
|
||||
animation: fade-up 0.8s;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.25;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
&:not(:last-child) {
|
||||
margin: 0.4rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0.2rem 0 0.2rem 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Overwrite TOC plugin style */
|
||||
|
||||
.toc-link {
|
||||
display: block;
|
||||
|
||||
@extend %text-ellipsis;
|
||||
|
||||
&:hover {
|
||||
color: var(--toc-highlight);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active-link {
|
||||
color: var(--toc-highlight) !important;
|
||||
font-weight: 600;
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
left: -1px;
|
||||
height: 1.25rem;
|
||||
background-color: var(--toc-highlight) !important;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* --- TOC button, bar and popup in mobile/tablet --- */
|
||||
|
||||
#toc-bar {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
margin: 0 -1rem;
|
||||
height: $topbar-height;
|
||||
background: var(--main-bg);
|
||||
border-bottom: 1px solid var(--main-border-color);
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
@extend %btn-color;
|
||||
|
||||
.label {
|
||||
@extend %heading;
|
||||
|
||||
margin-left: 0.25rem;
|
||||
padding: 0 0.75rem;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&.invisible {
|
||||
top: -$topbar-height;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
#toc-solo-trigger {
|
||||
color: var(--text-muted-color);
|
||||
border-color: var(--btn-border-color);
|
||||
border-radius: $radius-lg;
|
||||
|
||||
.label {
|
||||
font-size: 1rem;
|
||||
font-family: $font-family-heading;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin slide-in {
|
||||
from {
|
||||
opacity: 0.7;
|
||||
transform: translateY(-$topbar-height);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin slide-out {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-$topbar-height);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes slide-in {
|
||||
@include slide-in;
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
@include slide-in;
|
||||
}
|
||||
|
||||
@-webkit-keyframes slide-out {
|
||||
@include slide-out;
|
||||
}
|
||||
|
||||
@keyframes slide-out {
|
||||
@include slide-out;
|
||||
}
|
||||
|
||||
#toc-popup {
|
||||
$slide-in: slide-in 0.3s ease-out;
|
||||
$slide-out: slide-out 0.3s ease-out;
|
||||
$curtain-height: 2rem;
|
||||
$backdrop: blur(5px);
|
||||
|
||||
border-color: var(--toc-popup-border-color);
|
||||
border-width: 1px;
|
||||
border-radius: $radius-lg;
|
||||
color: var(--text-color);
|
||||
background: var(--card-bg);
|
||||
margin-top: $topbar-height;
|
||||
min-width: 20rem;
|
||||
font-size: 1.05rem;
|
||||
|
||||
@media all and (min-width: 576px) {
|
||||
max-width: 32rem;
|
||||
}
|
||||
|
||||
&[open] {
|
||||
-webkit-animation: $slide-in;
|
||||
animation: $slide-in;
|
||||
}
|
||||
|
||||
&[closing] {
|
||||
-webkit-animation: $slide-out;
|
||||
animation: $slide-out;
|
||||
}
|
||||
|
||||
@media all and (min-width: 850px) {
|
||||
left: $sidebar-width;
|
||||
}
|
||||
|
||||
.header {
|
||||
@extend %btn-color;
|
||||
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: inherit;
|
||||
border-bottom: 1px solid var(--main-border-color);
|
||||
|
||||
.label {
|
||||
font-family: $font-family-heading;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
> i {
|
||||
font-size: 1.25rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
ul,
|
||||
& + li {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
line-height: 1.5;
|
||||
padding: 0.375rem 0;
|
||||
padding-right: 1.125rem;
|
||||
|
||||
&.toc-link::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 2 through 4 {
|
||||
.node-name--H#{$i} {
|
||||
padding-left: 1.125rem * ($i - 1);
|
||||
}
|
||||
}
|
||||
|
||||
.is-active-link {
|
||||
color: var(--toc-highlight) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&::-webkit-backdrop {
|
||||
-webkit-backdrop-filter: $backdrop;
|
||||
backdrop-filter: $backdrop;
|
||||
}
|
||||
|
||||
&::backdrop {
|
||||
-webkit-backdrop-filter: $backdrop;
|
||||
backdrop-filter: $backdrop;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: flex;
|
||||
content: '';
|
||||
position: relative;
|
||||
background: linear-gradient(transparent, var(--card-bg) 70%);
|
||||
height: $curtain-height;
|
||||
}
|
||||
|
||||
#toc-popup-content {
|
||||
overflow: auto;
|
||||
max-height: calc(100vh - 4 * $topbar-height);
|
||||
font-family: $font-family-heading;
|
||||
margin-bottom: -$curtain-height;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Related Posts --- */
|
||||
|
||||
#related-posts {
|
||||
> h3 {
|
||||
@include label(1.1rem, 600);
|
||||
}
|
||||
|
||||
time {
|
||||
@extend %normal-font-style;
|
||||
@extend %text-xs;
|
||||
|
||||
color: var(--text-muted-color);
|
||||
}
|
||||
|
||||
p {
|
||||
@extend %text-ellipsis;
|
||||
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
white-space: break-spaces;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.card {
|
||||
h4 {
|
||||
@extend %text-clip;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-id-pattern */
|
||||
#disqus_thread {
|
||||
min-height: 8.5rem;
|
||||
}
|
||||
|
||||
.utterances {
|
||||
max-width: 100%;
|
||||
min-height: 269px;
|
||||
}
|
||||
|
||||
%btn-share-hover {
|
||||
color: var(--btn-share-hover-color) !important;
|
||||
}
|
||||
|
||||
.share-label {
|
||||
@include label(inherit, 400, inherit);
|
||||
|
||||
&::after {
|
||||
content: ':';
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 576px) {
|
||||
.post-tail-bottom {
|
||||
flex-wrap: wrap-reverse !important;
|
||||
|
||||
> div:first-child {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
.content > p > img {
|
||||
max-width: calc(100% + 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide SideBar and TOC */
|
||||
@media all and (max-width: 849px) {
|
||||
.post-navigation {
|
||||
@include pl-pr(0);
|
||||
@include ml-mr(-0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
scroll-margin-top: 2rem;
|
||||
}
|
||||
|
||||
#toc-bar,
|
||||
#toc-solo-trigger {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
/*
|
||||
Styles for Tab Tags
|
||||
*/
|
||||
|
||||
.tag {
|
||||
border-radius: 0.7em;
|
||||
padding: 6px 8px 7px;
|
||||
margin-right: 0.8rem;
|
||||
line-height: 3rem;
|
||||
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;
|
||||
font-family: Oswald, sans-serif;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user