1
0
mirror of https://github.com/JuanCanham/fresh-themes.git synced 2024-11-22 08:10:10 +00:00

Improve markup consistency.

This commit is contained in:
hacksalot 2016-01-11 13:47:14 -05:00
parent 700c388b01
commit fa00a9c640
12 changed files with 113 additions and 183 deletions

View File

@ -3,11 +3,13 @@
<section id="education"> <section id="education">
<header> <header>
<h2>{{{sectionTitle "Education"}}}</h2> <h2>{{{sectionTitle "Education"}}}</h2>
{{#> icon-education }}{{/icon-education}}
</header> </header>
{{#> icon-education }}{{/icon-education}}
{{#each r.education.history}} {{#each r.education.history}}
<div>
<h3>{{{ institution }}}</h3> <h3>{{{ institution }}}</h3>
<span class="tenure">{{dateRange .}}<span> <span class="tenure">{{dateRange .}}</span>
</div>
{{/each}} {{/each}}
</section> </section>
{{/section}} {{/section}}

View File

@ -3,9 +3,10 @@
<section id="employment"> <section id="employment">
<header> <header>
<h2>{{{sectionTitle "Employment"}}}</h2> <h2>{{{sectionTitle "Employment"}}}</h2>
</header>
{{#> icon-employment }}{{/icon-employment}} {{#> icon-employment }}{{/icon-employment}}
</header>
{{#each r.employment.history}} {{#each r.employment.history}}
<div>
<h3><em>{{ position }}</em>, <h3><em>{{ position }}</em>,
{{#if url }} {{#if url }}
<a href="{{ url }}">{{ employer }}</a> <a href="{{ url }}">{{ employer }}</a>
@ -22,6 +23,7 @@
{{/each}} {{/each}}
</ul> </ul>
{{/if}} {{/if}}
</div>
{{/each}} {{/each}}
</section> </section>
{{/section}} {{/section}}

View File

@ -3,9 +3,10 @@
<section id="projects"> <section id="projects">
<header> <header>
<h2>{{{sectionTitle "Projects"}}}</h2> <h2>{{{sectionTitle "Projects"}}}</h2>
{{#> icon-projects }}{{/icon-projects}}
</header> </header>
{{#> icon-projects }}{{/icon-projects}}
{{#each r.projects}} {{#each r.projects}}
<div>
<h3>{{#if role}}<em>{{camelCase role }}</em>,{{/if}} <h3>{{#if role}}<em>{{camelCase role }}</em>,{{/if}}
{{#if url}} {{#if url}}
<a href="{{{ url }}}">{{ title }}</a> <a href="{{{ url }}}">{{ title }}</a>
@ -21,6 +22,7 @@
{{/each}} {{/each}}
</ul> </ul>
{{/if}} {{/if}}
</div>
{{/each}} {{/each}}
</section> </section>
{{/section}} {{/section}}

View File

@ -3,11 +3,13 @@
<section id="awards"> <section id="awards">
<header> <header>
<h2>{{{sectionTitle "recognition" "Awards"}}}</h2> <h2>{{{sectionTitle "recognition" "Awards"}}}</h2>
</header>
{{#> icon-recognition }}{{/icon-recognition}} {{#> icon-recognition }}{{/icon-recognition}}
</header>
{{#each r.recognition}} {{#each r.recognition}}
<div>
<h3><em>{{ title }}</em>, {{ from }} <span class="tenure">{{formatDate safe.date 'YYYY' }}</span></h3> <h3><em>{{ title }}</em>, {{ from }} <span class="tenure">{{formatDate safe.date 'YYYY' }}</span></h3>
{{ summary }} {{ summary }}
</div>
{{/each}} {{/each}}
</section> </section>
{{/section}} {{/section}}

View File

@ -3,9 +3,10 @@
<section id="samples"> <section id="samples">
<header> <header>
<h2>{{{sectionTitle "Samples"}}}</h2> <h2>{{{sectionTitle "Samples"}}}</h2>
</header>
{{#> icon-samples }}{{/icon-samples}} {{#> icon-samples }}{{/icon-samples}}
</header>
{{#each r.samples}} {{#each r.samples}}
<div>
<h3> <h3>
{{#if url}} {{#if url}}
<a href="{{{ url }}}">{{ title }}</a> <a href="{{{ url }}}">{{ title }}</a>
@ -21,6 +22,7 @@
{{/each}} {{/each}}
</ul> </ul>
{{/if}} {{/if}}
</div>
{{/each}} {{/each}}
</section> </section>
{{/section}} {{/section}}

View File

@ -3,9 +3,10 @@
<section id="volunteer"> <section id="volunteer">
<header> <header>
<h2>{{{sectionTitle "Service"}}}</h2> <h2>{{{sectionTitle "Service"}}}</h2>
</header>
{{#> icon-service }}{{/icon-service}} {{#> icon-service }}{{/icon-service}}
</header>
{{#each r.service.history}} {{#each r.service.history}}
<div>
<h3><em>{{ position }}</em>, <h3><em>{{ position }}</em>,
{{#if url}} {{#if url}}
<a href="{{ url }}">{{ organization }}</a> <a href="{{ url }}">{{ organization }}</a>
@ -13,7 +14,7 @@
{{ organization }} {{ organization }}
{{/if}} {{/if}}
</h3> </h3>
<span class="tenure">{{dateRange .}}<span> <span class="tenure">{{dateRange .}}</span>
<p style="clear: both;">{{{ summary }}}</p> <p style="clear: both;">{{{ summary }}}</p>
{{#if highlights}} {{#if highlights}}
<ul> <ul>
@ -22,6 +23,7 @@
{{/each}} {{/each}}
</ul> </ul>
{{/if}} {{/if}}
</div>
{{/each}} {{/each}}
</section> </section>
{{/section}} {{/section}}

View File

@ -3,8 +3,8 @@
<section id="skills"> <section id="skills">
<header> <header>
<h2>{{{sectionTitle "Skills"}}}</h2> <h2>{{{sectionTitle "Skills"}}}</h2>
</header>
{{#> icon-skills }}{{/icon-skills}} {{#> icon-skills }}{{/icon-skills}}
</header>
<table> <table>
<thead> <thead>
<tr> <tr>

View File

@ -3,11 +3,13 @@
<section id="speaking"> <section id="speaking">
<header> <header>
<h2>{{{sectionTitle "speaking" "Speaking Engagements"}}}</h2> <h2>{{{sectionTitle "speaking" "Speaking Engagements"}}}</h2>
</header>
{{#> icon-speaking }}{{/icon-speaking}} {{#> icon-speaking }}{{/icon-speaking}}
</header>
{{#each r.speaking}} {{#each r.speaking}}
<div>
<h3><em>{{ title }}</em>, {{ from }} <span class="tenure">{{formatDate safe.date 'YYYY' }}</span></h3> <h3><em>{{ title }}</em>, {{ from }} <span class="tenure">{{formatDate safe.date 'YYYY' }}</span></h3>
{{ summary }} {{ summary }}
</div>
{{/each}} {{/each}}
</section> </section>
{{/section}} {{/section}}

View File

@ -3,12 +3,15 @@
<section id="publications"> <section id="publications">
<header> <header>
<h2>{{{sectionTitle "Writing"}}}</h2> <h2>{{{sectionTitle "Writing"}}}</h2>
</header>
{{#> icon-writing }}{{/icon-writing}} {{#> icon-writing }}{{/icon-writing}}
</header>
{{#each r.writing }} {{#each r.writing }}
<div>
<h3><em>{{#if url}}<a href="{{{ url }}}">{{{ title }}}</a>{{else}}{{{ title }}}{{/if}}</em>, <h3><em>{{#if url}}<a href="{{{ url }}}">{{{ title }}}</a>{{else}}{{{ title }}}{{/if}}</em>,
{{ publisher.name }} <span class="tenure">{{formatDate safe.date 'YYYY'}}</span></h3> {{ publisher.name }}</h3>
{{# if summary}}{{{ summary }}}{{/if}} <span class="tenure">{{formatDate safe.date 'YYYY'}}</span>
{{{ summary }}}
</div>
{{/each}} {{/each}}
</section> </section>
{{/section}} {{/section}}

View File

@ -526,12 +526,43 @@
</w:p> </w:p>
{{/has}} {{/has}}
{{#section "skills"}}{{> skills }}{{/section}} {{#section "skills"}}{{> skills }}{{/section}}
{{#*inline "header-employment"}}
{{> header-icon _title="EMPLOYMENT" _section="employment" _icon="pict/emp" }}
{{/inline}}
{{#section "employment"}}{{> section/employment }}{{/section}} {{#section "employment"}}{{> section/employment }}{{/section}}
{{#section "education"}}{{> section/education }}{{/section}}
{{#*inline "header-projects"}}
{{> header-icon _title="PROJECTS" _section="projects" _icon="pict/star" }}
{{/inline}}
{{#section "projects"}}{{> section/projects }}{{/section}} {{#section "projects"}}{{> section/projects }}{{/section}}
{{#*inline "header-education"}}
{{> header-icon _title="EDUCATION" _section="education" _icon="pict/edu" }}
{{/inline}}
{{#section "education"}}{{> section/education }}{{/section}}
{{#*inline "header-service"}}
{{> header-icon _title="SERVICE" _section="service" _icon="pict/srv" }}
{{/inline}}
{{#section "service"}}{{> section/service }}{{/section}} {{#section "service"}}{{> section/service }}{{/section}}
{{#*inline "header-writing"}}
{{> header-icon _title="WRITING" _section="writing" _icon="pict/wri" }}
{{/inline}}
{{#section "writing"}}{{> section/writing }}{{/section}} {{#section "writing"}}{{> section/writing }}{{/section}}
{{#*inline "header-recognition"}}
{{> header-icon _title="RECOGNITION" _section="recognition" _icon="pict/rec" }}
{{/inline}}
{{#section "recognition"}}{{> section/recognition }}{{/section}} {{#section "recognition"}}{{> section/recognition }}{{/section}}
{{#*inline "header-speaking"}}
{{> header-icon _title="SPEAKING" _section="speaking" _icon="pict/arrow" }}
{{/inline}}
{{#section "speaking"}}{{> section/speaking }}{{/section}}
<w:sectPr wsp:rsidR="00B43FDC" wsp:rsidRPr="000A3AF0" wsp:rsidSect="001B7422"> <w:sectPr wsp:rsidR="00B43FDC" wsp:rsidRPr="000A3AF0" wsp:rsidSect="001B7422">
<w:pgSz w:w="12240" w:h="15840"/> <w:pgSz w:w="12240" w:h="15840"/>
<w:pgMar w:top="1440" w:right="1440" w:bottom="1440" w:left="1440" w:header="720" w:footer="720" w:gutter="0"/> <w:pgMar w:top="1440" w:right="1440" w:bottom="1440" w:left="1440" w:header="720" w:footer="720" w:gutter="0"/>

View File

@ -33,6 +33,9 @@ h2 {
h3 { h3 {
font-size: 1em; font-size: 1em;
margin-top: 0;
width: 66%;
float: left;
} }
table { table {
@ -52,6 +55,10 @@ td:last-child {
text-align: justify; /* HTML justification sucks, but in this case... */ text-align: justify; /* HTML justification sucks, but in this case... */
} }
hr {
display: none;
}
main { main {
padding: 15px; padding: 15px;
max-width: 800px; max-width: 800px;
@ -62,12 +69,21 @@ section {
margin-top: 1em; margin-top: 1em;
} }
li { section > div {
margin-left: 2em; margin-top: 1em;
overflow: hidden; /* Clear floated children */
} }
h3 { section > div p {
margin-top: 1em; clear: both;
}
section > header {
position: relative;
}
li {
margin-left: 2em;
} }
p, li { p, li {
@ -88,12 +104,11 @@ main > header {
margin-bottom: 1em; margin-bottom: 1em;
} }
h1 {
main > header > h1 {
float: left; float: left;
} }
main > header > h1, .label { h1, h2, .label {
font-size: 2.5em; font-size: 2.5em;
text-transform: uppercase; text-transform: uppercase;
font-weight: 300; font-weight: 300;
@ -105,11 +120,13 @@ main > header > h1, .label {
float: right; float: right;
} }
h2 > span.fa { header > span.fa {
text-align: center; text-align: center;
margin-right: 3px; margin-right: 3px;
position: absolute; position: absolute;
width: 40px; width: 40px;
top: 10px;
font-size: 30px;
transform: translateX(-110%); transform: translateX(-110%);
color: #DADADA; color: #DADADA;
} }
@ -121,5 +138,5 @@ h2 > span.fa {
#summary { #summary {
color: #717171; color: #717171;
font-size: 1.25em; font-size: 1.25em;
} }

View File

@ -20,182 +20,47 @@
</header> </header>
{{#has "info.brief"}} {{#has "info.brief"}}
<section id="summary"> <section id="summary">
{{{ r.info.brief }}} {{{ r.info.brief }}}
</section> </section>
{{/has}} {{/has}}
{{#section "skills"}} {{!<!--
<section id="skills"> Use predefined global partials for the other sections.
<header>
<h2><span class="fa fa-code"></span> Skills</h2>
</header>
<table>
<thead>
<tr>
<th>{{{sectionTitle "Skills"}}}</th>
<th>Keywords</th>
</tr>
</thead>
<tbody>
{{#each r.skills.sets}}
<tr>
<td style="width: 33%;">{{{ name }}}</td>
<td class="keywords">{{#each skills}}{{{ this }}} {{/each}}</td>
</tr>
{{/each}}
</tbody>
</table>
</section>
{{/section}}
The "inline" bit before each section allows us to pass a custom heading
icon into the global partial. For this theme, we're using Font Awesome.
-->}}
{{#*inline "icon-skills"}}<span class="fa fa-lg fa-star"></span>{{/inline}}
{{> section/skills }}
{{#section "employment"}} {{#*inline "icon-employment"}}<span class="fa fa-lg fa-building"></span>{{/inline}}
<section id="employment"> {{> section/employment }}
<header>
<h2><span class="fa fa-building" style="vertical-align: top;"></span> {{{sectionTitle "Employment"}}}</h2>
</header>
{{#each r.employment.history }} {{#*inline "icon-projects"}}<span class="fa fa-lg fa-star"></span>{{/inline}}
<h3><em>{{ position }}</em>, {{> section/projects }}
{{#if url }}
<a href="{{ url }}">{{{ employer }}}</a>
{{else}}
{{{ employer }}}
{{/if}}
<span class="tenure">{{formatDate safe.start 'YYYY-MM' }} &mdash; {{formatDate safe.end 'YYYY-MM' }}<span></h3>
<p style="clear: both;">{{{ summary }}}</p>
{{#if highlights}}
<ul>
{{#each highlights}}
<li>{{{ this }}}</li>
{{/each}}
</ul>
{{/if}}
{{/each}}
</section> {{#*inline "icon-education"}}<span class="fa fa-lg fa-mortar-board"></span>{{/inline}}
{{/section}} {{> section/education }}
{{#section 'projects'}} {{#*inline "icon-service"}}<span class="fa fa-lg fa-child"></span>{{/inline}}
<hr> {{> section/service }}
<section id="projects">
<header>
<h3>{{{sectionTitle "Projects"}}}</h3>
</header>
<span class="fa fa-lg fa-building"></span>
{{#each r.projects}}
{{#if url}}
<h4><span class="res-label">{{ role }}</span>, <a href="{{{ url }}}">{{ title }}</a></h4>
{{else}}
<h4><span class="res-label">{{ role }}</span>, <span class="defunct">{{ title }}</span></h4>
{{/if}}
<span class="tenure">{{formatDate safe.start 'YYYY-MM' }}&mdash;{{formatDate safe.end 'YYYY-MM' }}</span>
{{{ summary }}}
{{#if proj.highlights}}
<ul>
{{#each highlights}}
<li>{{{ this }}}</li>
{{/each}}
</ul>
{{/if}}
{{/each}}
</section> {{#*inline "icon-samples"}}<span class="fa fa-lg fa-share"></span>{{/inline}}
{{/section}} {{> section/samples }}
{{#section 'samples'}} {{#*inline "icon-writing"}}<span class="fa fa-lg fa-pencil"></span>{{/inline}}
<hr> {{> section/writing }}
<section id="samples">
<header>
<h3>{{{sectionTitle "Samples"}}}</h3>
</header>
<span class="fa fa-lg fa-building"></span>
{{#each r.samples}}
{{#if url}}
<h4><span class="res-label">{{ role }}</span>, <a href="{{{ url }}}">{{ title }}</a></h4>
{{else}}
<h4><span class="res-label">{{ role }}</span>, <span class="defunct">{{ title }}</span></h4>
{{/if}}
<span class="tenure">{{formatDate safe.start 'YYYY-MM' }}&mdash;{{formatDate safe.end 'YYYY-MM' }}</span>
{{{ summary }}}
{{#if proj.highlights}}
<ul>
{{#each highlights}}
<li>{{{ this }}}</li>
{{/each}}
</ul>
{{/if}}
{{/each}}
</section> {{#*inline "icon-recognition"}}<span class="fa fa-lg fa-trophy"></span>{{/inline}}
{{/section}} {{> section/recognition }}
{{#section "education"}} {{#*inline "icon-speaking"}}<span class="fa fa-lg fa-users"></span>{{/inline}}
<section id="education"> {{> section/speaking }}
<header>
<h2><span class="fa fa-mortar-board"></span> {{{sectionTitle "Education"}}}</h2>
</header>
{{#each r.education.history}}
<h3>{{{ institution }}} <span class="tenure">{{formatDate safe.start 'YYYY' }} &mdash; {{formatDate safe.end 'YYYY' }}<span></h3>
{{/each}}
</section>
{{/section}}
{{#section "service"}}
<section id="volunteer">
<header>
<h2><span class="fa fa-child" style="vertical-align: top;"></span> {{{sectionTitle "Service"}}}</h2>
</header>
{{#each r.service.history}}
<h3><em>{{{ position }}}</em>,
{{#if url}}
<a href="{{ url }}">{{{ organization }}}</a>
{{else}}
{{{ organization }}}
{{/if}}
<span class="tenure">{{formatDate safe.start 'YYYY' }} &mdash; {{formatDate safe.end 'YYYY' }}<span></h3>
<p style="clear: both;">{{{ summary }}}</p>
{{#if highlights}}
<ul>
{{#each highlights}}
<li>{{{ this }}}</li>
{{/each}}
</ul>
{{/if}}
{{/each}}
</section>
{{/section}}
{{#section "writing"}}
<section id="publications">
<header>
<h2><span class="fa fa-book"></span> {{{sectionTitle "Writing"}}}</h2>
</header>
{{#each r.writing }}
<h3><em>{{#if url}}<a href="{{{ url }}}">{{{ title }}}</a>{{else}}{{{ title }}}{{/if}}</em>,
{{{ publisher.name }}} <span class="tenure">{{formatDate safe.date 'YYYY'}}</span></h3>
{{# if summary}}{{{ summary }}}{{/if}}
{{/each}}
</section>
{{/section}}
{{#section "recognition"}}
<section id="awards">
<header>
<h2><span class="fa fa-trophy"></span> {{{"sectionTitle" "recognition" "Awards"}}}</h2>
</header>
{{#each r.recognition}}
<h4><span class="res-label">{{{ title }}}</span>, {{{ from }}} <span class="tenure">{{formatDate safe.date 'YYYY' }}</span></h4>
{{{ summary }}}
{{/each}}
</section>
{{/section}}
</main> </main>
</body> </body>