Added styling

This commit is contained in:
Mattias Erming
2014-07-28 15:41:52 -07:00
parent 16cfca869d
commit ae4879fdd8
2 changed files with 89 additions and 34 deletions

View File

@@ -3,6 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui">
<title>{{#resume.basics}}{{name}}{{/resume.basics}}</title> <title>{{#resume.basics}}{{name}}{{/resume.basics}}</title>
<style type="text/css"> <style type="text/css">
@@ -12,70 +14,78 @@
</head> </head>
<body> <body>
<div id="resume">
{{#resume.basics}} {{#resume.basics}}
<h1>{{name}}</h1>
<section id="basics"> <section id="basics">
{{#name}}
<div class="name">
{{.}}
</div>
{{/name}}
{{#email}} {{#email}}
<div class="email"> <div class="email">
<span class="label">Email:</span>
{{.}} {{.}}
</div> </div>
{{/email}} {{/email}}
{{#phone}} {{#phone}}
<div class="phone"> <div class="phone">
<span class="label">Phone:</span>
{{.}} {{.}}
</div> </div>
{{/phone}} {{/phone}}
{{#website}}
<div class="website">
<span class="label">Website:</span>
{{.}}
</div>
{{/website}}
{{#summary}} {{#summary}}
<div class="summary"> <div class="summary">
<p>{{.}}</p> <p>{{.}}</p>
</div> </div>
{{/summary}} {{/summary}}
{{#location}} {{#location}}
<h3>Location</h3>
<section id="location"> <section id="location">
{{#address}} {{#address}}
<div class="address"> <div class="address">
<span class="label">Address:</span>
{{.}} {{.}}
</div> </div>
{{/address}} {{/address}}
{{#postalCode}} {{#postalCode}}
<div class="postalCode"> <div class="postalCode">
<span class="label">Postal code:</span>
{{.}} {{.}}
</div> </div>
{{/postalCode}} {{/postalCode}}
{{#city}} {{#city}}
<div class="city"> <div class="city">
<span class="label">City:</span>
{{.}} {{.}}
</div> </div>
{{/city}} {{/city}}
{{#countryCode}} {{#countryCode}}
<div class="countryCode"> <div class="countryCode">
<span class="label">Country code:</span>
{{.}} {{.}}
</div> </div>
{{/countryCode}} {{/countryCode}}
{{#region}} {{#region}}
<div class="region"> <div class="region">
<span class="label">Region</span>
{{.}} {{.}}
</div> </div>
{{/region}} {{/region}}
</section> </section>
{{/location}} {{/location}}
{{#website}}
<div class="website">
{{.}}
</div>
{{/website}}
{{#if profiles.length}} {{#if profiles.length}}
<h3>Profiles</h3>
<section id="profiles"> <section id="profiles">
{{#profiles}} {{#profiles}}
<div class="item"> <div class="item">
{{#network}} {{#network}}
<div class="network"> <strong class="network">
{{.}} {{.}}
</div> </strong>
{{/network}} {{/network}}
{{#username}} {{#username}}
<div class="username"> <div class="username">
@@ -84,7 +94,7 @@
{{/username}} {{/username}}
{{#url}} {{#url}}
<div class="url"> <div class="url">
{{.}} <a href="{{.}}">{{.}}</a>
</div> </div>
{{/url}} {{/url}}
</div> </div>
@@ -95,19 +105,27 @@
{{/resume.basics}} {{/resume.basics}}
{{#if resume.work.length}} {{#if resume.work.length}}
<h2>Work</h2>
<section id="work"> <section id="work">
{{#each work}} {{#each resume.work}}
<div class="item"> <div class="item">
{{#startDate}} {{#company}}
<div class="startDate"> <h3 class="name">
{{.}} {{.}}
</h3>
{{/company}}
<div class="date">
{{#startDate}}
<span class="startDate">
{{.}}
</span>
{{/startDate}}
{{#endDate}}
<span class="endDate">
{{.}}
</span>
{{/endDate}}
</div> </div>
{{/startDate}}
{{#endDate}}
<div class="endDate">
{{.}}
</div>
{{/endDate}}
{{#position}} {{#position}}
<div class="position"> <div class="position">
{{.}} {{.}}
@@ -136,19 +154,26 @@
{{/if}} {{/if}}
{{#if resume.education.length}} {{#if resume.education.length}}
<h2>Education</h2>
<section id="education"> <section id="education">
{{#each resume.education}} {{#each resume.education}}
<div class="item"> <div class="item">
{{#startDate}} <div class="date">
<div class="startDate"> {{#startDate}}
{{.}} <span class="startDate">
{{.}}
</span>
{{/startDate}}
{{#endDate}}
<span class="endDate">
- {{.}}
</span>
{{else}}
<span class="endDate">
- Present
</span>
{{/endDate}}
</div> </div>
{{/startDate}}
{{#endDate}}
<div class="endDate">
{{.}}
</div>
{{/endDate}}
{{#institution}} {{#institution}}
<div class="institution"> <div class="institution">
{{.}} {{.}}
@@ -177,6 +202,7 @@
{{/if}} {{/if}}
{{#if resume.awards.length}} {{#if resume.awards.length}}
<h2>Awards</h2>
<section id="awards"> <section id="awards">
{{#each resume.awards}} {{#each resume.awards}}
<div class="item"> <div class="item">
@@ -201,6 +227,7 @@
{{/if}} {{/if}}
{{#if resume.publications.length}} {{#if resume.publications.length}}
<h2>Publications</h2>
<section id="publications"> <section id="publications">
{{#each resume.publications}} {{#each resume.publications}}
<div class="item"> <div class="item">
@@ -221,7 +248,7 @@
{{/releaseDate}} {{/releaseDate}}
{{#website}} {{#website}}
<div class="website"> <div class="website">
<a href="{{.}}">{{.}}</a> <a href="{{.}}">Link</a>
</div> </div>
{{/website}} {{/website}}
</div> </div>
@@ -230,6 +257,7 @@
{{/if}} {{/if}}
{{#if resume.skills.length}} {{#if resume.skills.length}}
<h2>Skills</h2>
<section id="skills"> <section id="skills">
{{#each resume.skills}} {{#each resume.skills}}
<div class="item"> <div class="item">
@@ -256,13 +284,14 @@
{{/if}} {{/if}}
{{#if resume.references.length}} {{#if resume.references.length}}
<h2>References</h2>
<section id="references"> <section id="references">
{{#each resume.references}} {{#each resume.references}}
<div class="item"> <div class="item">
{{#reference}} {{#reference}}
<div class="reference"> <blockquote class="reference">
{{.}} {{.}}
</div> </blockquote>
{{/reference}} {{/reference}}
{{#name}} {{#name}}
<div class="name"> <div class="name">
@@ -274,5 +303,7 @@
</section> </section>
{{/if}} {{/if}}
</div>
</body> </body>
</html> </html>

View File

@@ -1,7 +1,31 @@
body { body {
background: #fff; background: #fff;
font: 15px Arial, Helvetica, sans-serif; font: 15px Arial, Helvetica, sans-serif;
margin: 50px 0;
margin-bottom: 100px;
} }
p { p {
line-height: 1.4; line-height: 1.4;
} }
section {
margin-bottom: 2em;
}
.item + .item {
margin-top: 1em;
}
#resume {
margin: 0 auto;
max-width: 640px;
padding: 0 20px;
}
#resume .label {
float: left;
width: 100px;
}
#basics h3 {
margin-top: 1.5em;
}
#references blockquote {
margin: 0;
margin-bottom: 1em;
}