Update styles for mobile and print

Author: MattyBalaam

.github/workflows/test.yml

@@ -22,6 +22,10 @@ jobs:
           node-version: '24'
           cache: 'pnpm'
 
+      # Uses packageManager field in package.json
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
       - name: Install dependencies
         run: pnpm install
 

.vscode/settings.json

@@ -11,23 +11,32 @@
   },
   "editor.defaultFormatter": "oxc.oxc-vscode",
   "cSpell.words": [
+    "Archant",
+    "Artworker",
+    "Calluna",
     "catchall",
     "Disko",
+    "Filmstro",
+    "Hons",
     "imagetools",
     "italo",
     "Maskable",
     "matthewbalaam",
+    "Newsquest",
     "oxfmt",
     "oxlint",
     "pluginutils",
     "reactrouter",
     "reactrouterdom",
     "remixrun",
     "Renae",
+    "Simpplr",
     "slackcityradio",
+    "Solent",
     "StringToLink",
     "subgrid",
     "Theinhardt",
+    "Thunks",
     "tsgo",
     "tsgolint",
     "zodresume"

app/components/cube/cube.css.ts

@@ -66,6 +66,11 @@ export const cubeWrapper = style({
   margin: "auto",
   containerName: cubeContainerName,
   containerType: "size",
+  "@media": {
+    print: {
+      maxWidth: "unset",
+    },
+  },
 });
 
 export const cube = style({

app/components/typography/typography.css.ts

@@ -9,7 +9,11 @@ export const paragraph = style({
 
 export const variants = styleVariants({
   default: {
-    marginBlockEnd: vars.rhythmVertical,
+    selectors: {
+      "&:not(:last-child)": {
+        marginBlockEnd: vars.rhythmVertical,
+      },
+    },
   },
   indent: {
     selectors: {

app/css/print.css

@@ -1,4 +1,4 @@
 @page {
   size: A4;
-  margin: 0;
+  margin: 0 2cm;
 }

app/json/cv.json

@@ -45,8 +45,7 @@
         "Added RBAC permissions for apps.",
         "Introduced Zod-based schemas for forms, closing the contract circle with the backend to reduce potential for data or API errors.",
         "Diagnosed and mitigated performance issues in relating to AWS IaC reducing app latency (in extreme cases) up to 10 times.",
-        "Migrated simulated jsdom/Jest component tests to browser-based Playwright tests with features like a mocked API layer using MSW for quick test development and easy DX.",
-        "Introduced visual snapshot testing for confidence against regressions across multiple browsers and automated web accessibility testing."
+        "Migrated simulated jsdom/Jest component tests to browser-based Playwright tests with features like a mocked API layer using MSW for quick test development and easy DX, visual snapshot testing for confidence against regressions across multiple browsers and automated web accessibility testing."
       ]
     },
     {
@@ -55,7 +54,7 @@
       "url": "pure360.com",
       "startDate": "2018-11-12",
       "endDate": "2021-02-15",
-      "summary": "Building a React/Typescript SPA interfacing with the API layer using REST for handling customer creation and scheduling of multi-channel marketing campaigns. Originally using Redux  for data fetching and state management, this was later migrated to Tanstack React Query. Working in an Agile/Scrum environment.",
+      "summary": "React/Typescript SPA with REST for handling customer creation and scheduling of multi-channel marketing campaigns. Redux for data fetching and state management, charts for data visualisation. Agile/Scrum environment.",
       "highlights": [
         "Building a graph-style decision tree with a clear simple graphic interface for multiple journeys of customer engagement",
         "working with UX to create a new image editor",
@@ -115,7 +114,7 @@
       "position": "Graphic designer",
       "startDate": "2001-07-08",
       "endDate": "2009-10-10",
-      "summary": "Design conception through to final artworking on a very broad range of print and digital projects. Working in a collaborative design team. Liaising with all departments, as well as external clients and printers."
+      "summary": "Design conception through to final artwork on a very broad range of print and digital projects. Working in a collaborative design team. Liaising with all departments, as well as external clients and printers."
     },
     {
       "name": "Archant Media",
@@ -154,7 +153,7 @@
         "tsdown",
         "Rollup",
         "Webpack",
-        "Redux, Redux Thunks"
+        "Redux, Redux Thunk"
       ]
     }
   ]

app/routes/cv/cv.css.ts

@@ -1,23 +1,19 @@
 import { style } from "@vanilla-extract/css";
+
 import { dimensions, vars } from "~/css/theme.css";
 
 export const cvGrid = style({
   display: "grid",
   gap: `${vars.rhythmVertical2} ${vars.columnGap}`,
-  "@media": {
-    print: {
-      width: "21cm",
-      padding: "0.5cm 2cm",
-      maxWidth: "none",
-    },
-  },
 });
 
 export const technologyList = style({
-  columnCount: 3,
-
+  columnCount: 2,
   whiteSpace: "nowrap",
   "@container": {
+    [dimensions.breakMediumMin]: {
+      columnCount: 3,
+    },
     [dimensions.breakHorizontalMin]: {
       gridColumn: "main / end",
       columnCount: 4,

app/routes/cv/cv.route.tsx

@@ -43,7 +43,7 @@ export default function CV({
 
           <CvSection.Child variant="main">
             <TextList className={styles.technologyList}>
-              {[...skills[0].keywords.slice(0, 11), <>And many more…</>]}
+              {[...skills[0].keywords.slice(0, 11), <>More…</>]}
             </TextList>
           </CvSection.Child>
         </CvSection>

app/routes/cv/download.css.ts

@@ -5,16 +5,18 @@ import { dimensions, vars } from "~/css/theme.css";
 export const downloadPDF = style({
   color: "white",
   textAlign: "center",
-  display: "inline-block",
   position: "absolute",
-  insetInlineEnd: vars.bodyMargin,
+  zIndex: 10,
+  maxWidth: "12ch",
+  insetInlineEnd: "1rem",
   "@media": {
     print: {
       display: "none",
     },
+    [dimensions.breakMediumMin]: {
+      maxWidth: "unset",
+    },
     [dimensions.breakHorizontalMin]: {
-      position: "fixed",
-      zIndex: 10,
       transform: "rotate(45deg)",
       insetBlockStart: 0,
       insetInlineEnd: 0,
@@ -45,16 +47,6 @@ export const link = style({
   },
 });
 
-export const text = style({
-  "@media": {
-    [dimensions.breakHorizontalMin]: {
-      display: "inline-block",
-      verticalAlign: "middle",
-      width: "6em",
-    },
-  },
-});
-
 export const icon = style({
   border: "2px solid",
   display: "inline-block",

app/routes/cv/download.tsx

@@ -10,7 +10,7 @@ export function Download() {
         rel="noreferrer"
       >
         <>
-          <span className={styles.text}>Download CV as PDF</span>
+          <span>Download CV as PDF</span>
           <span className={styles.icon} />
         </>
       </a>