Merge pull request #36 from Hyper-Unearthing/feat/improve-blog-text

feat: improve legability of blogs

Author: billybonks

_posts/2025-08-14-commits.md

@@ -28,10 +28,10 @@ This makes it easy to understand when looking at the history what are the exact
 ### Tagging commits
 
 By tagging it means using part of your allocated summary to encode information into your commit message. for example:
-- refactor: Changes the code but does not change any behaviour, no tests should be affected
-- fix: Changes a unintended behaviour
-- feat: Adds net new behaviour to the system
-- cicd: only updates build and tests pipelines
+- **refactor**: Changes the code but does not change any behaviour, no tests should be affected
+- **fix**: Changes a unintended behaviour
+- **feat**: Adds net new behaviour to the system
+- **cicd**: only updates build and tests pipelines
 
 This makes it easy to see in the past month what kinds of activities did we perform, it also gives reviewers context what code to expect in a commit.
 
@@ -43,26 +43,29 @@ The description of a commit message should encapsulate your thoughts around what
 
 Some examples of good content for history:
 
-1. How the code can be improved
-2. Any challenges you encountered while writing the code
-3. What were the reasons why you coded it this way
+- How the code can be improved
+- Any challenges you encountered while writing the code
+- What were the reasons why you coded it this way
 
 ## Consistent Format
 
 Just as we apply style guides to our codebase, commits should follow a consistent format. As long as the content is meaningful, the format does not really matter. For example:
 
-```
-summary < 50 chars
-description < 72 chars (per line)
-type of change: Enum(refact, fix, feat, cicd, burn)
 
-<type of change>: <summary>
 
-<description>
-```
+- summary < 50 chars
+- description < 72 chars (per line)
+- type of change: Enum(refact, fix, feat, cicd, burn)
+
+> &lt;type of change&gt;: &lt;summary&gt;
+<br />
+<br />
+&lt;description&gt;
+
 
 Here are two examples of recent commits.
-```
+
+{% highlight ruby %}
 commit 6ad486c23b634f448feecda54eb976d38c401b80
 Author: billybonks <sebastienstettler@gmail.com>
 Date:   Wed Aug 13 16:16:30 2025 +0800
@@ -72,9 +75,9 @@ Date:   Wed Aug 13 16:16:30 2025 +0800
     the css is kinda yolo and not the best can change :D!
     does not handle the case where you can label both elements because it
     requires a bunch more work. specifically how forms are made
-```
+{% endhighlight %}
 
-```
+{% highlight ruby %}
 commit e341fa8b2827994af2c57bdb1e1744c134c9befe
 Author: billybonks <sebastienstettler@gmail.com>
 Date:   Wed Aug 13 00:25:27 2025 +0800
@@ -83,4 +86,4 @@ Date:   Wed Aug 13 00:25:27 2025 +0800
 
     we will be deleting all the vega code in favour of the backend aggregation
     but this code is still required
-```
+{% endhighlight %}

assets/components/posts.css

@@ -1,11 +1,11 @@
 .post-container {
-  display: flex;
-  justify-content: center;
-  padding: 20px;
+    display: flex;
+    justify-content: center;
+    padding: 20px;
 }
 
 .post {
-  max-width: 860px;
+    max-width: 860px;
 }
 
 .post h1,
@@ -14,9 +14,47 @@
 .post h4,
 .post h5,
 .post h6 {
-  margin-bottom: 20px;
 }
 
-.post p {
-  margin-bottom: 10px;
+.post strong {
+    font-weight: 600;
+}
+.post p,
+.post ul,
+.post ol {
+    margin-bottom: 20px;
+    color: #cfcbea;
+}
+
+.post ul {
+    background-color: #292453;
+    color: #8eb7e3;
+    border-radius: 3px;
+    padding: 10px;
+}
+
+.post li {
+    margin-bottom: auto;
+}
+
+.post h1 {
+    margin-bottom: 15px;
+}
+
+.post h2,
+.post h3 {
+    font-size: var(--h2-font-size);
+    text-transform: none;
+    margin: 50px 0 15px 0;
+}
+.post .highlight,
+.post blockquote {
+    background-color: #1e2e5b;
+    border-left: 10px #8ebfe3 solid;
+    color: #8ebfe3;
+    border-radius: 3px;
+    padding: 20px;
+    font-size: 17px;
+    line-height: initial;
+    margin-bottom: 20px;
 }