jekyll-theme-chirpy 7.1.0 → 7.2.0

data/_sass/base/_typography.scss

@@ -0,0 +1,266 @@
+@use '../abstracts/variables' as v;
+@use '../abstracts/breakpoints' as bp;
+@use '../abstracts/mixins' as mx;
+@use '../abstracts/placeholders';
+
+@for $i from 1 through 5 {
+  h#{$i} {
+    @extend %heading;
+
+    @if $i > 1 {
+      @extend %anchor;
+    }
+
+    @if $i < 5 {
+      $size-factor: 0.25rem;
+
+      @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) * $size-factor;
+      }
+    } @else {
+      font-size: 1.05rem;
+    }
+  }
+}
+
+a {
+  @extend %link-color;
+
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  transition: all 0.35s ease-in-out;
+
+  .blur & {
+    $blur: 20px;
+
+    -webkit-filter: blur($blur);
+    filter: blur($blur);
+  }
+}
+
+blockquote {
+  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;
+  }
+
+  &[class^='prompt-'] {
+    border-left: 0;
+    position: relative;
+    padding: 1rem 1rem 1rem 3rem;
+    color: var(--prompt-text-color);
+
+    @extend %rounded;
+
+    &::before {
+      text-align: center;
+      width: 3rem;
+      position: absolute;
+      left: 0.25rem;
+      margin-top: 0.4rem;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+    }
+  }
+
+  @include mx.prompt('tip', '\f0eb', $fa-style: 'regular');
+  @include mx.prompt('info', '\f06a', $rotate: 180);
+  @include mx.prompt('warning', '\f06a');
+  @include mx.prompt('danger', '\f071');
+}
+
+kbd {
+  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: v.$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: v.$footer-height;
+  border-top: 1px solid var(--main-border-color);
+
+  @extend %text-xs;
+
+  a {
+    @extend %text-highlight;
+
+    &:hover {
+      @extend %link-hover;
+    }
+  }
+
+  em {
+    @extend %text-highlight;
+  }
+
+  p {
+    text-align: center;
+    margin-bottom: 0;
+  }
+}
+
+/* fontawesome icons */
+i {
+  &.far,
+  &.fas {
+    @extend %no-cursor;
+  }
+}
+
+sup {
+  @extend %sup-fn-target;
+}
+
+main {
+  line-height: 1.75;
+
+  h1 {
+    margin-top: 2rem;
+
+    @include bp.lg {
+      margin-top: 3rem;
+    }
+  }
+
+  p {
+    > a.popup {
+      &:not(.normal):not(.left):not(.right) {
+        @include mx.align-center;
+      }
+    }
+  }
+
+  .categories,
+  #tags,
+  #archives {
+    a:not(:hover) {
+      @extend %no-bottom-border;
+    }
+  }
+
+  @include bp.lte(bp.get(sm)) {
+    .content {
+      > blockquote[class^='prompt-'] {
+        @include mx.ml-mr(-1rem);
+
+        border-radius: 0;
+        max-width: none;
+      }
+    }
+  }
+}
+
+.footnotes > ol {
+  padding-left: 2rem;
+  margin-top: 0.5rem;
+
+  > li {
+    &:not(:last-child) {
+      margin-bottom: 0.3rem;
+    }
+
+    @extend %sup-fn-target;
+
+    > p {
+      margin-left: 0.25em;
+
+      @include mx.mt-mb(0);
+    }
+  }
+}
+
+.footnote {
+  @at-root a#{&} {
+    @include mx.ml-mr(1px);
+    @include mx.pl-pr(2px);
+
+    border-bottom-style: none !important;
+  }
+}
+
+.reversefootnote {
+  @at-root a#{&} {
+    font-size: 0.6rem;
+    line-height: 1;
+    position: relative;
+    bottom: 0.25em;
+    margin-left: 0.25em;
+    border-bottom-style: none !important;
+  }
+}
+
+/* --- Begin of Markdown table style --- */
+
+/* it will be created by Liquid */
+.table-wrapper {
+  overflow-x: auto;
+  margin-bottom: 1.5rem;
+
+  > table {
+    min-width: 100%;
+    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 */
+}

data/_sass/components/_buttons.scss

@@ -0,0 +1,51 @@
+@use '../abstracts/variables' as v;
+@use '../abstracts/breakpoints' as bp;
+
+#back-to-top {
+  visibility: hidden;
+  opacity: 0;
+  z-index: 1;
+  cursor: pointer;
+  position: fixed;
+  right: 1rem;
+  bottom: calc(v.$footer-height-large - v.$back2top-size / 2);
+  background: var(--button-bg);
+  color: var(--btn-backtotop-color);
+  padding: 0;
+  width: v.$back2top-size;
+  height: v.$back2top-size;
+  border-radius: 50%;
+  border: 1px solid var(--btn-backtotop-border-color);
+  transition: opacity 0.5s ease-in-out, transform 0.2s ease-out;
+
+  @include bp.lg {
+    right: 5%;
+    bottom: calc(v.$footer-height - v.$back2top-size / 2);
+  }
+
+  @include bp.xxl {
+    right: calc((100vw - v.$sidebar-width - 1140px) / 2 + 3rem);
+  }
+
+  @include bp.xxxl {
+    right: calc(
+      (100vw - v.$sidebar-width-large - v.$main-content-max-width) / 2 + 2rem
+    );
+  }
+
+  &:hover {
+    transform: translate3d(0, -5px, 0);
+    -webkit-transform: translate3d(0, -5px, 0);
+  }
+
+  i {
+    line-height: v.$back2top-size;
+    position: relative;
+    bottom: 2px;
+  }
+
+  &.show {
+    opacity: 1;
+    visibility: visible;
+  }
+}

data/_sass/components/_index.scss

@@ -0,0 +1,2 @@
+@forward 'buttons';
+@forward 'popups';

data/_sass/components/_popups.scss

@@ -0,0 +1,172 @@
+@use '../abstracts/variables' as v;
+@use '../abstracts/breakpoints' as bp;
+@use '../abstracts/placeholders';
+
+/* PWA update popup */
+#notification {
+  @-webkit-keyframes popup {
+    from {
+      opacity: 0;
+      bottom: 0;
+    }
+  }
+
+  @keyframes popup {
+    from {
+      opacity: 0;
+      bottom: 0;
+    }
+  }
+
+  .toast-header {
+    background: none;
+    border-bottom: none;
+    color: inherit;
+  }
+
+  .toast-body {
+    font-family: Lato, sans-serif;
+    line-height: 1.25rem;
+
+    button {
+      font-size: 90%;
+      min-width: 4rem;
+    }
+  }
+
+  &.toast {
+    &.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%);
+      -webkit-animation: popup 0.8s;
+      animation: popup 0.8s;
+    }
+  }
+}
+
+#toc-popup {
+  $slide-in: slide-in 0.3s ease-out;
+  $slide-out: slide-out 0.3s ease-out;
+  $curtain-height: 2rem;
+  $backdrop: blur(5px);
+
+  border-color: var(--toc-popup-border-color);
+  border-width: 1px;
+  border-radius: v.$radius-lg;
+  color: var(--text-color);
+  background: var(--card-bg);
+  margin-top: v.$topbar-height;
+  min-width: 20rem;
+  font-size: 1.05rem;
+
+  @include bp.sm {
+    max-width: 32rem;
+  }
+
+  &[open] {
+    -webkit-animation: $slide-in;
+    animation: $slide-in;
+  }
+
+  &[closing] {
+    -webkit-animation: $slide-out;
+    animation: $slide-out;
+  }
+
+  @include bp.lg {
+    left: v.$sidebar-width;
+  }
+
+  .header {
+    @extend %btn-color;
+
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    background-color: inherit;
+    border-bottom: 1px solid var(--main-border-color);
+
+    .label {
+      font-family: v.$font-family-heading;
+    }
+  }
+
+  button {
+    > i {
+      font-size: 1.25rem;
+      vertical-align: middle;
+    }
+
+    &:focus-visible {
+      box-shadow: none;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    padding-left: 0;
+
+    li {
+      ul,
+      & + li {
+        margin-top: 0.25rem;
+      }
+
+      a {
+        display: flex;
+        line-height: 1.5;
+        padding: 0.375rem 0;
+        padding-right: 1.125rem;
+
+        &.toc-link::before {
+          display: none;
+        }
+      }
+    }
+  }
+
+  @for $i from 2 through 4 {
+    .node-name--H#{$i} {
+      padding-left: 1.125rem * ($i - 1);
+    }
+  }
+
+  .is-active-link {
+    color: var(--toc-highlight) !important;
+    font-weight: 600;
+  }
+
+  &::-webkit-backdrop {
+    -webkit-backdrop-filter: $backdrop;
+    backdrop-filter: $backdrop;
+  }
+
+  &::backdrop {
+    -webkit-backdrop-filter: $backdrop;
+    backdrop-filter: $backdrop;
+  }
+
+  &::after {
+    display: flex;
+    content: '';
+    position: relative;
+    background: linear-gradient(transparent, var(--card-bg) 70%);
+    height: $curtain-height;
+  }
+
+  #toc-popup-content {
+    overflow: auto;
+    max-height: calc(100vh - 4 * v.$topbar-height);
+    font-family: v.$font-family-heading;
+    margin-bottom: -$curtain-height;
+  }
+}

data/_sass/layout/_footer.scss

@@ -0,0 +1,36 @@
+@use '../abstracts/breakpoints' as bp;
+@use '../abstracts/variables' as v;
+@use '../abstracts/mixins' as mx;
+@use '../abstracts/placeholders';
+
+footer {
+  background-color: var(--main-bg);
+  height: v.$footer-height;
+  border-top: 1px solid var(--main-border-color);
+
+  @extend %text-xs;
+
+  @include bp.lt(bp.get(lg)) {
+    @include mx.slide;
+
+    height: v.$footer-height-large;
+    padding: 1.5rem 0;
+  }
+
+  a {
+    @extend %text-highlight;
+
+    &:hover {
+      @extend %link-hover;
+    }
+  }
+
+  em {
+    @extend %text-highlight;
+  }
+
+  p {
+    text-align: center;
+    margin-bottom: 0;
+  }
+}

data/_sass/layout/_index.scss

@@ -0,0 +1,4 @@
+@forward 'sidebar';
+@forward 'topbar';
+@forward 'panel';
+@forward 'footer';

data/_sass/layout/_panel.scss

@@ -0,0 +1,70 @@
+@use '../abstracts/breakpoints' as bp;
+@use '../abstracts/mixins' as mx;
+@use '../abstracts/placeholders';
+
+.access {
+  top: 2rem;
+  transition: top 0.2s ease-in-out;
+  margin-top: 3rem;
+
+  &:only-child {
+    position: -webkit-sticky;
+    position: sticky;
+  }
+
+  > section {
+    @extend %panel-border;
+
+    padding-left: 1rem;
+
+    &:not(:first-child) {
+      margin-top: 4rem;
+    }
+  }
+
+  .content {
+    font-size: 0.9rem;
+  }
+}
+
+#panel-wrapper {
+  /* the headings */
+  .panel-heading {
+    font-family: inherit;
+    line-height: inherit;
+
+    @include mx.label(inherit);
+  }
+
+  .post-tag {
+    line-height: 1.05rem;
+    font-size: 0.85rem;
+    border-radius: 0.8rem;
+    padding: 0.3rem 0.5rem;
+    margin: 0 0.35rem 0.5rem 0;
+
+    &:hover {
+      transition: all 0.3s ease-in;
+    }
+  }
+
+  > :last-child {
+    margin-bottom: 4rem;
+  }
+
+  @include bp.lt(bp.get(xl)) {
+    display: none;
+  }
+}
+
+#access-lastmod {
+  a {
+    color: inherit;
+
+    &:hover {
+      @extend %link-hover;
+    }
+
+    @extend %no-bottom-border;
+  }
+}