Merge branch 'style/herman'

assets/herman.css

@@ -0,0 +1,202 @@
+:root {
+  font-size: 62.5%; /* 10px */
+  --color-dark: #181a20;
+  --color-light: #fafafa;
+  --color-primary: #1a8fe3;
+  --size: 1rem;
+  --spacing: calc(var(--size) * 2.4);
+}
+
+body {
+  background: var(--color-dark);
+  color: var(--color-light);
+  padding: 4rem;
+  font-family: Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic',
+    source-sans-pro, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: calc(var(--size) * 1.8);
+  line-height: 1.5;
+  min-height: 80vh;
+  max-width: 1600px;
+  margin: 0 auto;
+  word-wrap: break-word;
+}
+
+header,
+main,
+footer {
+  max-width: 70ch;
+  margin-inline: auto;
+}
+
+header {
+  padding-bottom: var(--spacing);
+}
+
+nav a, a.blog-tags {
+  margin-right: calc(var(--spacing) / 2);
+}
+a.blog-tags {
+  line-height: 2;
+}
+
+main {
+  padding-bottom: var(--spacing);
+}
+
+footer {
+  text-align: center;
+  padding-top: var(--spacing);
+}
+
+a {
+  color: currentColor;
+  text-decoration-color: var(--color-primary);
+  text-decoration-thickness: 0.3ex;
+  text-underline-offset: 0.3ex;
+}
+
+a:hover {
+  text-decoration-thickness: 0.4ex;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+h1 {
+  font-size: calc(var(--size) * 4.2);
+}
+h2 {
+  font-size: calc(var(--size) * 3.4);
+}
+h3 {
+  font-size: calc(var(--size) * 2.6);
+}
+h4 {
+  font-size: calc(var(--size) * 1.8);
+}
+
+ul,
+ol {
+  padding-inline-start: var(--spacing);
+}
+li {
+  margin-block-start: var(--spacing);
+}
+
+blockquote {
+  padding-inline-start: var(--spacing);
+  border-inline-start: 0.2em solid;
+  font-style: italic;
+  max-width: 50ch;
+}
+
+:is(h1, h2, h3, h4, blockquote) {
+  margin-block-end: calc(var(--spacing) / 2);
+}
+:is(h1, h2, h3, h4) + * {
+  margin-block-start: calc(var(--spacing) / 3);
+}
+:is(h1, h2, h3, h4) + :where(h2, h3, h4) {
+  margin-block-start: calc(var(--spacing) * 2);
+}
+
+.title {
+  text-decoration: none;
+}
+.title h1 {
+  font-size: calc(var(--size) * 3.4);
+  margin-top: calc(var(--spacing) / 2);
+}
+
+ul.blog-posts {
+  list-style-type: none;
+  padding: unset;
+}
+ul.blog-posts li {
+  display: flex;
+  flex-direction: column;
+}
+ul.blog-posts li span {
+  min-width: 11ch;
+}
+
+p.byline {
+  opacity: 0.5;
+}
+
+code {
+  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro',
+    Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+  padding: 2px calc(var(--spacing) / 4);
+  background-color: #282a36;
+  font-size: calc(var(--size) * 1.4);
+}
+pre code {
+  display: block;
+  padding: var(--spacing);
+  overflow-x: auto;
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+}
+
+table {
+  width: 100%;
+}
+table,
+th,
+td {
+  border: 1px solid;
+  border-collapse: collapse;
+  border-color: var(--color-light);
+  padding: calc(var(--spacing) / 2);
+}
+
+.disabled {
+  color: currentColor;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+@media screen and (min-width: 600px) {
+  ul.blog-posts li {
+    flex-direction: row;
+    gap: calc(var(--spacing) / 2);
+  }
+}
+
+/* "Skip to main content" link */
+.skip-link {
+  position: absolute;
+  top: 5;
+  transform: translateY(-600%);
+  transition: transform 0.5s;
+  background-color: #181a20;
+  padding: 6px;
+}
+
+.skip-link:focus {
+  transform: translateY(0%);
+}
+
+figure {
+  margin-inline-start: 0em;
+  margin-inline-end: 0em;
+}
+
+figcaption > p {
+  margin-block-start: 9px;
+  text-align: center;
+  font-style: italic;
+}

assets/syntax.css

@@ -69,11 +69,11 @@
 /* Operator */ .chroma .o { color: #ff79c6 }
 /* OperatorWord */ .chroma .ow { color: #ff79c6 }
 /* Punctuation .chroma .p {  } */
-/* Comment */ .chroma .c { color: #7c90d0 }
-/* CommentHashbang */ .chroma .ch { color: #7c90d0 }
-/* CommentMultiline */ .chroma .cm { color: #7c90d0 }
-/* CommentSingle */ .chroma .c1 { color: #7c90d0 }
-/* CommentSpecial */ .chroma .cs { color: #7c90d0 }
+/* Comment */ .chroma .c { color: #8491b8 }
+/* CommentHashbang */ .chroma .ch { color: #8491b8 }
+/* CommentMultiline */ .chroma .cm { color: #8491b8 }
+/* CommentSingle */ .chroma .c1 { color: #8491b8 }
+/* CommentSpecial */ .chroma .cs { color: #8491b8 }
 /* CommentPreproc */ .chroma .cp { color: #ff79c6 }
 /* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
 /* Generic .chroma .g {  } */