monocyte’s blog

blog theme

this is the theme I'm currently using. idk how it works, at this point it is a patchwork of different css snippets and values that I tweaked. it works on my machine™ though. your mileage may vary, proceed with caution.

base theme is from robert and it's called the bearming theme. my status post code is from sylvia and my reply via email code is based on the idea by maira. ava and artemis's blog were huge inspirations as well.

/*
  Name: Bearming
  Version: 2.0
  About: birming.com/bearming
*/

/* Global fonts and sizes */
:root {
  --font-main: system-ui, sans-serif;
  --font-secondary: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --size-mega: 2.5rem;
  --size-macro: 2.1rem;
  --size-larger: 1.8rem;
  --size-large: 1.5rem;
  --size-mid: 1.05rem;;
  --size-small: .9rem;
  --size-smaller: .75rem;
  --size-micro: .5rem;
  --size-nano: .3rem;
}

/* Colors: Light mode */
:root {
  --background-color: #faf4ed;
  --accent-color: #907aa9;
  --text-color: #575279;
  --link-color: #907aa9;
  --visited-color: #907aa9;
  --frontground-color: #fffaf3;
}

/* Colors: Dark mode */
@media (prefers-color-scheme: dark) {
:root {
  --background-color: #191724;
  --accent-color: #c4a7e7;
  --text-color: #e0def4;
  --link-color: #c4a7e7;
  --visited-color: #c4a7e7;
  --frontground-color: #1f1d2e;
  }
}

/* Global resets */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
}

/* Basic styles */
body {
  margin: 15px auto;
  padding: 20px;
  max-width: 660px;
  font-family: var(--font-main);
  font-size: 1.1rem;
  line-height: 1.5;
  text-align: left;
  color: var(--text-color);
  word-wrap: break-word;
  overflow-wrap: break-word;
  background-color: var(--background-color);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  margin: var(--size-large) 0 0;
  font-family: var(--font-main);
  line-height: 1.2;
}
h1 {
  font-size: var(--size-larger);
}

/* Links */
a {
  color: var(--text-color);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 0.2ex;
  text-decoration-color: var(--link-color)
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.3ex;
  text-decoration-color: var(--link-color)
}

/* Form elements */
input, button, textarea, select {
  margin: 0;
  padding: 0;
  font: inherit;
  box-sizing: border-box;
}
label,
legend {
  font-weight: 700;
}
label {
  display: block;
}
legend {
  margin: var(--size-nano) 0 0;
}
input,
textarea {
  margin: 0 0 var(--size-micro);
  padding: var(--size-nano);
  color: var(--text-color);
  font-family: var(--font-secondary);
  border: 2px solid var(--link-color);
  border-radius: var(--size-mid);
  background: var(--frontground-color);
}
input {
  width: 45%;
}
textarea {
  width: 100%;
}
input[type=button], input[type=submit], input[type=reset] {
  margin: 0 0 var(--size-mid);
  padding: var(--size-nano);
  font: inherit;
  font-weight: 700;
  color: var(--background-color);
  border-radius: var(--size-nano);
  background: var(--link-color);
  cursor: pointer;
}
::placeholder {
  color: var(--text-color);
  opacity: 0.5;
}

/* Misc elements */
time {
  font-family: var(--font-main);
  font-size: var(--size-small);
  font-style: normal;
  opacity: 0.7;
}
table {
  width: 100%;
}
hr {
  margin: var(--size-large) 0;
  border: 0;
  border: 1px dashed var(--accent-color);
}
img {
  display: block;
  margin: var(--size-large) 0 var(--size-large);
  max-width: 100%;
  border-radius: var(--size-mid);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
img.badge {
  display: inline;
  border-radius: 0;
  box-shadow: 0;
  margin: 2px 2px 2px 2px;
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  image-rendering: -webkit-optimize-contrast;
  transition: 100ms;
}
img.badge:hover {
        position: relative;
        scale: 1.75;
        transition: 100ms;
}
blockquote {
  margin: var(--size-large) 0;
  padding: var(--size-nano) var(--size-large);
  border-radius: var(--size-mid);
  background: var(--frontground-color);
}
iframe {
  display: block;
  margin: var(--size-mid) 0;
  max-width: 100%;
  border-radius: var(--size-mid);
}

/* Gallery */
.gallery ul  {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px;
  grid-gap: 12px;
  padding: 20px 0;
  list-style: none;
}
.gallery li {
  position: relative;
  flex-basis: calc(50% - 20px);
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Logo */
header h1 {
  display: inline-block;
  margin: 0;
  font-size: var(--size-macro);
  font-weight:800;
  letter-spacing: -.3px
}
header a h1 {
  color: var(--text-color);
  text-decoration: none;
}

/* Navigation */
nav,
nav p {
  margin: var(--size-smaller) 0 0;
  font-family: var(--font-main);
}
nav a {
  display: inline-block;
  margin: 0 var(--size-nano) var(--size-micro) 0;
  padding: var(--size-nano) var(--size-smaller);
  font-size: var(--size-small);
  font-weight: 600;
  color: var(--text-color);
  text-decoration: none;
  background-color: var(--frontground-color);
  border: 2px solid var(--accent-color);
  border-radius: var(--size-smaller);
  cursor: pointer;
}
nav a:hover {
  color: var(--background-color) !important;
  background-color: var(--accent-color);
}

/* Blog list */
.blog-posts {
  margin: var(--size-mega) 0 0;
  padding: 0;
}
.blog-posts li {
  overflow: hidden;
  padding: var(--size-mid) 0;
    border-top: 1px solid rgb(162 156 156 / 13%);
}
.blog-posts a {
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 110px);
  text-decoration: none;
}
.blog-posts a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.3ex;
  text-decoration-color: var(--link-color)
}

.blog-posts time {
  float: right;
  margin: 3px 0 0;
}
.blog-posts li:last-child {
    border-bottom: 1px solid rgb(162 156 156 / 13%);
}

/* Posts */
.post main {
  padding: 0 0 var(--size-large);
}
p time {
  display: block;
}

/* Footer */
footer {
  padding: var(--size-smaller) 0 !important;
  font-family: var(--font-main);
  font-size: var(--size-small);
  text-align: center;
}
footer a {
  text-decoration: none;
}

/* Misc styles */
.inline {
  width: auto !important;
}
  .highlight pre {
  white-space: break-spaces;
}
.code,
.highlight {
  margin: var(--size-mid) 0;
  padding: var(--size-nano) var(--size-mid);
  overflow-x: auto;
  font-size: var(--size-small);
  font-family: var(--font-secondary);
  border-radius: var(--size-mid);
  background-color: var(--frontground-color);
}
p.tags a {
  cursor: pointer;
  border: 2px solid var(--accent-color);
  border-radius: 0.75em;
  padding: 5px 10px; 
  background-color: var(--frontground-color);
  text-decoration: none;
  color: var(--text-color);
  font-size: .9em;
}
p.tags a:hover {
  color: var(--background-color) !important;
  background-color: var(--accent-color);
}

/* Optional additions, safe to remove */

::selection {
	background-color: var(--accent-color);
    color: var(--background-color);
}
  
  /* Timeline */
.timeline {
  margin: 40px 0;
}
.timeline ul {
  padding-left: 20px;
  border-left: 6px solid var(--accent-color);
}
.timeline li {
  margin: 0 0 25px;
  padding: 10px 25px;
  list-style: none;
  background: var(--frontground-color);
  border-radius: var(--size-mid);
}
.timeline h4 {
  position: relative;
  margin: 10px 0 0;
  padding: 8px 15px 6px;
  text-align: center;
  background: var(--frontground-color);
  border: 2px solid var(--accent-color);
  border-radius: var(--size-smaller);
}
.timeline h4::before {
  position: absolute;
  top: 10px;
  left: -57px;
  content: "";
  width: 15px;
  height: 15px;
  border: 5px solid var(--text-color);
  border-radius: 999px;
}

/* Styles for tables */
table {
  font-family: var(--font-main);
  color: var(--background-color);
  text-align: left;
  background-color: var(--text-color);
  border-radius: var(--size-nano);
}
th {
  position: sticky;
  top: 0;
  background-color: var(--text-color);
}
thead th,
tfoot th,
tfoot td {
  padding: var(--size-nano);
}
td {
  padding: var(--size-micro);
  font-family: var(--font-main);
  font-size: var(--size-mid);
  
}

tbody tr:nth-child(odd) {
  background-color: var(--accent-color);
  color: var(--background-color);
  
a {
  color: var(--background-color);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 0.2ex;
  text-decoration-color: var(--background-color)
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.3ex;
  text-decoration-color: var(--background-color)
}
 
}
tbody tr:nth-child(even) {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Style for <figcaption>Image description</figcaption> */
figcaption {
  display: table;
  width: auto; 
  margin: 0 auto var(--size-large);
  padding: var(--size-nano) var(--size-small);
  font-family: var(--font-main);
  font-size: var(--size-smaller);
  color: var(--text-color);
  text-align: center;
  border-radius: var(--size-smaller);
  background: var(--frontground-color);
}

/* Print styles */
@media print {
body {
  color: #000;
  background: #fff;
}
a,
main a {
  color: #000;
  text-decoration: none;
}
blockquote,
code {
  margin: 0;
  padding: 0 1.5em;
  background: #fff;
  border: none;
}
nav,
footer,
.tags,
.upvote-button {
  display: none !important;
}
}

/* Add-ons, available at birming.com/bearming-add-ons/ */

/* reply via email button */
h5 {
  margin-top: 4em;
  margin-bottom: 0;
} 
  
h5 a {
  cursor: pointer;
  border: 2px solid var(--accent-color);
  border-radius: 0.75em;
  padding: 5px 10px; 
  background-color: var(--frontground-color);
  text-decoration: none;
  color: var(--text-color);
}

h5 a:hover {
  color: var(--background-color) !important;
  background-color: var(--accent-color);
}

/* status styling from sylvia */
/* Box containing post content */
.status ul.embedded.blog-posts > li {
  /* Change to match your design */
  background-color: var(--frontground-color); /* Change to match your design */
  border-radius: var(--size-mid);
  margin-top: 1.25em;
  padding: 1.25em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  align-items: baseline; /* This matters when the font sizes for the date and link are different */
}
/* Remove extra space above content */
.status ul.embedded.blog-posts > li div p:first-child {
  margin-top: 0;
}
/* Remove extra space to the left of content */
.status ul.embedded.blog-posts {
  padding: unset;
}
/* Hide title, but not link */
.status ul.embedded.blog-posts > li > a {
  visibility: hidden;
  font-size: 0px;
  text-decoration: none;
}
/* Content that will be visibly linked */
.status ul.embedded.blog-posts > li > a::after {
  visibility: visible;
  content: "—"; /* Select an emoji, symbol, or other short text */
  font-size: 1rem;
  color: var(--link-color);
}
/* Date */
.status ul.embedded.blog-posts > li span:has(> i time) {
}
/* Post body */
.status ul.embedded.blog-posts > li > div {
  flex-basis: 100%;
}

.status ul.blog-posts li div a {
  float: none;
  color: var(--text-color);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 0.2ex;
  text-decoration-color: var(--link-color)
}
.status ul.blog-posts li div a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.3ex;
  text-decoration-color: var(--link-color)
}

/* List styles — include below only if you plan to use lists */
/* Add space after list */
ul.embedded.blog-posts > li div > ul,
ul.embedded.blog-posts > li div > ol {
  margin-bottom: 1em;
}
/* Display as list
Applies to most default Bearblog themes (remove otherwise) */
ul.embedded.blog-posts > li div > ul li,
ul.embedded.blog-posts > li div > ol li {
  display: list-item;
}
/* Adjust bullet styles */
ul.embedded.blog-posts > li div > ul li {
  list-style-type: disc;
}
ul.embedded.blog-posts > li div > ul li ul li {
  list-style-type: circle;
}


/* Unlikely button */
.upvote-button svg,
.upvote-count {
  display: none; 
}
button.upvote-button { 
  display: block !important;
  margin: 25px 0 5px;
  padding: 4px 9px;
  font-size: .9em;
  font-weight: bold;
  color: var(--text-color);
  background-color: var(--frontground-color);
  border: 2px solid var(--accent-color);
  border-radius: var(--size-smaller);
  cursor: pointer;
}
.upvote-button::before {
  content: "🍞 ";
}
.upvote-button::after {
  content: "toast me!";
}
.upvote-button[disabled]::before {
  content: "🥐 ";
}
.upvote-button[disabled]::after {
  content: "thanks!";
  cursor: default;
}
.upvote-button.upvoted {
  color: var(--background-color) !important;
  background-color: var(--accent-color);
}
.upvote-button:hover {
  color: var(--background-color) !important;
  background-color: var(--accent-color);
}

/* Highlight active menu item */
.home nav .nav-home a,
.posts nav .nav-posts a,
.status nav .nav-status a,
.guestbook nav .nav-guestbook a,
.about nav .nav-about a,
.feeds nav .nav-feeds a,
.more nav .nav-more a,
.music nav .nav-music a {
  color: var(--background-color);
  background: var(--accent-color);
  cursor: default;
}

/* Avatar */
.title h1::before {
  display: inline-block;
  margin: 0 var(--size-nano) 0) 0;
  content: "";
  background: url("https://i.ibb.co/tT4Kq2yC/mono.png") no-repeat;
  width: 40px;
  height: 40px;
  background-size: 40px;

  /* Square */
  border-radius: var(--size-nano);

dashboard theme

/*
  Name: Bearming
  Version: 2.0
  About: birming.com/bearming
*/

/* Global fonts and sizes */
:root {
  --font-main: system-ui, sans-serif;
  --font-secondary: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --size-mega: 2.5rem;
  --size-macro: 2.1rem;
  --size-larger: 1.8rem;
  --size-large: 1.5rem;
  --size-mid: 1.05rem;;
  --size-small: .9rem;
  --size-smaller: .75rem;
  --size-micro: .5rem;
  --size-nano: .3rem;
}

/* Colors: Light mode */
:root {
  --background-color: #faf4ed;
  --accent-color: #907aa9;
  --text-color: #575279;
  --link-color: #907aa9;
  --visited-color: #907aa9;
  --frontground-color: #fffaf3;
}

/* Colors: Dark mode */
@media (prefers-color-scheme: dark) {
:root {
  --background-color: #191724;
  --accent-color: #c4a7e7;
  --text-color: #e0def4;
  --link-color: #c4a7e7;
  --visited-color: #c4a7e7;
  --frontground-color: #1f1d2e;
  }
}

/* Global resets */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
}

/* Basic styles */
body {
  margin: 15px auto;
  padding: 20px;
  max-width: 660px;
  font-family: var(--font-main);
  font-size: 1.1em;
  line-height: 1.5;
  text-align: left;
  color: var(--text-color);
  word-wrap: break-word;
  overflow-wrap: break-word;
  background-color: var(--background-color);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  margin: var(--size-large) 0 0;
  font-family: var(--font-main);
  line-height: 1.2;
}
h1 {
  font-size: var(--size-larger);
}

/* Links */
a {
  color: var(--text-color);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 0.2ex;
  text-decoration-color: var(--link-color)
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.3ex;
  text-decoration-color: var(--link-color)
}

/* Form elements */
    input,
    textarea,
    select,
    #header_content {
        margin: 2px 0 3px 0;
        padding: 4px 8px 4px 6px;
        font-family: var(--font-secondary);
        box-sizing: border-box;
        background: var(--frontground-color);
        border: 2px solid var(--link-color);
        border-radius: var(--size-mid);
    }
    legend {
        margin: 20px 0;
        font-weight: bold;
    }
    label {
        display: block;
        font-weight: bold;
    }
    input,
    textarea {
        margin: 0 0 10px;
        padding: 5px 10px;
        color: var(--text-color);
        background: var(--frontground-color);
    }
    input {
        width: 55%;
    }
    textarea {
        width: 100%;
    }
    #body_content {
        border-top: none;
    }
.full-width textarea, .full-width input:not([type="submit"], [type="checkbox"], [type="radio"]) {
    width: 100% !important;
}
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    input[type="email"],
    input[type="text"] {
        margin: 0 0 20px;
        padding: 7px;
        font-family: var(--font-secondary);
        font-weight: bold;
        background: var(--frontground-color);
        border-radius: var(--size-smaller);
        cursor: pointer;
        text-transform: lowercase;
    }
    ::placeholder,
    #id_title,
    #id_subdomain {
        color: var(--background-color);
        opacity: 0.8;
        text-transform: lowercase;
    }
    button {
       border: 2px solid var(--link-color);
       border-radius: var(--size-micro);
       background-color: var(--link-color);
       color: var(--background-color);
   }
   .sticky-controls {
       background-color: var(--background-color);
   }

/* Misc elements */
time {
  font-family: var(--font-main);
  font-size: var(--size-small);
  font-style: normal;
  opacity: 0.7;
}
hr {
  margin: var(--size-large) 0;
  border: 0;
  border: 1px dashed var(--accent-color);
}
blockquote {
  margin: var(--size-large) 0;
  padding: var(--size-nano) var(--size-large);
  border-radius: var(--size-mid);
  background: var(--frontground-color);
}

/* Logo */
header h1 {
  display: inline-block;
  margin: 0;
  font-size: var(--size-macro);
  font-weight:800;
  letter-spacing: -.3px
}
header a h1 {
  color: var(--text-color);
  text-decoration: none;
}

/* Navigation */
nav,
nav p {
  margin: var(--size-smaller) 0 0;
  font-family: var(--font-main);
}
nav a {
  display: inline-block;
  margin: 0 var(--size-nano) var(--size-micro) 0;
  padding: var(--size-nano) var(--size-smaller);
  font-size: var(--size-small);
  font-weight: 600;
  color: var(--text-color);
  text-decoration: none;
  background-color: var(--frontground-color);
  border: 2px solid var(--accent-color);
  border-radius: var(--size-smaller);
  cursor: pointer;
}
nav a:hover {
  color: var(--background-color) !important;
  background-color: var(--accent-color);
}

/* Post list */
.post-list {
  margin: var(--size-mega) 0 0;
  padding: 0;
}
.post-list li {
  overflow: hidden;
  padding: var(--size-mid) 0;
  border-top: 1px solid rgb(162 156 156 / 13%);
}
.post-list a {
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 110px);
  text-decoration: none;
}

.post-list li:last-child {
    border-bottom: 1px solid rgb(162 156 156 / 13%);
}

/* Footer */
footer {
  padding: var(--size-smaller) 0 !important;
  font-family: var(--font-main);
  font-size: var(--size-small);
  text-align: center;
}
footer a {
  text-decoration: none;
}

.helptext {
  background-color: var(--background-color) !important;
}

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