Decoration

site/assets/chloe.css

@@ -32,6 +32,9 @@
     --background-color: #000000;
     --text-color: #FFFFFF;
     --text-color-dim: #C0C0C0;
+    --red: #C00000;
+    --green: #00C000;
+    --blue: #0000C0;
 }
 
 .mobile-only {
@@ -86,9 +89,30 @@ a {
     padding: 0.5em;
 }
 
+.body {
+    margin-top: 1em;
+}
+
 .section .descriptor {
     font-size: 1.5em;
     font-weight: bold;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.5em;
+}
+
+.section .descriptor > * {
+    flex-grow: 0;
+}
+
+.section .descriptor .decoration {
+    flex-grow: 1;
+    height: 0px;
+    border-top: 1px solid var(--text-color);
+    position: relative;
+    top: 1px;
 }
 
 .section .block {
@@ -213,4 +237,16 @@ ul.spaced li {
     .print-hide {
         display: none;
     }
+
+    .section .descriptor .decoration.red {
+        border-top: 2px solid var(--red);
+    }
+    
+    .section .descriptor .decoration.green {
+        border-top: 2px solid var(--green);
+    }
+    
+    .section .descriptor .decoration.blue {
+        border-top: 2px solid var(--blue);
+    }
 }

site/index.html

@@ -182,8 +182,11 @@
             <div class="body">
                 <div class="section professional-experience">
                     <div class="descriptor">
+                        <div>
                             Professional Experience
                         </div>
+                        <div class="decoration red"></div>
+                    </div>
                     <div class="block experience">
                         <div class="content">
                             <ul class="spaced">
@@ -211,8 +214,11 @@
                 </div>
                 <div class="section proficiencies">
                     <div class="descriptor">
+                        <div>
                             Key Technologies
                         </div>
+                        <div class="decoration green"></div>
+                    </div>
                     <div class="block languages">
                         <div class="item">
                             <span>C#</span>
@@ -250,8 +256,11 @@
                 </div>
                 <div class="section work-history">
                     <div class="descriptor">
+                        <div>
                             Work & Education
                         </div>
+                        <div class="decoration blue"></div>
+                    </div>
                     <div class="block safelite sidebar">
                         <div class="title">
                             Safelite Group, Inc.
@@ -279,8 +288,11 @@
                 </div>
                 <div class="section projects print-hide">
                     <div class="descriptor">
+                        <div>
                             Personal Projects
                         </div>
+                        <div class="decoration"></div>
+                    </div>
                     <div class="block intro">
                         <div class="content">
                             I love to tinker with a number of small, self-hosted side projects, including this site! I manage them via