hanki.dev

New blog design

So far I've only posted short TIL posts here. Lately I've been thinking that I want to also also post longer, more thought out posts so I made a change: instead of calling this site 'Today I learned' log, I'll just call it a blog. Even though most of the posts will still likely be short TIL-like posts, it gives me the freedom to post whatever I like :)

I've got some case study ideas I wanna do, and hopefully I get around doing them soon before I lose interest in them. I also changed the site UI drastically. Bear Blog allows you to use your custom stylesheet so I used sakura-vader with some slight modifications which are listed below. Thought I have to give credit to Atur since I basically copied the UI from him 😅

Here are my custom styles in addition to sakura-vader:

/* Page heading */
a.title h1 {
  color: #eee;
  text-shadow: 1px 1px 0 #eb99a1, 2px 2px 0 #eb99a1, 3px 3px 0 #eb99a1, 4px 4px 0 #eb99a1, 5px 5px 0 #eb99a1, 6px 6px 0 #eb99a1, 7px 7px 0 #eb99a1, 8px 8px 0 #eb99a1, 9px 9px 0 #eb99a1, 10px 10px 0 #eb99a1;
  font-size: 2em;
}

/* Space between navigation links */
nav p a {
  margin-right: 12px;
}

/* Remove /blog list bullet points */
ul {
  list-style: none;
  padding: 0;
}

/* Make post release date fixed width so it doesn't look stupid */
li span i time {
  width: 128px;
  max-width: 128px;
  display: inline-block;
}

/* Give the footer some breathing space (same as between list and tags) */
footer {
  margin-top: 2.5rem;
}

/* Toast button hover effect */
button {
  transition: all 0.2s;
}
button:hover {
  border-radius: 12px;
}

/* Make blog post list responsive */
@media screen and (max-width: 600px) {

  ul.blog-posts li span i time { 
    display: block;
  }

  ul.blog-posts li a {
    margin-bottom: 40px;
  }

}

I've probably made some changes after this post, if you want my current custom styles just right-click this page → View page source → check <style> tags

I also did some magic to fix the code block syntax coloring, but I'll make seperate blog post on that :)

#meta

- 23 toasts