Style the skills section

2 files changed, 49 insertions, 8 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%
+    }
+  }
+}
diff --git a/app/print.styl b/app/print.styl
index 331d791..0ef1da5 100644
--- a/app/print.styl
+++ b/app/print.styl
@@ -2,18 +2,18 @@
   margin: 1cm 1.5cm
 }
 
-main {
+body {
   margin-left: 0
   margin-right: 0
+  font-size: 9pt
 }
 
 // Header section styling
 header {
-  font-size: 9pt
 
   // Name
   h1 {
-    font-size: 26pt
+    font-size: 27pt
     margin-bottom: 0
   }
 
@@ -24,15 +24,27 @@ header {
   }
 }
 
+article {
+  h1 {
+    font-size: 18pt
+    margin-bottom: -0.5em
+  }
+}
+
 .summary {
   p {
     margin-top: 2em
-    font-size: 10pt
   }
 }
 
-article {
-  h1 {
-    font-size: 18pt
+.skills {
+  dt {
+    min-width: 12%
+  }
+
+  dd {
+    width: 80%
+    margin-left: 20px
+    margin-bottom: 0
   }
 }