alicia/jsonresume-theme-short
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update template

Browse Source
This commit is contained in:
Mattias Erming
2014-07-31 11:05:08 -07:00
parent 93e9747e44
commit a9464c1627
3 changed files with 200 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "jsonresume-theme-boilerplate", "name": "jsonresume-theme-boilerplate",
"version": "0.0.2", "version": "0.1.0",
"description": "Boilerplate theme for JSON Resume", "description": "Boilerplate theme for JSON Resume",
"author": "Mattias Erming", "author": "Mattias Erming",
"repository": { "repository": {

332
resume.template
View File

@@ -8,7 +8,7 @@
<title>{{#resume.basics}}{{name}}{{/resume.basics}}</title> <title>{{#resume.basics}}{{name}}{{/resume.basics}}</title>
<style type="text/css"> <style type="text/css">
{{css}} {{{css}}}
</style> </style>
</head> </head>
@@ -20,107 +20,109 @@
<h1>{{name}}</h1> <h1>{{name}}</h1>
<h2>{{label}}</h2> <h2>{{label}}</h2>
<section id="basics"> <section id="basics">
{{#email}} <div class="contact">
<div class="email"> {{#if website}}
<span class="label">Email:</span>
{{.}}
</div>
{{/email}}
{{#phone}}
<div class="phone">
<span class="label">Phone:</span>
{{.}}
</div>
{{/phone}}
{{#website}}
<div class="website"> <div class="website">
<span class="label">Website:</span> <strong>Website</strong>
{{.}} {{website}}
</div> </div>
{{/website}} {{/if}}
{{#summary}} {{#if email}}
<div class="email">
<strong>Email</strong>
{{email}}
</div>
{{/if}}
{{#if phone}}
<div class="phone">
<strong>Phone</strong>
{{phone}}
</div>
{{/if}}
</div>
{{#if summary}}
<div class="summary"> <div class="summary">
<p>{{.}}</p> <p>{{summary}}</p>
</div> </div>
{{/summary}} {{/if}}
{{#location}} {{#location}}
<h3>Location</h3> <h3>Location</h3>
<section id="location"> <section id="location">
{{#address}} {{#if address}}
<div class="address"> <div class="address">
<span class="label">Address:</span> <strong>Address</strong>
{{.}} {{address}}
</div> </div>
{{/address}} {{/if}}
{{#postalCode}} {{#if postalCode}}
<div class="postalCode"> <div class="postalCode">
<span class="label">Postal code:</span> <strong>Postal code</strong>
{{.}} {{postalCode}}
</div> </div>
{{/postalCode}} {{/if}}
{{#city}} {{#if city}}
<div class="city"> <div class="city">
<span class="label">City:</span> <strong>City</strong>
{{.}} {{city}}
</div> </div>
{{/city}} {{/if}}
{{#countryCode}} {{#if countryCode}}
<div class="countryCode"> <div class="countryCode">
<span class="label">Country code:</span> <strong>Country code</strong>
{{.}} {{countryCode}}
</div> </div>
{{/countryCode}} {{/if}}
{{#region}} {{#if region}}
<div class="region"> <div class="region">
<span class="label">Region</span> <strong>Region</strong>
{{.}} {{region}}
</div> </div>
{{/region}} {{/if}}
</section> </section>
{{/location}} {{/location}}
{{#if profiles.length}} {{#if profiles.length}}
<h3>Profiles</h3> <h3>Profiles</h3>
<section id="profiles"> <section id="profiles">
{{#profiles}} {{#each profiles}}
<div class="item"> <div class="item">
{{#network}} {{#if network}}
<strong class="network"> <strong class="network">
{{.}} {{network}}
</strong> </strong>
{{/network}} {{/if}}
{{#username}} {{#if username}}
<div class="username"> <div class="username">
{{.}} {{username}}
</div> </div>
{{/username}} {{/if}}
{{#url}} {{#if url}}
<div class="url"> <div class="url">
<a href="{{.}}">{{.}}</a> <a href="{{url}}">Link</a>
</div> </div>
{{/url}} {{/if}}
</div> </div>
{{/profiles}} {{/each}}
</section> </section>
{{/if}} {{/if}}
</section> </section>
{{/resume.basics}} {{/resume.basics}}
{{#if resume.work.length}} {{#if resume.work.length}}
<h2>Work</h2>
<section id="work"> <section id="work">
<h2>Work</h2>
{{#each resume.work}} {{#each resume.work}}
<div class="item"> <div class="item">
{{#company}} {{#if company}}
<h3 class="name"> <h3 class="name">
{{.}} {{company}}
</h3> </h3>
{{/company}} {{/if}}
<div class="date"> <div class="date">
{{#startDate}} {{#if startDate}}
<span class="startDate"> <span class="startDate">
{{.}} {{startDate}}
</span> </span>
{{/startDate}} {{/if}}
{{#if endDate}} {{#if endDate}}
<span class="endDate"> <span class="endDate">
- {{endDate}} - {{endDate}}
@@ -131,26 +133,26 @@
</span> </span>
{{/if}} {{/if}}
</div> </div>
{{#position}} {{#if position}}
<div class="position"> <div class="position">
{{.}} {{position}}
</div> </div>
{{/position}} {{/if}}
{{#website}} {{#if website}}
<div class="website"> <div class="website">
<a href="{{.}}">{{.}}</a> <a href="{{website}}">{{website}}</a>
</div> </div>
{{/website}} {{/if}}
{{#summary}} {{#if summary}}
<div class="summary"> <div class="summary">
<p>{{.}}</p> <p>{{summary}}</p>
</div> </div>
{{/summary}} {{/if}}
{{#if highlights.length}} {{#if highlights.length}}
<ul class="highlights"> <ul class="highlights">
{{#highlights}} {{#each highlights}}
<li>{{.}}</li> <li>{{.}}</li>
{{/highlights}} {{/each}}
</ul> </ul>
{{/if}} {{/if}}
</div> </div>
@@ -159,21 +161,21 @@
{{/if}} {{/if}}
{{#if resume.volunteer.length}} {{#if resume.volunteer.length}}
<h2>Volunteer</h2> <section id="volunteer">
<section id="work"> <h2>Volunteer</h2>
{{#each resume.volunteer}} {{#each resume.volunteer}}
<div class="item"> <div class="item">
{{#organization}} {{#if organization}}
<h3 class="company"> <h3 class="company">
{{.}} {{organization}}
</h3> </h3>
{{/organization}} {{/if}}
<div class="date"> <div class="date">
{{#startDate}} {{#if startDate}}
<span class="startDate"> <span class="startDate">
{{.}} {{startDate}}
</span> </span>
{{/startDate}} {{/if}}
{{#if endDate}} {{#if endDate}}
<span class="endDate"> <span class="endDate">
- {{endDate}} - {{endDate}}
@@ -184,26 +186,26 @@
</span> </span>
{{/if}} {{/if}}
</div> </div>
{{#position}} {{#if position}}
<div class="position"> <div class="position">
{{.}} {{position}}
</div> </div>
{{/position}} {{/if}}
{{#website}} {{#if website}}
<div class="website"> <div class="website">
<a href="{{.}}">{{.}}</a> <a href="{{website}}">{{website}}</a>
</div> </div>
{{/website}} {{/if}}
{{#summary}} {{#if summary}}
<div class="summary"> <div class="summary">
<p>{{.}}</p> <p>{{summary}}</p>
</div> </div>
{{/summary}} {{/if}}
{{#if highlights.length}} {{#if highlights.length}}
<ul class="highlights"> <ul class="highlights">
{{#highlights}} {{#each highlights}}
<li>{{.}}</li> <li>{{.}}</li>
{{/highlights}} {{/each}}
</ul> </ul>
{{/if}} {{/if}}
</div> </div>
@@ -212,16 +214,16 @@
{{/if}} {{/if}}
{{#if resume.education.length}} {{#if resume.education.length}}
<h2>Education</h2>
<section id="education"> <section id="education">
<h2>Education</h2>
{{#each resume.education}} {{#each resume.education}}
<div class="item"> <div class="item">
<div class="date"> <div class="date">
{{#startDate}} {{#if startDate}}
<span class="startDate"> <span class="startDate">
{{.}} {{startDate}}
</span> </span>
{{/startDate}} {{/if}}
{{#if endDate}} {{#if endDate}}
<span class="endDate"> <span class="endDate">
- {{endDate}} - {{endDate}}
@@ -232,31 +234,31 @@
</span> </span>
{{/if}} {{/if}}
</div> </div>
{{#institution}} {{#if institution}}
<div class="institution"> <div class="institution">
{{.}} {{institution}}
</div> </div>
{{/institution}} {{/if}}
{{#area}} {{#if area}}
<div class="area"> <div class="area">
{{.}} {{area}}
</div> </div>
{{/area}} {{/if}}
{{#studyType}} {{#if studyType}}
<div class="studyType"> <div class="studyType">
{{.}} {{studyType}}
</div> </div>
{{/studyType}} {{/if}}
{{#gpa}} {{#if gpa}}
<div class="gpa"> <div class="gpa">
GPA: {{.}} GPA: {{gpa}}
</div> </div>
{{/gpa}} {{/if}}
{{#if courses.length}} {{#if courses.length}}
<ul class="courses"> <ul class="courses">
{{#courses}} {{#each courses}}
<li>{{.}}</li> <li>{{.}}</li>
{{/courses}} {{/each}}
</ul> </ul>
{{/if}} {{/if}}
</div> </div>
@@ -265,90 +267,90 @@
{{/if}} {{/if}}
{{#if resume.awards.length}} {{#if resume.awards.length}}
<h2>Awards</h2>
<section id="awards"> <section id="awards">
<h2>Awards</h2>
{{#each resume.awards}} {{#each resume.awards}}
<div class="item"> <div class="item">
{{#title}} {{#if title}}
<div class="title"> <div class="title">
{{.}} {{title}}
</div> </div>
{{/title}} {{/if}}
{{#date}} {{#if date}}
<div class="date"> <div class="date">
{{.}} {{date}}
</div> </div>
{{/date}} {{/if}}
{{#awarder}} {{#if awarder}}
<div class="awarder"> <div class="awarder">
{{.}} {{awarder}}
</div> </div>
{{/awarder}} {{/if}}
{{#summary}} {{#if summary}}
<div class="summary"> <div class="summary">
{{.}} <p>{{summary}}</p>
</div> </div>
{{/summary}} {{/if}}
</div> </div>
{{/each}} {{/each}}
</section> </section>
{{/if}} {{/if}}
{{#if resume.publications.length}} {{#if resume.publications.length}}
<h2>Publications</h2>
<section id="publications"> <section id="publications">
<h2>Publications</h2>
{{#each resume.publications}} {{#each resume.publications}}
<div class="item"> <div class="item">
{{#name}} {{#if name}}
<div class="name"> <div class="name">
{{.}} {{name}}
</div> </div>
{{/name}} {{/if}}
{{#publisher}} {{#if publisher}}
<div class="publisher"> <div class="publisher">
{{.}} {{publisher}}
</div> </div>
{{/publisher}} {{/if}}
{{#releaseDate}} {{#if releaseDate}}
<div class="releaseDate"> <div class="releaseDate">
{{.}} {{releaseDate}}
</div> </div>
{{/releaseDate}} {{/if}}
{{#website}} {{#if website}}
<div class="website"> <div class="website">
<a href="{{.}}">Link</a> <a href="{{website}}">Link</a>
</div> </div>
{{/website}} {{/if}}
{{#summary}} {{#if summary}}
<div class="summary"> <div class="summary">
{{.}} <p>{{summary}}</p>
</div> </div>
{{/summary}} {{/if}}
</div> </div>
{{/each}} {{/each}}
</section> </section>
{{/if}} {{/if}}
{{#if resume.skills.length}} {{#if resume.skills.length}}
<h2>Skills</h2>
<section id="skills"> <section id="skills">
<h2>Skills</h2>
{{#each resume.skills}} {{#each resume.skills}}
<div class="item"> <div class="item">
{{#name}} {{#if name}}
<div class="name"> <div class="name">
{{.}} {{name}}
</div> </div>
{{/name}} {{/if}}
{{#level}} {{#if level}}
<div class="level"> <div class="level">
{{.}} <em>{{level}}</em>
</div> </div>
{{/level}} {{/if}}
{{#if keywords.length}} {{#if keywords.length}}
<ul class="keywords"> <ul class="keywords">
{{#keywords}} {{#each keywords}}
<li>{{.}}</li> <li>{{.}}</li>
{{/keywords}} {{/each}}
</ul> </ul>
{{/if}} {{/if}}
</div> </div>
@@ -357,40 +359,40 @@
{{/if}} {{/if}}
{{#if resume.languages.length}} {{#if resume.languages.length}}
<h2>Languages</h2> <section id="languages">
<section id="interests"> <h2>Languages</h2>
{{#each resume.languages}} {{#each resume.languages}}
<div class="item"> <div class="item">
{{#language}} {{#if language}}
<div class="language"> <div class="language">
{{.}} {{language}}
</div> </div>
{{/language}} {{/if}}
{{#fluency}} {{#if fluency}}
<div class="fluency"> <div class="fluency">
{{.}} <em>{{fluency}}</em>
</div> </div>
{{/fluency}} {{/if}}
</div> </div>
{{/each}} {{/each}}
</section> </section>
{{/if}} {{/if}}
{{#if resume.interests.length}} {{#if resume.interests.length}}
<h2>Interests</h2>
<section id="interests"> <section id="interests">
<h2>Interests</h2>
{{#each resume.interests}} {{#each resume.interests}}
<div class="item"> <div class="item">
{{#name}} {{#if name}}
<div class="name"> <div class="name">
{{.}} {{name}}
</div> </div>
{{/name}} {{/if}}
{{#if keywords.length}} {{#if keywords.length}}
<ul class="keywords"> <ul class="keywords">
{{#keywords}} {{#each keywords}}
<li>{{.}}</li> <li>{{.}}</li>
{{/keywords}} {{/each}}
</ul> </ul>
{{/if}} {{/if}}
</div> </div>
@@ -399,20 +401,20 @@
{{/if}} {{/if}}
{{#if resume.references.length}} {{#if resume.references.length}}
<h2>References</h2>
<section id="references"> <section id="references">
<h2>References</h2>
{{#each resume.references}} {{#each resume.references}}
<div class="item"> <div class="item">
{{#reference}} {{#if reference}}
<blockquote class="reference"> <blockquote class="reference">
{{.}} {{reference}}
</blockquote> </blockquote>
{{/reference}} {{/if}}
{{#name}} {{#if name}}
<div class="name"> <div class="name">
— {{.}} — {{name}}
</div> </div>
{{/name}} {{/if}}
</div> </div>
{{/each}} {{/each}}
</section> </section>

41
style.css
View File

@@ -1,31 +1,54 @@
body { body {
background: #fff; background: #fff;
font: 15px Arial, Helvetica, sans-serif; font: 15px Arial, Helvetica, sans-serif;
line-height: 1.4;
margin: 50px 0; margin: 50px 0;
margin-bottom: 100px; margin-bottom: 100px;
} }
em {
color: #999;
}
p { p {
line-height: 1.4; line-height: 1.4;
} }
ul {
margin-bottom: 0;
}
section { section {
margin-bottom: 2em; margin-bottom: 2em;
} }
.item + .item { blockquote {
margin-top: 1em; margin: 0;
margin-bottom: 1em;
}
.item {
margin-bottom: 1em;
} }
#resume { #resume {
margin: 0 auto; margin: 0 auto;
max-width: 640px; max-width: 480px;
padding: 0 20px; padding: 0 20px;
} }
#resume .label { #basics {
float: left; margin-bottom: -10px;
width: 100px;
} }
#basics h3 { #basics h3 {
margin-top: 1.5em; margin-top: 1.5em;
} }
#references blockquote { #basics .contact strong,
margin: 0; #location strong {
margin-bottom: 1em; clear: both;
float: left;
line-height: 1.3;
width: 120px;
} }
#profiles,
#skills {
overflow: hidden;
}
#profiles .item,
#skills .item {
float: left;
width: 50%;
}