From f13d8966e427ada94d5b0eb62be0ead6d9ec18d1 Mon Sep 17 00:00:00 2001
From: Bryan Culver <me@bryanculver.com>
Date: Tue, 10 Jan 2017 12:22:27 -0500
Subject: [PATCH] Adding some styles to support a clean, printable format. Two
 resume's in one! :page_facing_up: :tada:

Signed-off-by: Bryan Culver <me@bryanculver.com>
---
 _config.yml                       |  2 ++
 _includes/print-social-links.html | 41 +++++++++++++++++++++++++++++
 _layouts/resume.html              | 31 ++++++++++++++++++----
 _sass/_mixins.scss                |  6 +++++
 _sass/_resume.scss                | 43 +++++++++++++++++++++++++++++++
 5 files changed, 118 insertions(+), 5 deletions(-)
 create mode 100644 _includes/print-social-links.html

diff --git a/_config.yml b/_config.yml
index 3560162..6097e1d 100644
--- a/_config.yml
+++ b/_config.yml
@@ -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
diff --git a/_includes/print-social-links.html b/_includes/print-social-links.html
new file mode 100644
index 0000000..29f852c
--- /dev/null
+++ b/_includes/print-social-links.html
@@ -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 %}
diff --git a/_layouts/resume.html b/_layouts/resume.html
index 0fd2b42..64eb4b7 100644
--- a/_layouts/resume.html
+++ b/_layouts/resume.html
@@ -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>
diff --git a/_sass/_mixins.scss b/_sass/_mixins.scss
index 27113b8..b228852 100644
--- a/_sass/_mixins.scss
+++ b/_sass/_mixins.scss
@@ -94,4 +94,10 @@
   border-top: 4px solid #c7c7c7;
   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;
 }
\ No newline at end of file
diff --git a/_sass/_resume.scss b/_sass/_resume.scss
index d7f890a..5f47551 100644
--- a/_sass/_resume.scss
+++ b/_sass/_resume.scss
@@ -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;
+    }
+  }
+}