_sass/addon/commons.scss in jekyll-theme-chirpy-6.5.5 vs _sass/addon/commons.scss in jekyll-theme-chirpy-7.1.0
- old
+ new
@@ -1,8 +1,10 @@
/* The common styles */
html {
+ font-size: 16px;
+
@media (prefers-color-scheme: light) {
&:not([data-mode]),
&[data-mode='light'] {
@include light-scheme;
}
@@ -20,12 +22,10 @@
&[data-mode='light'] {
@include light-scheme;
}
}
-
- font-size: 16px;
}
body {
background: var(--main-bg);
padding: env(safe-area-inset-top) env(safe-area-inset-right)
@@ -40,24 +40,33 @@
@for $i from 1 through 5 {
h#{$i} {
@extend %heading;
@if $i > 1 {
- @extend %section;
@extend %anchor;
}
@if $i < 5 {
- $factor: 0.18rem;
+ $size-factor: 0.25rem;
- @if $i == 1 {
- $factor: 0.23rem;
+ @if $i > 1 {
+ $size-factor: 0.18rem;
+
+ main & {
+ @if $i == 2 {
+ margin: 2.5rem 0 1.25rem;
+ } @else {
+ margin: 2rem 0 1rem;
+ }
+ }
}
- font-size: 1rem + (5 - $i) * $factor;
+ & {
+ font-size: 1rem + (5 - $i) * $size-factor;
+ }
} @else {
- font-size: 1rem;
+ font-size: 1.05rem;
}
}
}
a {
@@ -78,13 +87,14 @@
filter: blur($blur);
}
}
blockquote {
- border-left: 5px solid var(--blockquote-border-color);
+ border-left: 0.125rem solid var(--blockquote-border-color);
padding-left: 1rem;
color: var(--blockquote-text-color);
+ margin-top: 0.5rem;
> p:last-child {
margin-bottom: 0;
}
@@ -105,32 +115,37 @@
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
}
- @include prompt('tip', '\f0eb', 'regular');
- @include prompt('info', '\f06a');
+ @include prompt('tip', '\f0eb', $fa-style: 'regular');
+ @include prompt('info', '\f06a', $rotate: 180);
@include prompt('warning', '\f06a');
@include prompt('danger', '\f071');
}
kbd {
- font-family: inherit;
+ font-family: Lato, sans-serif;
display: inline-block;
vertical-align: middle;
line-height: 1.3rem;
min-width: 1.75rem;
text-align: center;
margin: 0 0.3rem;
padding-top: 0.1rem;
color: var(--kbd-text-color);
background-color: var(--kbd-bg-color);
- border-radius: 0.25rem;
+ border-radius: $radius-sm;
border: solid 1px var(--kbd-wrap-color);
box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
}
+hr {
+ border-color: var(--main-border-color);
+ opacity: 1;
+}
+
footer {
background-color: var(--main-bg);
height: $footer-height;
border-top: 1px solid var(--main-border-color);
@@ -211,17 +226,17 @@
}
}
#access-lastmod {
a {
+ color: inherit;
+
&:hover {
@extend %link-hover;
}
@extend %no-bottom-border;
-
- color: inherit;
}
}
.footnotes > ol {
padding-left: 2rem;
@@ -362,11 +377,10 @@
main {
line-height: 1.75;
h1 {
margin-top: 2rem;
- margin-bottom: 1.5rem;
}
p {
> a.popup {
&:not(.normal):not(.left):not(.right) {
@@ -548,23 +562,38 @@
.embed-video {
width: 100%;
height: 100%;
margin-bottom: 1rem;
+ aspect-ratio: 16 / 9;
@extend %rounded;
- &.youtube,
- &.bilibili {
- aspect-ratio: 16 / 9;
- }
-
&.twitch {
aspect-ratio: 310 / 189;
}
+
+ &.file {
+ display: block;
+ width: auto;
+ height: auto;
+ max-width: 100%;
+ max-height: 100%;
+ margin: auto;
+ margin-bottom: 0;
+ }
+
+ @extend %img-caption;
}
+.embed-audio {
+ width: 100%;
+ display: block;
+
+ @extend %img-caption;
+}
+
/* --- buttons --- */
.btn-lang {
border: 1px solid !important;
padding: 1px 3px;
border-radius: 3px;
@@ -575,30 +604,10 @@
}
}
/* --- Effects classes --- */
-.loaded {
- display: block !important;
-
- @at-root .d-flex#{&} {
- display: flex !important;
- }
-}
-
-.unloaded {
- display: none !important;
-}
-
-.visible {
- visibility: visible !important;
-}
-
-.hidden {
- visibility: hidden !important;
-}
-
.flex-grow-1 {
flex-grow: 1 !important;
}
.btn-box-shadow {
@@ -651,22 +660,10 @@
margin: 0.75rem 0 1rem 1rem;
}
/* --- Overriding --- */
-/* magnific-popup */
-
-figure .mfp-title {
- text-align: center;
- padding-right: 0;
- margin-top: 0.5rem;
-}
-
-.mfp-img {
- transition: none;
-}
-
/* mermaid */
.mermaid {
text-align: center;
}
@@ -693,19 +690,19 @@
width: $sidebar-width;
z-index: 99;
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;
}
- /* Hide scrollbar for IE, Edge and Firefox */
- -ms-overflow-style: none; /* IE and Edge */
- scrollbar-width: none; /* Firefox */
-
%sidebar-link-hover {
&:hover {
color: var(--sidebar-active-color);
}
}
@@ -834,12 +831,15 @@
background-color: var(--sidebar-btn-bg);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
- box-shadow: var(--sidebar-border-color) 0 0 0 1px;
+ &:not(:focus-visible) {
+ box-shadow: var(--sidebar-border-color) 0 0 0 1px;
+ }
+
&:hover {
background-color: var(--sidebar-hover-bg);
}
}
@@ -855,14 +855,11 @@
i {
line-height: $btn-size;
}
- .mode-toggle {
- padding: 0;
- border: 0;
-
+ #mode-toggle {
@extend %button;
@extend %sidebar-links;
@extend %sidebar-link-hover;
}
@@ -1047,20 +1044,20 @@
#search-results {
padding-bottom: 3rem;
a {
+ font-size: 1.4rem;
+ line-height: 2.5rem;
+
&:hover {
@extend %link-hover;
}
@extend %link-color;
@extend %no-bottom-border;
@extend %heading;
-
- font-size: 1.4rem;
- line-height: 2.5rem;
}
> article {
width: 100%;
@@ -1137,11 +1134,12 @@
}
/* --- button back-to-top --- */
#back-to-top {
- display: none;
+ visibility: hidden;
+ opacity: 0;
z-index: 1;
cursor: pointer;
position: fixed;
right: 1rem;
bottom: calc($footer-height-large - $back2top-size / 2);
@@ -1150,21 +1148,25 @@
padding: 0;
width: $back2top-size;
height: $back2top-size;
border-radius: 50%;
border: 1px solid var(--btn-backtotop-border-color);
- transition: transform 0.2s ease-out;
- -webkit-transition: transform 0.2s ease-out;
+ transition: opacity 0.5s ease-in-out, transform 0.2s ease-out;
&:hover {
transform: translate3d(0, -5px, 0);
-webkit-transform: translate3d(0, -5px, 0);
}
i {
line-height: $back2top-size;
position: relative;
bottom: 2px;
+ }
+
+ &.show {
+ opacity: 1;
+ visibility: visible;
}
}
#notification {
@-webkit-keyframes popup {