Styling styling styling

styles/Blog/AboutMe.module.scss

@@ -14,7 +14,7 @@
         border-radius: 0.5em;
         height: 100%;
         position: absolute;
-        background: var(--blog_color-accent);
+        background: var(--bar-color, var(--blog_color-accent));
         animation: barFill 2s ease-in-out;
         animation-fill-mode: forwards;
     }
@@ -23,6 +23,18 @@
 .badgeSet {
     display: flex;
     flex-direction: row;
+    margin-top: 10px;
+}
+
+.achievement {
+    display: grid;
+    grid-template-columns: 2em auto;
+    column-gap: 10px;
+    padding: 5px;
+
+    & > span:first-of-type {
+        height: 2em;
+    }
 }
 
 .badge {
@@ -32,6 +44,14 @@
     border: 1px solid var(--blog_content-border);
     border-radius: 0.5em;
     padding: 5px;
+
+    & > span {
+        align-self: center;
+    }
+
+    & > span:first-of-type {
+        height: 1em;
+    }
 }
 
 @keyframes barFill {
@@ -41,4 +61,55 @@
     100% {
         width: var(--barPct);
     }
+}
+
+.skillCard {
+    padding: 10px;
+    border: 1px solid var(--blog_content-border);
+    border-radius: 0.5em;
+
+    margin-bottom: 20px;
+
+    h3 {
+        margin: 0;
+        color: var(--ch-color) !important;
+    }
+
+    &:last-of-type {
+        margin-bottom: 0;
+    }
+
+    &.useDarkColor {
+        color: #222;
+    }
+    &.useLightColor {
+        color: #ddd;
+    }
+}
+
+.skillBar {
+    display: grid;
+    grid-template-columns: 2em auto;
+    column-gap: 10px;
+    padding: 10px;
+    margin: 10px 0;
+
+    & > div {
+        align-self: center;
+    }
+
+    & > div:first-of-type {
+        height: 2em;
+        grid-row: 1/3;
+    }
+
+    & > div:nth-of-type(3) {
+        text-align: center;
+        margin-top: -5px;
+        font-size: small;
+    }
+
+    &:last-of-type {
+        margin-bottom: 0;
+    }
 }