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

@@ -1,3 +1,11 @@
+main:has(.guide) {
+    padding-left: 2rem;
+}
+
+.guide {
+    max-width: 600px;
+}
+
 @media print {
     .guide {
     }

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>

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;
+    }
 }