From 03df525775af4e1fc2616315acc10f83425020f9 Mon Sep 17 00:00:00 2001
From: johannes-hernehult <jhernehult@gmail.com>
Date: Wed, 24 Jun 2026 11:14:14 +0200
Subject: [PATCH] feat(guide): style guide layout and hide links in print view

- Add class names to Guide layout elements (, ).
- Restrict guide max-width and add padding.
- Update global  styling to use outline.
- Hide anchor tags and reset main margin in print media query.
---
 src/features/guides/routes/Guide.css |  8 ++++++++
 src/features/guides/routes/Guide.tsx | 14 ++++++++------
 src/styles/App.css                   |  9 +++++++--
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/features/guides/routes/Guide.css b/src/features/guides/routes/Guide.css
index e9905fd..67d80ab 100644
--- a/src/features/guides/routes/Guide.css
+++ b/src/features/guides/routes/Guide.css
@@ -1,3 +1,11 @@
+main:has(.guide) {
+    padding-left: 2rem;
+}
+
+.guide {
+    max-width: 600px;
+}
+
 @media print {
     .guide {
     }
diff --git a/src/features/guides/routes/Guide.tsx b/src/features/guides/routes/Guide.tsx
index 5607dd2..ccd35b1 100644
--- a/src/features/guides/routes/Guide.tsx
+++ b/src/features/guides/routes/Guide.tsx
@@ -1,7 +1,7 @@
-import { useParams } from "react-router";
+import "./Guide.css";
+import { useParams, Link } from "react-router";
 import { useGuides } from "../../../lib/contexts/guide.context";
 import useGuide from "../hooks/useGuide";
-import { Link } from "react-router";
 
 export default function Guide() {
   const { id } = useParams();
@@ -16,15 +16,17 @@ export default function Guide() {
       <h1>{guide.title}</h1>
       <p>{guide.description}</p>
 
-      <div>
+      <div className="guide__frames">
         {guide.frames.map((frame, index) => (
-          <div key={index}>
+          <div key={index} className="guide__frame">
             <h2>{frame.title}</h2>
             <img src={URL.createObjectURL(frame.file)} alt={frame.title} />
 
-            <ol>
+            <ol className="steps">
               {frame.steps.map((step, stepIndex) => (
-                <li key={stepIndex}>{step.text}</li>
+                <li key={stepIndex} className="guide__step">
+                  {step.text}
+                </li>
               ))}
             </ol>
           </div>
diff --git a/src/styles/App.css b/src/styles/App.css
index f9289fa..87bd281 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -86,13 +86,18 @@ textarea {
 }
 
 :focus-visible {
-    border-color: #ff7700 !important;
+    outline: 2px solid #ff7700;
+    outline-offset: 2px;
 }
 
 @media print {
     header,
     footer,
-    button {
+    button,
+    a {
         display: none;
     }
+    main {
+        margin: 0;
+    }
 }