Added badges to changelog

src/components/common/features.css

@@ -1,5 +1,5 @@
-.feature,
-.feature button {
+.feature:not(li),
+.feature:not(li) button {
     position: relative;
     padding: 5px;
     border-radius: var(--border-radius);

src/data/Changelog.vue

@@ -8,9 +8,10 @@
                 <summary>v0.0 Initial Commit - <time>2021-09-04</time></summary>
                 This is the first release :D
                 <ul>
-                    <li>Did everything</li>
-                    <li>Had some fun</li>
-                    <li>Created some bugs to fix later</li>
+                    <li class="feature">Did everything</li>
+                    <li class="fix">Had some fun</li>
+                    <li class="breaking">Removed everything</li>
+                    <li class="balancing">Created some bugs to fix later</li>
                 </ul>
             </details>
         </template>
@@ -48,4 +49,34 @@ ul {
     padding: 5px 5px 5px 15px;
     list-style: inside;
 }
+
+li {
+    margin: 8px 0;
+}
+
+li::before {
+    padding: 2px 8px;
+    margin-right: 8px;
+    border-radius: var(--border-radius);
+}
+
+.feature::before {
+    content: "Feature";
+    background: var(--accent1);
+}
+
+.fix::before {
+    content: "Fix";
+    background: var(--accent2);
+}
+
+.balancing::before {
+    content: "Balancing";
+    background: var(--accent3);
+}
+
+.breaking::before {
+    content: "Breaking";
+    background: var(--danger);
+}
 </style>

src/data/themes.ts

@@ -14,6 +14,9 @@ const defaultTheme: Theme = {
         "--danger": "rgb(220, 53, 69)",
         "--link": "#02f2f2",
         "--outline": "#dfdfdf",
+        "--accent1": "#627a82",
+        "--accent2": "#658262",
+        "--accent3": "#7c6282",
 
         "--border-radius": "15px",
         "--modal-border": "solid 2px var(--color)",
@@ -65,6 +68,9 @@ export default {
             "--danger": "#D08770",
             "--link": "#88C0D0",
             "--outline": "#3B4252",
+            "--accent1": "#B48EAD",
+            "--accent2": "#A3BE8C",
+            "--accent3": "#EBCB8B",
             "--border-radius": "4px",
             "--modal-border": "solid 2px #3B4252",
             "--feature-margin": "5px"

src/typings/theme.d.ts

@@ -12,6 +12,9 @@ export interface Theme {
         "--danger": string;
         "--link": string;
         "--outline": string;
+        "--accent1": string;
+        "--accent2": string;
+        "--accent3": string;
         "--border-radius": string;
         "--modal-border": string;
         "--feature-margin": string;