Start printer stylesheet

Signed-off-by: Shauna Gordon <[email protected]>

index.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
     <link rel="stylesheet" type="text/css" href="/css/animations.css" media="screen and (prefers-reduced-motion: no-preference)" />
     <link rel="stylesheet" type="text/css" href="/css/main.css" />
+    <link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
     <script defer src="https://use.fontawesome.com/releases/v5.15.2/js/all.js"></script>
     <title>Resume</title>
   </head>

public/css/main.css

@@ -169,3 +169,7 @@ details {
   margin: 3rem 4rem 5rem 4rem;
   font-size: 18px;
 }
+
+.print-only {
+  display: none;
+}

public/css/print.css

@@ -0,0 +1,50 @@
+@import url('./variables.css');
+
+.no-print, .old {
+    display: none;
+}
+
+.print-only {
+    display: block;
+}
+
+a {
+    text-decoration: none;
+
+    &::after {
+        content:": " attr(href);
+    }
+}
+
+header {
+    & > p {
+        display: none;
+    }
+}
+
+details {
+    height: fit-content;
+
+    &::details-content {
+        display: contents;
+    }
+
+    summary {
+        display: none;
+    }
+}
+
+#top {
+    nav {
+        max-width: 45rem;
+
+        ul {
+            display: block;
+            padding-left: 0;
+
+            li {
+                text-align: left;
+            }
+        }
+    }
+}

public/css/variables.css

@@ -18,7 +18,7 @@
     --gutter-wide: calc(var(--gutter-normal) * 2);
     --gutter-ultra-wide: calc(var(--gutter-normal) * 3);
 
-    @media (prefers-color-scheme: dark) {
+    @media screen and (prefers-color-scheme: dark) {
       --color-primary: #111318;
       --color-primary-light: #080b13;
       --color-secondary: #c0b0a0;
@@ -29,4 +29,15 @@
 
       --box-shadow: 2px 2px 8px 0 rgba(255,255,255,.05);
     }
+
+    @media print {
+      --color-primary: #ffffff;
+      --color-primary-light: var(--color-primary);
+      --color-secondary: #333333;
+      --color-accent-primary: #495c55;
+      --color-accent-light: #4a5a56;
+      --color-accent-secondary: #754668;
+
+      --box-shadow: 0;
+    }
 }

src/components/sections/Header.vue

@@ -1,15 +1,15 @@
 <template>
   <section id="top">
       <header>
-          <img class="avatar" :src="basics?.image" />
-          <h1 :title="basics?.pronouns.join('/')">I'm {{  basics?.name }}</h1>
-          <h2>{{ basics?.label }}</h2>
+          <img class="avatar no-print" :src="basics?.image" />
+          <h1 :title="basics?.pronouns.join('/')"><span class="no-print">I'm </span>{{  basics?.name }}</h1>
+          <h2 clsaa="no-print">{{ basics?.label }}</h2>
       </header>
       <nav>
           <ul>
               <li v-for="(item, i) in basics?.profiles" :key="i">
                   <a :href="item.url" target="_blank">
-                      <i :class="networks[item.network.toLowerCase()].brand ? getFaBrandClass(networks[item.network.toLowerCase()].icon) : getFaClass(networks[item.network.toLowerCase()].icon)"></i> {{ item.network }}
+                      <i :class="networks[item.network.toLowerCase()].brand ? getFaBrandClass(networks[item.network.toLowerCase()].icon) : getFaClass(networks[item.network.toLowerCase()].icon)"></i> <span class="no-print">{{ item.network }}</span>
                   </a>
               </li>
           </ul>

src/components/sections/HireMe.vue

@@ -1,5 +1,5 @@
 <template>
-    <section id="hire-me">
+    <section id="hire-me" class="no-print">
         <header>
             <h2>Let's Work Together!</h2>
             <p v-if="basics.looking == 'w2'">