Added styling
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
24
style.css
24
style.css
@@ -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;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user