diff --git a/resume-generator/template.pug b/resume-generator/template.pug index 0006b63..c39ed64 100644 --- a/resume-generator/template.pug +++ b/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.no-print + .action-bar + 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') diff --git a/src/public/resume/styles.css b/src/public/resume/styles.css index 78e6bf2..0cdc7a8 100644 --- a/src/public/resume/styles.css +++ b/src/public/resume/styles.css @@ -26,6 +26,15 @@ body { position: relative; } +.a4-page .overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + h1, h2, h3, h4, p { margin: 0; } @@ -202,7 +211,6 @@ ul li::marker { } .action-bar { - position: absolute; top: 0; right: 0; transform: translate(50%, 50%); @@ -215,6 +223,10 @@ 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; + pointer-events: all; } .action-bar > * { @@ -249,6 +261,7 @@ ul li::marker { transform: translate(50%, -50%); position: fixed; flex-direction: row; + max-width: unset; } .action-bar > * { padding: 8px 10px;