my blog design code

01 Dec, 2024

Last updated January 2026!

My blog design is a work across months, editing here and there, adding new things, removing some and trying stuff out. That meant it looked ugly, was disorganized and some parts were redundant. Editing it was unnecessarily time-consuming because everything was all over the place. The typical trap of “I’ll fix it later!”. Well, I fixed it now.

I’ve shared my keyframe animation separately in the past, but maybe some people are interested in different things or the entire look (a nice variation of it can be seen at Divaltor) [Edit: He switched themes since then!]. So I changed the following:

Better order of things, better structure and visually easier to navigate.
Defined values in root up top so if you wanna change color or other things, you can do it right at the top without having to scroll and dig and guess.
Some comments to signify what the next block does.
Removed redundant code, summarized some things.
Finally fixed my broken upvote emoji.
Made code blocks in blog posts look a tiny bit better; the color presets are awful, but I didn't feel like setting them.

I wouldn’t say this is a full on theme, since I am not experienced in making them like Robert or mgx. Mine just modifies existing Bear themes, like the default theme.

If you use some or all of it, would be cool if you linked back to me somewhere. Here it is:

@font-face {
  font-family: "Rubik";
  src: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/avas/rubik-regular.ttf") format("truetype");
  font-weight: 400; 
  font-style: normal;
}

@font-face {
  font-family: "Rubik";
  src: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/avas/rubik-italic.ttf") format("truetype");
  font-weight: 400; /* Normal */
  font-style: italic;
}

@font-face {
  font-family: "Rubik";
  src: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/avas/rubik-light-1.ttf") format("truetype");
  font-weight: 300; /* Light */
  font-style: normal;
}

@font-face {
  font-family: "Rubik";
  src: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/avas/rubik-medium-1.ttf") format("truetype");
  font-weight: 500; /* Medium */
  font-style: normal;
}

@font-face {
  font-family: "Rubik";
  src: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/avas/rubik-bold-1.ttf") format("truetype");
  font-weight: 700; /* Bold */
  font-style: normal;
}

@font-face {
  font-family: "Modak";
  src: url("https://avas.space/blog/fonts/Modak-Regular.ttf") format("truetype");
  font-weight: 700; /* Bold */
  font-style: normal;
}

/* Color Variables */
:root {
  --color-primary-light: #efd9ed;
  --color-secondary-light: #f5f2f5;
  --color-accent-light: #d4bcd2;
  --color-bg-light: #fff;
  --color-text-light: #444;
  --color-link-light: #bea6bc;
  --color-visited-light: #bca9ba;
  --blink-color-light: #e7d5e8; /*Background color for the blinking rectangle behind the letter*/
  --code-bg-light: lightgray;
  
  --color-primary-dark: #82677f;
  --color-secondary-dark: #1a1840;
  --color-accent-dark: #967d94;
  --color-bg-dark: #17153B;
  --color-text-dark: #E2E6F0;
  --color-link-dark: #efd9eb;
  --color-visited-dark: #d1b8cf;
  --blink-color-dark: #bca9ba; /*Background color for the blinking rectangle behind the letter*/
  --code-bg-dark: #f0f0f0;

  --border-radius: 4px;
  --transition-duration: 0.3s;
}

/* General Styles */
body {
  font-family: "Rubik", sans-serif;
  font-weight: medium;
  max-width: 47.5rem;
  margin: 2.5rem auto;
  letter-spacing: 0.015em;
  padding: 0 0.625rem;
  text-wrap: wrap; /* The wrap stuff is written in different ways because support is patchy?*/
  word-wrap: break-word;
  overflow-wrap: break-word;
}

main {
  margin: auto;
  padding: 0 1rem;
}

mark {
  background: var(--color-primary-light);
  border-radius: var(--border-radius);
  padding: 0 3px 0 3px; 
}

/* Text Styles */
p, li {
  font-size: 1.2rem;
}

li {
  line-height: 1.8;
}

p {
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* Links */
nav a {
  margin-left: 5px;
  display: inline-block; 
  transition: transform var(--transition-duration) ease;
}

a {
  display: inline-block; 
  transition: transform var(--transition-duration) ease;
}

a:hover, nav a:hover {
  transform: translateY(-1.5px);
  filter: brightness(0.6);
}

/*Custom Post List Stuff for showing meta_description right*/
.chronological ul.embedded.blog-posts li {
    display: flex;
    flex-flow: row wrap;
}

.chronological ul.embedded.blog-posts li {
    display: flex;
    flex-direction: column;
}

.chronological ul.embedded.blog-posts li {
  position: relative;
  padding-bottom: 0.625rem;
}

.chronological ul.embedded.blog-posts li p {
  font-size: 0.875rem;
  font-style: italic;
  color: #484848;
}

.chronological ul.embedded.blog-posts li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;

  background-color: #cfb5c8;
  -webkit-mask-image: url("data:image/svg+xml,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 8'>\
<path d='M0 4 C20 7 40 1 60 4 80 6 100 2 120 5 140 7 160 2 180 4' \
stroke='black' stroke-width='1.3' fill='none'/>\
</svg>");
  mask-image: url("data:image/svg+xml,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 8'>\
<path d='M0 4 C20 7 40 1 60 4 80 6 100 2 120 5 140 7 160 2 180 4' \
stroke='black' stroke-width='1.3' fill='none'/>\
</svg>");

  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

/* Headings */
h1, h2, h3, h4 {
  line-height: 1.2;
  margin-top: 2.5rem;
}

h1 {
  font-family: monospace; /*For some reason, since a little while, it doesn't work anymore if I only specify this for all headings above, so I have to do this for each h individually*/
}

h2 {
  font-size: 2em;
  margin: -0.625rem auto -0.1875rem auto;
  font-family: monospace;
}

.title h1 {
  display: none;
}

/* Preformatted Text */
pre {
  font-size: 0.875rem;
  background-color: var(--code-bg-light);
  border-radius: 10px;
  padding: 1.25rem;
  text-wrap: wrap; 
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Inputs and Textareas */
input, textarea {
  color: var(--color-text-light);
  background-color: #e1dfdf;
  border: 1px solid var(--color-text-light);
}

input[type="file"] {
  background-color: unset;
  border: unset;
}

/* Tables */
.posts-table td {
  padding: 2px;
  border-bottom: 1px solid;
}

td {
  vertical-align: top;
}

/* Blockquotes */
blockquote {
  margin: 0;
  padding: 0 0.9375rem;
  border-left: 0.2em solid;
}

/* Images */
img {
  max-width: 100%;
  margin: auto;
  display: block;
}

.post img {
  border-radius: 15px;
}

#footer-directive img {
  border-radius: 0;
}

/* Time */
time {
  padding: 0 0.3125rem;
  border-radius: 3px;
  background-color: var(--color-primary-light);
  font-size: 0.875rem;
}

.home i {
  padding-right: .5rem;
}

/* Footer */
footer {
  text-align: center;
}

/* Buttons */
button {
  background: unset;
  border: unset;
  cursor: pointer;
  font-family: sans-serif;
}

/* Upvote Button */
.upvote-button {
  display: grid;
  grid-template-areas: 'emoji label' 'count ...';
  align-items: center;
  gap: 0 4px;
  color: black;
}

/*Toast button stuff*/
.upvote-button svg {
  display: none;
}

.upvote-button::before {
    content: "🩷";
  	display: block;
  	font-size: 20px;
    cursor: pointer;
  	margin-bottom: 4px;
}
.upvote-button:hover::before {
    content: "💕";
    cursor: pointer;
}
.upvote-button[disabled]::before {
    content: "💞";
    cursor: default;
}

.upvote-button::after {
  display: none;
  grid-area: label;
}

.upvote-button:hover::after {
  content: 'Love this post';
  display: block;
}

.upvote-button.upvoted:hover::after {
  content: 'Loved!';
  display: block;
}

.upvote-count {
  grid-area: count; 
  margin-top: 0;
  color: var(--color-text-light);
}

/* Timeline by birming.com, modified */
.timeline {
  margin: 1.875rem 0;
}

.timeline ul {
  padding-left: 0;
  margin: 0;
}

.timeline li {
  list-style: none;
  margin-bottom: 1.5625rem;
  padding: 2.5rem 1.25rem 1.25rem;
  background: var(--color-bg-light);
  border: 5px solid var(--color-secondary-light);
  box-sizing: border-box;
  position: relative;
}

.timeline h4 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  line-height: 40px;
  margin: 0;
  padding: 0 15px;
  font-family: monospace;
  letter-spacing: 1px;
  background: var(--color-accent-light);
  color: white;
  box-sizing: border-box;
  text-align: left;
}

.timeline li h4::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  height: 10px;
  width: 10px;
  background: var(--blink-color-light);
  border-radius: 20%;
  box-shadow:
    -15px 0 var(--color-primary-light),
    -30px 0 white;
}

/* Dotted postlists by Sylvia departure.blog, modified; currently unused 
.home ul.blog-posts {
  padding: unset;
} 
.home ul.blog-posts > li {
  display: flex;
  justify-content: space-between;
  margin: 0.5em 0;
  border-bottom: 1px dashed var(--color-text-light);
}

.home ul.blog-posts > li > span + a,
.home ul.blog-posts > li > span:has(> i time) {
  margin-bottom: -8px; 
  background-color: var(--color-bg-light);
}
.home ul.blog-posts > li > span:has(> i time) {
  white-space: nowrap;
  padding-left: .3em;
}
.home ul.blog-posts > li > span + a {
  padding-right: .3em;
}*/

/* Announcement bar by birming.com modified */
.bar {
  margin: 20px 0;
  padding: 15px;
  text-align: center;
  font-size: .9em;
  font-weight: 400;
  text-shadow: 1px 2px 4px rgba(0,0,0,0.2);
  border: 2px dashed #e7d5e8;
  border-radius: 10px;
}
.bar a {
  margin: 0;
  padding: 0;
  font-size: inherit;
}

/* Testimonials by bearming.com modified*/
.testimonials {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1.25rem;
  column-gap: 1.25rem;
  margin: 1.875rem 0;
  font-size: .9em;
}
.testimonials blockquote {
  width: 310px;
  margin: 0;
  border: 2px solid var(--color-link-light);
  border-radius: 10px;
}
.testimonials p {
 display: flex;
 flex-direction: column;
 margin: 0;
}
.testimonials p::before {
  position: relative;
  margin: 0 0 -15px;
  content: "\275E";
  font-size: 3em;
  text-align: right;
  color: var(--color-link-light);
}
.testimonials strong {
  margin: 0.9375rem 0 1.25rem;
  font-style: normal;
}
.testimonials strong::before {
  margin-right: 8px;
  content: "—";
}

/* Media Queries for lightmode and darkmode*/
@media (prefers-color-scheme: light) {
  body {
    color: var(--color-text-light);
    background: var(--color-bg-light);
  }

  a:link {
    color: var(--color-link-light);
  }

  a:visited, ul.blog-posts li a:visited {
    color: var(--color-visited-light);
  }

  .upvote-button.upvoted {
    color: black;
  }
/* Keyframe animation in my h2 title*/
@keyframes cursor-blink {
            50% {
                content: "a";
                color: var(--color-text-light);
                background: none;
            }

            100% {
                content: "a";
                color: var(--color-text-light);
                background: var(--blink-color-light);
            }
        }

        nav h2::after {
            content: "a";
            color: var(--c);
            height: 30px;
            border-radius: 3px;
            background: var(--blink-color-light);
            display: inline-block;
            animation: cursor-blink 1.0s steps(1) infinite;
}
}

@media (max-width: 600px) {
  body {
    letter-spacing: 0.030em;
  }

  p,
  li {
    line-height: 1.9;
  }
  
  p {
    margin-bottom: 1.8rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --c: white; /* For blinking dark mode */
  }
  
  body {
    color: var(--color-text-dark);
    background: var(--color-bg-dark);
  }

  a:link {
    color: var(--color-link-dark);
  }

  a:visited, ul.blog-posts li a:visited {
    color: var(--color-visited-dark);
  }
  
/* Dotted postlists by Sylvia departure.blog, modified, currently unused
@media (prefers-color-scheme: dark) {
  .home ul.blog-posts > li {
    border-bottom-color: var(--color-text-dark);
  }
  
  .home ul.blog-posts > li > span + a,
  .home ul.blog-posts > li > span:has(> i time) {
    background-color: var(--color-bg-dark);
  }
}
  */
  
  .chronological ul.embedded.blog-posts li p {
  font-size: 14px;
  font-style: italic;
  color: lightgrey;
}
  
.chronological ul.embedded.blog-posts li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background-color: var(--color-link-light);

  -webkit-mask-image: url("data:image/svg+xml,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 8'>\
<path d='M0 4 C20 7 40 1 60 4 80 6 100 2 120 5 140 7 160 2 180 4' \
stroke='black' stroke-width='1.3' fill='none'/>\
</svg>");
  mask-image: url("data:image/svg+xml,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 8'>\
<path d='M0 4 C20 7 40 1 60 4 80 6 100 2 120 5 140 7 160 2 180 4' \
stroke='black' stroke-width='1.3' fill='none'/>\
</svg>");

  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

  input, textarea {
    color: var(--color-text-dark);
    background-color: #222;
    border: 1px solid var(--color-text-dark);
  }

  time {
    color: black;
    background-color: #e7c7e5;
  }
  
  pre {
      background-color: var(--code-bg-dark);
  }
  
  .upvote-count {
    color: var(--color-text-dark); 
  }

  mark {
    background: var(--color-primary-dark);
    color: #f3f4f9;
  }

.timeline li {
  background: var(--color-bg-dark);
  border: 5px solid #211e4a;
}

.timeline h4 {
  background: var(--color-accent-dark);
  color: white;
  box-sizing: border-box;
  text-align: left;
}

.timeline li h4::after {
  background: var(--blink-color-dark);
  box-shadow:
    -15px 0 var(--color-visited-dark),
    -30px 0 var(--color-primary-dark);
}
  
@media (max-width: 600px) and (prefers-color-scheme: dark) {
  body {
    color: #D6DBE8;
  }
}
  
/* Keyframe animation in my h2 title*/
@keyframes cursor-blink {
            50% {
                content: "a";
                color: var(--color-text-dark);
                background: none;
            }

            100% {
                content: "a";
                color: var(--color-text-dark);
                background: var(--blink-color-dark);
            }
        }

        nav h2::after {
            content: "a";
            color: var(--color-text-dark);
            height: 30px;
            border-radius: 3px;
            background: var(--blink-color-dark);
            display: inline-block;
            animation: cursor-blink 1.0s steps(1) infinite;
}
}
}

I've looked at it so much now after working on it for a few hours that I feel like I'm now blind to anything weird. If anything looks off, message me.

If you want to see more people who shared and commented their code, check out sylvia.

Have fun, Ava

Published 01 Dec, 2024

#2024 #webdev