mirror of
				https://github.com/JuanCanham/fresh-themes.git
				synced 2025-10-31 12:57:28 +00:00 
			
		
		
		
	feat: modern: improve cosmetics
This commit is contained in:
		| @@ -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 { | ||||
|   | ||||
| @@ -139,7 +139,12 @@ | ||||
|           <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> | ||||
|   | ||||
| @@ -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 { | ||||
|   | ||||
| @@ -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 @@ | ||||
|           <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> | ||||
|   | ||||
| @@ -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"] | ||||
|     }, | ||||
|   | ||||
		Reference in New Issue
	
	Block a user