Introducing Blot, a Bear Blog Theme

15 Feb, 2024

The theme I've used on my blog for the better half of a year is now available to everyone.

There have been some changes in the HTML code generated by Bear Blog which make this theme look unfinished and ugly. For the time being, I have switched back to Bear Blog's default theme, making below comments in the vein of "look at this blog to see the theme in action" obsolete.

Introduction

Over the past few weeks, I've slowly but surely been tidying up the code of my Bear Blog theme, Blot, and am now making it available to the public. The theme initially started out as an experiment in CSS; in the beginning, I even intended to switch back to the default theme at some point, but I ended up liking it more than I thought I would.

Before anything else, I would like to thank the following websites and projects, all of which served as inspiration for Blot:

Material Web, a preview site for Google's Material 3 web components.
anhvn, perhaps the prettiest personal website I know.
Hello, CSS!, a CSS framework which inspired the blockquote style.

Blot uses the +Jakarta Sans and Maple Mono typefaces, both of which are licensed under the SIL Open Font License and, as such, free to use.

Preview

Blot supports pretty much everything you can do with Markdown within Bear Blog. To get a feeling for the theme, you can look at, you guessed it, my blog! Below is a table, the only element which is supported by Blot but doesn't appear in any of my posts as of now.

Person	Most interest in	Age
Chris	HTML tables	22
Dennis	Web accessibility	45
Sarah	JavaScript frameworks	29
Karen	Web performance	36

Usage

To use Blot, copy the contents of one of the code blocks below (preferably the latest version). Then head over to the Styling page on your Bear Blog dashboard and paste the contents into the text field just below Edit theme CSS. Make sure you're okay with overwriting your current theme!

Version 1.0.0

/**************************************************************

Blot 1.0.0 by Sunny (https://sun.bearblog.dev/)
A lightweight yet modern Bear Blog theme inspired by Material 3

Version 0.1.0: Initial private release
Version 0.1.1: Fix ordered list padding
               Fix unordered list padding
               Fix list item padding
Version 0.2.0: Add table styles
               Add code block styles
               Add inline code styles
               Fix ordered list paragraph styles
               Fix image link hover styles
               Add heading documentation
               Add introduction documentation
Version 0.2.1: Fix header margins
               Fix ordered list margin
               Fix unordered list margin
               Fix code block margin
Version 1.0.0: Initial public release
               Add summary element styles
               Use Maple Mono instead of Space Mono
               Fix navigation element alignment
               Fix code block margin
               Move documentation to post

**************************************************************/

/* Colors */

:root {
  --background: var(--md-sys-color-surface-container);
  --container: var(--md-sys-color-surface);
  --primary: var(--md-sys-color-on-surface);
  --accent: var(--md-sys-color-primary);
}

body.not-found {
  --background: var(--md-sys-color-error-container);
  --container: var(--md-sys-color-on-error);
  --primary: var(--md-sys-color-on-error-container);
  --accent: var(--md-sys-color-error);
}

:root,
:host {
  --md-sys-color-background: #fcf8f8;
  --md-sys-color-on-background: #1c1b1b;
  --md-sys-color-surface: #fcf8f8;
  --md-sys-color-surface-dim: #ddd9d9;
  --md-sys-color-surface-bright: #fcf8f8;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f6f3f2;
  --md-sys-color-surface-container: #f1edec;
  --md-sys-color-surface-container-high: #ebe7e7;
  --md-sys-color-surface-container-highest: #e5e2e1;
  --md-sys-color-on-surface: #1c1b1b;
  --md-sys-color-surface-variant: #e0e3e3;
  --md-sys-color-on-surface-variant: #444748;
  --md-sys-color-inverse-surface: #313030;
  --md-sys-color-inverse-on-surface: #f4f0ef;
  --md-sys-color-outline: #747878;
  --md-sys-color-outline-variant: #c4c7c8;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-surface-tint: #5d5f5f;
  --md-sys-color-primary: #5d5f5f;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #ffffff;
  --md-sys-color-on-primary-container: #575859;
  --md-sys-color-inverse-primary: #c6c6c7;
  --md-sys-color-secondary: #5e5e5e;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e8e6e6;
  --md-sys-color-on-secondary-container: #4a4a4a;
  --md-sys-color-tertiary: #5d5f5f;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffffff;
  --md-sys-color-on-tertiary-container: #575859;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
}

@media (prefers-color-scheme: dark) {
  :root,
  :host {
    --md-sys-color-background: #141313;
    --md-sys-color-on-background: #e5e2e1;
    --md-sys-color-surface: #141313;
    --md-sys-color-surface-dim: #141313;
    --md-sys-color-surface-bright: #3a3939;
    --md-sys-color-surface-container-lowest: #0e0e0e;
    --md-sys-color-surface-container-low: #1c1b1b;
    --md-sys-color-surface-container: #201f1f;
    --md-sys-color-surface-container-high: #2a2a2a;
    --md-sys-color-surface-container-highest: #353434;
    --md-sys-color-on-surface: #e5e2e1;
    --md-sys-color-surface-variant: #444748;
    --md-sys-color-on-surface-variant: #c4c7c8;
    --md-sys-color-inverse-surface: #e5e2e1;
    --md-sys-color-inverse-on-surface: #313030;
    --md-sys-color-outline: #8e9192;
    --md-sys-color-outline-variant: #444748;
    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;
    --md-sys-color-surface-tint: #c6c6c7;
    --md-sys-color-primary: #ffffff;
    --md-sys-color-on-primary: #2f3131;
    --md-sys-color-primary-container: #d4d4d4;
    --md-sys-color-on-primary-container: #3e4040;
    --md-sys-color-inverse-primary: #5d5f5f;
    --md-sys-color-secondary: #c8c6c6;
    --md-sys-color-on-secondary: #303030;
    --md-sys-color-secondary-container: #3f3f3f;
    --md-sys-color-on-secondary-container: #d5d4d3;
    --md-sys-color-tertiary: #ffffff;
    --md-sys-color-on-tertiary: #2f3131;
    --md-sys-color-tertiary-container: #d4d4d4;
    --md-sys-color-on-tertiary-container: #3e4040;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
  }
}

/* Fonts */

@font-face {
  font-family: "+Jakarta Sans";
  font-weight: normal;
  font-style: normal;
  src: url("https://tokotype.github.io/plusjakarta-sans/fonts/PlusJakartaText-Regular.woff2");
}

@font-face {
  font-family: "+Jakarta Sans";
  font-weight: bold;
  font-style: normal;
  src: url("https://tokotype.github.io/plusjakarta-sans/fonts/PlusJakartaText-Bold.woff2");
}

@font-face {
  font-family: "+Jakarta Sans";
  font-weight: normal;
  font-style: italic;
  src: url("https://tokotype.github.io/plusjakarta-sans/fonts/PlusJakartaText-Italic.woff2");
}

@font-face {
  font-family: "+Jakarta Sans";
  font-weight: bold;
  font-style: italic;
  src: url("https://tokotype.github.io/plusjakarta-sans/fonts/PlusJakartaText-BoldItalic.woff2");
}

@font-face {
  font-family: "Maple Mono";
  font-weight: normal;
  font-style: normal;
  src: url("https://raw.githubusercontent.com/subframe7536/maple-font/main/woff2/MapleMono-Regular.woff2");
}

@font-face {
  font-family: "Maple Mono";
  font-weight: bold;
  font-style: normal;
  src: url("https://raw.githubusercontent.com/subframe7536/maple-font/main/woff2/MapleMono-Bold.woff2");
}

@font-face {
  font-family: "Maple Mono";
  font-weight: normal;
  font-style: italic;
  src: url("https://raw.githubusercontent.com/subframe7536/maple-font/main/woff2/MapleMono-Italic.woff2");
}

@font-face {
  font-family: "Maple Mono";
  font-weight: bold;
  font-style: italic;
  src: url("https://raw.githubusercontent.com/subframe7536/maple-font/main/woff2/MapleMono-BoldItalic.woff2");
}

/* Styles */

* {
  font-family: "+Jakarta Sans";
  margin: initial;
  transition: all 125ms ease-in-out;

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media (prefers-reduced-motion) {
  * {
    transition: initial;
  }
}

body {
  accent-color: var(--accent);
  background: var(--background);
  color: var(--primary);

  line-height: 1.5;
  margin: auto;
  max-width: 1000px;
  padding: 1.5em;
}

body.not-found div {
  height: initial !important;
  margin-bottom: initial;
}

body.not-found div h1,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  margin-bottom: 0.325em;
}

body.not-found div p {
  margin-bottom: 0.25em;
  text-align: center;
}

header {
  display: flex;
  justify-content: space-between;
}

header h1,
main #upvote-form .upvote-button .upvote-count {
  font-size: initial;
}

header p {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}

main {
  background: var(--container);

  margin: 1.5em auto;
  padding: 1.5em;
}

main,
main img {
  border-radius: 1em;
}

main h1 {
  font-size: 2em;
  line-height: 1.25;
}

main h1,
main h1 + p,
main div > :first-child,
footer {
  text-align: center;
}

main h1 + p {
  font-size: 1.25em;
}

main h1 + p i,
main .blog-posts li span i {
  font-style: normal;
}

main > div,
main div hr {
  margin: 1em auto;
}

main div {
  margin-top: initial;
}

main div blockquote {
  margin-left: 1.25em;
  position: relative;
}

main div blockquote::before {
  content: "“";
  font-size: 2.5em;
  left: -0.575em;
  opacity: 0.5;
  position: absolute;
  top: -0.25em;
}

main div code,
main div pre,
main div pre * {
  font-family: "Maple Mono";
}

main div code,
main div pre,
main div th,
main div td,
a:hover:not(:has(img)),
a:focus:not(:has(img)) {
  border-radius: 0.5em;
  padding: 0.25em 0.5em;
}

main div code,
main div pre,
main div td,
a:hover {
  background: color-mix(in srgb, currentColor 12.5%, transparent);
}

main div details,
main div ol,
main div p,
main div ul {
  margin: 0.75em auto;
  text-align: justify;
}

main div details summary {
  cursor: pointer;
}

main div hr {
  border: none;
}

main div hr,
main #upvote-form {
  border-top: 1px dashed var(--accent);
}

main div img,
main div table,
main div .highlight {
  width: 100%;
  margin: 1.25em auto;
}

main div img {
  display: block;
}

main div ol {
  list-style-position: inside;
  padding-left: initial;
}

main div ol li p {
  display: contents;
}

main div pre {
  padding: 0.75em 1em;
  text-align: initial !important;
  overflow: auto;
}

main div th {
  background: color-mix(in srgb, currentColor 25%, transparent);
}

main div ul {
  padding-left: 0.875em;
}

main .blog-posts {
  padding: initial;

  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: center;
  column-gap: 0.5em;
}

main .blog-posts li {
  display: contents;
}

main .blog-posts li span {
  justify-self: end;
}

main .blog-posts li a {
  justify-self: start;
}

main #upvote-form {
  display: block !important;
  padding-top: 1em;
}

main #upvote-form .upvote-button {
  cursor: pointer;
  display: block !important;
  margin: auto !important;
}

main #upvote-form .upvote-button.upvoted,
main #upvote-form .upvote-button[style] {
  color: var(--accent) !important;
}

main #upvote-form .upvote-button svg {
  display: none;
}

main #upvote-form .upvote-button .upvote-count::before {
  content: "🍞";
  margin-right: 0.5em;
}

footer {
  padding: initial !important;
}

a {
  color: var(--accent);
  padding: 0.25em 0;
  text-decoration: initial;
}

a:hover:has(img) {
  opacity: 75%;
}

a:focus,
::selection {
  background: var(--accent);
  color: var(--background);
}

@media (max-width: 768px) {
  header {
    display: initial;
  }

  header .title {
    display: inline-block;
  }

  main {
    margin-left: -1.5em;
    margin-right: -1.5em;
  }

  main .blog-posts {
    grid-template-columns: initial;
    gap: 0.5em;
  }

  main .blog-posts li {
    display: initial;
  }

  main .blog-posts li span {
    display: block;
  }

  footer {
    text-align: initial;
  }
}

Version 1.1.0

/**************************************************************

Blot 1.1.0 by Sunny (https://sun.bearblog.dev/)
A lightweight yet modern Bear Blog theme inspired by Material 3

Version 0.1.0: Initial private release
Version 0.1.1: Fix ordered list padding
               Fix unordered list padding
               Fix list item padding
Version 0.2.0: Add table styles
               Add code block styles
               Add inline code styles
               Fix ordered list paragraph styles
               Fix image link hover styles
               Add heading documentation
               Add introduction documentation
Version 0.2.1: Fix header margins
               Fix ordered list margin
               Fix unordered list margin
               Fix code block margin
Version 1.0.0: Initial public release
               Add summary element styles
               Use Maple Mono instead of Space Mono
               Fix navigation element alignment
               Fix code block margin
               Move documentation to post
Version 1.1.0: Add hashtag-related styles

**************************************************************/

/* Colors */

:root {
  --background: var(--md-sys-color-surface-container);
  --container: var(--md-sys-color-surface);
  --primary: var(--md-sys-color-on-surface);
  --accent: var(--md-sys-color-primary);
}

body.not-found {
  --background: var(--md-sys-color-error-container);
  --container: var(--md-sys-color-on-error);
  --primary: var(--md-sys-color-on-error-container);
  --accent: var(--md-sys-color-error);
}

:root,
:host {
  --md-sys-color-background: #fcf8f8;
  --md-sys-color-on-background: #1c1b1b;
  --md-sys-color-surface: #fcf8f8;
  --md-sys-color-surface-dim: #ddd9d9;
  --md-sys-color-surface-bright: #fcf8f8;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f6f3f2;
  --md-sys-color-surface-container: #f1edec;
  --md-sys-color-surface-container-high: #ebe7e7;
  --md-sys-color-surface-container-highest: #e5e2e1;
  --md-sys-color-on-surface: #1c1b1b;
  --md-sys-color-surface-variant: #e0e3e3;
  --md-sys-color-on-surface-variant: #444748;
  --md-sys-color-inverse-surface: #313030;
  --md-sys-color-inverse-on-surface: #f4f0ef;
  --md-sys-color-outline: #747878;
  --md-sys-color-outline-variant: #c4c7c8;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-surface-tint: #5d5f5f;
  --md-sys-color-primary: #5d5f5f;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #ffffff;
  --md-sys-color-on-primary-container: #575859;
  --md-sys-color-inverse-primary: #c6c6c7;
  --md-sys-color-secondary: #5e5e5e;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e8e6e6;
  --md-sys-color-on-secondary-container: #4a4a4a;
  --md-sys-color-tertiary: #5d5f5f;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffffff;
  --md-sys-color-on-tertiary-container: #575859;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
}

@media (prefers-color-scheme: dark) {
  :root,
  :host {
    --md-sys-color-background: #141313;
    --md-sys-color-on-background: #e5e2e1;
    --md-sys-color-surface: #141313;
    --md-sys-color-surface-dim: #141313;
    --md-sys-color-surface-bright: #3a3939;
    --md-sys-color-surface-container-lowest: #0e0e0e;
    --md-sys-color-surface-container-low: #1c1b1b;
    --md-sys-color-surface-container: #201f1f;
    --md-sys-color-surface-container-high: #2a2a2a;
    --md-sys-color-surface-container-highest: #353434;
    --md-sys-color-on-surface: #e5e2e1;
    --md-sys-color-surface-variant: #444748;
    --md-sys-color-on-surface-variant: #c4c7c8;
    --md-sys-color-inverse-surface: #e5e2e1;
    --md-sys-color-inverse-on-surface: #313030;
    --md-sys-color-outline: #8e9192;
    --md-sys-color-outline-variant: #444748;
    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;
    --md-sys-color-surface-tint: #c6c6c7;
    --md-sys-color-primary: #ffffff;
    --md-sys-color-on-primary: #2f3131;
    --md-sys-color-primary-container: #d4d4d4;
    --md-sys-color-on-primary-container: #3e4040;
    --md-sys-color-inverse-primary: #5d5f5f;
    --md-sys-color-secondary: #c8c6c6;
    --md-sys-color-on-secondary: #303030;
    --md-sys-color-secondary-container: #3f3f3f;
    --md-sys-color-on-secondary-container: #d5d4d3;
    --md-sys-color-tertiary: #ffffff;
    --md-sys-color-on-tertiary: #2f3131;
    --md-sys-color-tertiary-container: #d4d4d4;
    --md-sys-color-on-tertiary-container: #3e4040;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
  }
}

/* Fonts */

@font-face {
  font-family: "+Jakarta Sans";
  font-weight: normal;
  font-style: normal;
  src: url("https://tokotype.github.io/plusjakarta-sans/fonts/PlusJakartaText-Regular.woff2");
}

@font-face {
  font-family: "+Jakarta Sans";
  font-weight: bold;
  font-style: normal;
  src: url("https://tokotype.github.io/plusjakarta-sans/fonts/PlusJakartaText-Bold.woff2");
}

@font-face {
  font-family: "+Jakarta Sans";
  font-weight: normal;
  font-style: italic;
  src: url("https://tokotype.github.io/plusjakarta-sans/fonts/PlusJakartaText-Italic.woff2");
}

@font-face {
  font-family: "+Jakarta Sans";
  font-weight: bold;
  font-style: italic;
  src: url("https://tokotype.github.io/plusjakarta-sans/fonts/PlusJakartaText-BoldItalic.woff2");
}

@font-face {
  font-family: "Maple Mono";
  font-weight: normal;
  font-style: normal;
  src: url("https://raw.githubusercontent.com/subframe7536/maple-font/main/woff2/MapleMono-Regular.woff2");
}

@font-face {
  font-family: "Maple Mono";
  font-weight: bold;
  font-style: normal;
  src: url("https://raw.githubusercontent.com/subframe7536/maple-font/main/woff2/MapleMono-Bold.woff2");
}

@font-face {
  font-family: "Maple Mono";
  font-weight: normal;
  font-style: italic;
  src: url("https://raw.githubusercontent.com/subframe7536/maple-font/main/woff2/MapleMono-Italic.woff2");
}

@font-face {
  font-family: "Maple Mono";
  font-weight: bold;
  font-style: italic;
  src: url("https://raw.githubusercontent.com/subframe7536/maple-font/main/woff2/MapleMono-BoldItalic.woff2");
}

/* Styles */

* {
  font-family: "+Jakarta Sans";
  margin: initial;
  transition: all 125ms ease-in-out;

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media (prefers-reduced-motion) {
  * {
    transition: initial;
  }
}

body {
  accent-color: var(--accent);
  background: var(--background);
  color: var(--primary);

  line-height: 1.5;
  margin: auto;
  max-width: 1000px;
  padding: 1.5em;
}

body.not-found div {
  height: initial !important;
  margin-bottom: initial;
}

body.not-found div h1,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  margin-bottom: 0.325em;
}

body.not-found div p {
  margin-bottom: 0.25em;
  text-align: center;
}

header {
  display: flex;
  justify-content: space-between;
}

header h1,
main #upvote-form .upvote-button .upvote-count {
  font-size: initial;
}

header p {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}

main {
  background: var(--container);

  margin: 1.5em auto;
  padding: 1.5em;
}

main,
main img {
  border-radius: 1em;
}

main h1 {
  font-size: 2em;
  line-height: 1.25;
}

main h1,
main h1 + p,
main div > :first-child,
footer {
  text-align: center;
}

main h1 + p {
  font-size: 1.25em;
}

main h1 + p i,
main .blog-posts li span i {
  font-style: normal;
}

main h3[style="margin-bottom:0"] {
  display: inline;
  font-size: initial;
  font-weight: initial;
}

main h3[style="margin-bottom:0"] + small {
  float: right;
  font-size: initial;
}

main h3[style="margin-bottom:0"] + small + .blog-posts {
  margin-top: 1em;
  padding-top: 1em;
}

main h3[style="margin-bottom:0"] + small + .blog-posts,
main div hr,
main .blog-posts + small .tags,
main #upvote-form {
  border-top: 1px dashed var(--accent) !important;
}

main > div,
main div hr,
main .tags {
  margin: 1em auto;
}

main div {
  margin-top: initial;
}

main div blockquote {
  margin-left: 1.25em;
  position: relative;
}

main div blockquote::before {
  content: "“";
  font-size: 2.5em;
  left: -0.575em;
  opacity: 0.5;
  position: absolute;
  top: -0.25em;
}

main div code,
main div pre,
main div pre * {
  font-family: "Maple Mono";
}

main div code,
main div pre,
main div th,
main div td,
a:hover:not(:has(img)),
a:focus:not(:has(img)) {
  border-radius: 0.5em;
  padding: 0.25em 0.5em;
}

main div code,
main div pre,
main div td,
a:hover {
  background: color-mix(in srgb, currentColor 12.5%, transparent);
}

main div details,
main div ol,
main div p,
main div ul {
  margin: 0.75em auto;
  text-align: justify;
}

main div details summary {
  cursor: pointer;
}

main div hr {
  border: none;
}

main div img,
main div table,
main div .highlight {
  width: 100%;
  margin: 1.25em auto;
}

main div img {
  display: block;
}

main div ol {
  list-style-position: inside;
  padding-left: initial;
}

main div ol li p {
  display: contents;
}

main div pre {
  padding: 0.75em 1em;
  text-align: initial !important;
  overflow: auto;
}

main div th {
  background: color-mix(in srgb, currentColor 25%, transparent);
}

main div ul {
  padding-left: 0.875em;
}

main .blog-posts {
  padding: initial;

  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: center;
  column-gap: 0.5em;
}

main .blog-posts li {
  display: contents;
}

main .blog-posts li span {
  justify-self: end;
}

main .blog-posts li a {
  justify-self: start;
}

main .blog-posts + small {
  font-size: initial;
}

main .blog-posts + small .tags {
  margin-bottom: initial;
  padding-top: 1em;
}

main .tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 1em;
}

main .tags:not(:has(*)),
main #upvote-form .upvote-button svg {
  display: none;
}

main #upvote-form {
  display: block !important;
  padding-top: 1em;
}

main #upvote-form .upvote-button {
  cursor: pointer;
  display: block !important;
  margin: auto !important;
}

main #upvote-form .upvote-button.upvoted,
main #upvote-form .upvote-button[style] {
  color: var(--accent) !important;
}

main #upvote-form .upvote-button .upvote-count::before {
  content: "🍞";
  margin-right: 0.5em;
}

footer {
  padding: initial !important;
}

a {
  color: var(--accent);
  padding: 0.25em 0;
  text-decoration: initial;
}

a:hover:has(img) {
  opacity: 75%;
}

a:focus,
::selection {
  background: var(--accent);
  color: var(--background);
}

@media (max-width: 768px) {
  header {
    display: initial;
  }

  header .title {
    display: inline-block;
  }

  main {
    margin-left: -1.5em;
    margin-right: -1.5em;
  }

  main h3[style="margin-bottom:0"] {
    display: block;
  }

  main h3[style="margin-bottom:0"] + small {
    float: initial;
  }

  main .blog-posts {
    grid-template-columns: initial;
    gap: 0.5em;
  }

  main .blog-posts li {
    display: initial;
  }

  main .blog-posts li span {
    display: block;
  }

  footer {
    text-align: initial;
  }
}

New versions will be published right here (though I suspect they will be few and far between, as I'm mostly happy with the theme's current state). Of course, you're free to modify the code however you wish. For legal purposes, consider Blot licensed under the Unlicense.

Notes

If you decide to use Blot, first of all, thank you. There are a few things you should keep in mind though.

Colors

First, Blot uses a dynamic Material 3 color scheme, which you can customize per post. To do so, follow these steps:

At the bottom of your post, add the following code:

<style>
  /* Light theme */

  @media (prefers-color-scheme: dark) {
    /* Dark theme */
  }
</style>

Open the Material Web website.
Open the theme controls by clicking on the palette icon in the top right.
Pick a source color. This will be the primary color of your post.
Set the theme to light via the three buttons at the bottom of the pop-up.
Click on the copy icon in the top right of the pop-up.
Replace /* Light theme */ in the code you just added with the generated code you just copied.
Set the theme to dark and click on the copy icon again.
Replace /* Dark theme */ with the code you just copied.

Your code should now look like this:

<style>
  :root,:host{--md-sys-color-background:#f9f9f9;--md-sys-color-on-background:#1b1b1b;--md-sys-color-surface:#f9f9f9;--md-sys-color-surface-dim:#dadada;--md-sys-color-surface-bright:#f9f9f9;--md-sys-color-surface-container-lowest:#ffffff;--md-sys-color-surface-container-low:#f3f3f3;--md-sys-color-surface-container:#eeeeee;--md-sys-color-surface-container-high:#e8e8e8;--md-sys-color-surface-container-highest:#e2e2e2;--md-sys-color-on-surface:#1b1b1b;--md-sys-color-surface-variant:#ebe0e1;--md-sys-color-on-surface-variant:#4c4546;--md-sys-color-inverse-surface:#303030;--md-sys-color-inverse-on-surface:#f1f1f1;--md-sys-color-outline:#7e7576;--md-sys-color-outline-variant:#cfc4c5;--md-sys-color-shadow:#000000;--md-sys-color-scrim:#000000;--md-sys-color-surface-tint:#5e5e5e;--md-sys-color-primary:#000000;--md-sys-color-on-primary:#ffffff;--md-sys-color-primary-container:#262626;--md-sys-color-on-primary-container:#b1b1b1;--md-sys-color-inverse-primary:#c6c6c6;--md-sys-color-secondary:#5e5e5e;--md-sys-color-on-secondary:#ffffff;--md-sys-color-secondary-container:#e6e6e6;--md-sys-color-on-secondary-container:#4a4a4a;--md-sys-color-tertiary:#000000;--md-sys-color-on-tertiary:#ffffff;--md-sys-color-tertiary-container:#262626;--md-sys-color-on-tertiary-container:#b1b1b1;--md-sys-color-error:#ba1a1a;--md-sys-color-on-error:#ffffff;--md-sys-color-error-container:#ffdad6;--md-sys-color-on-error-container:#410002;}

  @media (prefers-color-scheme: dark) {
    :root,:host{--md-sys-color-background:#131313;--md-sys-color-on-background:#e2e2e2;--md-sys-color-surface:#131313;--md-sys-color-surface-dim:#131313;--md-sys-color-surface-bright:#393939;--md-sys-color-surface-container-lowest:#0e0e0e;--md-sys-color-surface-container-low:#1b1b1b;--md-sys-color-surface-container:#1f1f1f;--md-sys-color-surface-container-high:#2a2a2a;--md-sys-color-surface-container-highest:#353535;--md-sys-color-on-surface:#e2e2e2;--md-sys-color-surface-variant:#4c4546;--md-sys-color-on-surface-variant:#cfc4c5;--md-sys-color-inverse-surface:#e2e2e2;--md-sys-color-inverse-on-surface:#303030;--md-sys-color-outline:#988e90;--md-sys-color-outline-variant:#4c4546;--md-sys-color-shadow:#000000;--md-sys-color-scrim:#000000;--md-sys-color-surface-tint:#c6c6c6;--md-sys-color-primary:#c6c6c6;--md-sys-color-on-primary:#303030;--md-sys-color-primary-container:#000000;--md-sys-color-on-primary-container:#969696;--md-sys-color-inverse-primary:#5e5e5e;--md-sys-color-secondary:#c6c6c6;--md-sys-color-on-secondary:#303030;--md-sys-color-secondary-container:#3d3d3d;--md-sys-color-on-secondary-container:#d1d1d1;--md-sys-color-tertiary:#c6c6c6;--md-sys-color-on-tertiary:#303030;--md-sys-color-tertiary-container:#000000;--md-sys-color-on-tertiary-container:#969696;--md-sys-color-error:#ffb4ab;--md-sys-color-on-error:#690005;--md-sys-color-error-container:#93000a;--md-sys-color-on-error-container:#ffdad6;}
  }
</style>

Now, when you save and view your post, it should adapt to the color you chose previously. If you want, you can now format this code with a tool like Prettier, but this is completely optional.

Headings

Second, when using headings in your post, they should start with a second-level heading, i. e. ## Hello, world!. This is because the top-level heading is reserved for the post's title, which Blot applies special styles to.

Introductions

Finally, the content of all posts should follow this format:

An introductory paragraph.

---

The rest of the post.

This is because, similar to the title, Blot applies some special formatting to the first paragraph, making it stand out from the rest. I usually just use the contents of the post's meta_description attribute for this purpose.