src/themes/serene: Update to newest version

1 files changed, 486 insertions, 468 deletions

diff --git a/src/themes/serene/sass/main.scss b/src/themes/serene/sass/main.scss
index f5628a2..79eb9ac 100644
--- a/src/themes/serene/sass/main.scss
+++ b/src/themes/serene/sass/main.scss
@@ -31,7 +31,7 @@ a:focus-visible {
 
 ::-webkit-scrollbar {
   width: 8px;
-  height: 8px;
+  height: 6px;
   background-color: transparent;
 }
 ::-webkit-scrollbar-track {
@@ -112,6 +112,7 @@ a:focus-visible {
 
   img {
     max-width: 100%;
+    height: auto;
     display: block;
     margin: 0 auto;
     border-radius: var(--img-border-radius);
@@ -138,17 +139,119 @@ a:focus-visible {
     p {
       margin: 1em 0;
     }
+
+    &[class*="markdown-alert-"] {
+      margin: 1.5em 0;
+      display: grid;
+      grid-template-columns: 18px 1fr;
+      column-gap: 0.5em;
+
+      &::before {
+        // the icon, colored via mask so it follows currentColor
+        content: "";
+        grid-row: 1;
+        grid-column: 1;
+        align-self: center;
+        width: 18px;
+        height: 18px;
+        background-color: currentColor;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        -webkit-mask-size: contain;
+      }
+
+      &::after {
+        // the title
+        grid-row: 1;
+        grid-column: 2;
+        align-self: center;
+        font-weight: 600;
+      }
+
+      > * {
+        grid-column: 1 / -1;
+      }
+
+      > p:first-of-type {
+        margin-top: 0.5em;
+      }
+      > p:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+
+    &.markdown-alert-note {
+      color: var(--callout-note-color);
+      border-color: var(--callout-note-color);
+      &::before {
+        mask-image: url("icon/note.svg");
+        -webkit-mask-image: url("icon/note.svg");
+      }
+      &::after {
+        content: var(--callout-note-title, "Note");
+      }
+    }
+
+    &.markdown-alert-tip {
+      color: var(--callout-tip-color);
+      border-color: var(--callout-tip-color);
+      &::before {
+        mask-image: url("icon/tip.svg");
+        -webkit-mask-image: url("icon/tip.svg");
+      }
+      &::after {
+        content: var(--callout-tip-title, "Tip");
+      }
+    }
+
+    &.markdown-alert-important {
+      color: var(--callout-important-color);
+      border-color: var(--callout-important-color);
+      &::before {
+        mask-image: url("icon/important.svg");
+        -webkit-mask-image: url("icon/important.svg");
+      }
+      &::after {
+        content: var(--callout-important-title, "Important");
+      }
+    }
+
+    &.markdown-alert-warning {
+      color: var(--callout-warning-color);
+      border-color: var(--callout-warning-color);
+      &::before {
+        mask-image: url("icon/warning.svg");
+        -webkit-mask-image: url("icon/warning.svg");
+      }
+      &::after {
+        content: var(--callout-warning-title, "Warning");
+      }
+    }
+
+    &.markdown-alert-caution {
+      color: var(--callout-caution-color);
+      border-color: var(--callout-caution-color);
+      &::before {
+        mask-image: url("icon/caution.svg");
+        -webkit-mask-image: url("icon/caution.svg");
+      }
+      &::after {
+        content: var(--callout-caution-title, "Caution");
+      }
+    }
   }
 
-  ol,
-  ul {
-    padding-left: 1.5em;
+  ol, ul {
+    padding-left: 1.4em;
   }
 
   li {
-    margin: 1em 0;
+    margin: 0.5em 0;
     p {
-      margin: 1em 0;
+      margin: 0.5em 0;
     }
   }
 
@@ -169,6 +272,7 @@ a:focus-visible {
     border-spacing: 0;
     border-collapse: collapse;
     margin: 1.5em 0;
+    border: 1.5px solid var(--primary-color);
   }
 
   th,
@@ -190,7 +294,7 @@ a:focus-visible {
   }
 
   pre {
-    font-size: 0.8em;
+    font-size: 0.85em;
     margin: 1.25em 0;
     padding: 12px 48px 12px 16px;
     line-height: 1.5;
@@ -203,58 +307,14 @@ a:focus-visible {
       font-family: var(--code-font);
     }
 
-    &[data-linenos] {
-      padding-left: 0px;
-    }
-
-    table {
-      width: 100%;
-      margin: 0;
-      border-collapse: collapse;
-      border: none;
-      th, td {
-        line-height: 1.5;
-      }
-    }
-
-
-    table tr td:first-of-type {
-      color: var(--text-decoration-color);
-    }
-
-    table td {
-      padding: 0;
-      padding-right: 48px;
-      text-align: initial;
-      border: initial;
-    }
-
-    table td:nth-of-type(1) {
-      text-align: right;
+    .giallo-ln {
+      padding-right: 12px;
       user-select: none;
-      padding-right: 1em;
-      mark::before {
-        left: -8px;
-        width: calc(100% + 1em + 8px);
-      }
     }
 
-    mark {
-      display: block;
-      color: inherit;
-      background-color: transparent;
-      position: relative;
-      overflow: visible;
-
-      &::before {
-        pointer-events: none;
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: calc(100% + 48px + 48px);
-        background-color: var(--highlight-mark-color);
-      }
+    &.z-l-code,
+    &.z-d-code {
+      background-color: var(--bg-color);
     }
 
     &.mermaid {
@@ -267,11 +327,6 @@ a:focus-visible {
     }
   }
 
-  pre > code > mark::before {
-    width: calc(100% + 48px + 16px);
-    left: -16px;
-  }
-
   .codeblock {
     margin: 1.5em 0;
     position: relative;
@@ -280,19 +335,19 @@ a:focus-visible {
     pre {
       margin: 0;
     }
-    pre[data-name] {
+    code[data-name]::before {
+      content: attr(data-name);
+      display: block;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      padding: 12px 16px;
+      color: var(--text-pale-color);
+      width: 100%;
+      border-bottom: 1px solid var(--primary-pale-color);
+    }
+    pre:has(code[data-name]) {
       padding-top: calc(36px + 1em * var(--line-height));
-      &::before {
-        content: attr(data-name);
-        display: block;
-        position: absolute;
-        left: 0px;
-        top: 0px;
-        padding: 12px 16px;
-        color: var(--text-pale-color);
-        width: 100%;
-        border-bottom: 1px solid var(--primary-pale-color);
-      }
     }
 
     .copy {
@@ -359,69 +414,6 @@ a:focus-visible {
     }
   }
 
-  .callout {
-    margin: 1.5em 0;
-
-    .icon {
-      height: 1.75em;
-      display: flex;
-      align-items: center;
-    }
-
-    p {
-      margin: 0;
-      + p {
-        margin: 1em 0;
-      }
-    }
-
-    &.has-title {
-      padding-left: 1em;
-      .title {
-        display: flex;
-        align-items: center;
-        gap: 0.5em;
-        margin-bottom: 0.5em;
-      }
-    }
-
-    &.no-title {
-      padding-left: 0;
-      border: none;
-      display: flex;
-      align-items: start;
-      gap: 0.75em;
-      .content {
-        max-width: calc(100% - 30px);
-      }
-    }
-
-    &.note {
-      color: var(--callout-note-color);
-      border-color: var(--callout-note-color);
-    }
-
-    &.tip {
-      color: var(--callout-tip-color);
-      border-color: var(--callout-tip-color);
-    }
-
-    &.important {
-      color: var(--callout-important-color);
-      border-color: var(--callout-important-color);
-    }
-
-    &.warning {
-      color: var(--callout-warning-color);
-      border-color: var(--callout-warning-color);
-    }
-
-    &.caution {
-      color: var(--callout-caution-color);
-      border-color: var(--callout-caution-color);
-    }
-  }
-
   .quote {
     border: none;
     position: relative;
@@ -470,6 +462,26 @@ a:focus-visible {
   .mermaid {
     background: #fff;
   }
+
+  .youtube {
+    position: relative;
+    height: 0;
+    padding-bottom: 56.25%;
+
+    iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 0;
+    }
+  }
+
+
+  input {
+    color-scheme: light;
+  }
 }
 
 body.dark .prose {
@@ -479,6 +491,9 @@ body.dark .prose {
   .mermaid {
     filter: brightness(var(--dark-mode-chart-brightness));
   }
+  input {
+    color-scheme: dark;
+  }
 }
 
 /* prose pages
@@ -508,365 +523,380 @@ body.prose-page {
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 .prose {
-  .collection-wrapper {
+  .collection {
     margin: 1.5em 0;
-  }
 
-  .collection {
-    border: none;
-    margin: 0;
-    padding: 0;
-    color: var(--text-color);
-    img {
-      margin: 0;
+    &.flow-inline {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    &.flow-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
+      gap: 1.5em;
     }
-    a, button {
+
+    a {
       -webkit-tap-highlight-color: transparent;
     }
-  }
 
-  .collection.card {
-    margin: 3em 0;
-    position: relative;
+    .image img {
+      margin: 0;
+    }
 
-    &.featured::before {
-      content: '*';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      transform: translateX(-200%);
-      line-height: 2;
-      color: var(--primary-color);
+    span.title {
+      color: var(--text-color);
     }
-    @media (max-width: 768px) {
-      &.featured::before {
-        transform: translateX(-150%);
+
+    a.title {
+      border-bottom: none;
+      > span {
+        border-bottom: 1.5px solid var(--primary-color);
       }
     }
 
-    .meta {
+    .subtitle,
+    .badge {
+      font-size: 0.9em;
+      color: var(--text-pale-color);
+    }
+  }
+
+  /* card: rich block item */
+  .layout-card {
+    .item {
+      margin: 3em 0;
+      position: relative;
       display: flex;
-      gap: 0.5em;
-      .icon-wrapper {
-        height: calc(1em * var(--line-height));
-        display: flex;
-        align-items: center;
+      align-items: center;
+      gap: 1.5em;
+
+      > .image {
         flex-shrink: 0;
+        width: 160px;
+        img {
+          width: 100%;
+          height: auto;
+          border-radius: var(--img-border-radius);
+        }
       }
-      .icon {
-        height: 16px;
-        width: 16px;
+
+      @media (max-width: 425px) {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1em;
+
+        > .image {
+          width: 100%;
+        }
       }
-      .title {
+
+      .body {
+        flex: 1;
+        min-width: 0;
+      }
+
+      &.featured::before {
+        content: '*';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        transform: translateX(-200%);
+        line-height: 2;
         color: var(--primary-color);
       }
-      a.title {
-        text-decoration: none;
-        border-bottom: 1.5px solid transparent;
-        &:hover {
-          opacity: unset;
-          border-color: var(--primary-color);
+      @media (max-width: 768px) {
+        &.featured::before {
+          transform: translateX(-150%);
         }
       }
-      .date {
-        margin-left: auto;
-        flex-shrink: 0;
-        font-size: 0.9em;
-        color: var(--text-pale-color);
-      }
-    }
 
-    .subtitle {
-      font-size: 0.9em;
-      color: var(--text-pale-color);
-      margin: 0.75em 0;
-    }
+      .meta {
+        display: flex;
+        gap: 0.5em;
 
-    .content {
-      font-size: 1em;
-      p {
+        .icon {
+          height: calc(1em * var(--line-height));
+          display: flex;
+          align-items: center;
+          flex-shrink: 0;
+          img {
+            height: 16px;
+            width: 16px;
+          }
+        }
+        .badge {
+          margin-left: auto;
+          flex-shrink: 0;
+        }
+      }
+
+      .subtitle {
+        display: block;
         margin: 0.75em 0;
       }
-    }
 
-    .tags {
-      font-size: 0.9em;
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: 0.75em 1em;
-      color: var(--text-pale-color);
+      .content {
+        font-size: 1em;
+        p {
+          margin: 0.75em 0;
+        }
+      }
 
-      div {
-        span {
+      .tags {
+        font-size: 0.9em;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 0.75em 1em;
+        color: var(--text-pale-color);
+
+        .tag span {
           font-size: 0.9em;
           margin-right: 4px;
         }
       }
     }
-  }
 
-  .collection.card-simple {
-    margin: 0.5em 0;
-    position: relative;
-
-    &.featured::before {
-      content: '*';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      transform: translateX(-200%);
-      line-height: 2;
-      color: var(--primary-color);
+    &.flow-grid .item,
+    &.flow-inline .item {
+      margin: 0;
     }
-    @media (max-width: 768px) {
-      &.featured::before {
-        transform: translateX(-150%);
-      }
+    &.flow-grid {
+      grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
     }
+  }
 
-    .meta {
-      display: flex;
-      align-items: start;
-      gap: 0.5em;
+  /* row: compact one-line item */
+  .layout-row {
+    &.flow-inline {
+      gap: 0.5em 1.5em;
     }
 
-    .icon-wrapper {
-      height: calc(1em * var(--line-height));
-      display: flex;
-      align-items: center;
-      flex-shrink: 0;
-    }
-    .icon {
-      height: 16px;
-      width: 16px;
-    }
-    .title {
-      flex-shrink: 0;
+    .item {
+      display: inline-flex;
+      width: fit-content;
       max-width: 100%;
-      color: var(--primary-color);
-      margin-right: 0.5em;
-    }
-    a.title {
-      text-decoration: none;
-      border-bottom: 1.5px solid transparent;
-      &:hover {
-        opacity: unset;
-        border-color: var(--primary-color);
+      gap: 0.5em;
+      padding: 4px 0;
+      color: var(--text-color);
+      position: relative;
+
+      &.featured::before {
+        content: '*';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        transform: translateX(-200%);
+        line-height: 2;
+        color: var(--primary-color);
       }
-    }
-    .content,
-    .content-narrow {
-      p {
-        margin: 0;
-        + p {
-          margin-top: 0.5em;
+      @media (max-width: 768px) {
+        &.featured::before {
+          transform: translateX(-150%);
         }
       }
-    }
-    .content-narrow {
-      display: none;
-      margin: 0.25em 0 2em;
-    }
-    @media (max-width: 425px) {
-      .content {
-        display: none;
-      }
-      .content-narrow {
-        display: block;
+
+      .icon {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        height: calc(1em * var(--line-height));
+        img {
+          width: 16px;
+          height: 16px;
+        }
       }
-    }
-    .date {
-      margin-left: auto;
-      flex-shrink: 0;
-      font-size: 0.9em;
-      line-height: calc(var(--line-height) * 1.111);
-      color: var(--text-pale-color);
-    }
 
-  }
+      .main {
+        display: inline-flex;
+        gap: 0.5em;
+        min-width: 0;
+      }
 
-  .collection.entry {
-    display: inline-flex;
-    width: fit-content;
-    gap: 0.5em;
-    padding: 4px 0;
-    margin: 0.25em 1.5em 0.25em 0;
+      .main:has(+ .subtitle) {
+        margin-right: 0.5em;
+      }
+    }
 
-    .icon-wrapper {
-      flex-shrink: 0;
+    &.flow-stack .item {
       display: flex;
-      align-items: center;
-      height: calc(1em * var(--line-height));
-    }
-    .icon {
-      width: 16px;
-      height: 16px;
-    }
+      width: auto;
+      margin: 0.25em 0;
 
-    .text div {
-      display: inline;
-    }
-    .title:has(+.subtitle) {
-      margin-right: 0.5em;
-    }
-    .subtitle {
-      font-size: 0.9em;
-      color: var(--text-pale-color);
-    }
-  }
-  a.collection.entry {
-    -webkit-tap-highlight-color: transparent;
-    color: var(--text-color);
-    border-bottom: 1.5px solid transparent;
-    &:hover {
-      border-color: var(--primary-color);
-      opacity: unset;
-      cursor: pointer;
+      .badge {
+        margin-left: auto;
+        padding-left: 1em;
+        flex-shrink: 0;
+      }
     }
-  }
 
-  .collection.box {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border: 1px solid var(--primary-color);
-    overflow: hidden;
+    @media (max-width: 425px) {
+      .item:has(.subtitle) {
+        display: flex;
+        width: 100%;
+        flex-wrap: wrap;
+      }
 
-    img {
-      width: 48px;
-      height: 48px;
-      &.rotate {
-        transition: transform 0.15s;
-        transform: rotate(-20deg) translate(-2px, 12px);
+      .item:has(.badge) .subtitle {
+        order: 10;
+        flex-basis: 100%;
       }
     }
-    .placehold {
-      height: 48px;
+
+  }
+
+  /* tile: small bordered block, text left + image right */
+  .layout-tile {
+    &.flow-inline {
+      gap: 0.8em 0.5em;
     }
 
-    .text {
-      min-height: 48px;
-      line-height: 1.5;
-      padding: 0 1em;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
+    .item {
+      max-width: 100%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: space-between;
+      border: 1px solid var(--primary-color);
       overflow: hidden;
+      text-decoration: none;
 
-      .title {
-        font-size: 0.9em;
-        color: var(--text-color);
+      img {
+        width: 48px;
+        height: 48px;
+        margin: 0;
+        &.rotate {
+          transition: transform 0.15s;
+          transform: rotate(-20deg) translate(-2px, 12px);
+        }
+      }
+      .placehold {
+        height: 48px;
       }
 
-      .subtitle {
-        font-size: 0.8em;
-        color: var(--text-pale-color);
+      .text {
+        min-height: 48px;
+        line-height: 1.5;
+        padding: 0 1em;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
         overflow: hidden;
-        text-wrap: nowrap;
-        text-overflow: ellipsis;
+
+        .title {
+          font-size: 0.9em;
+          color: var(--text-color);
+        }
+
+        .subtitle {
+          font-size: 0.8em;
+          overflow: hidden;
+          text-wrap: nowrap;
+          text-overflow: ellipsis;
+        }
       }
-    }
 
-    @media (hover: hover) {
-      &:hover {
-        opacity: unset;
-        img.rotate {
-          transform: rotate(0deg) translate(0px, 0px);
+      @media (hover: hover) {
+        &:hover {
+          opacity: unset;
+          img.rotate {
+            transform: rotate(0deg) translate(0px, 0px);
+          }
         }
       }
     }
-  }
-  a.collection.box {
-    -webkit-tap-highlight-color: transparent;
-  }
-  .collection-box-wrapper {
-    max-width: 100%;
-    width: fit-content;
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    border: 0.5px solid transparent;
-    overflow: hidden;
-    margin-right: 0.5em;
-    margin-bottom: 0.8em;
-    @media (hover: hover) {
-      &:has(a):hover {
-        border-color: var(--primary-color);
+
+    a.item {
+      @media (hover: hover) {
+        &:hover {
+          box-shadow: 0 0 0 1px var(--primary-color);
+        }
       }
     }
+
+    &.flow-stack .item {
+      display: flex;
+      width: 100%;
+      margin: 0.5em 0;
+    }
+
     @media (max-width: 425px) {
-      & {
+      .item {
         display: flex;
         width: 100%;
       }
     }
   }
 
-  .collection.art {
-    --art-h: 160px;
-    --art-w: 115px;
+  /* gallery: item with a poster image */
+  .layout-gallery {
+    --poster-h: 160px;
+    --poster-w: 115px;
 
-    margin: 2em 0;
-    display: flex;
-    gap: 1.5em;
+    &.flow-grid {
+      grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
+    }
+
+    a.title {
+      width: fit-content;
+    }
 
-    .img-wrapper {
+    .image {
       flex-shrink: 0;
-      width: var(--art-w);
-      height: var(--art-h);
+      width: var(--poster-w);
+      height: var(--poster-h);
       img {
         height: 100%;
         width: 100%;
         object-fit: contain;
       }
     }
-    .text {
-      height: var(--art-h);
-      display: flex;
-      flex-direction: column;
-      gap: 3px;
-    }
-    .title {
-      color: var(--primary-color);
-    }
-    a.title {
-      width: fit-content;
-      border-color: transparent;
-      &:hover {
-        opacity: unset;
-        border-color: var(--primary-color);
-      }
-    }
-    .subtitle,
-    .footer {
-      font-size: 0.8em;
-      color: var(--text-pale-color);
-    }
+
     .content {
       font-size: 0.9em;
       overflow: hidden;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3;
+      p {
+        margin: 0;
+      }
     }
-    .footer {
-      margin-top: auto;
+
+    .subtitle,
+    .badge {
+      font-size: 0.8em;
     }
 
-    @media (max-width: 425px) {
-      & {
-        --art-h: 120px;
-        --art-w: 85px;
+    /* stack: poster left, text right */
+    &.flow-stack .item {
+      margin: 2em 0;
+      display: flex;
+      gap: 1.5em;
+
+      .text {
+        height: var(--poster-h);
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+      }
+      .badge {
+        margin-top: auto;
+      }
+
+      @media (max-width: 425px) {
+        --poster-h: 120px;
+        --poster-w: 85px;
         gap: 0.75em;
         .text {
           gap: 2px;
         }
         .subtitle,
-        .footer {
+        .badge {
           font-size: 0.7em;
         }
         .content {
@@ -876,63 +906,36 @@ body.prose-page {
       }
     }
 
-  }
-
-
-  .collection.art-simple {
-      --art-h: 160px;
-      --art-w: 115px;
-
-      max-width: calc(50vw - 30px);
-      margin: 1.5em 0.75em;
-      display: inline-flex;
+    /* grid / inline: poster on top, text centered below */
+    &.flow-grid .item,
+    &.flow-inline .item {
+      display: flex;
       flex-direction: column;
       align-items: center;
       gap: 1em;
 
-      .img-wrapper {
-        flex-shrink: 0;
-        width: var(--art-w);
-        height: var(--art-h);
-        img {
-          height: 100%;
-          width: 100%;
-          object-fit: contain;
-        }
+      .title {
+        font-size: 0.9em;
       }
       .text {
-        max-width: calc(var(--art-w) * 1.5);
+        max-width: calc(var(--poster-w) * 1.5);
         display: flex;
         flex-direction: column;
         align-items: center;
+        text-align: center;
         gap: 3px;
       }
-      .title {
-        font-size: 0.9em;
-        color: var(--primary-color);
-      }
-      a.title {
-        width: fit-content;
-        border-color: transparent;
-        &:hover {
-          opacity: unset;
-          border-color: var(--primary-color);
-        }
-      }
-      .subtitle {
-        font-size: 0.8em;
-        color: var(--text-pale-color);
-      }
 
       @media (max-width: 425px) {
-        & {
-          --art-h: 120px;
-          --art-w: 85px;
-          width: calc(50vw - 50px);
-        }
+        --poster-h: 120px;
+        --poster-w: 85px;
       }
-
     }
+    &.flow-inline {
+      gap: 1.5em 2em;
+      align-items: start;
+    }
+  }
 }
 
 /* layout post list ( home / blog / tag )
@@ -957,10 +960,9 @@ body.prose-page {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
-    gap: 0.5em;
-    padding: 4px 0px;
-    margin: 6px 0;
-    line-height: 1.2;
+    gap: 2em;
+    padding: 0.25em 0px;
+    /* margin: 0.25em 0; */
     text-decoration: none;
     color: var(--primary-color);
 
@@ -982,13 +984,27 @@ body.prose-page {
       top: 0;
       bottom: 0;
       left: 0;
-      transform: translateX(-200%);
-      line-height: 2;
-      height: 100%;
+      transform: translate(-200%, 6px);
+      height: calc(var(--line-height) * 1em);
     }
     @media (max-width: 768px) {
       &.featured::before {
-        transform: translateX(-150%);
+        transform: translate(-150%, 6px);
+      }
+    }
+
+    @media (max-width: 425px) {
+      flex-direction: column-reverse;
+      align-items: start;
+      gap: 0.25em;
+      margin: 1em 0;
+      .date {
+        margin-left: initial;
+        color: var(--text-pale-color);
+        font-size: 0.8em;
+      }
+      &.featured::before {
+        transform: translate(-150%, 115%);
       }
     }
   }
@@ -1070,6 +1086,10 @@ body.homepage {
       gap: 1em;
     }
 
+    img + #text {
+        gap: 0.75em;
+    }
+
     #id {
       margin-left: 0.75em;
       color: var(--primary-color);
@@ -1109,6 +1129,10 @@ body.homepage {
       a {
         border-bottom: 1.5px solid var(--primary-color);
         line-height: 1.5;
+
+        &.external {
+          cursor: ne-resize;
+        }
       }
     }
 
@@ -1382,7 +1406,6 @@ body.post {
     }
 
     #outdate_alert {
-      font-style: italic;
       &.hidden {
         display: none;
       }
@@ -1411,11 +1434,20 @@ body.post {
       min-width: 60%;
       overflow-y: auto;
       max-height: calc(100vh - 6em);
-      scrollbar-width: none;
 
+      scrollbar-width: none;
       &::-webkit-scrollbar {
         width: 0;
       }
+
+      background:
+        linear-gradient(var(--bg-color) 50%, transparent) center top,
+        linear-gradient(transparent, var(--bg-color) 50%) center bottom,
+        radial-gradient(farthest-side at 50% 0, var(--primary-decoration-color), var(--bg-color)) center top,
+        radial-gradient(farthest-side at 50% 100%, var(--primary-decoration-color), var(--bg-color)) center bottom;
+      background-repeat: no-repeat;
+      background-size: 100% 4em, 100% 4em, 100% 1.5em, 100% 1.5em;
+      background-attachment: local, local, scroll, scroll;
     }
 
     ul {
@@ -1436,27 +1468,13 @@ body.post {
       padding: 0 1em;
 
       &.h3 {
-        padding-left: 2em;
-      }
-
-      &::before {
-        display: block;
-        content: "";
-        width: 1.5px;
-        position: absolute;
-        top: 0.7em;
-        bottom: 0.7em;
-        left: 0em;
-        background: transparent;
+        margin-left: 1.5em;
+        border-left: 1px solid var(--text-decoration-color);
       }
 
       &:hover {
         color: var(--primary-color);
       }
-
-      &:hover::before {
-        background-color: var(--primary-color);
-      }
     }
 
     #back-to-top {