my blog design code

01 Dec, 2024

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:

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/* 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: #c9b5c7;
  --color-visited-light: #bca9ba;
  --c: #444; /* Light mode color for blinking */
  --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: white;
  --color-link-dark: #efd9ed;
  --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;
  max-width: 800px;
  margin: 40px auto;
  padding: 0 10px;
  text-wrap: wrap; /* The wrap stuff is written in different ways because support is patchy?*/
  word-wrap: break-word;
  overflow-wrap: break-word;
}

mark {
  background: var(--color-primary-light);
  border-radius: var(--border-radius);
}

/* Text Styles */
p, li {
  font-size: 18px;
}

li {
  line-height: 1.8;
}

p {
  line-height: 1.5;
}

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

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

/* Headings */
h1, h2, h3 {
  line-height: 1.2;
  font-family: monospace;
}

h2 {
  font-size: 2em;
}

.title h1 {
  display: none;
}

/* Preformatted Text */
pre {
  font-size: 14px;
  background-color: var(--code-bg-light);
  border-radius: 10px;
  padding: 20px;
  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 15px;
  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 5px;
  border-radius: 3px;
  background-color: var(--color-primary-light);
  font-size: 14px;
}

/* 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: 40px 0;
}

.timeline ul {
  padding-left: 20px;
  border-left: 3px dotted var(--color-primary-light);
}

.timeline li {
  margin-bottom: 25px;
  padding: 10px 25px;
  list-style: none;
  background: var(--color-secondary-light);
  border-radius: 20px;
}

.timeline h4 {
  position: relative;
  margin: 10px 0 0;
  padding: 8px 15px;
  font-family: monospace;
  letter-spacing: 5px;
  text-align: center;
  background: radial-gradient(circle, rgba(224,209,223,1) 23%, rgba(245,242,245,1) 59%);
}

.timeline h4::before {
  content: "❤︎‬";
  position: absolute;
  top: 5px;
  left: -55px;
  color: var(--color-accent-light);
  font-size: 20px;
  transform: rotate(-35deg);
}

/* 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(--c);
                background: none;
            }

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

        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 (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);
  }

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

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

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

  .timeline ul {
    border-left: 3px dotted #d9d4d8;
  }

  .timeline li {
    background: var(--color-secondary-dark);
  }

  .timeline h4 {
    background: radial-gradient(circle, rgba(150,125,148,1) 23%, rgba(31,28,64,1) 59%);
  }

  .timeline h4::before {
    color: var(--color-accent-dark);
  }
/* Keyframe animation in my h2 title*/
@keyframes cursor-blink {
            50% {
                content: "a";
                color: var(--c);
                background: none;
            }

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

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

I also did the same with my microblog code (I deleted it but can be found on the Wayback Machine, will do a redirect soon maybe). While I retired that one, maybe it inspires someone and serves as a visual example. It shows you how to have little posts with a date and an icon. Here you go:

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/* Color values*/
:root {
  --color-text-light: #444;
  --color-bg-light: #fff;
  --color-link-light: #c9b5c7;
  --color-visited-light: #bca9ba;
  --color-accent-light: #efd9ed;
  --timeline-bg-light: #f5f2f5;
  --blink-bg-light: #e7d5e8;

  --color-text-dark: white;
  --color-bg-dark: #444;
  --color-link-dark: #efd9ed;
  --color-visited-dark: #d1b8cf;
  --color-accent-dark: #82677f;
  --timeline-bg-dark: #545454;
  --blink-bg-dark: #82677f;

  --font-family: "Rubik", sans-serif;
  --border-radius: 4px;
  --transition-duration: 0.3s;
}

/* General style */
body {
  font-family: var(--font-family);
  max-width: 800px;
  margin: 40px auto;
  padding: 10px;
  color: var(--color-text-light);
  background: var(--color-bg-light);
  transition: background var(--transition-duration) ease, color var(--transition-duration) ease;
}

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

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

mark {
  background: var(--color-accent-light);
  border-radius: var(--border-radius);
}

time {
  padding: 0 5px;
  border-radius: var(--border-radius);
  background-color: var(--color-accent-light);
  font-size: 14px;
}

p, li {
  font-size: 18px;
}

li {
  line-height: 1.8;
}

p {
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: monospace;
  line-height: 1.2;
}

h2 {
  font-size: 2em;
}

h3 {
  margin-top: 50px;
  text-align: center;
}

pre {
  font-family: sans-serif;
  font-size: inherit;
  line-height: inherit;
  overflow-x: auto;
}

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

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

blockquote {
  margin: 0;
  padding: 0 15px;
  border-left: 0.2em solid;
}

.post img, main img {
  max-width: 100%;
  margin: auto;
  display: block;
  border-radius: 15px;
}

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

footer {
  text-align: center;
}

/* Hiding things*/
.title h1, nav, .tags, ul.embedded.blog-posts span, ul.embedded.blog-posts li > a, ul.embedded.blog-posts title {
  display: none;
}

ul.embedded.blog-posts li > div a {
  display: inline;
}

ul.embedded.blog-posts li {
  list-style: none;
}

/* Timeline */
.timeline {
  margin: 40px 0;
}

.timeline ul {
  padding-left: 20px;
}

.timeline li {
  margin: 0 0 25px;
  padding: 20px 25px;
  list-style: none;
  background: var(--timeline-bg-light);
  border-radius: 20px;
}

.timeline h4 {
  position: relative;
  margin: 10px 10px 0;
  padding: 8px 5px;
  font-family: monospace;
  line-height: 1.0;
  letter-spacing: 5px;
  text-align: left;
}

.timeline h4::before {
  content: '';
  position: absolute;
  top: -15px;
  left: -110px;
  width: 60px;
  height: 60px;
  background-image: url('insert your icon url here');
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  border: 2px solid #e1e1e1;
  border-radius: 10px;
}

/* Keyframes for Cursor Blink */
@keyframes cursor-blink {
  50% {
    content: "g";
    color: var(--c);
    background: none;
  }
  100% {
    content: "g";
    color: white;
    background: var(--blink-bg-light);
  }
}

h2::after {
  content: "g";
  color: white;
  height: 30px;
  border-radius: var(--border-radius);
  background: var(--blink-bg-light);
  display: inline-block;
  animation: cursor-blink 1s steps(1) infinite;
}

/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
  :root {
    --c: white; 
  }
  
  body {
    color: var(--color-text-dark);
    background: var(--color-bg-dark);
  }

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

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

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

  mark {
    background: var(--color-accent-dark);
    color: var(--color-text-dark);
  }

  time {
    color: black;
  }

  .timeline li {
    background: var(--timeline-bg-dark);
  }

  .timeline h4::before {
    border: 2px solid #555;
  }

  h2::after {
    background: var(--blink-bg-dark);
  }
}

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