Commit e6a318d

HPCesia <me@hpcesia.com>
2026-08-14 12:56:40
Other article styles
1 parent bc55a26
src/contents/_lib/templates/blockquote.typ
@@ -0,0 +1,21 @@
+#import "@preview/bullseye:0.1.0": show-target
+
+#let blockquote-template-html(body) = {
+  show quote.where(block: true): it => {
+    html.blockquote(it.body)
+    if it.attribution != none {
+      html.elem("p", attrs: (class: "blockquote-attribution"), it.attribution)
+    }
+  }
+  body
+}
+
+#let blockquote-template-paged(body) = {
+  // TODO: blockquote style in PDF target
+  body
+}
+
+#let blockquote-template(body) = {
+  show: show-target(paged:blockquote-template-paged, html: blockquote-template-html)
+  body
+}
src/contents/_lib/lib.typ
@@ -12,10 +12,12 @@
 #let post-template(body, lang: "en", region: none, toc: true) = {
   set text(lang: lang, region: region)
 
+  import "./templates/blockquote.typ": blockquote-template
   import "./templates/footnote.typ": footnote-template
   import "./templates/heading.typ": heading-template
   import "./templates/raw.typ": raw-template
 
+  show: blockquote-template
   show: footnote-template
   show: heading-template
   show: raw-template
src/styles/article/anchor.scss
@@ -0,0 +1,11 @@
+article a {
+  color: var(--color-base-content);
+  text-decoration: underline dotted 1.5px;
+  text-decoration-color: color-mix(in oklab, var(--color-base-content) 60%,
+    transparent);
+
+  &:hover {
+    text-decoration-style: solid;
+    text-decoration-color: var(--color-base-content);
+  }
+}
src/styles/article/blockquote.scss
@@ -0,0 +1,19 @@
+article {
+  blockquote {
+    margin-block: 1.25rem;
+    margin-inline: 1rem;
+    color: color-mix(in oklab, var(--color-base-content) 80%,
+      transparent);
+  }
+
+  p.blockquote-attribution {
+    margin-inline: 1rem;
+    text-align: right;
+    color: color-mix(in oklab, var(--color-base-content) 80%,
+      transparent);
+
+    &::before {
+      content: "——";
+    }
+  }
+}
src/styles/article/figure.scss
@@ -0,0 +1,13 @@
+article figure {
+  width: 100%;
+  margin: 2rem 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.5rem;
+  justify-items: center;
+
+  figcaption {
+    color: color-mix(in oklab, var(--color-base-content) 80%,
+      transparent);
+  }
+}
src/styles/article/index.scss
@@ -1,6 +1,12 @@
+@use "./anchor.scss";
+@use "./blockquote.scss";
+@use "./figure.scss";
 @use "./math.scss";
+@use "./misc.scss";
 @use "./raw.scss";
 @use "./sidenote.scss";
+@use "./table.scss";
+@use "./term.scss";
 
 article {
   max-width: 100%;
src/styles/article/misc.scss
@@ -0,0 +1,10 @@
+article {
+  mark {
+    color: var(--color-primary-content);
+    background-color: var(--color-primary);
+  }
+
+  nav[role="doc-toc"] > ol li > ol {
+    padding-left: 0.5rem;
+  }
+}
src/styles/article/table.scss
@@ -0,0 +1,42 @@
+article {
+  table {
+    display: block;
+    position: relative;
+    width: fit-content;
+    max-width: 100%;
+    overflow-x: auto;
+    &:not(figure *) {
+      margin-block: 1rem;
+    }
+  }
+
+  thead th,
+  tbody td,
+  tfoot td {
+    &:not(:first-child) {
+      padding-left: 0.5rem;
+    }
+    &:not(:last-child) {
+      padding-right: 0.5rem;
+    }
+  }
+  tbody td,
+  tfoot td {
+    padding-block: 0.5rem;
+  }
+
+  thead,
+  tbody tr:not(:last-child) {
+    border-bottom: 1px solid;
+    border-color: color-mix(in oklab, var(--color-base-content) 40%,
+      transparent);
+  }
+  tfoot {
+    border-top: 1px solid;
+  }
+  thead,
+  tfoot {
+    border-color: color-mix(in oklab, var(--color-base-content) 60%,
+      transparent);
+  }
+}
src/styles/article/term.scss
@@ -0,0 +1,6 @@
+article dl {
+  dt {
+    font-weight: 700;
+    margin-right: 1rem;
+  }
+}