52. The blog basically got a face lift and a bbl
To celebrate me hitting over 50 posts, I decided to revamp the site. I didn't realize how customizable it can be. I really like the markdown syntax and formatting on here. It really makes me focus on my writing.
I felt like I wanted to change up the interface because it was really bugging me. It was probably fine before, but I think it looks much much better now.
So after basically giving my blog a face lift and a bbl, I think I got a lot more people noticing her heheheh. Not that garnering attention is a goal of mine, but I think it's really cool to see that people are reading my stuff! As you can see on the stats for [Last Month] (I love stats)- on 3 July, I changed the format of the webpage and a lot of people visited! Nice! Does that mean it's more presentable and stylish? (I'm still a new blog haha. This is amazing!)
Ok- to be honest, I haven't been writing a lot compared to May. I noticed that I have been writing more thoughtfully and better these days, so I think I just needed a break and to catch my breath. It's difficult to write something!
Anyway, I'm super impressed with how it turned out.
Updates to the blog
I wanted to share the behind the scenes of what I really did :D Maybe it's helpful? I am simply a beginner and I think it is good to document my journey.
(All I really did was changed some of the fonts and the colors and implemented a lot of stuff lol)
- Dark mode enabled (shown below as the
@media (prefers-color-scheme: dark))
:root {
--width: 720px;
--font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
--font-secondary: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
--font-scale: .9em;
--background-color: #fff;
--heading-color: #232333;
--text-color: #232333;
--link-color: #232333;
--visited-color: #232333;
--main-color: #ea9999;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
}
--
I added a blog neighbors section because I gotta honor the Day 1's and the blogs I really admire.
Basically I manually wrote out my posts as a list in this page and whenever I write a new post, I just replace and add the new link. Something like this:
# 🆕 Latest Posts
- 04 Jul, 2023: [**51. On being independent**](tab:https://exponixio.bearblog.dev/on-being-independent/)
- 03 Jul, 2023: [**50. [OOMFH] Movies: Top 10 Favorites**](tab:https://exponixio.bearblog.dev/oomfh-movies-top-10-favorites/)
- 02 Jul, 2023: [**49. Can you change your personality?**](tab:https://exponixio.bearblog.dev/can-you-change-your-personality/)
- 01 Jul, 2023: [**48. Tour de France: au coeur du Peloton (fr)**](tab:https://exponixio.bearblog.dev/tour-de-france-au-coeur-du-peloton-fr/)
- 30 Jun, 2023: [**47. [Monthly Wrap-Up] Media Diary #2 - June 2023**](tab:https://exponixio.bearblog.dev/monthly-wrap-up-media-diary-2-june-2023/)
--
- Edited the "Toast this post" function
/* Reset */
button {
background: unset;
border: unset;
cursor: pointer;
font-family: sans-serif;
}
/* Toast button */
.upvote-button {
align-items: center;
color: #000 !important;
display: grid !important;
grid-template-areas:
'emoji label'
'count ...';
flex-direction: column;
gap: 0 4px;
}
.upvote-button svg {
display: none;
}
.upvote-button::before {
content: '💓';
display: block;
font-size: 32px;
grid-area: emoji;
margin-left: 4px;
}
.upvote-button:hover::before {
content: '💓';
}
.upvote-button.upvoted:hover::before {
content: '💗';
}
.upvote-button::after {
display: 'Liked!';
grid-area: label;
}
.upvote-button:hover::after {
content: 'Like this post';
display: block;
}
.upvote-button.upvoted:hover::after {
content: 'Liked!';
display: block;
}
.upvote-count {
color: #000 !important;
font-size: unset;
grid-area: count;
margin-top: 0 !important;
}
}
Sometimes I share some of my blog posts to my close friends and family who are not familiar with the Bear Blog interface and community, so I wanted to change this feature from the old upvote (it was a [^] button) into a 'Like this post' thing because it's easier haha.
I got this from The Functioning Blog from the Customising the Bear upvote button blog post and Hannes from his blog post, Use the old toast button in Bearblog . Thank you so much for your help!
--
- Added some translations
Ok so far, I've only written it out in French 🇫🇷. I'll come around add the other translations later... I do it manually so it's going to take some time 😔
I decided to add a few more sections on my blog and add some translations on homepage (I can only write in french, spanish, and japanese with some limited vocabulary. I try to write it out as basically as possible, but I still have to look up a few words and grammar because I don't have a very good command of my target languages yet but I'm learning as much as I possibly can...)
Please let me know if my translations are correct of if my code-writing needs a little more work. (Like if I need to write things more concisely.) I've only written in HTML on my old tumblr blog a decade ago and I'm still learning how to properly write code.
You can reach me at
exponixio@gmail.com
~ a budding web developer?
<3 K