Better feel for Action Bar on Resume

Author: craigiswayne

resume-generator/template.pug

@@ -40,13 +40,6 @@ html(lang="en")
       | gtag('config', 'G-PVEKKHWL6B');
   body
     .a4-page
-      .action-bar.no-print
-        button(onclick="window.print()")
-          svg(xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='#000000' viewbox='0 0 256 256')
-            path(d='M214.67,72H200V40a8,8,0,0,0-8-8H64a8,8,0,0,0-8,8V72H41.33C27.36,72,16,82.77,16,96v80a8,8,0,0,0,8,8H56v32a8,8,0,0,0,8,8H192a8,8,0,0,0,8-8V184h32a8,8,0,0,0,8-8V96C240,82.77,228.64,72,214.67,72ZM72,48H184V72H72ZM184,208H72V160H184Zm40-40H200V152a8,8,0,0,0-8-8H64a8,8,0,0,0-8,8v16H32V96c0-4.41,4.19-8,9.33-8H214.67c5.14,0,9.33,3.59,9.33,8Zm-24-52a12,12,0,1,1-12-12A12,12,0,0,1,200,116Z')
-        a(download="" href="/Resume-CraigWayneGovender.pdf" target="_blank")
-          svg(xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='#000000' viewbox='0 0 256 256')
-            path(d='M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z')
       header
         h1 #{first_names} #{last_name}
         h2 #{latest_role}
@@ -104,6 +97,14 @@ html(lang="en")
             span= skill
               if index < sorted_skills.length - 1
                 | ,
+      .overlay
+        .action-bar.no-print
+          button(onclick="window.print()")
+            svg(xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='#000000' viewbox='0 0 256 256')
+              path(d='M214.67,72H200V40a8,8,0,0,0-8-8H64a8,8,0,0,0-8,8V72H41.33C27.36,72,16,82.77,16,96v80a8,8,0,0,0,8,8H56v32a8,8,0,0,0,8,8H192a8,8,0,0,0,8-8V184h32a8,8,0,0,0,8-8V96C240,82.77,228.64,72,214.67,72ZM72,48H184V72H72ZM184,208H72V160H184Zm40-40H200V152a8,8,0,0,0-8-8H64a8,8,0,0,0-8,8v16H32V96c0-4.41,4.19-8,9.33-8H214.67c5.14,0,9.33,3.59,9.33,8Zm-24-52a12,12,0,1,1-12-12A12,12,0,0,1,200,116Z')
+          a(download="" href="/Resume-CraigWayneGovender.pdf" target="_blank")
+            svg(xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='#000000' viewbox='0 0 256 256')
+              path(d='M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z')
     .supported-brands.muted.no-print
       .title ATS Friendly
       svg.active(viewbox='0 0 51.4 107.7' xmlns='http://www.w3.org/2000/svg')

src/public/resume/styles.css

@@ -26,6 +26,14 @@ body {
     position: relative;
 }
 
+.a4-page .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
 h1, h2, h3, h4, p {
     margin: 0;
 }
@@ -202,7 +210,6 @@ ul li::marker {
 }
 
 .action-bar {
-    position: absolute;
     top: 0;
     right: 0;
     transform: translate(50%, 50%);
@@ -215,6 +222,9 @@ ul li::marker {
     box-shadow: 0 4px 8px 3px rgba(0,0,0,0.15);
     border-radius: 41px;
     overflow: hidden;
+    position: sticky;
+    max-width: 40px;
+    margin-left: auto;
 }
 
 .action-bar > * {
@@ -249,6 +259,7 @@ ul li::marker {
         transform: translate(50%, -50%);
         position: fixed;
         flex-direction: row;
+        max-width: unset;
     }
     .action-bar > * {
         padding: 8px 10px;