Added a printable version of my CV

jwanglof · Jul 30, 2016 · b619f8e · b619f8e
1 parent d69d6c1
commit b619f8e
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 1 deletion.
diff --git a/cv/css/main.css b/cv/css/main.css
@@ -2590,6 +2590,9 @@ select.stack {
   src: local("Lato Black"), local("Lato-Black"), url("../font/google/lato-v11-latin-900.woff2") format("woff2"), url("../font/google/lato-v11-latin-900.woff") format("woff");
   /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }
 
+#johan {
+  display: none; }
+
 html, body {
   font-family: 'Lato', sans-serif;
   font-weight: 400; }

diff --git a/cv/css/print.css b/cv/css/print.css
@@ -0,0 +1,30 @@
+@media print {
+  #johan {
+    display: block;
+    text-align: center;
+    page-break-after: always; }
+  .contact-information {
+    padding-top: 25px; }
+  body, h1, h2, h3, ol, ul, div {
+    width: auto;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    float: none;
+    position: static;
+    overflow: visible; }
+  nav, footer {
+    display: none; }
+  main {
+    padding-top: 0; }
+    main .flex {
+      border-bottom: 0;
+      page-break-after: always; }
+    main .three-fourth {
+      width: 100%;
+      padding: 0 15px; }
+    main .icon {
+      width: 100%;
+      padding-bottom: 0 !important; }
+      main .icon i {
+        padding: 0; } }
diff --git a/cv/index.html b/cv/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>Johan Wänglöf's Curriculum Vitae</title>
     <link rel="stylesheet" type="text/css" href="css/main.css" />
+    <link rel="stylesheet" type="text/css" href="css/print.css" />
     <link rel="stylesheet" type="text/css" href="css/fontello.css" />
 </head>
 <body>
@@ -28,6 +29,26 @@
         </div>
     </nav>
 
+    <!--Only visible on print-->
+    <div id="johan">
+        <h1>Johan Wänglöf's Curriculum Vitae</h1>
+        <h2>Print version</h2>
+        Printed from <a href="http://jwanglof.se/cv/">http://jwanglof.se/cv/</a>
+        <h2 class="contact-information">Contact information</h2>
+        <h3>Address</h3>
+        Johan Wänglöf
+        <br />
+        Björnkärrsgatan 13B.11
+        <br />
+        58436 Linköping
+
+        <h3>Phonenumber</h3>
+        <a href="tel:0046708101911">0046708601911</a>
+
+        <h3>E-mail</h3>
+        <a href="mailto:jwanglof@gmail.com">jwanglof@gmail.com</a>
+    </div>
+
     <main>
         <section class="flex four">
             <div class="icon">
@@ -333,7 +354,7 @@ <h3>Address</h3>
                 58436 Linköping
 
                 <h3>Phonenumber</h3>
-                070-86 01 911
+                <a href="tel:0046708101911">0046708601911</a>
 
                 <h3>E-mail</h3>
                 <a href="mailto:jwanglof@gmail.com">jwanglof@gmail.com</a>

diff --git a/cv/scss/main.scss b/cv/scss/main.scss
@@ -4,6 +4,10 @@
 
 $title: normal 24px/1.5 sans-serif;
 
+#johan {
+  display: none;
+}
+
 html,body {
   font-family: 'Lato', sans-serif;
   font-weight: 400;

diff --git a/cv/scss/print.scss b/cv/scss/print.scss
@@ -0,0 +1,47 @@
+@media print {
+  #johan {
+    display: block;
+    text-align: center;
+    page-break-after: always;
+  }
+
+  .contact-information {
+    padding-top: 25px;
+  }
+
+  body, h1, h2, h3, ol, ul, div {
+    width: auto;border: 0;
+    margin: 0;
+    padding: 0;
+    float: none;
+    position: static;
+    overflow: visible;
+  }
+
+  nav, footer {
+    display: none;
+  }
+
+  main {
+    padding-top: 0;
+
+    .flex {
+      border-bottom: 0;
+      page-break-after: always;
+    }
+
+    .three-fourth {
+      width: 100%;
+      padding: 0 15px;
+    }
+
+    .icon {
+      width: 100%;
+      padding-bottom: 0 !important;
+
+      i {
+        padding: 0;
+      }
+    }
+  }
+}