Merge pull request #11 from mistrk7/main

Add logo styling

Author: CodeF53

components/static/Header.vue

@@ -1,10 +1,10 @@
 <template>
   <header class="col centerChildren">
-    <h1>
+    <h1 class="packLogo" title="PackXBR">
       PackXBR
     </h1>
     <h2>
-      Bulk Pixel Art Upscaler
+      - bulk pixel art upscaler -
     </h2>
     <StaticGithubCorner />
   </header>
@@ -14,5 +14,28 @@
   header {
     h1 { font-size: 4rem; }
     margin-bottom: 6rem;
+    .packLogo {
+      font-family: 'Franklin Gothic Bold', 'Arial Narrow', Arial, sans-serif;
+      position: relative;
+      background: transparent;
+      z-index: 0;
+      color:white;
+    }
+    // ↓ Stroke 1
+    .packLogo:before {
+      content: attr(title);
+      position: absolute;
+      -webkit-text-stroke: 0.11em rgb(42, 0, 0); 
+      left: 0;
+      z-index: -1;
+    }
+    // ↓ Stroke 2
+    .packLogo:after {
+      content: attr(title);
+      position: absolute;
+      -webkit-text-stroke: 0.19em rgb(153, 0, 0);
+      left: 0;
+      z-index: -2;
+    }
   }
 </style>