From 0411d2cf6ef0de29241aec6a7aeb589caf875b98 Mon Sep 17 00:00:00 2001 From: Cody Shearer Date: Mon, 29 Jul 2024 14:49:09 -0400 Subject: [PATCH] fix: footer positioning (#60) * fix: automatic page count for small screens * fix: automatic footer positioning for print * feat: use paged.js for print layout --- README.md | 2 +- assets/css/modern-hugo-resume.css | 72 ++++++++++++--------------- assets/js/modern-hugo-resume.js | 51 +++++++++++++++++++ exampleSite/content/_index.md | 10 ++-- layouts/modern-hugo-resume/index.html | 57 +++++---------------- 5 files changed, 100 insertions(+), 92 deletions(-) create mode 100644 assets/js/modern-hugo-resume.js diff --git a/README.md b/README.md index 456a464..03eb80a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # modern-hugo-resume -A responsive, minimal, print-friendly resume builder. Powered by Hugo, Tailwind CSS, Nix, and GitHub Pages. +A responsive, minimal, print-friendly resume builder. Powered by Hugo, Tailwind CSS, Paged.js, Nix, and GitHub Pages. _Host your own resume on GitHub for free!_ diff --git a/assets/css/modern-hugo-resume.css b/assets/css/modern-hugo-resume.css index 276cdc5..40d1695 100644 --- a/assets/css/modern-hugo-resume.css +++ b/assets/css/modern-hugo-resume.css @@ -10,16 +10,20 @@ margin-right: auto; max-width: var(--page-width); padding: var(--page-margin); - } - main { - padding-bottom: var(--page-margin); + @media not all and (min-width: theme("screens.sm")) { + padding: theme("margin.3"); + } - & > *:first-child { - margin-top: 0; + @media print { + padding: 0; } } + main > *:first-child { + margin-top: 0; + } + :root { --background: theme("colors.white"); --body: theme("colors.gray.700"); @@ -29,10 +33,8 @@ --invert-body: theme("colors.gray.300"); --invert-headings: theme("colors.white"); --invert-link-hover: theme("colors.gray.100"); - } - @media (prefers-color-scheme: dark) { - :root { + @media (prefers-color-scheme: dark) { --background: var(--invert-background); --body: var(--invert-body); --headings: var(--invert-headings); @@ -42,11 +44,15 @@ h1, h2, - h3 { + h3, + h4, + h5, + h6 { color: var(--headings); margin-bottom: theme("margin.4"); margin-top: theme("margin.6"); line-height: 1.25; + break-after: avoid; } h1 { @@ -64,6 +70,9 @@ font-weight: theme("fontWeight.semibold"); } + h4, + h5, + h6, a, p, li { @@ -75,6 +84,7 @@ ul, ol { margin-bottom: theme("margin.4"); + break-inside: avoid; } ul { @@ -96,43 +106,22 @@ a { text-decoration-line: underline; - } - - a:hover { - color: var(--link-hover); - } - footer { - width: theme("width.full"); - } - - @media print { - body { - padding: 0; - } - - main { - padding-bottom: 0; + &:hover { + color: var(--link-hover); } - a { + @media print { text-decoration-line: none; } + } - h2, - h3, - p { - break-after: avoid-page; - } - - p, - ul { - break-inside: avoid-page; - } + footer { + padding-top: var(--page-margin); + position: running(footer); - footer { - position: absolute; - bottom: calc((1 - var(--page-count)) * 100%); + @media print { + padding-top: 0; } } } @@ -160,6 +149,7 @@ } @page { - margin: var(--page-margin); - size: var(--page-width) var(--page-height); + @bottom-center { + content: element(footer); + } } diff --git a/assets/js/modern-hugo-resume.js b/assets/js/modern-hugo-resume.js new file mode 100644 index 0000000..bf694cc --- /dev/null +++ b/assets/js/modern-hugo-resume.js @@ -0,0 +1,51 @@ +async function initializePagedJS() { + await Promise.all([ + import("https://unpkg.com/pagedjs@0.4.3/dist/paged.min.js"), + new Promise((resolve) => { + if (document.readyState !== "loading") resolve(); + document.addEventListener("DOMContentLoaded", () => resolve()); + }), + ]); + + // Workaround for using custom properties with @page rules. For background on why this is an + // issue, see: https://stackoverflow.com/a/44738574 + const referencePage = document.createElement("div"); + referencePage.style.height = "var(--page-height)"; + referencePage.style.width = "var(--page-width)"; + referencePage.style.margin = "var(--page-margin)"; + referencePage.style.position = "absolute"; + referencePage.style.top = "-9999px"; + document.body.appendChild(referencePage); + const referencePageStyles = window.getComputedStyle(referencePage); + const style = document.createElement("style"); + style.innerHTML = `@page { + ${Object.entries({ + size: `${referencePageStyles.width} ${referencePageStyles.height}`, + margin: referencePageStyles.margin, + }).reduce((acc, [key, value]) => `${acc}${key}: ${value};\n`, "")} + }`; + document.head.appendChild(style); + document.body.removeChild(referencePage); + + const previewer = new PagedModule.Previewer(); + await previewer.preview(); +} + +function showPrintPage() { + const url = new URL(window.location.href); + url.searchParams.set("print", "true"); + history.pushState({}, "", url); + initializePagedJS(); +} + +if (new URL(window.location.href).searchParams.has("print")) { + initializePagedJS(); +} else { + window.onbeforeprint = showPrintPage; +} + +window.onafterprint = () => { + const url = new URL(window.location.href); + url.searchParams.delete("print"); + window.location.href = url.href; +}; diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index 04defc2..aa31f41 100644 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -23,7 +23,7 @@ Software Developer with 3 Years of Full Stack Web and Mobile Experience ### Software Developer – Full Stack, Krumware -March 2021 to October 2023 +#### March 2021 to October 2023 - Collaborated in cross-functional team following agile (scrum) methodologies - Improved time-to-market by up to 20% with project templates @@ -34,7 +34,7 @@ March 2021 to October 2023 - Led company transition to Golang, improving performance, type-safety, and DX - Promoted culture of continuous improvement, code reviews, and linting -Project Highlights: +##### Project Highlights: - Developed React app, React-Native app, Node servers for equipment manufacturer - Created Bluetooth abstraction with data anomaly filtering, connection recovery @@ -51,7 +51,7 @@ Project Highlights: ### Research Assistant, AI and Systems Laboratory -August 2020 to April 2021 +#### August 2020 to April 2021 - Analyzed cross-platform performance behavior of deep-learning recommender system - Reproduced results from past research on highly configurable systems @@ -59,7 +59,7 @@ August 2020 to April 2021 ### Software Developer – Intern, Velocity -June 2018 to August 2018 +#### June 2018 to August 2018 - Created AWS storage primitive abstracting cloud complexity for high level orchestration - Developed storage optimization solution for Amazon Elastic Block Storage @@ -68,7 +68,7 @@ June 2018 to August 2018 ### BS Computer Science, University of South Carolina -August 2017 to May 2021 +#### August 2017 to May 2021 - Graduated _magna cum laude_ with a mathematics minor - Achieved [Outstanding Senior Award](https://sc.edu/about/offices_and_divisions/leadership_and_service_center/awards_and_recognition/senior-awards/index.php) and the [Palmetto Fellows Scholarship](https://sc.edu/about/offices_and_divisions/financial_aid/scholarships/scholarships_for_sc_residents/palmetto_fellows/index.php) diff --git a/layouts/modern-hugo-resume/index.html b/layouts/modern-hugo-resume/index.html index dc64788..6648f9d 100644 --- a/layouts/modern-hugo-resume/index.html +++ b/layouts/modern-hugo-resume/index.html @@ -38,57 +38,24 @@ {{- with (templates.Defer (dict "key" "global")) -}} {{- with resources.Get "css/modern-hugo-resume.css" -}} - {{ $opts := dict + {{ + $opts := dict "inlineImports" true "optimize" hugo.IsProduction }} - {{- with . | css.TailwindCSS $opts -}} - {{- if hugo.IsDevelopment -}} - - {{- else -}} - {{- with . | minify | fingerprint -}} - - {{- end -}} - {{- end -}} + {{- $style := . | css.TailwindCSS $opts -}} + {{- if hugo.IsProduction -}} + {{- $style = $style | minify | fingerprint -}} {{- end -}} + {{- end -}} {{- end -}} + {{- with resources.Get "js/modern-hugo-resume.js" -}} + {{- $defines := dict "import.meta.env.MODE" (printf `"%s"` hugo.Environment) -}} + {{- $opts := dict "format" "esm" "defines" $defines -}} + {{- $js := . | js.Build $opts -}} + + {{- end -}} {{ .Content }} -