JuanCanham/fresh-themes
1
0
Fork 0
mirror of https://github.com/JuanCanham/fresh-themes.git synced 2024-11-22 08:10:10 +00:00
Code Issues Releases Wiki Activity

Updates to Compact/Modern/Positive.

Browse Source
This commit is contained in:
hacksalot 2016-01-12 21:29:30 -05:00
parent 56408b82ef
commit e5dac59649
4 changed files with 243 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
themes/compact/src/compact-html.css
View File

@ -45,12 +45,9 @@ li {
margin-left: 2em; margin-left: 2em;
} }
h3 {
margin-top: 1em;
}
p, li { p, li {
text-align: justify; text-align: justify;
clear: both;
} }
.tenure { .tenure {
@ -69,10 +66,8 @@ main > header {
} }
main > header > h1 { h3 {
float: left; display: inline-block;
font-size: 1.5em;
text-transform: uppercase;
line-height: 1; line-height: 1;
} }
#contact { #contact {
@ -87,7 +82,19 @@ main > header > h1 {
margin-left: 5px; margin-left: 5px;
} }
h2 > span.fa { span.fa {
text-align: left; text-align: left;
margin-right: 3px; margin-right: 3px;
float: left;
}
section > div {
margin-bottom: 1em;
clear: both;
}
span.keywords {
font-size: 10px;
color: gray;
text-align: right;
} }

199
themes/compact/src/compact-html.html
View File

@ -1,73 +1,216 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
{{! <!--
Set the document title to the candidate's name. We use RAW.name here,
instead of r.name, because RAW gives us the text *as entered by the user*.
The double bracket notation automatically encodes this value. If we wanted
the unencoded raw value, we'd use triple brackets as in
((( RAW.name ))).
--> }}
<title>{{ RAW.name }}</title> <title>{{ RAW.name }}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
{{! <!--
Link in the resume's stylesheet. We could use a <link> tag here as above,
or dump the styles into <style></style>, but there's a handy helper
available that allows us to do either, conditionally.
--> }}
{{{styleSheet "html.css"}}} {{{styleSheet "html.css"}}}
{{! <!--
If the user passes "css embed" via the command line, any styles present
in "html.css" will be embedded into the document via the <style></style>
tag. OTOH, if the user passes "css link" via the command line, then
"html.css" will be referenced via a standard <link> tag. If no "css"
parameter is given, HackMyResume defaults to CSS embedding via <style>,
because even if it's not as "correct" as <link>, it helps produce a more
"standalone" resume with fewer external dependencies.
-->}}
</head> </head>
<body> <body>
<main> <main>
<header> <header>
{{! <!--
Display the candidate's name using "r" (the FRESH or JSON Resume
object). Keep in mind that "r" contains the MARKDOWNIFIED version
of the text in the user's FRESH or JRS resume because FRESH resume
themes support Markdown natively. If you want the un-Markdownified
text, you'd use RAW.
--> }}
<h1>{{{ r.name }}}</h1> <h1>{{{ r.name }}}</h1>
{{! <!--
Give some basic contact info. Here, the HAS helper is similar
to a normal IF, but provides a guaranteed-to-be-safe check against a
particular object path. That is, ((#if contact.email)) can error out
(throw an exception) if contact is null, depending on Handlebars
engine settings, but ((#has 'contact.email')) never will.
--> }}
<div id="contact"> <div id="contact">
{{#has 'contact.email'}}<div class="email"><a href="mailto:{{{ RAW.contact.email }}}">{{ RAW.contact.email }}</a></div>{{/has}} {{#has 'contact.email'}}<div class="email"><a href="mailto:{{{ RAW.contact.email }}}">{{ RAW.contact.email }}</a></div>{{/has}}
{{#has 'contact.phone'}}<div class="phone">{{ RAW.contact.phone }}</div>{{/has}} {{#has 'contact.phone'}}<div class="phone">{{ RAW.contact.phone }}</div>{{/has}}
{{#has 'contact.website'}}<div class="website"><a href="{{{ RAW.contact.website }}}">{{trimURL RAW.contact.website }}</a></div>{{/has}} {{#has 'contact.website'}}<div class="website"><a href="{{{ RAW.contact.website }}}">{{trimURL RAW.contact.website }}</a></div>{{/has}}
</div> </div>
</header> </header>
{{!<!--
Now let's emit the candidate's summary, which is stored in r.info.brief.
Again we'll use the ((#has)) helper to make sure the candidate HAS a
summary, and if so, we'll render an HTML 5 section element containing
the Markdownified HTML version of it.
-->}}
{{#has "info.brief"}} {{#has "info.brief"}}
<section id="summary"> <section id="summary">
{{!<!--
Note the use of triple brackets to tell Handlebars not to further encode
the value. The value in r.info.brief has already been encoded (when it was
converted to HTML) so there's no need to encode it further.
-->}}
{{{ r.info.brief }}} {{{ r.info.brief }}}
</section> </section>
{{/has}} {{/has}}
{{!<!-- {{! <!--
Use predefined global partials for the other sections. Okay, let's set up a SKILLS section, front and center.
The "inline" bit before each section allows us to pass a custom heading We could do this manually with custom HTML, but let's take advantage of
icon into the global partial. For this theme, we're using Font Awesome. some predefined partials instead. FRESH provides global partials for all
-->}} resume sections (employment, skills, education, speaking, etc.). They're
named like this:
{{#*inline "icon-skills"}}<span class="fa fa-lg fa-star"></span>{{/inline}} section/skills
{{> section/skills }} section/employment
section/service
section/recognition
etc..
{{#*inline "icon-employment"}}<span class="fa fa-lg fa-building"></span>{{/inline}} So what we want to do is inject the "section/skills" global partial
{{> section/employment }} and use it here in our theme. We can do that simply with:
{{#*inline "icon-projects"}}<span class="fa fa-lg fa-star"></span>{{/inline}} ((> section/skills ))
{{> section/projects }}
{{#*inline "icon-education"}}<span class="fa fa-lg fa-mortar-board"></span>{{/inline}} However, in this case we also want to override the heading icon used
{{> section/education }} in the global partial. So we also declare what's known as an INLINE
PARTIAL, using ((#*inline "icon-skills")), and set its content to the
icon we'd like to display for the SKILLS section. The global partial
will reference this template by name, so it allows us to selectively
override that part of the global partial.
--> }}
{{#*inline "icon-service"}}<span class="fa fa-lg fa-child"></span>{{/inline}} {{#*inline "icon-skills"}}<span class="fa fa-lg fa-code"></span>{{/inline}}
{{> section/service }} {{> section/skills _icon="icon-skills"}}
{{#*inline "icon-samples"}}<span class="fa fa-lg fa-share"></span>{{/inline}} {{! <!--
{{> section/samples }} We'll override all section heading icons the same way, for the rest of the
resume, using the same inline template technique. Keep in mind that these
inline templates do not, by themselves, create any markup. They emit markup
only when referenced by another template. Which template? In this case, the
global partial for each section. Defined elsewhere.
--> }}
{{#*inline "icon-writing"}}<span class="fa fa-lg fa-pencil"></span>{{/inline}} {{#*inline "icon-employment"}}<span class="fa fa-building"></span>{{/inline}}
{{> section/writing }} {{#*inline "icon-projects"}}<span class="fa fa-star"></span>{{/inline}}
{{#*inline "icon-education"}}<span class="fa fa-mortar-board"></span>{{/inline}}
{{#*inline "icon-service"}}<span class="fa fa-child"></span>{{/inline}}
{{#*inline "icon-samples"}}<span class="fa fa-share"></span>{{/inline}}
{{#*inline "icon-writing"}}<span class="fa fa-pencil"></span>{{/inline}}
{{#*inline "icon-recognition"}}<span class="fa fa-trophy"></span>{{/inline}}
{{#*inline "icon-speaking"}}<span class="fa fa-users"></span>{{/inline}}
{{#*inline "icon-testimonials"}}<span class="fa fa-thumbs-o-up"></span>{{/inline}}
{{#*inline "icon-references"}}<span class="fa fa-thumbs-o-up"></span>{{/inline}}
{{#*inline "icon-recognition"}}<span class="fa fa-lg fa-trophy"></span>{{/inline}} {{! <!--
{{> section/recognition }}
{{#*inline "icon-speaking"}}<span class="fa fa-lg fa-users"></span>{{/inline}} Now let's set up the EMPLOYMENT section. Similar to the SKILLS section above,
{{> section/speaking }} we'll use a global partial. But for the Compact theme, we want a bit different
structure than the default section/employment partial gives us, so we'll
need to cut a little deeper with our partial overriding strategy. Each
predefined section partial references (and provides a default value for)
a "body-[sectionName]" partial. For the employment section, it's called
"body-employment". To override it, all we have to do is declare it inline.
{{#*inline "icon-testimonials"}}<span class="fa fa-lg fa-thumbs-o-up"></span>{{/inline}} Again, this does not actually render any markup. This declares a template
{{> section/testimonials }} that can be referenced somewhere else to render markup. We are just
overriding the global section partial's idea of what the "body-employment"
fragment should look like.
{{#*inline "icon-references"}}<span class="fa fa-lg fa-thumbs-o-up"></span>{{/inline}} --> }}
{{> section/references }}
{{#*inline "body-employment" }}
<div>
<h3><em>{{ position }}</em>,
{{#if url }}
<a href="{{{ url }}}">{{ employer }}</a>
{{else}}
{{ employer }}
{{/if}}
</h3>
<span class="tenure">{{dateRange .}}</span>
<p>{{{ summary }}}</p>
{{> highlights }}
{{#if keywords}}
<span class="keywords">{{#each keywords}}{{{ . }}} {{/each}}</span>
{{/if}}
</div>
{{/inline}}
{{> section/employment _icon="icon-employment"}}
{{! <!--
Handle the PROJECTS section the same way.
--> }}
{{#*inline "body-projects" }}
<div>
<h3><em>{{ role }}</em>,
{{#if url }}
<a href="{{{ url }}}">{{ title }}</a>
{{else}}
{{ title }}
{{/if}}
</h3>
<span class="tenure">{{dateRange .}}</span>
<p>{{{ summary }}}</p>
{{> highlights }}
{{#if keywords}}
<span class="keywords">{{#each keywords}}{{{ . }}} {{/each}}</span>
{{/if}}
</div>
{{/inline}}
{{> section/projects _icon="icon-projects"}}
{{! <!--
For the rest of the resume, use the predefined global partials as-is, and
we're done.
--> }}
{{> section/education _icon="icon-education"}}
{{> section/service _icon="icon-service"}}
{{> section/samples _icon="icon-samples"}}
{{> section/writing _icon="icon-writing"}}
{{> section/recognition _icon="icon-recognition"}}
{{> section/speaking _icon="icon-speaking"}}
{{> section/testimonials _icon="icon-testimonials"}}
{{> section/references _icon="icon-references"}}
</main> </main>
</body> </body>

44
themes/modern/src/modern-html.html
View File

@ -60,17 +60,49 @@
</section> </section>
{{/section}} {{/section}}
{{!<!--
Use predefined global partials for the other sections.
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-employment"}}<span class="fa fa-lg fa-building"></span>{{/inline}} {{#*inline "icon-employment"}}<span class="fa fa-lg fa-building"></span>{{/inline}}
{{#*inline "body-employment" }}
<div>
<h3><em>{{ position }}</em>,
{{#if url }}
<a href="{{{ url }}}">{{ employer }}</a>
{{else}}
{{ employer }}
{{/if}}
</h3>
<span class="tenure">{{dateRange .}}</span>
{{#if keywords}}
{{#if start}}| {{/if}}<span class="keywords">{{#each keywords}}{{{ . }}} {{/each}}</span>
{{/if}}
<p>{{{ summary }}}</p>
{{> highlights }}
</div>
{{/inline}}
{{> section/employment _icon="icon-employment"}} {{> section/employment _icon="icon-employment"}}
{{#*inline "body-projects" }}
<div>
<h3>{{#if role}}<em>{{camelCase role }}</em>,{{/if}}
{{#if url}}
<a href="{{{ url }}}">{{ title }}</a>
{{else}}
{{ title }}
{{/if}}
</h3>
{{#if start}}<span class="tenure">{{dateRange .}}</span>{{/if}}
{{#if keywords}}
{{#if start}}| {{/if}}<span class="keywords">{{#each keywords}}{{{ . }}} {{/each}}</span>
{{/if}}
{{{ summary }}}
{{> highlights }}
</div>
{{/inline}}
{{#*inline "icon-projects"}}<span class="fa fa-lg fa-star"></span>{{/inline}} {{#*inline "icon-projects"}}<span class="fa fa-lg fa-star"></span>{{/inline}}
{{> section/projects _icon="icon-projects"}} {{> section/projects _icon="icon-projects"}}
{{#*inline "icon-education"}}<span class="fa fa-lg fa-mortar-board"></span>{{/inline}} {{#*inline "icon-education"}}<span class="fa fa-lg fa-mortar-board"></span>{{/inline}}

19
themes/positive/src/positive-html.css
View File

@ -31,8 +31,12 @@ h2 {
font-weight: 400; font-weight: 400;
} }
h3, .tenure {
font-size: 1.5em;
font-weight: 300;
}
h3 { h3 {
font-size: 1em;
margin-top: 0; margin-top: 0;
width: 66%; width: 66%;
float: left; float: left;
@ -82,6 +86,10 @@ section > header {
position: relative; position: relative;
} }
ul {
clear: both;
}
li { li {
margin-left: 2em; margin-left: 2em;
} }
@ -92,6 +100,15 @@ p, li {
.tenure { .tenure {
float: right; float: right;
color: #B5B5B5;
background-color: #F5F5F5;
border-radius: 6px;
padding: 0px 6px;
}
span.keywords {
font-size: 10px;
color: #B16666;
} }
thead { thead {