Resume style adjustment

3 files changed, 80 insertions, 51 deletions

diff --git a/layouts/shortcodes/resume-entry.html b/layouts/shortcodes/resume-entry.html
index 008311a..eeac024 100644
--- a/layouts/shortcodes/resume-entry.html
+++ b/layouts/shortcodes/resume-entry.html
@@ -4,17 +4,25 @@
     <p class="what">{{ . }}</p>
     {{ end }}
 
-    <!-- Where was the thing you did? (e.g. Mozilla) -->
-    {{ with .Get "where" }}
-    <p class="where">{{ . }}</p>
-    {{ end }}
+    {{ $where := false }}
+    {{ $when := false }}
+
+    {{/* Where was the thing you did? (e.g. Mozilla) */}}
+    {{ with .Get "where" }}{{ $where = . }}{{ end }}
+
+    {{/* When did you do it? (e.g. 2020) */}}
+    {{- with .Get "when" }}{{ $when = . }}{{ end }}
 
-    <!-- When did you do it? (e.g. 2020) -->
-    {{ with .Get "when" }}
-    <p class="when">{{ . }}</p>
+    {{ if and $where $when }}
+    <p class="resume-entry-data"><span class="where">{{ $where }}</span> |
+    <span class="when">{{ $when }}</span></p>
+    {{ else if $where }}
+    <p class="resume-entry-data"><span class="where">{{ $where }}</span></p>
+    {{ else if $when }}
+    <p class="resume-entry-data"><span class="when">{{ $when }}</span></p>
     {{ end }}
 
-    <!-- additional HTML under or as the entry -->
+    {{/* additional HTML under or as the entry */}}
     {{ if gt (len .Inner) 0 }}
     <div class="resume-inner">
         {{ .Inner }}
diff --git a/static/css/styles.css b/static/css/styles.css
index 38b6ea5..9773e9e 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -333,11 +333,15 @@ em.taxonomy-emph {
 .category-content {
   flex: 2 1 65%;
   padding: .5em; }
+  .category-content a {
+    color: #4c7e99; }
   .category-content p {
-    margin: 0; }
+    margin: 0;
+    font-size: 0.9em;
+    color: #5f5a6f; }
   .category-content ul {
     list-style-type: "– ";
-    font-family: FreeSerif, serif;
+    font-family: FreeSans, sans-serif;
     margin-top: 0; }
   .category-content ol {
     margin-top: 0; }
@@ -345,29 +349,32 @@ em.taxonomy-emph {
 .resume-entry {
   margin: 0 0 1em 0; }
   .resume-entry .what {
+    font-family: FreeSans, serif;
+    text-align: left;
+    font-size: 1.0em;
+    color: #444; }
+  .resume-entry .resume-entry-data {
+    font-family: FreeSans, serif;
+    text-align: left;
+    font-size: 0.8em;
+    color: #767676;
+    margin-left: 0.9rem; }
+  .resume-entry .resume-inner {
+    line-height: 1;
+    margin-top: 0.2em;
+    margin-left: 0.9rem; }
+  .resume-entry p, .resume-entry ul, .resume-entry ol, .resume-entry li {
     font-family: FreeSerif, serif;
-    font-style: italic;
-    font-size: 1.0em; }
-  .resume-entry .where, .resume-entry .when {
-    font-family: FreeSerif, serif;
+    color: #5f5a6f;
+    text-align: left;
     font-size: 0.9em; }
 
-.resume-subcategory {
-  font-family: FreeSerif, serif;
-  font-size: 1.3em;
+p.resume-subcategory {
+  font-family: FreeSans, sans-serif;
+  font-size: 1.4em;
   text-decoration: underline;
   padding: 0 0 .3em 0; }
 
-.resume-inner p {
-  font-family: FreeSerif, serif;
-  font-size: 0.9em;
-  text-align: justify; }
-
-.resume-inner ul, .resume-inner ol {
-  font-family: FreeSerif, serif;
-  font-size: .8em;
-  color: #444; }
-
 #contactinformation {
   display: flex;
   flex-direction: row;
diff --git a/static/css/styles.scss b/static/css/styles.scss
index a888e36..d7e2307 100644
--- a/static/css/styles.scss
+++ b/static/css/styles.scss
@@ -1,5 +1,6 @@
 // Colors
 $midnight-blue: #07608f;
+$midnight-matte: #4c7e99;
 $text-color: #444;
 $tab-border-color: #ddd;
 $tab-active-color: #474a4f;
@@ -11,6 +12,8 @@ $contactlinks-color: #eee;
 $contactlinks-text-color: #524e59;
 $cv-red: #b25347;
 $light-text: #5f5a6f;
+$very-light-text: #767676;
+$medium-light-text: #4f4a5f;
 $code-background: #272822;
 $code-text: #f8f8f2;
 
@@ -458,11 +461,19 @@ em.taxonomy-emph {
     flex: 2 1 65%;
     padding: .5em;
 
-    p { margin: 0; }
+    a {
+        color: $midnight-matte;
+    }
+
+    p { 
+        margin: 0; 
+        font-size: 0.9em;
+        color: $light-text;
+    }
 
     ul {
         list-style-type: "– ";
-        font-family: FreeSerif, serif;
+        font-family: FreeSans, sans-serif;
         margin-top: 0;
     }
 
@@ -473,38 +484,41 @@ em.taxonomy-emph {
     margin: 0 0 1em 0;
 
     .what {
-        font-family: FreeSerif, serif;
-        font-style: italic;
+        font-family: FreeSans, serif;
+        text-align: left;
         font-size: 1.0em;
+        color: $text-color;
     }
 
-    .where, .when {
-        font-family: FreeSerif, serif;
-        font-size: 0.9em;
+    .resume-entry-data {
+        font-family: FreeSans, serif;
+        text-align: left;
+        font-size: 0.8em;
+        color: $very-light-text;
+        margin-left: 0.9rem;
+    }
+
+    .resume-inner {
+        line-height: 1;
+        margin-top: 0.2em;
+        margin-left: 0.9rem;
     }
+
+        p, ul, ol, li {
+            font-family: FreeSerif, serif;
+            color: $light-text;
+            text-align: left;
+            font-size: 0.9em;
+        }
 }
 
-.resume-subcategory {
-    font-family: FreeSerif, serif;
-    font-size: 1.3em;
+p.resume-subcategory {
+    font-family: FreeSans, sans-serif;
+    font-size: 1.4em;
     text-decoration: underline;
     padding: 0 0 .3em 0;
 }
 
-.resume-inner {
-    p {
-        font-family: FreeSerif, serif;
-        font-size: 0.9em;
-        text-align: justify;
-    }
-
-    ul, ol {
-        font-family: FreeSerif, serif;
-        font-size: .8em;
-        color: $text-color;
-    }
-}
-
 // CONTACT
 
 #contactinformation {