diff --git a/src/App.tsx b/src/App.tsx
index 50303c2..6446eca 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import "./styles/App.css";
import { Outlet } from "react-router";
import { Link } from "react-router";
import { useGuides } from "./lib/contexts/guide.context";
+import { NavLink } from "react-router";
function App() {
const { guides } = useGuides();
@@ -22,11 +23,13 @@ function App() {
{guides.map((guide) => (
-
- {guide.title}
+ {guide.title}
))}
- Settings
+
+ Settings
+
diff --git a/src/features/guides/routes/Guide.css b/src/features/guides/routes/Guide.css
index bba0ade..4005065 100644
--- a/src/features/guides/routes/Guide.css
+++ b/src/features/guides/routes/Guide.css
@@ -4,6 +4,11 @@ main:has(.guide) {
justify-content: center;
}
+.guide__frames {
+ display: flex;
+ flex-direction: column;
+ gap: 3rem;
+}
.guide {
max-width: 600px;
@@ -24,9 +29,47 @@ main:has(.guide) {
top: 1rem;
right: 1rem;
}
+
+ .guide__frame {
+ padding: 1rem;
+ background-color: #dedede;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ .guide__frame img {
+ max-height: 350px;
+ object-fit: contain;
+ object-position: left center;
+ }
+
+ .guide__frame ol {
+ margin-left: 1rem;
+ }
}
@media print {
- .guide {
+ main:has(.guide) {
+ padding: 0rem;
+ justify-content: flex-start;
+ }
+
+ .guide__frames {
+ display: block;
+ }
+
+ .guide__frame {
+ position: relative;
+ break-inside: avoid;
+ page-break-inside: avoid;
+ background-color: #dedede;
+
+ margin: 2rem 0;
+ }
+
+ .guide__frame img {
+ max-width: 100%;
+ max-height: 100px;
}
}
diff --git a/src/styles/App.css b/src/styles/App.css
index 8e1454f..75713d3 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -39,16 +39,18 @@ header {
.create-new-guide-btn {
padding: 0.5rem 1rem;
- border: 3px solid var(--color-border);
border-radius: 4px;
- background-color: transparent;
+ background-color: #ff7700;
+ color: #fff;
text-decoration: none;
- color: inherit;
+ font-weight: bold;
+ text-align: center;
}
.guide-list {
list-style: none;
padding: 0;
+ margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
@@ -74,17 +76,54 @@ footer {
nav {
display: flex;
flex-direction: column;
- align-items: center;
- gap: 1rem;
height: 100%;
padding-bottom: 2rem;
+ width: 100%;
- a:last-of-type {
+ a {
+ padding: 0.6rem 1rem 0.5rem;
+ border-radius: 4px;
+ line-height: 1;
+ display: block;
+ }
+
+ .settings-btn {
margin-top: auto;
+ align-self: center;
+ font-weight: bold;
+ }
+
+ .settings-btn.active {
+ margin-top: auto;
+ align-self: center;
+ color: #ff7700;
}
h2 {
- margin-top: 1rem;
+ margin-top: 2rem;
+ font-size: 1rem;
+ opacity: 0.5;
+ }
+
+ li {
+ width: 100%;
+ }
+
+ .guide-list a {
+ transition:
+ background-color 0.125s,
+ border-left 0.125s;
+ background-color: #fff;
+ border-left: 4px solid var(--color-border);
+ }
+
+ .guide-list a.active {
+ background-color: #fff;
+ border-left: 4px solid #ff7700;
+ }
+ .guide-list a:hover:not(.active) {
+ border-left: 4px solid #ff9900;
+ opacity: 0.8;
}
}
@@ -106,6 +145,10 @@ textarea {
color: inherit;
}
+a {
+ text-decoration: none;
+}
+
input,
textarea,
.file-upload {