From 4789536fc4559dfeb6f5c1cc2706ae11798a8f8a Mon Sep 17 00:00:00 2001
From: James Grant <sprog31@gmail.com>
Date: Sun, 2 Dec 2018 14:34:58 +0000
Subject: [PATCH] Added super simple print styles, nothing fancy just to make
 print acceptable

---
 _includes/about.html      |  4 +--
 _includes/education.html  |  4 +--
 _includes/experience.html |  4 +--
 _includes/header.html     |  2 +-
 _includes/projects.html   |  6 ++--
 _sass/base.scss           | 66 +++++++++++++++++++++++++++++++++++++++
 _sass/type.scss           |  8 +++++
 assets/main.scss          | 20 +++++++++---
 8 files changed, 99 insertions(+), 15 deletions(-)

diff --git a/_includes/about.html b/_includes/about.html
index 6e99d6931..d8de04ccf 100644
--- a/_includes/about.html
+++ b/_includes/about.html
@@ -2,11 +2,11 @@
   <h3>{{ site.about_title | default: "About Me" }}</h3>
   <div class="row clearfix">
     {%- if site.about_profile_image -%}
-      <div class="col-xs-12 col-sm-4 col-md-3">
+      <div class="col-xs-12 col-sm-4 col-md-3 no-print">
         <span class="profile-img" style="background-image: url({{ site.about_profile_image | relative_url }})" />
       </div>
     {%- endif -%}
-    <div class="{{ 'col-xs-12 ' }}{%- if site.about_profile_image -%}col-sm-8 col-md-9{%- endif -%}">
+    <div class="{{ 'col-xs-12 ' }}{%- if site.about_profile_image -%}col-sm-8 col-md-9 col-print-12{%- endif -%}">
       {{ site.about_content | strip | markdownify }}
     </div>
   </div>
diff --git a/_includes/education.html b/_includes/education.html
index 921593d7c..1236b2b81 100644
--- a/_includes/education.html
+++ b/_includes/education.html
@@ -2,12 +2,12 @@
   <h3>{{ site.education_title | default: "Education" }}</h3>
   {% for education in site.data.education %}
     <div class="row clearfix education">
-      <div class="col-xs-12 col-sm-4 col-md-3 left-column">
+      <div class="col-xs-12 col-sm-4 col-md-3 col-print-12 left-column">
         <h4>{{ education.name }}</h4>
         <p><b>{{ education.qualification }}</b></p>
         <p>{{ education.dates }}</p>
       </div>
-      <div class="col-xs-12 col-sm-8 col-md-9">
+      <div class="col-xs-12 col-sm-8 col-md-9 col-print-12">
         {%- if education.quote -%}
           <p class="quote">{{ education.quote }}</p>
         {%- endif -%}
diff --git a/_includes/experience.html b/_includes/experience.html
index afa38c6e9..547bf1491 100644
--- a/_includes/experience.html
+++ b/_includes/experience.html
@@ -2,7 +2,7 @@
   <h3>{{ site.experience_title | default: "Experience" }}</h3>
   {% for experience in site.data.experience %}
     <div class="row clearfix experience">
-      <div class="col-xs-12 col-sm-4 col-md-3 left-column">
+      <div class="col-xs-12 col-sm-4 col-md-3 col-print-12 left-column">
         <h4 class="name">
           {%- if experience.link -%}
             <a href="http://{{ experience.link }}" target="_blank">
@@ -15,7 +15,7 @@ <h4 class="name">
         <p><b>{{ experience.job_title }}</b></p>
         <p>{{ experience.dates }}</p>
       </div>
-      <div class="col-xs-12 col-sm-8 col-md-9">
+      <div class="col-xs-12 col-sm-8 col-md-9 col-print-12">
         {%- if experience.quote -%}
           <p class="quote">{{ experience.quote }}</p>
         {%- endif -%}
diff --git a/_includes/header.html b/_includes/header.html
index 26b53fd73..fa9115799 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -5,7 +5,7 @@ <h1>{{ site.name | escape }}</h1>
       <h2>{{ site.title | escape }}</h2>
     </div>
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 header-right">
-      <ul class="icons">
+      <ul class="icons no-print">
         {%- if site.dribbble_username -%}
           <li>
             <a target="_blank" href="https://dribbble.com/{{ site.dribbble_username| cgi_escape | escape }}" class="button button--sacnite button--round-l">
diff --git a/_includes/projects.html b/_includes/projects.html
index 3e711a270..e51972e20 100644
--- a/_includes/projects.html
+++ b/_includes/projects.html
@@ -2,18 +2,18 @@
   <h3>{{ site.projects_title | default: "Projects" }}</h3>
   {% for project in site.data.projects %}
     <div class="row clearfix project">
-      <div class="col-xs-12 col-sm-4 col-md-3 left-column">
+      <div class="col-xs-12 col-sm-4 col-md-3 col-print-12 left-column">
         <h4>{{ project.name }}</h4>
         {%- if project.link -%}
           <a href="http://{{ project.link }}" target="_blank" class="project-link">{{ project.link }}</a>
         {%- endif -%}
-        <p>
+        <p class="no-print">
           <a href="https://github.com/{{ project.github }}" target="_blank">
             <i class="fa fa-github"></i>
           </a>
         </p>
       </div>
-      <div class="col-xs-12 col-sm-8 col-md-9">
+      <div class="col-xs-12 col-sm-8 col-md-9 col-print-12">
         {%- if project.quote -%}
           <p class="quote">{{ project.quote }}</p>
         {%- endif -%}
diff --git a/_sass/base.scss b/_sass/base.scss
index 5de657ba4..dcf07f49c 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -155,7 +155,12 @@ body {
 
 .container {
   margin-top:30px;
+
+  @media print {
+    margin-top: 20px;
+  }
 }
+
 .header-contianer {
   margin-top:50px;
 }
@@ -166,9 +171,70 @@ body {
 
 .header-left {
   margin-top: 30px;
+
+  @media print {
+    margin-top: 0px;
+  }
 }
 
 .header-right p {
   font-size: 1.6em;
   text-align: right;
 }
+
+@media print {
+  a[href]:after {
+    content: none !important;
+  }
+
+  img[src]:after {
+    content: none !important;
+  }
+
+  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
+    float: left;
+  }
+  .col-sm-12 {
+    width: 100%;
+  }
+  .col-sm-11 {
+    width: 91.66666667%;
+  }
+  .col-sm-10 {
+    width: 83.33333333%;
+  }
+  .col-sm-9 {
+    width: 75%;
+  }
+  .col-sm-8 {
+    width: 66.66666667%;
+  }
+  .col-sm-7 {
+    width: 58.33333333%;
+  }
+  .col-sm-6 {
+    width: 50%;
+  }
+  .col-sm-5 {
+    width: 41.66666667%;
+  }
+  .col-sm-4 {
+    width: 33.33333333%;
+  }
+  .col-sm-3 {
+    width: 25%;
+  }
+  .col-sm-2 {
+    width: 16.66666667%;
+  }
+  .col-sm-1 {
+    width:8.33333333%;
+  }
+  .col-print-12 {
+    width: 100%;
+  }
+
+  .no-print, .no-print * {
+    display: none !important;
+  }
+}
diff --git a/_sass/type.scss b/_sass/type.scss
index 579880b9f..170f2ee6c 100644
--- a/_sass/type.scss
+++ b/_sass/type.scss
@@ -4,6 +4,10 @@ body {
   font-feature-settings: "kern", "liga", "pnum";
   font-size: 1em;
   line-height: 1.5;
+
+  @media print {
+    font-size: 0.9em;
+  }
 }
 
 h1,
@@ -49,6 +53,10 @@ h3 {
   border-bottom: dashed 2px #CCCCCC;
   padding-bottom: 10px;
   margin-bottom:40px;
+
+  @media print {
+    margin-bottom: 20px;
+  }
 }
 
 h4 {
diff --git a/assets/main.scss b/assets/main.scss
index cf4f36e68..448a69ba3 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -44,7 +44,7 @@ ul.icons a {
   text-align: right;
 }
 
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
   .icons {
     text-align: center;
   }
@@ -59,7 +59,7 @@ ul.icons a {
   font-weight:500;
 }
 
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
   .header-contianer div{
     text-align: center;
   }
@@ -89,12 +89,12 @@ ul.icons a {
 }
 
 .into-text-1 {
-  margin-top:30px;
+  margin-top: 30px;
 }
 
 @media only screen and (max-width : 992px) {
   .into-text-1 {
-    margin-top:20px;
+    margin-top: 20px;
   }
 }
 
@@ -121,7 +121,7 @@ ul.icons a {
       }
     }
 
-    @media (max-width: 768px) {
+    @media screen and (max-width: 768px) {
       text-align: center;
 
       p {
@@ -147,6 +147,10 @@ ul.icons a {
       margin-bottom: 0.4em;
       font-weight: 500;
 
+      @media print {
+        margin-bottom: 0.2em;
+      }
+
       a {
         font-weight: 500;
       }
@@ -192,4 +196,10 @@ p.quote {
   font-style: italic;
   padding: 1em 2.5em;
   text-align: center;
+
+  @media print {
+    text-align: left;
+    padding: 0em 1em;
+    margin-top: 1em;
+  }
 }