_sass/addon/commons.scss in jekyll-theme-chirpy-4.3.4 vs _sass/addon/commons.scss in jekyll-theme-chirpy-5.0.0
- old
+ new
@@ -41,71 +41,32 @@
color: var(--text-color);
-webkit-font-smoothing: antialiased;
font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
}
-/* --- Scrollbar --- */
-
-$scrollbar-size: 7px;
-
-::-webkit-scrollbar {
- width: $scrollbar-size;
- height: $scrollbar-size;
-}
-
-::-webkit-scrollbar-track {
- @at-root body#{&} {
- -webkit-box-shadow: inset 0 0 6px var(--scrollbar-track-bg);
- }
-}
-
-::-webkit-scrollbar-thumb {
- background-color: var(--scrollbar-thumb-bg);
- border-radius: calc(#{$scrollbar-size} / 2);
-}
-
-.highlight {
- border-color: transparent;
- transition: border-color 0.5s ease;
-
- &:hover {
- border-color: var(--scrollbar-thumb-bg);
- transition: border-color 0.2s ease;
- }
-
- &::-webkit-scrollbar-thumb {
- /* add border to act as background-color */
- border-right-style: inset;
- border-right-width: calc(100vw + 100vh);
- border-color: inherit;
- background-color: var(--highlight-bg-color);
- }
-
-}
-
/* --- Typography --- */
h1 {
@extend %heading;
- font-size: 1.8rem;
+ font-size: 1.9rem;
}
h2 {
@extend %heading;
@extend %section;
- @extend %anchor;
+ @extend %anchor-relative;
- font-size: 1.4rem;
+ font-size: 1.5rem;
}
h3 {
@extend %heading;
@extend %section;
@extend %anchor;
- font-size: 1.25rem;
+ font-size: 1.2rem;
}
h4 {
@extend %heading;
@extend %section;
@@ -144,21 +105,31 @@
padding-left: 1rem;
color: var(--blockquote-text-color);
}
kbd {
+ font-family: inherit;
+ 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: solid 1px var(--kbd-wrap-color);
+ box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
}
footer {
position: absolute;
bottom: 0;
padding: 0 1rem;
height: $footer-height;
font-size: 0.8rem;
- color: #7a7b7d;
- background-color: var(--footer-bg-color);
> div.d-flex {
line-height: 1.2rem;
width: 95%;
max-width: 1045px;
@@ -169,11 +140,11 @@
width: 350px;
}
}
a {
- color: var(--footer-link);
+ @extend %text-color;
&:link {
@include no-text-decoration;
}
@@ -187,10 +158,44 @@
.footer-right {
text-align: right;
}
}
+i { // fontawesome icons
+ &.far,
+ &.fas {
+ @extend %no-cursor;
+ }
+}
+
+@keyframes fade-in {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+img[data-src] {
+ margin: 0.5rem 0;
+
+ &[data-loaded=true] {
+ animation: fade-in linear 0.5s;
+ }
+
+ &.left {
+ float: left;
+ margin: 0.75rem 1rem 1rem 0;
+ }
+
+ &.right {
+ float: right;
+ margin: 0.75rem 0 1rem 1rem;
+ }
+
+ &.shadow {
+ filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+ }
+}
+
/* --- Panels --- */
.access {
top: 2rem;
transition: top 0.2s ease-in-out;
@@ -201,36 +206,29 @@
&:only-child {
position: -webkit-sticky; /* Safari */
position: sticky;
}
- &.topbar-down {
- top: 6rem;
- }
-
> div {
padding-left: 1rem;
border-left: 1px solid var(--main-border-color);
&:not(:last-child) {
margin-bottom: 4rem;
}
}
- span {
- @include panel-label;
- }
-
.post-content {
font-size: 0.9rem;
}
}
-#access-tags {
- > div.post-content > div {
- max-width: 80%;
+#panel-wrapper {
+ // the headings
+ .panel-heading {
+ @include label(inherit);
}
.post-tag {
display: inline-block;
line-height: 1rem;
@@ -246,10 +244,14 @@
border-color: #2a408e;
color: #fff;
transition: none;
}
}
+
+ &.topbar-down > div {
+ top: 6rem;
+ }
}
#access-lastmod {
li {
height: 1.8rem;
@@ -291,11 +293,11 @@
// [scroll-focus] added by `smooth-scroll.js`
&:target:not([scroll-focus]),
&[scroll-focus=true] > p {
background-color: var(--footnote-target-bg);
width: fit-content;
- -webkit-transition: background-color 1.5s ease-in-out; // Safari prior 6.1
+ -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
transition: background-color 1.5s ease-in-out;
}
}
}
@@ -303,11 +305,11 @@
@at-root a#{&} {
@include ml-mr(1px);
@include pl-pr(2px);
border-bottom-style: none !important;
- -webkit-transition: background-color 1.5s ease-in-out; // Safari prior 6.1
+ -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
transition: background-color 1.5s ease-in-out;
}
// [scroll-focus] added by `smooth-scroll.js`
@at-root sup:target:not([scroll-focus]),
@@ -325,30 +327,14 @@
margin-left: 0.25em;
border-bottom-style: none !important;
}
}
-.post {
- h1 {
- margin-top: 3rem;
- margin-bottom: 1rem;
- }
-
- em { /* MarkDown italic */
- padding-right: 0.2rem;
- }
-
- a:hover {
- code {
- @extend %link-hover;
- }
- }
-}
-
/* --- Begin of Markdown table style --- */
-.table-wrapper { // it will be created by Liquid
+// it will be created by Liquid
+.table-wrapper {
overflow-x: auto;
margin-bottom: 1.5rem;
> table {
min-width: 100%;
@@ -383,108 +369,89 @@
}// table
}
/* --- post --- */
+.post {
+ h1 {
+ margin-top: 3rem;
+ margin-bottom: 1.5rem;
+ }
+
+ a {
+ &.img-link {
+ @extend %no-cursor;
+ }
+
+ // created by `_includes/img-extra.html`
+ &.popup {
+ cursor: zoom-in;
+
+ > img[data-src]:not(.normal):not(.left):not(.right) {
+ @include align-center;
+ }
+ }
+
+ &:hover {
+ code {
+ @extend %link-hover;
+ }
+ }
+ } // a
+
+}
+
.pageviews .fa-spinner {
font-size: 80%;
}
.post-meta {
font-size: 0.85rem;
word-spacing: 1px;
a {
- @extend %link-color;
- @extend %link-underline;
-
&:not(:last-child) {
margin-right: 2px;
}
&:hover {
@extend %link-hover;
}
}
+
+ em {
+ @extend %normal-font-style;
+ }
}
.post-content {
font-size: 1.08rem;
line-height: 1.8;
margin-top: 2rem;
overflow-wrap: break-word;
word-wrap: break-word;
- @mixin caption {
- + em {
- display: block;
- text-align: center;
- font-style: normal;
- font-size: 80%;
- padding: 0;
- color: #6d6c6c;
- }
- }
-
- @keyframes fade-in {
- from { opacity: 0; }
- to { opacity: 1; }
- }
-
- img[data-src] {
- margin: 0.5rem 0;
-
- &[data-loaded=true] {
- animation: fade-in linear 0.5s;
- }
-
- &.left {
- float: left;
- margin: 0.75rem 1rem 1rem 0;
- }
-
- &.right {
- float: right;
- margin: 0.75rem 0 1rem 1rem;
- }
-
- &.shadow {
- filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
- }
-
- @include caption;
-
- }
-
a {
- blockquote & {
- color: var(--link-color);
- }
-
&:not(.img-link) {
- @extend %link-color;
@extend %link-underline;
&:hover {
@extend %link-hover;
}
}
- &.popup { // created by `_includes/img-extra.html`
- cursor: zoom-in;
-
- > img[data-src]:not(.normal):not(.left):not(.right) {
- @include align-center;
- }
+ &.img-link + em {
+ display: block;
+ text-align: center;
+ font-style: normal;
+ font-size: 80%;
+ padding: 0;
+ color: #6d6c6c;
}
- &.img-link {
- @include caption;
- }
+ }
- } // a
-
ul {
// attribute 'hide-bullet' was added by liquid
.task-list-item[hide-bullet] {
list-style-type: none;
@@ -572,14 +539,10 @@
}
}
/* --- Effects classes --- */
-.semi-bold {
- font-weight: 600 !important;
-}
-
.loaded {
display: block !important;
@at-root .d-flex#{&} {
display: flex !important;
@@ -823,11 +786,10 @@
} // @for
} // ul
.sidebar-bottom {
- font-size: 1.2rem;
margin-bottom: 2.1rem;
@include ml-mr(auto);
@include pl-pr(1rem);
@@ -840,37 +802,42 @@
@extend %icon;
@extend %clickable-transition;
}
i {
- line-height: 1.75rem; // default line-height in body
- vertical-align: middle;
+ font-size: 1.2rem;
+ line-height: 1.75rem;
}
- #mode-toggle-wrapper {
+ .mode-toggle {
+ padding: 0;
+ border: 0;
+ margin-bottom: 1px;
+ background-color: transparent;
+
@extend %icon;
+ @extend %sidebar-links;
- i {
- @extend %sidebar-links;
- @extend %cursor-pointer;
+ > i {
@extend %clickable-transition;
}
+ &:hover > i {
+ color: var(--sidebar-active-color);
+ }
}
.icon-border {
+ @extend %no-cursor;
+
background-color: var(--sidebar-muted-color);
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
}
- #mode-toggle-wrapper:hover > i {
- color: var(--sidebar-active-color);
- }
-
} // .sidebar-bottom
} // #sidebar
@media (hover: hover) {
@@ -989,26 +956,32 @@
}
}
}
#search-hints {
- display: none;
+ padding: 0 1rem;
+ h4 {
+ margin-bottom: 1.5rem;
+ }
+
.post-tag {
display: inline-block;
line-height: 1rem;
font-size: 1rem;
background: var(--search-tag-bg);
border: none;
padding: 0.5rem;
- margin: 0 1rem 1rem 0;
+ margin: 0 1.25rem 1rem 0;
&::before {
content: "#";
color: var(--text-muted-color);
padding-right: 0.2rem;
}
+
+ @extend %link-color;
}
}
#search-results {
padding-bottom: 6rem;
@@ -1061,11 +1034,13 @@
text-overflow: ellipsis;
word-break: keep-all;
white-space: nowrap;
}
-#page {
+#core-wrapper {
+ min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
+
.categories,
#tags,
#archives {
a:not(:hover) {
@extend %no-bottom-border;
@@ -1098,26 +1073,30 @@
padding-bottom: $footer-height;
@include pl-pr(0);
}
-#main > div.row:first-child > div {
- &:nth-child(1),
- &:nth-child(2) {
- margin-top: $topbar-height; /* same as the height of topbar */
+#main {
+ .row:first-child {
+ > div {
+ &:nth-child(1),
+ &:nth-child(2) {
+ margin-top: $topbar-height; /* same as the height of topbar */
+ }
+
+ &:first-child {
+ /* 3rem for topbar, 6rem for footer */
+ min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height});
+ }
+ }
}
- &:first-child {
- /* 3rem for topbar, 6rem for footer */
- min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height});
+ div.row:first-of-type:last-of-type { // alone
+ margin-bottom: 4rem;
}
}
-#post-wrapper {
- min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
-}
-
#topbar-wrapper.row,
#main > .row,
#search-result-wrapper > .row {
@include ml-mr(0);
}
@@ -1168,16 +1147,16 @@
#main > div.row:first-child > div:first-child {
min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
}
- #post-wrapper {
- min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
+ #core-wrapper {
+ min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
h1 {
margin-top: 2.2rem;
- font-size: 1.55rem;
+ font-size: 1.75rem;
}
}
#avatar > a {
width: 5rem;
@@ -1311,22 +1290,17 @@
#search-result-wrapper .post-content {
letter-spacing: 0;
}
- #search-hints {
- display: block;
- padding: 0 1rem;
- }
-
#tags {
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
}
- #page h1.dynamic-title {
+ h1.dynamic-title {
display: none;
~ .post-content {
margin-top: 3rem;
}
@@ -1516,10 +1490,14 @@
position: relative;
right: 24.3%;
}
}
+ #search-hints {
+ display: none;
+ }
+
.post-content {
font-size: 1.03rem;
}
footer > div.d-felx {
@@ -1675,9 +1653,10 @@
-ms-flex-pack: start !important;
justify-content: flex-start !important;
}
> span,
+ > button.mode-toggle,
> a {
@include ml-mr(0.15rem);
height: $icon-block-size;
margin-bottom: 0.5rem; // wrap line