Style the skills section

1 files changed, 30 insertions, 1 deletions

diff --git a/app/base.styl b/app/base.styl
index 1dd9cd7..43be22d 100644
--- a/app/base.styl
+++ b/app/base.styl
@@ -1,3 +1,5 @@
+secondaryColor = #DB0A16
+
 @media (prefers-color-scheme: dark) {
   html {
     color: #FFFFFF
@@ -30,7 +32,7 @@ main {
 a:link, a:visited, a:hover, a:active {
   text-decoration: none
   color: inherit
-  border-bottom: 1px solid #DB0A16
+  border-bottom: 1px solid secondaryColor
 }
 
 // Header section styling
@@ -89,3 +91,30 @@ article {
     margin-top: 2.5em
   }
 }
+
+.skills {
+  dl {
+    display: flex
+    flex-flow: row wrap
+    // justify-content: space-between;
+  }
+
+  dt {
+    min-width: 15%
+    font-weight: 900
+    text-align: right
+    @media screen and (max-width: 740px) {
+      text-align: left
+    }
+  }
+
+  dd {
+    width: 80%
+    margin-left: 30px
+    margin-bottom: 0.1em
+    @media screen and (max-width: 740px) {
+      margin-bottom: 1em
+      width: 100%
+    }
+  }
+}