minduim 1.0.2 → 1.0.4

data/assets/css/base.css

@@ -1,430 +1,432 @@
-/*
-  Default variable values
-*/
-:root {
-  /* Typography */
-  --font-family-base:
-    Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial,
-    sans-serif;
-  --font-family-headings: var(--font-family-base);
-  --font-family-quote:
-    Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
-  --font-family-code:
-    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
-    "DejaVu Sans Mono", monospace;
-  --font-size-base: 16px;
-  --font-size-small: 0.875em;
-  /* Colors */
-  --color-background: var(--white);
-  --color-foreground: var(--black);
-  --color-accent: var(--yellow);
-  --color-accent-alt: var(--red);
-  --color-details: var(--gray);
-  /* Details */
-  --radius: 0.5rem;
-  --border: 1px dotted var(--color-details);
-  --shadow: 0 0 7px var(--color-details);
-  --transition-duration: 0.36s;
-  /* Color palette */
-  --white: rgb(255, 255, 255);
-  --black: rgb(44, 44, 44);
-  --gray: rgb(133, 146, 158);
-  --red: rgb(231, 76, 60);
-  --yellow: rgb(241, 196, 15);
-}
-
-/*
-  Resets
-*/
-
-html {
-  box-sizing: border-box;
-  font-size: var(--font-size-base);
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-hr,
-dl,
-dd,
-ol,
-ul,
-table,
-iframe,
-audio,
-video,
-figure,
-input,
-button,
-textarea {
-  appearance: none;
-  -webkit-appearance: none;
-  background: none;
-  border: none;
-  font: inherit;
-  margin: 0;
-  padding: 0;
-  position: relative;
-}
-
-/*
-  Basic styling
-*/
-
-body {
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-base);
-  background-color: var(--color-background);
-  color: var(--color-foreground);
-}
-
-::selection {
-  background: var(--color-accent-alt);
-  color: var(--color-background);
-}
-
-/*
-  Text Elements
-*/
-
-p,
-blockquote,
-pre,
-ul,
-ol,
-dl,
-figure,
-table,
-iframe,
-audio,
-video {
-  line-height: 1.5;
-  margin-bottom: 1rem;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 700;
-  line-height: 1.3;
-  margin-bottom: 1.25rem;
-}
-
-strong,
-b {
-  font-weight: 700;
-}
-
-em,
-i {
-  font-style: italic;
-}
-
-mark,
-ins {
-  background-color: var(--color-accent);
-  text-decoration: none;
-}
-
-del,
-strike {
-  text-decoration: line-through;
-  text-decoration-style: wavy;
-}
-
-abbr,
-acronym {
-  text-decoration-style: dotted;
-  cursor: help;
-}
-
-sub,
-sup {
-  font-size: 0.65em;
-  line-height: 100%;
-}
-
-/* Headings */
-h1 {
-  font-size: 2em;
-}
-
-h2 {
-  font-size: 1.75em;
-}
-
-h3 {
-  font-size: 1.5em;
-}
-
-h4 {
-  font-size: 1.25em;
-}
-
-h5 {
-  font-size: 1em;
-}
-
-h6 {
-  font-size: 0.75em;
-}
-
-/* Links */
-a {
-  color: currentcolor;
-  text-decoration: underline;
-  text-decoration-style: wavy;
-  transition-property: color, text-decoration-color;
-  transition-duration: var(--transition-duration);
-  text-decoration-thickness: from-font;
-}
-
-a:hover,
-a:focus {
-  text-decoration-color: var(--color-accent);
-}
-
-a:active {
-  color: var(--color-accent-alt);
-  text-decoration-color: currentcolor;
-}
-
-/* Lists */
-
-ul {
-  list-style: square;
-}
-
-li::marker {
-  color: var(--color-accent-alt);
-}
-
-ul ul {
-  list-style: circle;
-}
-
-ul ul ul {
-  list-style: disc;
-}
-
-ol ol {
-  list-style: lower-alpha;
-}
-
-ol ol ol {
-  list-style: lower-roman;
-}
-
-li ul,
-li ol {
-  margin-bottom: 0;
-}
-
-li {
-  margin-block: 0.5rem;
-  margin-left: 1.5rem;
-  padding-left: 0.5rem;
-}
-
-dl dt {
-  font-weight: 700;
-}
-
-dl dd + dt,
-dl dd + dd {
-  margin-top: 0.5rem;
-}
-
-.task-list {
-  list-style: none;
-}
-
-.task-list-item {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  gap: 0.5rem;
-  margin-left: 0;
-  padding-left: 0;
-}
-
-/* Blockquote */
-q {
-  quotes: "“" "”" "‘" "’";
-  font-style: normal;
-}
-
-blockquote {
-  font-family: var(--font-family-quote);
-  font-style: italic;
-  line-height: 1.65;
-  border-left: 0.5rem solid var(--color-accent);
-  padding-left: 1rem;
-}
-
-blockquote cite {
-  font-family: var(--font-family-base);
-  font-style: normal;
-  font-size: var(--font-size-small);
-}
-
-/* Tables */
-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-bottom: 1.5rem;
-  transition: color var(--transition-duration);
-}
-
-table th {
-  text-align: left;
-  background: var(--color-accent);
-}
-
-table th,
-table td {
-  padding: 0.5rem;
-  border-bottom: var(--border);
-}
-
-/* Code and pre-formatted text */
-pre,
-code,
-var,
-kbd,
-tt {
-  font-family: var(--font-family-code);
-  font-size: var(--font-size-small);
-}
-
-pre {
-  max-width: 100%;
-  overflow: auto;
-}
-
-pre code {
-  font-size: 100%;
-}
-
-.highlight .gutter {
-  width: 3ch;
-}
-
-/*
-  Horizontal Rule
-*/
-hr {
-  margin-block: 1.5rem;
-  height: 0;
-  border-bottom: var(--border);
-}
-
-/*
-  Media
-*/
-/* Images */
-img {
-  max-width: 100%;
-  overflow: hidden;
-  opacity: 1;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  img {
-    opacity: 0.75;
-    transition: opacity var(--transition-duration) ease;
-  }
-
-  img:hover,
-  img:focus {
-    opacity: 1;
-  }
-}
-
-.post-content img {
-  border-radius: 0.5rem;
-  box-shadow: var(--shadow);
-}
-
-@media screen and (width > 690px) {
-  .post-content img {
-    width: calc(100% - (0.5rem + 10rem));
-  }
-}
-
-img + em,
-img + br + em,
-figcaption {
-  display: block;
-  width: 10rem;
-  color: var(--color-details);
-  font-style: normal;
-  font-size: var(--font-size-small);
-  padding: 0.25rem 0.5rem;
-}
-
-@media screen and (width > 690px) {
-  img + em,
-  img + br + em,
-  figcaption {
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-}
-
-video,
-iframe[src*="youtu"],
-iframe[src*="twitch"],
-iframe[src*="vimeo"] {
-  border: var(--border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-  aspect-ratio: 16 / 9;
-  height: auto;
-  width: 100%;
-}
-
-audio {
-  width: 100%;
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-}
-
-/*
-  Footnotes
-*/
-.footnotes {
-  margin-top: 1.5rem;
-  padding-top: 1.5rem;
-  border-top: var(--border);
-  font-size: var(--font-size-small);
-}
-
-/*
-  TODO: Forms
-*/
-
-input[type="checkbox"] {
-  appearance: checkbox;
-  width: 1em;
-  height: 1em;
-  accent-color: var(--color-accent-alt);
-}
+/*
+  Default variable values
+*/
+:root {
+  /* Typography */
+  --font-family-base:
+    Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial,
+    sans-serif;
+  --font-family-headings: var(--font-family-base);
+  --font-family-quote:
+    Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
+  --font-family-code:
+    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
+    "DejaVu Sans Mono", monospace;
+  --font-size-base: 16px;
+  --font-size-small: 0.875em;
+  /* Colors */
+  --color-background: var(--white);
+  --color-foreground: var(--black);
+  --color-accent: var(--yellow);
+  --color-accent-alt: var(--red);
+  --color-details: var(--gray);
+  /* Details */
+  --radius: 0.5rem;
+  --border: 1px dotted var(--color-details);
+  --shadow: 0 0 7px var(--color-details);
+  --transition-duration: 0.36s;
+  /* Color palette */
+  --white: rgb(255, 255, 255);
+  --black: rgb(44, 44, 44);
+  --gray: rgb(133, 146, 158);
+  --red: rgb(231, 76, 60);
+  --yellow: rgb(241, 196, 15);
+}
+
+/*
+  Resets
+*/
+
+html {
+  box-sizing: border-box;
+  font-size: var(--font-size-base);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+hr,
+dl,
+dd,
+ol,
+ul,
+table,
+iframe,
+audio,
+video,
+figure,
+input,
+button,
+textarea {
+  appearance: none;
+  -webkit-appearance: none;
+  background: none;
+  border: none;
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+/*
+  Basic styling
+*/
+
+body {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+}
+
+::selection {
+  background: var(--color-accent-alt);
+  color: var(--color-background);
+}
+
+/*
+  Text Elements
+*/
+
+p,
+blockquote,
+pre,
+ul,
+ol,
+dl,
+figure,
+table,
+iframe,
+audio,
+video {
+  line-height: 1.5;
+  margin-bottom: 1rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 700;
+  line-height: 1.3;
+  margin-bottom: 1.25rem;
+}
+
+strong,
+b {
+  font-weight: 700;
+}
+
+em,
+i {
+  font-style: italic;
+}
+
+mark,
+ins {
+  background-color: var(--color-accent);
+  text-decoration: none;
+}
+
+del,
+strike {
+  text-decoration: line-through;
+  text-decoration-style: wavy;
+}
+
+abbr,
+acronym {
+  text-decoration-style: dotted;
+  cursor: help;
+}
+
+sub,
+sup {
+  font-size: 0.65em;
+  line-height: 100%;
+}
+
+/* Headings */
+h1 {
+  font-size: 2em;
+}
+
+h2 {
+  font-size: 1.75em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.25em;
+}
+
+h5 {
+  font-size: 1em;
+}
+
+h6 {
+  font-size: 0.75em;
+}
+
+/* Links */
+a {
+  color: currentcolor;
+  text-decoration: underline;
+  text-decoration-style: wavy;
+  transition-property: color, text-decoration-color;
+  transition-duration: var(--transition-duration);
+  text-decoration-thickness: 1px;
+}
+
+a:hover,
+a:focus {
+  text-decoration-color: var(--color-accent);
+}
+
+a:active {
+  color: var(--color-accent-alt);
+  text-decoration-color: currentcolor;
+}
+
+/* Lists */
+
+ul {
+  list-style: square;
+}
+
+li::marker {
+  color: var(--color-accent-alt);
+}
+
+ul ul {
+  list-style: circle;
+}
+
+ul ul ul {
+  list-style: disc;
+}
+
+ol ol {
+  list-style: lower-alpha;
+}
+
+ol ol ol {
+  list-style: lower-roman;
+}
+
+li ul,
+li ol {
+  margin-bottom: 0;
+}
+
+li {
+  margin-block: 0.5rem;
+  margin-left: 1.5rem;
+  padding-left: 0.5rem;
+}
+
+dl dt {
+  font-weight: 700;
+}
+
+dl dd + dt,
+dl dd + dd {
+  margin-top: 0.5rem;
+}
+
+.task-list {
+  list-style: none;
+}
+
+.task-list-item {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: 0;
+  padding-left: 0;
+}
+
+/* Blockquote */
+q {
+  quotes: "“" "”" "‘" "’";
+  font-style: normal;
+}
+
+blockquote {
+  font-family: var(--font-family-quote);
+  font-style: italic;
+  line-height: 1.65;
+  border-left: 0.5rem solid var(--color-accent);
+  padding-left: 1rem;
+}
+
+blockquote cite {
+  font-family: var(--font-family-base);
+  font-style: normal;
+  font-size: var(--font-size-small);
+}
+
+/* Tables */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1.5rem;
+  transition: color var(--transition-duration);
+}
+
+table th {
+  text-align: left;
+  background: var(--color-accent);
+}
+
+table th,
+table td {
+  padding: 0.5rem;
+  border-bottom: var(--border);
+}
+
+/* Code and pre-formatted text */
+pre,
+code,
+var,
+kbd,
+tt {
+  font-family: var(--font-family-code);
+  font-size: var(--font-size-small);
+}
+
+pre {
+  max-width: 100%;
+  overflow: auto;
+}
+
+pre code {
+  font-size: 100%;
+}
+
+.highlight .gutter {
+  width: 3ch;
+}
+
+/*
+  Horizontal Rule
+*/
+hr {
+  margin-block: 1.5rem;
+  height: 0;
+  border-bottom: var(--border);
+}
+
+/*
+  Media
+*/
+/* Images */
+img {
+  max-width: 100%;
+  overflow: hidden;
+  opacity: 1;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  img {
+    opacity: 0.75;
+    transition: opacity var(--transition-duration) ease;
+  }
+
+  img:hover,
+  img:focus {
+    opacity: 1;
+  }
+}
+
+.post-content img,
+.page-content img {
+  border-radius: 0.5rem;
+  box-shadow: var(--shadow);
+}
+
+@media screen and (width > 690px) {
+  .post-content img,
+  .page-content img {
+    width: calc(100% - (0.5rem + 10rem));
+  }
+}
+
+img + em,
+img + br + em,
+figcaption {
+  display: block;
+  width: 10rem;
+  color: var(--color-details);
+  font-style: normal;
+  font-size: var(--font-size-small);
+  padding: 0.25rem 0.5rem;
+}
+
+@media screen and (width > 690px) {
+  img + em,
+  img + br + em,
+  figcaption {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+
+video,
+iframe[src*="youtu"],
+iframe[src*="twitch"],
+iframe[src*="vimeo"] {
+  border: var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  aspect-ratio: 16 / 9;
+  height: auto;
+  width: 100%;
+}
+
+audio {
+  width: 100%;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+
+/*
+  Footnotes
+*/
+.footnotes {
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: var(--border);
+  font-size: var(--font-size-small);
+}
+
+/*
+  TODO: Forms
+*/
+
+input[type="checkbox"] {
+  appearance: checkbox;
+  width: 1em;
+  height: 1em;
+  accent-color: var(--color-accent-alt);
+}