feat: modern: improve cosmetics

fresh-standard · Feb 7, 2018 · 4fcdf56 · 4fcdf56
1 parent 3350494
commit 4fcdf56
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 28 deletions.
diff --git a/themes/modern/src/modern-html.css b/themes/modern/src/modern-html.css
@@ -14,13 +14,13 @@ main {
 }
 
 body {
-  font-family: {{{fontList 'default'}}};
   font-size: 15px;
   color: #333;
   line-height: 1.42857143;
   background-color: #F0F0F0;
   margin: 0;
   padding: 0;
+  font-family: {{{fontList 'default'}}};
 }
 
 /* Typical page borders are awkward when rendered to PDF. */
@@ -51,18 +51,23 @@ body.pdf #container > header {
 }
 
 #main > #container > section {
-  margin-left: 5em;
+  margin-left: 150px;
   position: relative;
   display: block;
 }
 
+section > div {
+  margin-bottom: 60px;
+}
+
 span.fa
 {
+  font-size: 56px;
   position: absolute;
-  top: 4px;
-  left: -50px;
-  font-size: 30px;
-  color: #BFC1C3;
+  top: 37px;
+  transform: translateY(-50%);
+  left: -100px;
+  color: #1a4367;
 }
 
 hr {
@@ -79,13 +84,16 @@ hr {
 h1 {
   margin: 0;
   font-size: 46px;
+  display: inline-block;
 }
 
 h2 {
-  font-size: 24px;
-  color: #BFC1C3;
+  font-size: 30px;
+  color: #4376a2;
   text-transform: uppercase;
   font-weight: normal;
+  padding-top: 20px;
+  margin-bottom: 60px;
 }
 
 h3 {
@@ -108,20 +116,53 @@ a:hover {
   font-weight: bold;
 }
 
+#summary {
+  font-size: 150%;
+  margin-left: 0;
+  padding: 20px 0;
+}
+
 #summary > p > strong {
   font-size: 1.25em;
 }
 
+#contact {
+  float: right;
+}
+
+#summary > header > .fa-info {
+  font-size: 70px;
+  letter-spacing: 5px;
+  text-transform: uppercase;
+  font-weight: normal;
+  top: 50%;
+  left: -85px;
+  transform: translateY(-50%);
+}
+
+#summary h2 {
+  display: none;
+}
+
 
 .label-keyword {
   display: inline-block;
-  background: #7eb0db;
-  color: white;
+  background: #e8f4ff;
+  color: black;
   font-size: 0.9em;
   padding: 5px;
   border: 1px solid #357ebd;
   border-radius: 5px;
   margin-top: 2px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.notes {
+  font-size: 10px;
+  display: block;
+  font-weight: normal;
+  text-transform: uppercase;
 }
 
 .card-skills {
@@ -178,6 +219,12 @@ a:hover {
     margin-left: 20px;
   }
 }
+.skill-info > strong {
+  font-weight: 400;
+  font-size: 24px;
+  color: #1d1d1d;
+  line-height: 24px;
+}
 
 .list-unstyled {
   padding-left: 0;
@@ -189,7 +236,7 @@ a:hover {
 }
 
 .space-top {
-    margin-top: 10px;
+    margin-top: 5px;
 }
 
 #container {

diff --git a/themes/modern/src/modern-html.html b/themes/modern/src/modern-html.html
@@ -139,7 +139,12 @@ <h2>{{{sectionTitle "Skills"}}}</h2>
           <div class="space-top labels">
             {{#if skills}}
               {{#each skills}}
-                <span class="label label-keyword">{{ this }}</span>
+                <div class="label label-keyword">
+                  <span class="kw">{{ this }}</span>
+                  {{#ifHasSkill @root.r .}}
+                  <span class="notes">{{skillYears . }} years</span>
+                  {{/ifHasSkill}}
+                </div>
               {{/each}}
             {{/if}}
           </div>

diff --git a/themes/modern/src/modern-pdf.css b/themes/modern/src/modern-pdf.css
@@ -1,3 +1,10 @@
+{{!
+
+  Templatized CSS file for the Modern theme. Expanded by Handlebars during
+  resume generation.
+
+}}
+
 * {
   box-sizing: border-box;
 }
@@ -7,17 +14,17 @@ main {
 }
 
 body {
-  font-family: {{{fontList 'default'}}};
   font-size: 15px;
   color: #333;
   line-height: 1.42857143;
   background-color: #F0F0F0;
   margin: 0;
   padding: 0;
+  font-family: {{{fontList 'default'}}};
 }
 
 /* Typical page borders are awkward when rendered to PDF. */
-body {
+body.pdf {
   background-color: #FFFFFF;
 }
 
@@ -30,7 +37,7 @@ the PDF case, <main> for the HTML case, and style both via an ID. */
   border: 1px solid #E6E6E6;
 }
 
-body > #main {
+body.pdf > #main {
   border: none;
 }
 
@@ -44,18 +51,23 @@ body.pdf #container > header {
 }
 
 #main > #container > section {
-  margin-left: 5em;
+  margin-left: 150px;
   position: relative;
   display: block;
 }
 
+section > div {
+  margin-bottom: 60px;
+}
+
 span.fa
 {
+  font-size: 56px;
   position: absolute;
-  top: 4px;
-  left: -50px;
-  font-size: 30px;
-  color: #BFC1C3;
+  top: 37px;
+  transform: translateY(-50%);
+  left: -100px;
+  color: #1a4367;
 }
 
 hr {
@@ -72,13 +84,16 @@ hr {
 h1 {
   margin: 0;
   font-size: 46px;
+  display: inline-block;
 }
 
 h2 {
-  font-size: 24px;
-  color: #BFC1C3;
+  font-size: 30px;
+  color: #4376a2;
   text-transform: uppercase;
   font-weight: normal;
+  padding-top: 20px;
+  margin-bottom: 60px;
 }
 
 h3 {
@@ -101,20 +116,53 @@ a:hover {
   font-weight: bold;
 }
 
+#summary {
+  font-size: 150%;
+  margin-left: 0;
+  padding: 20px 0;
+}
+
 #summary > p > strong {
   font-size: 1.25em;
 }
 
+#contact {
+  float: right;
+}
+
+#summary > header > .fa-info {
+  font-size: 70px;
+  /*letter-spacing: 5px; PDFs hate letter-spacing */
+  text-transform: uppercase;
+  font-weight: normal;
+  top: 50%;
+  left: -85px;
+  transform: translateY(-50%);
+}
+
+#summary h2 {
+  display: none;
+}
+
 
 .label-keyword {
   display: inline-block;
-  background: #7eb0db;
-  color: white;
+  background: #e8f4ff;
+  color: black;
   font-size: 0.9em;
   padding: 5px;
   border: 1px solid #357ebd;
   border-radius: 5px;
   margin-top: 2px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.notes {
+  font-size: 10px;
+  display: block;
+  font-weight: normal;
+  text-transform: uppercase;
 }
 
 .card-skills {
@@ -171,6 +219,12 @@ a:hover {
     margin-left: 20px;
   }
 }
+.skill-info > strong {
+  font-weight: 400;
+  font-size: 24px;
+  color: #1d1d1d;
+  line-height: 24px;
+}
 
 .list-unstyled {
   padding-left: 0;
@@ -182,7 +236,7 @@ a:hover {
 }
 
 .space-top {
-    margin-top: 10px;
+    margin-top: 5px;
 }
 
 #container {

diff --git a/themes/modern/src/modern-pdf.html b/themes/modern/src/modern-pdf.html
@@ -45,7 +45,7 @@
       available that allows us to do either, conditionally.
     --> }}
 
-    {{{styleSheet "modern-pdf.css"}}}
+    {{{styleSheet "pdf.css"}}}
 
     {{! <!--
       Now, depending on options, "modern-html.css" will either be embedded
@@ -139,7 +139,12 @@ <h2>{{{sectionTitle "Skills"}}}</h2>
           <div class="space-top labels">
             {{#if skills}}
               {{#each skills}}
-                <span class="label label-keyword">{{ this }}</span>
+                <div class="label label-keyword">
+                  <span class="kw">{{ this }}</span>
+                  {{#ifHasSkill @root.r .}}
+                  <span class="notes">{{skillYears . }} years</span>
+                  {{/ifHasSkill}}
+                </div>
               {{/each}}
             {{/if}}
           </div>

diff --git a/themes/modern/theme.json b/themes/modern/theme.json
@@ -13,7 +13,7 @@
   },
   "fonts": {
     "all": {
-      "default": [ "Helvetica Neue", "Helvetica", "Segoe UI", "Calibri", "sans-serif" ],
+      "default": [ "Open Sans", "Helvetica Neue", "Helvetica", "Segoe UI", "Calibri", "sans-serif" ],
       "heading1": ["Arial"],
       "heading2": ["Arial"]
     },