commons.scss in jekyll-theme-chirpy-4.3.4

- old
+ new

@@ -4,16 +4,13 @@
 @import url('https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap');
 
 @mixin mode-toggle($dark-mode: false) {
   @if $dark-mode {
     @include dark-scheme;
-
   } @else {
     @include light-scheme;
-
   }
-
 }
 
 html:not([mode]),
 html[mode=light] {
   @include mode-toggle();
@@ -173,19 +170,22 @@
     }
   }
 
   a {
     color: var(--footer-link);
+
     &:link {
       @include no-text-decoration;
     }
+
     &:hover {
       @extend %link-hover;
 
       @include no-text-decoration;
     }
   }
+
   .footer-right {
     text-align: right;
   }
 }
 
@@ -200,26 +200,32 @@
 
   &: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%;
@@ -232,21 +238,21 @@
     background: none;
     border: 1px solid var(--btn-border-color);
     border-radius: 0.8rem;
     padding: 0.3rem 0.5rem;
     margin: 0 0.35rem 0.5rem 0;
+
     &:hover {
       background-color: #2a408e;
       border-color: #2a408e;
       color: #fff;
       transition: none;
     }
   }
 }
 
 #access-lastmod {
-
   li {
     height: 1.8rem;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
@@ -268,19 +274,22 @@
 }
 
 .footnotes > ol {
   padding-left: 2rem;
   margin-top: 0.5rem;
+
   > li {
     &:not(:last-child) {
       margin-bottom: 0.3rem;
     }
+
     > p {
       margin-left: 0.25em;
       margin-top: 0;
       margin-bottom: 0;
     }
+
     // [scroll-focus] added by `smooth-scroll.js`
     &:target:not([scroll-focus]),
     &[scroll-focus=true] > p {
       background-color: var(--footnote-target-bg);
       width: fit-content;
@@ -308,26 +317,28 @@
 }
 
 .reversefootnote {
   @at-root a#{&} {
     font-size: 0.6rem;
-    position: absolute;
     line-height: 1;
-    padding-top: 0.5em;
-    margin-left: 0.5em;
+    position: relative;
+    bottom: 0.25em;
+    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;
     }
   }
@@ -344,30 +355,34 @@
     overflow-x: auto;
     border-spacing: 0;
 
     thead {
       border-bottom: solid 2px rgba(210, 215, 217, 0.75);
+
       th {
         @extend %table-cell;
       }
     }
 
     tbody {
       tr {
         border-bottom: 1px solid var(--tb-border-color);
+
         &:nth-child(2n) {
           background-color: var(--tb-even-bg);
         }
+
         &:nth-child(2n + 1) {
           background-color: var(--tb-odd-bg);
         }
+
         td {
           @extend %table-cell;
         }
       }
-    }
-  }
+    } // tbody
+  }// table
 }
 
 /* --- post --- */
 
 .pageviews .fa-spinner {
@@ -375,16 +390,19 @@
 }
 
 .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;
     }
   }
 }
@@ -414,11 +432,11 @@
 
   img[data-src] {
     margin: 0.5rem 0;
 
     &[data-loaded=true] {
-      animation: fade-in linear .5s;
+      animation: fade-in linear 0.5s;
     }
 
     &.left {
       float: left;
       margin: 0.75rem 1rem 1rem 0;
@@ -443,10 +461,11 @@
     }
 
     &:not(.img-link) {
       @extend %link-color;
       @extend %link-underline;
+
       &:hover {
         @extend %link-hover;
       }
     }
 
@@ -471,10 +490,11 @@
 
       > i { // checkbox icon
         margin: 0 0.4rem 0.2rem -1.4rem;
         vertical-align: middle;
         color: var(--checkbox-color);
+
         &.checked {
           color: var(--checkbox-checked-color);
         }
       }
 
@@ -544,10 +564,11 @@
 .btn-lang {
   border: 1px solid !important;
   padding: 1px 3px;
   border-radius: 3px;
   color: var(--link-color);
+
   &:focus {
     box-shadow: none;
   }
 }
 
@@ -753,11 +774,10 @@
 
     li {
       width: 100%;
 
       &:last-child {
-
         a {
           position: relative;
           left: $cursor-width / 2;
           width: 100%;
         }
@@ -869,10 +889,11 @@
 
 #search-result-wrapper {
   display: none;
   height: 100%;
   overflow: auto;
+
   .post-content {
     margin-top: 2rem;
   }
 }
 
@@ -957,10 +978,11 @@
   color: var(--text-color);
 
   &:focus {
     box-shadow: none;
     background: center;
+
     &.form-control {
       &::-webkit-input-placeholder { @include input-placeholder; }
       &::-moz-placeholder { @include input-placeholder; }
       &:-ms-input-placeholder { @include input-placeholder; }
       &::placeholder { @include input-placeholder; }
@@ -977,20 +999,22 @@
     font-size: 1rem;
     background: var(--search-tag-bg);
     border: none;
     padding: 0.5rem;
     margin: 0 1rem 1rem 0;
+
     &::before {
       content: "#";
       color: var(--text-muted-color);
       padding-right: 0.2rem;
     }
   }
 }
 
 #search-results {
   padding-bottom: 6rem;
+
   a {
     &:hover {
       @extend %link-hover;
     }
 
@@ -1079,19 +1103,19 @@
 #main > div.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} - #{$post-extend-min-height});
   }
 }
 
 #post-wrapper {
-  min-height: calc(
-    100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
+  min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
 }
 
 #topbar-wrapper.row,
 #main > .row,
 #search-result-wrapper > .row {
@@ -1145,12 +1169,12 @@
   #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;
+    min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
+
     h1 {
       margin-top: 2.2rem;
       font-size: 1.55rem;
     }
   }
@@ -1168,18 +1192,20 @@
     padding-bottom: $footer-height;
   }
 
   footer {
     height: $footer-height;
+
     > div.d-flex {
       width: 100%;
       padding: 1.5rem 0;
       margin-bottom: 0.3rem;
       flex-wrap: wrap;
       -ms-flex-pack: distribute !important;
       justify-content: space-around !important;
     }
+
     .footer-left,
     .footer-right {
       text-align: center;
     }
   }
@@ -1199,17 +1225,17 @@
   }
 
   .footnotes ol > li {
     padding-top: 3.5rem;
     margin-top: -3.2rem;
+
     &:first-child {
       margin-top: -3.5rem;
     }
   }
 
   [#{$sidebar-display}] {
-
     #sidebar {
       transform: translateX(0);
     }
 
     #topbar-wrapper,
@@ -1270,10 +1296,11 @@
 
   #search-wrapper {
     &.loaded ~ a {
       margin-right: 1rem;
     }
+
     .fa-times-circle {
       right: 5.2rem;
     }
   }
 
@@ -1297,10 +1324,11 @@
     justify-content: center !important;
   }
 
   #page h1.dynamic-title {
     display: none;
+
     ~ .post-content {
       margin-top: 3rem;
     }
   }
 
@@ -1371,11 +1399,10 @@
   }
 }
 
 /* Compact icons in sidebar & panel hidden */
 @media all and (min-width: 850px) and (max-width: 1199px) {
-
   #sidebar {
     width: $sidebar-width-small;
 
     .site-subtitle {
       margin-left: 1rem;
@@ -1385,10 +1412,11 @@
     .sidebar-bottom {
       a,
       span {
         width: 2rem;
       }
+
       .icon-border {
         left: -3px;
       }
     }
   }
@@ -1444,11 +1472,10 @@
 }
 
 /* --- desktop mode, both sidebar and panel are visible --- */
 
 @media all and (min-width: 1200px) {
-
   #main > div.row > div.col-xl-8 {
     -webkit-box-flex: 0;
     -ms-flex: 0 0 75%;
     flex: 0 0 75%;
     max-width: 75%;
@@ -1474,16 +1501,19 @@
     transition: all 0.3s ease-in-out;
   }
 
   #search-results > div {
     width: 46%;
+
     &:nth-child(odd) {
       margin-right: 1.5rem;
     }
+
     &:nth-child(even) {
       margin-left: 1.5rem;
     }
+
     &:last-child:nth-child(odd) {
       position: relative;
       right: 24.3%;
     }
   }
@@ -1497,20 +1527,21 @@
   }
 
 }
 
 @media all and (min-width: 1400px) {
-
   #main > div.row {
     padding-left: calc((100% - #{$main-content-max-width}) / 2);
+
     > div.col-xl-8 {
       max-width: 850px;
     }
   }
 
   #search-result-wrapper {
     padding-right: 2rem;
+
     > div {
       max-width: 1110px;
     }
   }
 
@@ -1525,17 +1556,17 @@
     padding-right: 2rem;
   }
 }
 
 @media all and (min-width: 1650px) {
-
   #breadcrumb {
     padding-left: 0;
   }
 
   #main > div.row > div.col-xl-8 {
     padding-left: 0;
+
     > div:first-child {
       padding-left: 0.55rem !important;
       padding-right: 1.9rem !important;
     }
   }
@@ -1579,9 +1610,10 @@
         @extend %profile-ml;
 
         > a {
           width: 6.2rem;
           height: 6.2rem;
+
           &.mx-auto {
             margin-left: 0 !important;
           }
         }
       }