_sass/addon/commons.scss in jekyll-theme-chirpy-6.2.2 vs _sass/addon/commons.scss in jekyll-theme-chirpy-6.2.3
- old
+ new
@@ -71,57 +71,16 @@
img {
max-width: 100%;
height: auto;
transition: all 0.35s ease-in-out;
- &[data-src] {
- &[data-lqip='true'] {
- &.lazyload,
- &.lazyloading {
- -webkit-filter: blur(20px);
- filter: blur(20px);
- }
- }
+ .blur & {
+ $blur: 20px;
- &:not([data-lqip='true']) {
- &.lazyload,
- &.lazyloading {
- background: var(--img-bg);
- }
-
- &.lazyloaded {
- -webkit-animation: fade-in 0.35s ease-in;
- animation: fade-in 0.35s ease-in;
- }
- }
-
- &.shadow {
- -webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
- filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
- box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */
- }
-
- @extend %img-caption;
+ -webkit-filter: blur($blur);
+ filter: blur($blur);
}
-
- @-webkit-keyframes fade-in {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
- }
-
- @keyframes fade-in {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
- }
}
blockquote {
border-left: 5px solid var(--blockquote-border-color);
padding-left: 1rem;
@@ -171,27 +130,25 @@
border: solid 1px var(--kbd-wrap-color);
box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
}
footer {
- font-size: 0.8rem;
background-color: var(--main-bg);
height: $footer-height;
border-top: 1px solid var(--main-border-color);
- @extend %text-color;
+ @extend %text-xs;
a {
@extend %text-highlight;
&:hover {
@extend %link-hover;
}
}
p {
- line-height: 1.75;
text-align: center;
margin-bottom: 0;
}
}
@@ -271,10 +228,12 @@
> li {
&:not(:last-child) {
margin-bottom: 0.3rem;
}
+ @extend %sup-fn-target;
+
> p {
margin-left: 0.25em;
margin-top: 0;
margin-bottom: 0;
}
@@ -285,14 +244,17 @@
@at-root a#{&} {
@include ml-mr(1px);
@include pl-pr(2px);
border-bottom-style: none !important;
- transition: background-color 1.5s ease-in-out;
}
}
+sup {
+ @extend %sup-fn-target;
+}
+
.reversefootnote {
@at-root a#{&} {
font-size: 0.6rem;
line-height: 1;
position: relative;
@@ -342,10 +304,31 @@
} /* table */
}
/* --- post --- */
+.preview-img {
+ aspect-ratio: 40 / 21;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+
+ @extend %rounded;
+
+ &:not(.no-bg) {
+ background: var(--img-bg);
+ }
+
+ img {
+ height: 100%;
+ -o-object-fit: cover;
+ object-fit: cover;
+
+ @extend %rounded;
+ }
+}
+
.post-preview {
@extend %rounded;
border: 0;
background: var(--card-bg);
@@ -370,19 +353,17 @@
}
}
main {
line-height: 1.75;
- min-height: calc(100vh - $topbar-height - $footer-height);
h1 {
margin-top: 2rem;
margin-bottom: 1.5rem;
}
p {
- > img[data-src],
> a.popup {
&:not(.normal):not(.left):not(.right) {
@include align-center;
}
}
@@ -396,11 +377,11 @@
}
}
}
.post-meta {
- font-size: 0.85rem;
+ @extend %text-sm;
a {
&:not([class]):hover {
@extend %link-hover;
}
@@ -532,27 +513,29 @@
content: '';
position: absolute;
background: var(--shimmer-bg);
height: 100%;
width: 100%;
- -webkit-animation: shimmer 1s infinite;
- animation: shimmer 1s infinite;
+ -webkit-animation: shimmer 1.3s infinite;
+ animation: shimmer 1.3s infinite;
}
@-webkit-keyframes shimmer {
0% {
transform: translateX(-100%);
}
+
100% {
transform: translateX(100%);
}
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
+
100% {
transform: translateX(100%);
}
}
}
@@ -687,11 +670,10 @@
}
/* --- sidebar layout --- */
$sidebar-display: 'sidebar-display';
-$btn-gap: 0.8rem; // for the bottom icons
$btn-border-width: 3px;
$btn-mb: 0.5rem;
#sidebar {
@include pl-pr(0);
@@ -832,13 +814,15 @@
.sidebar-bottom {
padding-left: 2rem;
padding-right: 1rem;
margin-bottom: 1.5rem;
+ $btn-size: 1.75rem;
+
%button {
- width: 1.75rem;
- height: 1.75rem;
+ 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;
@@ -856,16 +840,16 @@
@extend %button;
@extend %sidebar-link-hover;
@extend %clickable-transition;
&:not(:last-child) {
- margin-right: $btn-gap;
+ margin-right: $sb-btn-gap;
}
}
i {
- line-height: 1.75rem;
+ line-height: $btn-size;
}
.mode-toggle {
padding: 0;
border: 0;
@@ -875,11 +859,11 @@
@extend %sidebar-link-hover;
}
.icon-border {
@extend %no-cursor;
- @include ml-mr(calc(($btn-gap - $btn-border-width) / 2));
+ @include ml-mr(calc(($sb-btn-gap - $btn-border-width) / 2));
background-color: var(--sidebar-btn-color);
content: '';
width: $btn-border-width;
height: $btn-border-width;
@@ -1119,24 +1103,34 @@
@at-root [#{$sidebar-display}] & {
display: block !important;
}
}
-/* --- main wrapper --- */
+/* --- basic wrappers --- */
#main-wrapper {
position: relative;
@include pl-pr(0);
+
+ > .container {
+ min-height: 100vh;
+ }
}
#topbar-wrapper.row,
#main-wrapper > .container > .row,
#search-result-wrapper > .row {
@include ml-mr(0);
}
+#tail-wrapper {
+ > :not(script) {
+ margin-top: 3rem;
+ }
+}
+
/* --- button back-to-top --- */
#back-to-top {
display: none;
z-index: 1;
@@ -1268,14 +1262,10 @@
} @else {
transition: $basic;
}
}
- main {
- min-height: calc(100vh - $topbar-height - $footer-height-large);
- }
-
footer {
@include slide;
height: $footer-height-large;
padding: 1.5rem 0;
@@ -1285,23 +1275,23 @@
#sidebar {
transform: translateX(0);
}
#main-wrapper {
- transform: translateX(#{$sidebar-width});
+ transform: translateX($sidebar-width);
}
#back-to-top {
visibility: hidden;
}
}
#sidebar {
@include slide;
- transform: translateX(-#{$sidebar-width}); /* hide */
- -webkit-transform: translateX(-#{$sidebar-width});
+ transform: translateX(-$sidebar-width); /* hide */
+ -webkit-transform: translateX(-$sidebar-width);
}
#main-wrapper {
@include slide;
}
@@ -1472,11 +1462,11 @@
}
}
@media all and (min-width: 1400px) {
#back-to-top {
- right: calc((100vw - #{$sidebar-width} - 1140px) / 2 + 3rem);
+ right: calc((100vw - $sidebar-width - 1140px) / 2 + 3rem);
}
}
@media all and (min-width: 1650px) {
$icon-gap: 1rem;
@@ -1489,11 +1479,11 @@
left: $sidebar-width-large;
}
search {
margin-right: calc(
- #{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem
+ $main-content-max-width / 4 - $search-max-width - 0.75rem
);
}
#main-wrapper > .container {
max-width: $main-content-max-width;
@@ -1506,19 +1496,17 @@
padding-right: 4.5rem !important;
}
#back-to-top {
right: calc(
- (100vw - #{$sidebar-width-large} - #{$main-content-max-width}) / 2 + 2rem
+ (100vw - $sidebar-width-large - $main-content-max-width) / 2 + 2rem
);
}
#sidebar {
width: $sidebar-width-large;
- $icon-gap: 1rem; // for the bottom icons
-
.profile-wrapper {
margin-top: 3.5rem;
margin-bottom: 2.5rem;
padding-left: 3.5rem;
}
@@ -1532,14 +1520,14 @@
.sidebar-bottom {
padding-left: 2.75rem;
margin-bottom: 1.75rem;
a:not(:last-child) {
- margin-right: $icon-gap;
+ margin-right: $sb-btn-gap-lg;
}
.icon-border {
- @include ml-mr(calc(($icon-gap - $btn-border-width) / 2));
+ @include ml-mr(calc(($sb-btn-gap-lg - $btn-border-width) / 2));
}
}
}
} /* min-width: 1650px */