commons.scss in jekyll-theme-chirpy-5.2.0

- old
+ new

@@ -3,11 +3,11 @@
 */
 
 html {
   @media (prefers-color-scheme: light) {
     &:not([data-mode]),
-    [data-mode=light] {
+    &[data-mode=light] {
       @include light-scheme;
     }
 
     &[data-mode=dark] {
       @include dark-scheme;
@@ -124,10 +124,15 @@
   @include prompt("warning", "\f06a");
 
   @include prompt("danger", "\f071");
 }
 
+mjx-container {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
 kbd {
   font-family: inherit;
   display: inline-block;
   vertical-align: middle;
   line-height: 1.3rem;
@@ -141,22 +146,19 @@
   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;
+  @include pl-pr(1.5rem);
+
   font-size: 0.8rem;
 
   > div.d-flex {
+    height: $footer-height;
     line-height: 1.2rem;
-    width: 95%;
-    max-width: 1045px;
+    padding-bottom: 1rem;
     border-top: 1px solid var(--main-border-color);
-    margin-bottom: 1rem;
 
     > div {
       width: 350px;
     }
   }
@@ -220,11 +222,10 @@
 /* --- Panels --- */
 
 .access {
   top: 2rem;
   transition: top 0.2s ease-in-out;
-  margin-right: 1.5rem;
   margin-top: 3rem;
   margin-bottom: 4rem;
 
   &:only-child {
     position: -webkit-sticky; /* Safari */
@@ -434,11 +435,11 @@
   a {
     &:not(:last-child) {
       margin-right: 2px;
     }
 
-    &:hover {
+    &:not([class]):hover {
       @extend %link-hover;
     }
   }
 
   em {
@@ -869,10 +870,11 @@
 }
 
 #search-result-wrapper {
   display: none;
   height: 100%;
+  width: 100%;
   overflow: auto;
 
   .post-content {
     margin-top: 2rem;
   }
@@ -926,11 +928,11 @@
   display: none;
 }
 
 #search-wrapper {
   display: flex;
-  width: 85%;
+  width: 100%;
   border-radius: 1rem;
   border: 1px solid var(--search-wrapper-border-color);
   background: var(--search-wrapper-bg);
   padding: 0 0.5rem;
 
@@ -995,11 +997,11 @@
     @extend %link-color;
   }
 }
 
 #search-results {
-  padding-bottom: 6rem;
+  padding-bottom: 3rem;
 
   a {
     &:hover {
       @extend %link-hover;
     }
@@ -1048,11 +1050,11 @@
   word-break: keep-all;
   white-space: nowrap;
 }
 
 #core-wrapper {
-  min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
+  min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
 
   .categories,
   #tags,
   #archives {
     a:not(:hover) {
@@ -1081,33 +1083,17 @@
 
 #main-wrapper {
   background-color: var(--main-wrapper-bg);
   position: relative;
   min-height: 100vh;
-  padding-bottom: $footer-height;
 
   @include pl-pr(0);
 }
 
-#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});
-      }
-    }
-  }
-
-  div.row:first-of-type:last-of-type { /* alone */
-    margin-bottom: 4rem;
-  }
+#core-wrapper,
+#panel-wrapper {
+  margin-top: $topbar-height; /* same as the height of topbar */
 }
 
 #topbar-wrapper.row,
 #main > .row,
 #search-result-wrapper > .row {
@@ -1143,30 +1129,70 @@
 #back-to-top:hover {
   transform: translate3d(0, -5px, 0);
   -webkit-transform: translate3d(0, -5px, 0);
 }
 
+#notification {
+  @keyframes popup {
+    from {
+      opacity: 0;
+      bottom: 0;
+    }
+  }
+
+  .toast-header {
+    background: none;
+    border-bottom: none;
+    color: inherit;
+  }
+
+  .toast-body {
+    font-family: 'Lato';
+    line-height: 1.25rem;
+
+    button {
+      font-size: 90%;
+      min-width: 4rem;
+    }
+  }
+
+  &.toast {
+    display: none;
+
+    &.show {
+      display: block;
+      min-width: 20rem;
+      border-radius: 0.5rem;
+      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(10px);
+      background-color: rgba(255, 255, 255, 0.5);
+      color: #1b1b1eba;
+      position: fixed;
+      left: 50%;
+      bottom: 20%;
+      transform: translateX(-50%);
+      animation: popup 0.8s;
+    }
+  }
+
+}
+
 /*
   Responsive Design:
 
  {sidebar, content, panel} >= 1120px screen width
  {sidebar, content} >= 850px screen width
  {content} <= 849px screen width
 
 */
 
 @media all and (max-width: 576px) {
-
-  $footer-height: $footer-height-mobile; /* overwrite */
-
   footer {
-    height: $footer-height;
+    height: $footer-height-mobile;
 
     > 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;
     }
 
@@ -1174,16 +1200,12 @@
     .footer-right {
       text-align: center;
     }
   }
 
-  #main > div.row:first-child > div:first-child {
-    min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
-  }
-
   #core-wrapper {
-    min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
+    min-height: calc(100vh - #{$topbar-height} - #{$footer-height-mobile}) !important;
 
     h1 {
       margin-top: 2.2rem;
       font-size: 1.75rem;
     }
@@ -1204,14 +1226,25 @@
 
   .site-subtitle {
     @include ml-mr(1.8rem);
   }
 
-  #main-wrapper {
-    padding-bottom: $footer-height;
+}
+
+@media all and (max-width: 768px) {
+  %full-width {
+    max-width: 100%;
   }
 
+  #topbar {
+    @extend %full-width;
+  }
+
+  #main {
+    @extend %full-width;
+    @include pl-pr(0);
+  }
 }
 
 /* hide sidebar and panel */
 @media all and (max-width: 849px) {
   @mixin slide($append: null) {
@@ -1258,10 +1291,15 @@
     @include slide;
 
     padding-top: $topbar-height;
   }
 
+  #topbar,
+  #main {
+    max-width: 100%;
+  }
+
   #search-result-wrapper {
     width: 100%;
   }
 
   #breadcrumb,
@@ -1273,32 +1311,21 @@
     @include slide(top 0.2s ease);
 
     left: 0;
   }
 
-  #main > div.row:first-child > div:nth-child(1),
-  #main > div.row:first-child > div:nth-child(2) {
+  #core-wrapper,
+  #panel-wrapper {
     margin-top: 0;
   }
 
   #topbar-title,
   #sidebar-trigger,
   #search-trigger {
     display: block;
   }
 
-  #search-wrapper {
-    &.loaded ~ a {
-      margin-right: 1rem;
-    }
-  }
-
-  #search-input {
-    margin-left: 0;
-    width: 95%;
-  }
-
   #search-result-wrapper .post-content {
     letter-spacing: 0;
   }
 
   #tags {
@@ -1343,41 +1370,41 @@
 
   .profile-wrapper {
     margin-top: 3rem;
   }
 
-  #search-wrapper {
-    width: 22%;
-    min-width: 150px;
-  }
-
   #search-hints {
     display: none;
   }
 
+  #search-wrapper {
+    max-width: $search-max-width;
+  }
+
   #search-result-wrapper {
     margin-top: 3rem;
+    max-width: $main-content-max-width;
   }
 
   div.post-content .table-wrapper > table {
     min-width: 70%;
   }
 
   /* button 'back-to-Top' position */
   #back-to-top {
     bottom: 5.5rem;
-    right: 1.2rem;
+    right: 5%;
   }
 
+  #topbar {
+    @include pl-pr(2rem);
+  }
+
   #topbar-title {
     text-align: left;
   }
 
-  footer > div.d-flex {
-    width: 92%;
-  }
-
 }
 
 /* Pad horizontal */
 @media all and (min-width: 992px) and (max-width: 1199px) {
   #main .col-lg-11 {
@@ -1447,46 +1474,28 @@
 @media all and (max-width: 1199px) {
   #panel-wrapper {
     display: none;
   }
 
-  #topbar {
-    padding: 0;
-  }
-
   #main > div.row {
     -webkit-box-pack: center !important;
     -ms-flex-pack: center !important;
     justify-content: center !important;
   }
 }
 
 /* --- 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%;
-    padding-left: 3%;
-  }
-
-  #topbar {
-    padding: 0;
-    max-width: 1070px;
-  }
-
-  #panel-wrapper {
-    max-width: $panel-max-width;
-  }
-
   #back-to-top {
     bottom: 6.5rem;
-    right: 4.3rem;
   }
 
+  #search-wrapper {
+    margin-right: 4rem;
+  }
+
   #search-input {
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
   }
 
@@ -1516,68 +1525,42 @@
   }
 
 }
 
 @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;
-    }
+  #back-to-top {
+    right: calc((100vw - #{$sidebar-width} - 1140px) / 2 + 3rem);
   }
-
-  #search-result-wrapper {
-    padding-right: 2rem;
-
-    > div {
-      max-width: 1110px;
-    }
-  }
-
 }
 
-@media all and (min-width: 1400px) and (max-width: 1650px) {
-  #topbar {
-    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;
-    }
-  }
-
   #main-wrapper {
     margin-left: $sidebar-width-large;
   }
 
-  #panel-wrapper {
-    margin-left: calc((100% - #{$main-content-max-width}) / 10);
-  }
-
   #topbar-wrapper {
     left: $sidebar-width-large;
   }
 
-  #topbar {
-    max-width: #{$main-content-max-width};
+  #search-wrapper {
+    margin-right: calc(#{$main-content-max-width} * 0.25 - #{$search-max-width});
   }
 
-  #search-wrapper {
-    margin-right: 3%;
+  #topbar,
+  #main {
+    max-width: $main-content-max-width;
   }
 
+  #core-wrapper,
+  #tail-wrapper {
+    padding-right: 4.5rem !important;
+  }
+
+  #back-to-top {
+    right: calc((100vw - #{$sidebar-width-large} - #{$main-content-max-width}) / 2 + 2rem);
+  }
+
   #sidebar {
     width: $sidebar-width-large;
 
     .profile-wrapper {
       margin-top: 4rem;
@@ -1692,60 +1675,6 @@
 
     } /* .sidebar-bottom */
 
   } /* #sidebar */
 
-  footer > div.d-flex {
-    width: 92%;
-    max-width: 1140px;
-  }
-
-  #search-result-wrapper {
-    > div {
-      max-width: #{$main-content-max-width};
-    }
-  }
-
 } /* min-width: 1650px */
-
-@media all and (min-width: 1700px) {
-  #topbar-wrapper {
-    /* 100% - 350px - (1920px - 350px); */
-    padding-right: calc(100% - #{$sidebar-width-large} - (1920px - #{$sidebar-width-large}));
-  }
-
-  #topbar {
-    max-width: calc(#{$main-content-max-width} + 20px);
-  }
-
-  #main > div.row {
-    padding-left: calc((100% - #{$main-content-max-width} - 2%) / 2);
-  }
-
-  #panel-wrapper {
-    margin-left: 3%;
-  }
-
-  footer {
-    padding-left: 0;
-    padding-right: calc(100% - #{$sidebar-width-large} - 1180px);
-  }
-
-  #back-to-top {
-    right: calc(100% - 1920px + 15rem);
-  }
-
-}
-
-@media (min-width: 1920px) {
-  #main > div.row {
-    padding-left: 190px;
-  }
-
-  #search-result-wrapper {
-    padding-right: calc(100% - #{$sidebar-width-large} - 1180px);
-  }
-
-  #panel-wrapper {
-    margin-left: 41px;
-  }
-}