hexo-theme-gnix 8.0.0 → 10.0.0

package/source/css/responsive.css

@@ -0,0 +1,426 @@
+@charset "UTF-8";
+
+@media (min-width: 900px) {
+  .article-font-popover {
+    width: clamp(864px, 67.2vw, 1056px);
+    min-width: 864px;
+    max-width: 96vw;
+
+    .article-popover-header {
+      padding: 1rem 1.5rem;
+    }
+
+    .article-popover-body {
+      display: grid;
+      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
+      gap: 0;
+      align-items: start;
+      padding: 0;
+    }
+
+    .font-settings-column {
+      max-width: 36rem;
+      padding: 1.5rem;
+      border-right: 1px dashed var(--surface0);
+    }
+
+    .font-preview-column {
+      min-width: 0;
+      padding: 1.5rem;
+      background: linear-gradient(180deg, hsl(from var(--base) h s calc(l + 0.02) / 0.72), hsl(from var(--mantle) h s l / 0.94));
+    }
+
+    .font-setting-group {
+      min-width: 0;
+    }
+
+    .font-preview-group {
+      align-self: start;
+      width: 100%;
+    }
+
+    .font-preview-box {
+      min-height: 100%;
+      padding: 1.75rem 1.875rem;
+      border-radius: 18px;
+      box-shadow:
+        inset 0 0 0 1px hsl(from var(--surface0) h s l / 0.8),
+        0 18px 40px -28px rgba(0, 0, 0, 0.32);
+    }
+
+    .font-preview-title {
+      margin-bottom: 0.875rem;
+      font-size: 1.5em;
+      line-height: 1.3;
+    }
+
+    .font-preview-excerpt {
+      font-size: 1em;
+    }
+  }
+}
+
+@media (min-width: 900px) {
+  :popover-open.article-font-popover {
+    width: clamp(864px, 67.2vw, 1056px);
+    min-width: 864px;
+    max-width: 96vw;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  #icarus-toc-container {
+    .toc {
+      max-height: 70vh;
+      width: min(86vw, 420px);
+    }
+
+    .toc-item {
+      margin-bottom: 0.35rem;
+    }
+
+    .toc-child {
+      padding-left: 1rem;
+    }
+
+    .toc-text {
+      .toc-level-2 & {
+        font-size: 1.25rem;
+      }
+      .toc-level-3 & {
+        font-size: 1.15rem;
+      }
+      .toc-level-4 & {
+        font-size: 1rem;
+      }
+      .toc-level-5 & {
+        font-size: 0.9rem;
+      }
+      .toc-level-6 & {
+        font-size: 0.8rem;
+      }
+    }
+  }
+
+  span.year {
+    font-size: 3em !important;
+  }
+
+  .font-weight-selector {
+    margin-bottom: 0.5rem;
+  }
+
+  .is-hidden-mobile {
+    display: none;
+  }
+
+  table {
+    font-size: 14px;
+  }
+
+  th,
+  td {
+    padding: 8px 12px;
+  }
+
+  .section {
+    padding: 0;
+  }
+
+  .main-content {
+    width: 100%;
+  }
+
+  .card-content {
+    padding: 1rem 0.875rem 0;
+  }
+
+  .cover-image {
+    max-height: 25vh;
+    border-radius: 0;
+  }
+
+  .pagination {
+    height: 2.5em;
+  }
+
+  .article-comment-popover,
+  .article-comment-popover-body {
+    width: calc(100vw - 1rem);
+    max-width: calc(100vw - 1rem);
+  }
+
+  .article-comment-popover-body {
+    max-height: calc(90dvh - 4.25rem);
+  }
+
+  .article-comment-panel {
+    padding: 1rem 1.75rem;
+  }
+
+  :popover-open.article-comment-popover {
+    width: calc(100vw - 1rem);
+    max-width: calc(100vw - 1rem);
+  }
+
+  .article-comment-popover-body {
+    padding: 0;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .is-hidden-tablet {
+    display: none;
+  }
+
+  .level {
+    display: flex;
+    flex-grow: 1;
+  }
+
+  .pagination-list {
+    flex-grow: 1;
+    flex-shrink: 1;
+    justify-content: flex-start;
+    order: 1;
+  }
+
+  .pagination-previous {
+    order: 2;
+  }
+
+  .pagination-next {
+    order: 3;
+  }
+
+  .pagination {
+    justify-content: space-between;
+  }
+
+  .pagination-previous {
+    order: 1;
+  }
+
+  .pagination-list {
+    justify-content: center;
+    order: 2;
+  }
+
+  .pagination-next {
+    order: 3;
+  }
+}
+
+@media screen and (max-width: 1023px) {
+  /* This is used for mobile and tablet devices */
+  /* #region Navbar */
+  /* Navbar Burger */
+  .navbar-menu {
+    display: none;
+  }
+
+  .navbar-menu.is-active {
+    display: block;
+    position: fixed;
+    top: 4rem;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: var(--mantle);
+    overflow-y: auto;
+  }
+
+  .navbar-start {
+    display: flex;
+    flex-direction: column;
+    height: 70%;
+  }
+
+  .navbar-end {
+    justify-content: center;
+    display: inline-flex;
+    flex-direction: row;
+    width: 100%;
+    > .navbar-item {
+      font-size: 1.25em;
+      padding: 1em;
+    }
+  }
+
+  .navbar-burger {
+    position: relative;
+    width: 4rem;
+    margin-left: auto;
+    color: var(--text);
+    > span {
+      background-color: currentColor;
+      height: 2px;
+      left: calc(50% - 8px);
+      position: absolute;
+      transform-origin: center;
+      transition-duration: 86ms;
+      transition-property: background-color, opacity, transform;
+      transition-timing-function: ease-out;
+      width: 16px;
+
+      &:nth-child(1) {
+        top: calc(50% - 6px);
+      }
+
+      &:nth-child(2) {
+        top: calc(50% - 1px);
+      }
+
+      &:nth-child(3) {
+        top: calc(50% + 4px);
+      }
+    }
+  }
+
+  .navbar-burger.is-active span:nth-child(1) {
+    transform: translateY(5px) rotate(45deg);
+  }
+
+  .navbar-burger.is-active span:nth-child(2) {
+    opacity: 0;
+  }
+
+  .navbar-burger.is-active span:nth-child(3) {
+    transform: translateY(-5px) rotate(-45deg);
+  }
+
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(15px);
+      /* 从下方15px处开始 */
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+      /* 移动到原始位置 */
+    }
+  }
+
+  .navbar-start .navbar-item {
+    /* 先将元素设置为透明，为动画做准备 */
+    opacity: 0;
+    animation-name: fadeInUp;
+    animation-duration: 0.56s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+    font-size: 2rem;
+    font-family: var(--font-serif);
+    color: var(--rosewater);
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:nth-child(1) {
+      animation-delay: 0.08s;
+    }
+
+    &:nth-child(2) {
+      animation-delay: 0.16s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.24s;
+    }
+
+    &:nth-child(4) {
+      animation-delay: 0.32s;
+    }
+
+    &:nth-child(5) {
+      animation-delay: 0.4s;
+    }
+
+    &:nth-child(6) {
+      animation-delay: 0.48s;
+    }
+
+    &:nth-child(7) {
+      animation-delay: 0.56s;
+    }
+  }
+
+  /* #endregion Navbar */
+
+  .theme-selector-list {
+    width: 80%;
+    padding: 1.5rem;
+  }
+
+  .searchbox-container {
+    top: 15px;
+    width: 90%;
+  }
+
+  .toc-button {
+    top: auto;
+    bottom: 3rem;
+    right: 1rem;
+    left: auto;
+    background-color: var(--base);
+    border: 2px solid var(--surface0);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .navbar-burger {
+    display: none;
+  }
+
+  .navbar-container {
+    max-width: 1260px;
+  }
+
+  .navbar-menu,
+  .navbar-start,
+  .navbar-end {
+    align-items: stretch;
+    display: flex;
+    padding: 0;
+    flex-shrink: 0;
+  }
+
+  .navbar-menu {
+    flex-grow: 1;
+    flex-shrink: 0;
+    overflow-x: auto;
+    background-color: transparent;
+  }
+
+  .navbar-start {
+    justify-content: flex-start;
+    margin-right: auto;
+  }
+
+  .navbar-end {
+    justify-content: flex-end;
+    margin-left: auto;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  /* Side note: float aside into the right margin so it doesn't squeeze .content */
+  .content {
+    overflow: visible;
+    display: flow-root;
+  }
+
+  .content > aside {
+    float: right;
+    clear: right;
+    width: 11rem;
+    /* margin-right: -(width + gap) so the aside box pulls itself past .content's right edge */
+    margin: 0 -12.5rem 1rem 1.5rem;
+    padding: 0 0 0 0.875rem;
+    font-size: 0.8em;
+  }
+
+  /* <side-note> uses its component stylesheet for measured placement. */
+}