feat: added print css

peterprototypes · Oct 5, 2023 · da1a901 · da1a901
1 parent ad15b53
commit da1a901
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 44 deletions.
diff --git a/content/about-me/index.md b/content/about-me/index.md
@@ -2,7 +2,7 @@
 template = "about-me.html"
 +++
 
-# Technical Skills
+# Technical Skills <a class="print-me" href="javascript:window.print()">🖨️ Print</a>
 
 - Extensive experience with PHP5, PHP7, Rust, SQL, Objective-C, JavaScript, HTML5, CSS3
 - Extensive experience in the administration of Apache, Nginx, Docker

diff --git a/static/css/style.css b/static/css/style.css
@@ -354,6 +354,12 @@ main {
     border-radius: 5px;
 }
 
+.about-page .print-me {
+    font-family: 'Roboto';
+    float: right;
+    font-style: normal;
+}
+
 /* 404 */
 
 .fof {
@@ -406,57 +412,50 @@ main {
     }
 }
 
-/* 
-.blog-page main {
-    align-items: center;
-} */
-
-/* Tablet Layout */
-
-/* @media only screen and (min-width: 600px) {
-    .profile-photo {
-        flex-grow: 0;
+@media print {
+    @page {
+        size: auto;
+        margin: 0.3in 0 !important
     }
-} */
 
-/* Desktop Layout */
+    body {
+        margin: 1.6cm;
+    }
 
-/* @media only screen and (min-width: 768px) {
     main {
-        flex-direction: row;
-        padding: 0 30px 0 0;
+        flex-direction: column;
     }
 
     .me {
         order: 0;
-        flex-direction: column;
-        align-items: center;
-        justify-content: flex-start;
-        padding: 0 30px;
-        max-width: 210px;
+        flex-direction: row;
+        justify-content: space-between;
+        padding: 0;
     }
 
-    .social-links {
-        justify-content: space-between;
+    .contact-info {
+        margin: 0 0 0 20px;
+        max-width: 205px;
     }
 
-    .social-links a {
-        margin-right: 0;
+    .print-hidden {
+        display: none;
     }
 
-    .me h1,
-    .me span {
-        text-align: center;
+    .gallery {
+        display: none;
     }
 
-    .contact-info {
-        margin: 20px 0 0 0;
+    .about-page li:has(> a.gallery) {
+        display: none;
     }
 
-    .border {
-        order: 0;
-        height: auto;
-        min-width: 10px;
-        margin-right: 30px;
+    .about-page h2 {
+        padding: 0;
+        color: black;
+    }
+
+    .pagebreak {
+        page-break-before: always;
     }
-} */
+}
diff --git a/templates/base.html b/templates/base.html
@@ -38,8 +38,8 @@
             <div class="contact-info">
                 <h1><a href="/">Peter Todorov</a></h1>
                 <span title="I promise I am">Professional Software Developer</span>
-                <span>Let's work together</span>
-                <div class="social-links">
+                <span class="print-hidden">Let's work together</span>
+                <div class="social-links print-hidden">
                     <a href="https://github.com/peterprototypes" target="_blank" title="GitHub">
                         {% include "icons/github.html" %}
                     </a>
@@ -62,12 +62,12 @@ <h1><a href="/">Peter Todorov</a></h1>
                         {% include "icons/mail.html" %}
                     </a>
                 </div>
-                <p>
+                <p class="print-hidden">
                     Hey, I'm Peter. I'm a software dev by day and a hardware hacker by night. If you spot any
                     inaccuracies
                     or wish to contribute, don't hesitate to open a PR on GitHub or drop me an email.
                 </p>
-                <a href="/about-me">About Me</a>
+                <a class="print-hidden" href="/about-me">About Me</a>
             </div>
         </aside>
         <div class="border"></div>

diff --git a/templates/partials/github-corner.html b/templates/partials/github-corner.html
@@ -1,10 +1,10 @@
 <!-- Idea and code by https://github.com/tholman/github-corners I've changed the animation to flap the ears -->
 
-<a href="https://github.com/peterprototypes/peterprototypes.com" class="github-corner"
+<a href="https://github.com/peterprototypes/peterprototypes.com" class="github-corner print-hidden"
     aria-label="View source on GitHub">
-    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-        viewBox="0 0 80 80" width="80pt" height="80pt"
-        style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80" width="80pt"
+        height="80pt" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
+        aria-hidden="true">
         <defs>
             <clipPath id="_clipPath_kekDrk9tRbWqRr4kEErigMnoXeJdMRR7">
                 <rect width="80" height="80" />