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 :)