huge upgrade to theme and pagefind search bar.

themes/hugo-book.backup/assets/_markdown.scss

@@ -0,0 +1,233 @@
+@import "variables";
+
+.markdown {
+  line-height: 1.6;
+
+  // remove padding at the beginning of page
+  > :first-child {
+    margin-top: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: inherit;
+    line-height: 1;
+    margin-top: 1.5em;
+    margin-bottom: $padding-16;
+
+    a.anchor {
+      opacity: 0;
+      font-size: 0.75em;
+      margin-inline-start: .25em;
+    }
+
+    &:hover a.anchor, a.anchor:focus-visible {
+      opacity: initial;
+      text-decoration: none;
+    }
+  }
+
+  h1 { font-size: 2rem; }
+  h2 { font-size: 1.5rem; }
+  h3 { font-size: 1.25rem; }
+  h4 { font-size: 1.125rem; }
+  h5 { font-size: 1rem; }
+  h6 { font-size: 0.875rem; }
+
+  b,
+  optgroup,
+  strong {
+    font-weight: bolder;
+  }
+
+  a {
+    text-decoration: none;
+
+    &[href]:hover {
+      text-decoration: underline;
+    }
+    &[href]:visited {
+      color: var(--color-visited-link);
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  code {
+    direction: ltr;
+    unicode-bidi: embed;
+    padding: .125em .25em;
+    background: var(--gray-100);
+    border: $padding-1 solid var(--gray-200);
+    border-radius: var(--border-radius);
+    font-size: 0.875em;
+  }
+
+  pre {
+    padding: $padding-16;
+    background: var(--gray-100);
+    border: $padding-1 solid var(--gray-200);
+    border-radius: var(--border-radius);
+    overflow-x: auto;
+
+    &:focus {
+      @include outline;
+    }
+
+    code {
+      padding: 0;
+      border: 0;
+      background: none;
+    }
+  }
+
+  p {
+    word-wrap: break-word;
+  }
+
+  blockquote {
+    margin: $padding-16 0;
+    padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
+
+    border-inline-start: $padding-4 solid var(--gray-200);
+    border-radius: var(--border-radius);
+
+    :first-child {
+      margin-top: 0;
+    }
+    :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  table {
+    overflow: auto;
+    display: block;
+    border-spacing: 0;
+    border-collapse: collapse;
+    margin-top: $padding-16;
+    margin-bottom: $padding-16;
+
+    tr th,
+    tr td {
+      padding: $padding-8 $padding-16;
+      border: $padding-1 solid var(--gray-200);
+      text-align: start;
+    }
+
+    tr:nth-child(2n) {
+      background: var(--gray-100);
+    }
+  }
+
+  hr {
+    height: $padding-1;
+    border: none;
+    background: var(--gray-200);
+  }
+
+  ul,
+  ol {
+    padding-inline-start: $padding-16 * 2;
+    word-wrap: break-word;
+  }
+
+  dl {
+    dt {
+      font-weight: bolder;
+      margin-top: $padding-16;
+    }
+
+    dd {
+      margin-inline-start: 0;
+      margin-bottom: $padding-16;
+    }
+  }
+
+  // Special case for highlighted code with line numbers
+  .highlight {
+    direction: ltr;
+    unicode-bidi: embed;
+    border-radius: var(--border-radius);
+
+    table tbody {
+      border: $padding-1 solid var(--gray-200);
+    }
+
+    table tr {
+      pre {
+        border: 0;
+      }
+
+      td pre code > span {
+        display: flex;
+      }
+      
+      td:nth-child(1) pre {
+        margin: 0;
+        padding-inline-end: 0;
+      }
+
+      td:nth-child(2) pre {
+        margin: 0;
+        padding-inline-start: 0;
+      }
+    }
+  }
+
+  details {
+    padding: $padding-16;
+    margin: $padding-16 0;
+    border: $padding-1 solid var(--gray-200);
+    border-radius: var(--border-radius);
+
+    summary {
+      line-height: 1;
+      padding: $padding-16;
+      margin: -$padding-16;
+      cursor: pointer;
+      list-style: none;
+
+      &::before {
+        content: "›";
+        display: inline-block;
+        margin-inline-end: $padding-8;
+        transition: transform 0.1s ease-in-out;
+      }
+    }
+
+    &[open] summary {
+      margin-bottom: 0;
+
+      &::before {
+        transform: rotate(90deg);
+      }
+    }
+  }
+
+  figure {
+    margin: $padding-16 0;
+
+    figcaption {
+      @extend .markdown-inner;
+      margin-top: $padding-16;
+    }
+  }
+}
+
+.markdown-inner {
+  // Utility class to remove extra margin in nested markdown content
+  > :first-child {
+    margin-top: 0;
+  }
+  > :last-child {
+    margin-bottom: 0;
+  }
+}