Carlos Collazo

Blog Design V 2.1

After pondering whether or not I wanted to add a sidebar to the blog, I've gone ahead and implemented one.

I don't think this constitutes a full redesign—hence calling it V 2.1—but figured I'd write a quick blog talk through the changes and share the CSS.

The only thing new about this theme is the sidebar to the left, and that's only if you're viewing the blog on a desktop or wide screen. On mobile this is exactly the same as the previous theme.

I feel like this makes the site easier to navigate, especially when scrolling down my embedded notes and photos pages. I also just appreciate the way it looks. Blogs like Mighil's and James's pull this off nicely. Both were already inspirations for elements in the V 2.0 theme and are so again for this.

That's basically it. It's a new sidebar. Not much more to say. You can see the full CSS below if you want to replicate anything here.

Toggle to see my blog CSS 
/* ================================
   Carlos Collazo Theme V 2.1
   Black & White Minimal Theme
   with Sidebar Nav (desktop)
   ================================ */

:root {
    --width: 640px;
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", 
      Roboto, Oxygen-Sans, Ubuntu, Cantarell, 
      "Helvetica Neue", Verdana, sans-serif;
    --font-secondary: var(--font-main);
    --font-scale: 1em;
    --background-color: #fafaf8;
    --heading-color: #383e3e;
    --text-color: #3b3b3b;
    --link-color: #3b3b3b;
    --visited-color: #3b3b3b;
    --muted-color: #777777;
    --border-color: #d8d8d8;
    --code-background-color: #ffffff;
    --code-color: #222;
    --blockquote-color: #222;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #24252e;
    --heading-color: #c2c2c2;
    --text-color: #c2c2c2;
    --link-color: #c2c2c2;
    --visited-color: #c2c2c2;
    --muted-color: #666666;
    --border-color: #4e4e4e;
    --code-background-color: #292a35;
    --code-color: #ddd;
    --blockquote-color: #ccc;
  }
}

/* ================================
   Base
   ================================ */

body {
  font-family: var(--font-secondary);
  font-size: var(--font-scale);
  margin: auto;
  padding: 12px;
  max-width: var(--width);
  text-align: left;
  background-color: var(--background-color);
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.45;
  color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main);
  color: var(--heading-color);
  margin-top: 1.2em;
  margin-bottom: 0.4em;
  line-height: 1.25;
}

h1 {
  font-size: 1.5em;
}

p {
  margin-top: 0.4em;
  margin-bottom: 0.8em;
}

a {
  color: var(--link-color);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--border-color);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--text-color);
}

strong, b {
  color: var(--heading-color);
}

button {
  margin: 0;
  cursor: pointer;
}

time {
  font-style: normal;
  font-size: 0.9rem;
  color: var(--muted-color);
}

/* ================================
   Header / Nav — Mobile (default)
   ================================ */

header {
  display: flex;
  align-items: baseline;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 2rem;
}

nav, footer {
  text-transform: lowercase;
}

.title h1 {
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  margin-right: 1rem;
}

nav p {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0;
}

nav p > * {
  margin-right: 1rem;
}

nav a {
  font-size: 1rem;
  color: var(--text-color);
  text-decoration: none;
  text-transform: lowercase;
}

nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--text-color);
}

.title, footer a, nav a {
  text-decoration: none;
  color: inherit;
}

.title:hover {
  text-decoration: none;
}

/* ================================
   Header / Nav — Sidebar (desktop)
   ================================ */

@media (min-width: 769px) {
  body {
    max-width: none;
    margin: 0;
    padding-left: 210px;
    padding-right: 2rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
  }

  header {
    position: fixed;
    left: 0;
    top: 0;
    width: 150px;
    height: 100vh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 3rem 1.25rem;
    border-bottom: none;
    border-right: 1px solid var(--border-color);
    background-color: var(--background-color);
    margin-bottom: 0;
    overflow-y: auto;
    z-index: 100;
  }

  .title h1 {
    margin-right: 0;
    margin-bottom: 1.75rem;
  }
  
  nav, nav a, footer {
  	text-transform: none;
  }

  nav p {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  nav p > * {
    margin-right: 0;
  }

  main, footer {
    max-width: var(--width);
  }
}

/* ================================
   Main content
   ================================ */

main {
  line-height: 1.6;
  margin: 2rem 0 3rem 0;
}

table {
  width: 100%;
}

hr {
  border: 0;
  border-top: 1px solid var(--border-color);
}

img {
  max-width: 100%;
  border-radius: 8px;
}

code {
  font-family: monospace;
  padding: 2px 5px;
  background-color: var(--code-background-color);
  color: var(--code-color);
  border-radius: 3px;
  font-size: 0.875em;
}

blockquote {
  border-left: 1px solid var(--muted-color);
  margin-left: 12px;
  padding-left: 10px;
  color: var(--muted-color);
  font-style: italic;
}

/* ================================
   Footer
   ================================ */

footer {
  padding: 12px 0;
  text-align: center;
  font-size: 0.85em;
  color: var(--muted-color);
  border-top: 1px solid var(--border-color);
  margin-top: 3rem;
}

/* ================================
   Utilities
   ================================ */

.inline {
  width: auto !important;
}

.highlight, .code {
  padding: 1px 15px;
  background-color: var(--code-background-color);
  color: var(--code-color);
  border-radius: 3px;
  margin-block-start: 1em;
  margin-block-end: 1em;
  overflow-x: auto;
}

.footnotes {
  font-size: 0.9em;
}

/* ================================
   Blog post list
   ================================ */

ul.blog-posts {
  list-style-type: none;
  padding: unset;
}

ul.blog-posts li a {
  color: var(--link-color);
}

ul.blog-posts li {
  display: flex;
  margin-bottom: 4px;
  flex-direction: column;
}

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

ul.blog-posts li time {
  color: #666;
}

@media (min-width: 600px) {
  ul.blog-posts li {
    flex-direction: row;
  }
}

ul.blog-posts li span {
  flex: 0 0 auto;
  min-width: 11ch;
}

/* ================================
   Notes Embed Section
   ================================ */

.notes ul.embedded.blog-posts li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
  padding: 0.9em;
  background-color: var(--code-background-color);
  border-radius: 8px;
  margin-top: 0.9em;
  justify-content: space-between;
  align-items: baseline;
  border: 1px solid var(--border-color);
}

.notes ul.embedded.blog-posts li time {
  text-decoration: none;
  color: var(--muted-color);
}

.notes ul.embedded.blog-posts > li div p:first-child {
  margin-top: 0;
}

.notes ul.embedded.blog-posts {
  padding: unset;
}

.notes ul.embedded.blog-posts > li > a {
  visibility: hidden;
  font-size: 0px;
  text-decoration: none;
}

.notes ul.embedded.blog-posts > li > a::after {
  visibility: visible;
  content: "→";
  font-size: 1rem;
}

.notes ul.embedded.blog-posts > li > div {
  flex-basis: 100%;
}

.notes img {
  max-width: 350px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0.1em 0;
}

.notes ul.embedded.blog-posts li {
  flex-wrap: wrap-reverse;
}

.notes ul.embedded.blog-posts li span {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

/* ================================
   Photos Embed Section
   ================================ */

.photos ul.embedded.blog-posts li {
  display: block;
  padding: 0;
  border: none;
}

.photos ul.embedded.blog-posts li a {
  display: block;
  white-space: normal;
}

.photos ul.embedded.blog-posts li time {
  text-decoration: none;
  color: var(--muted-color);
}

.photos ul.embedded.blog-posts li p:has(img) {
  display: block;
}

.photos ul.embedded.blog-posts li p:not(:has(img)) {
  display: none;
}

.photos ul.embedded.blog-posts li p img:not(:first-of-type) {
  display: none !important;
}

/* ================================
   Upvote button
   ================================ */

:is(.post, .page) .upvote-button {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.2rem;
  margin-block: 1rem 0.8rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-color);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  transition: transform 0.15s ease;
}

:is(.post, .page) .upvote-button:hover {
  transform: scale(1.15);
}

:is(.post, .page) .upvote-button svg {
  display: none !important;
}

:is(.post, .page) .upvote-button::before {
  content: "♡";
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text-color);
  transition: color 0.15s ease;
}

:is(.post, .page) .upvote-button .upvote-count {
  display: none !important;
}

:is(.post, .page) .upvote-button:is(.upvoted, [disabled]) {
  cursor: default;
}

:is(.post, .page) .upvote-button:is(.upvoted, [disabled])::before {
  content: "♥";
  color: var(--text-color);
}

:is(.post, .page) .upvote-button:is(.upvoted, [disabled]) .upvote-count {
  color: var(--text-color);
}

:is(.post, .page) .upvote-button:focus-visible {
  outline: 2px solid var(--text-color);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ================================
   Links Page
   ================================ */

.links main > p > a {
  display: block;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-color);
  background-color: var(--code-background-color);
  max-width: 360px;
}

.links main > p > a:hover {
  border-color: var(--text-color);
}

#blogs #meta