haopengzhan/pengzhan.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding some styles to support a clean, printable format. Two resume's in one! 📄 🎉

Browse Source 
Signed-off-by: Bryan Culver <me@bryanculver.com>
This commit is contained in:
Bryan Culver
2017-01-10 12:22:27 -05:00
parent 0007b6c057
commit f13d8966e4
5 changed files with 118 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_config.yml
+2
View File
@@ -14,6 +14,7 @@ resume_name: "Homer J. Simpson"
resume_title: "Nuclear Safety Inspector"
resume_contact_email:
"homerjsimpson@youremailaddress.com"
resume_header_contact_info: "742 Evergreen Terrace, Springfield | 555-7334 | homerjsimpson@youremailaddress.com"
# use "yes" to display the email contact button,
# "no" to display an "I'm not looking for work" message,
@@ -41,6 +42,7 @@ resume_social_links:
resume_linkedin_url: "https://www.linkedin.com/in/joelglovier"
# resume_instagram_url: "insert your Instagram URL here"
resume_website_url: "http://joelglovier.com"
resume_print_social_links: true
# Design settings
resume_theme: default
_includes/print-social-links.html
+41
View File
@@ -0,0 +1,41 @@
<!-- and guess where these are defined? Yup, you guessed it: the _config.yml file -->
{% if site.resume_print_social_links %}
<ul>
<!-- GitHub link -->
{% if site.resume_social_links.resume_github_url %}
<li><strong>Github</strong>: {{ site.resume_social_links.resume_github_url }}</li>
{% endif %}
<!-- Twitter link -->
{% if site.resume_social_links.resume_twitter_url %}
<li><strong>Twitter</strong>: {{ site.resume_social_links.resume_twitter_url }}</li>
{% endif %}
<!-- Dribbble link -->
{% if site.resume_social_links.resume_dribbble_url %}
<li><strong>Dribbble</strong>: {{ site.resume_social_links.resume_dribbble_url }}</li>
{% endif %}
<!-- Facebook link -->
{% if site.resume_social_links.resume_facebook_url %}
<li><strong>Facebook</strong>: {{ site.resume_social_links.resume_facebook_url }}</li>
{% endif %}
<!-- LinkedIn link -->
{% if site.resume_social_links.resume_linkedin_url %}
<li><strong>LinkedIn</strong>: {{ site.resume_social_links.resume_linkedin_url }}</li>
{% endif %}
<!-- Instagram link -->
{% if site.resume_social_links.resume_instagram_url %}
<li><strong>Instagram</strong>: {{ site.resume_social_links.resume_instagram_url }}</li>
{% endif %}
<!-- Website link -->
{% if site.resume_social_links.resume_website_url %}
<li><strong>Website</strong>: {{ site.resume_social_links.resume_website_url }}</li>
{% endif %}
</ul>
{% endif %}
_layouts/resume.html
+26 -5
View File
@@ -11,13 +11,18 @@
<!-- You can turn off the avatar in _config.yml by setting to false -->
{% if site.resume_avatar == 'true' %}
<img src="images/avatar.jpg" alt="my photo" class="avatar" itemprop="image">
<img src="images/avatar.jpg" alt="my photo" class="avatar no-print" itemprop="image">
{% endif %}
<!-- Your name is defined in the _config.yml file -->
<h1 class="header-name" itemprop="name">{{ site.resume_name }}</h1>
<div class="title-bar">
<!-- Contact buttons don't work in print, configure in the _config.yml file, remove "print-only" to display always. -->
<div class="header-contact-info print-only" itemprop="contact-info">
<p>{{ site.resume_header_contact_info }}</p>
</div>
<div class="title-bar no-print">
<!-- Your title is also defined in the _config.yml file -->
<h2 class="header-title" itemprop="jobTitle">{{ site.resume_title }}</h2>
@@ -26,14 +31,14 @@
{% include icon-links.html %}
</div>
<div class="executive-summary" itemprop="description">
<div class="executive-summary no-print" itemprop="description">
<p>This is the executive summary. You should write a few brief, concise, and meaningful sentences about yourself from a professional context, and your immediate career goals. Make the length appropriate for your needs, but K.I.S.S.</p>
</div>
{% if site.resume_looking_for_work == 'yes' %}
<a href="mailto:{{ site.resume_contact_email }}" class="contact-button" itemprop="email">Contact me</a>
<a href="mailto:{{ site.resume_contact_email }}" class="contact-button no-print" itemprop="email">Contact me</a>
{% elsif site.resume_looking_for_work == 'no' %}
<a class="contact-button not-looking">I'm not looking for work right now.</a>
<a class="contact-button not-looking no-print">I'm not looking for work right now.</a>
{% else %}
{% endif %}
@@ -223,6 +228,22 @@
<!-- end Links -->
{% endif %}
{% if site.resume_print_social_links %}
<!-- begin Print Social Links -->
<section class="content-section print-only">
<header class="section-header">
<h2>Social Links</h2>
</header>
<div class="resume-item">
{% include print-social-links.html %}
</div>
</section>
<!-- end Print Social Links -->
{% endif %}
<footer class="page-footer">
<p class="footer-line">Made by <a href="http://twitter.com/jglovier">@jglovier</a>. Fork me on <a href="https://github.com/jglovier/resume-template">GitHub</a>.</p>
<p class="footer-line">If this is your live resume, you can modify or remove this part. ;-)</p>
_sass/_mixins.scss
+6
View File
@@ -95,3 +95,9 @@
border-bottom: 2px solid #c7c7c7;
padding: .2rem 0 .4rem;
}
@mixin section_border_thin {
border-top: 1px solid #c7c7c7;
border-bottom: 1px solid #c7c7c7;
padding: .2rem 0 .2rem;
}
_sass/_resume.scss
+43
View File
@@ -39,6 +39,14 @@
margin: 1rem 0 2rem;
}
.header-contact-info {
@include sans;
text-align: center;
}
.header-contact-info p a {
color: inherit;
}
.title-bar {
@include section_border;
padding: .4rem 0;
@@ -176,3 +184,38 @@
}
}
}
.print-only { display: none !important }
@media print {
.no-print { display: none !important }
.print-only { display: block !important }
body { font-size: 12px; line-height: 1rem; }
.page-header { padding: 1rem 0 .2rem;
.header-name {
@include sans_bold;
font-size: 2rem;
margin: 0 0 .2rem;
}
}
.section-header {
@include section_border_thin;
margin-bottom: 1rem;
h2 { font-size: 1.2rem; line-height: 1.5rem; }
}
.content-section {
margin: 0 0 1rem;
.resume-item { margin-bottom: 1rem; }
.resume-item-title {
font-size: 16px;
line-height: .7em;
}
.resume-item-details {
font-size: 12px;
margin: 0;
line-height: .7em;
font-style:italic;
}
}
}