diff --git a/README.md b/README.md index 7751b8c..a8fde7e 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ Before a pull request can be merged: request, and approvals from staff do not count — you review each other's code. 2. **Every review comment must be marked resolved.** Reply to each one, fix it - or explain why not, then click *Resolve conversation*. + or explain why not, then click _Resolve conversation_. 3. **Pushing new commits dismisses the approval**, so if you change something after being approved, ask for another review. This is deliberate: what was - approved is what gets merged. \ No newline at end of file + approved is what gets merged. diff --git a/t29-project-1/src/App.css b/t29-project-1/src/App.css index 0928804..cd03c39 100644 --- a/t29-project-1/src/App.css +++ b/t29-project-1/src/App.css @@ -1,185 +1,63 @@ -.counter { - font-size: 16px; - padding: 5px 10px; - border-radius: 5px; - color: var(--accent); - background: var(--accent-bg); - border: 2px solid transparent; - transition: border-color 0.3s; - margin-bottom: 24px; - - &:hover { - border-color: var(--accent-border); - } - &:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - } -} - -.hero { - position: relative; - - .base, - .framework, - .vite { - inset-inline: 0; - margin: 0 auto; - } - - .base { - width: 170px; - position: relative; - z-index: 0; - } - - .framework, - .vite { - position: absolute; - } - - .framework { - z-index: 1; - top: 34px; - height: 28px; - transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) - scale(1.4); - } - - .vite { - z-index: 0; - top: 107px; - height: 26px; - width: auto; - transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) - scale(0.8); - } -} - -#center { +/* Page Wrapper */ +.app-container { + max-width: 800px; + margin: 0 auto; + padding: 1.5rem; display: flex; flex-direction: column; - gap: 25px; - place-content: center; - place-items: center; - flex-grow: 1; - - @media (max-width: 1024px) { - padding: 32px 20px 24px; - gap: 18px; - } + gap: 1.5rem; + width: 100%; } -#next-steps { +/* 1. FAVORITES STAR: Far Top Right */ +.top-bar { display: flex; - border-top: 1px solid var(--border); - text-align: left; - - & > div { - flex: 1 1 0; - padding: 32px; - @media (max-width: 1024px) { - padding: 24px 20px; - } - } - - .icon { - margin-bottom: 16px; - width: 22px; - height: 22px; - } - - @media (max-width: 1024px) { - flex-direction: column; - text-align: center; - } -} - -#docs { - border-right: 1px solid var(--border); - - @media (max-width: 1024px) { - border-right: none; - border-bottom: 1px solid var(--border); - } + justify-content: flex-end; /* Pushes star to the right */ + width: 100%; } -#next-steps ul { - list-style: none; - padding: 0; +/* 2. NAVIGATION & CARD: Compact Center Layout */ +.nav-layout { display: flex; - gap: 8px; - margin: 32px 0 0; - - .logo { - height: 18px; - } + flex-direction: row; + align-items: center; + justify-content: center; + gap: 1rem; /* Small gap keeps arrow buttons close to the card */ + margin: 1rem auto 0 auto; /* Centers the layout block */ + width: 100%; + max-width: 580px; /* RESTRICTS WIDTH: Stops buttons from flying far apart */ +} - a { - color: var(--text-h); - font-size: 16px; - border-radius: 6px; - background: var(--social-bg); - display: flex; - padding: 6px 12px; - align-items: center; - gap: 8px; - text-decoration: none; - transition: box-shadow 0.3s; +/* Make CatCard take central space naturally */ +.nav-layout > article, +.nav-layout > .cat-card { + flex: 1; + width: 100%; +} - &:hover { - box-shadow: var(--shadow); - } - .button-icon { - height: 18px; - width: 18px; - } - } +/* Keep arrow buttons at their exact fixed size */ +.nav-layout > button { + flex-shrink: 0; +} - @media (max-width: 1024px) { - margin-top: 20px; +/* Mobile Responsive Adjustments */ +@media (max-width: 600px) { + .nav-layout { flex-wrap: wrap; - justify-content: center; - - li { - flex: 1 1 calc(50% - 8px); - } - - a { - width: 100%; - justify-content: center; - box-sizing: border-box; - } } -} -#spacer { - height: 88px; - border-top: 1px solid var(--border); - @media (max-width: 1024px) { - height: 48px; + .nav-layout > article, + .nav-layout > .cat-card { + flex: 0 0 100%; + order: 1; /* Card on top */ } -} -.ticks { - position: relative; - width: 100%; - - &::before, - &::after { - content: ''; - position: absolute; - top: -4.5px; - border: 5px solid transparent; + .nav-layout > button:first-of-type { + order: 2; /* Previous button bottom-left */ } - &::before { - left: 0; - border-left-color: var(--border); - } - &::after { - right: 0; - border-right-color: var(--border); + .nav-layout > button:last-of-type { + order: 3; /* Next button bottom-right */ } } diff --git a/t29-project-1/src/App.tsx b/t29-project-1/src/App.tsx index 70c40e4..54f1f06 100644 --- a/t29-project-1/src/App.tsx +++ b/t29-project-1/src/App.tsx @@ -1,125 +1,31 @@ import { useState } from 'react'; -import heroImg from './assets/hero.png'; -import reactLogo from './assets/react.svg'; -import viteLogo from './assets/vite.svg'; +import { NavPrevious, NavNext } from './components/ActionButtons'; +import { CatCard } from './components/CatCard'; +import { Favorites } from './components/Favorites'; import './App.css'; -import Cat from './components/Cat'; -function App() { - const [count, setCount] = useState(0); +export default function App() { + const [isViewingFavorites, setIsViewingFavorites] = useState(false); - return ( - <> -
-
- - React logo - Vite logo -
-
-

Get started

-

- Edit src/App.tsx and save to test HMR -

-
- -
- -
- - + const handlePrevious = () => {}; + const handleNext = () => {}; -
-
- -

Documentation

-

Your questions, answered

- -
-
- -

Connect with us

-

Join the Vite community

- -
-
+ return ( +
+ {/* Top bar containing ONLY the Star Button */} +
+ setIsViewingFavorites(!isViewingFavorites)} + isViewingFavorites={isViewingFavorites} + /> +
-
-
- + {/* 3-Column Navigation Grid */} + +
); -} - -export default App; +} \ No newline at end of file diff --git a/t29-project-1/src/components/ActionButtons.css b/t29-project-1/src/components/ActionButtons.css new file mode 100644 index 0000000..3bc00d6 --- /dev/null +++ b/t29-project-1/src/components/ActionButtons.css @@ -0,0 +1,64 @@ +/* --- NAVIGATION & CARD SECTION --- */ + +/* Pushes the navigation and card further down the viewport */ +.nav-layout { + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + gap: 2rem; + margin-top: 4rem; /* Moves the section further down from the top bar */ +} + +/* Triangle navigation buttons (No circles/borders) */ +.nav-btn { + background: none; + border: none; + padding: 0; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 50%; /* For clean circular WCAG focus rings */ + transition: transform 0.15s ease; +} + +.nav-btn:hover { + transform: scale(1.1); +} + +.nav-btn:active { + transform: scale(0.95); +} + +/* Arrow SVG styling (Matching the star's color palette & sizing) */ +.arrow-svg { + width: 64px; /* Scaled up arrow dimensions */ + height: 64px; + overflow: visible; + fill: #fff4c8; + stroke: #7d5d75; + stroke-width: 1px; + stroke-linejoin: round; + stroke-linecap: round; + transition: + fill 0.15s ease, + stroke 0.15s ease; +} + +/* Responsive color inversion on hover and focus */ +.nav-btn:hover .arrow-svg, +.nav-btn:focus-visible .arrow-svg { + fill: #7d5d75; + stroke: #fff4c8; +} + +.nav-btn:active .arrow-svg { + fill: #7d5d75; + stroke: #7d5d75; +} + +/* WCAG Focus Ring for Keyboard Users */ +.nav-btn:focus-visible { + outline: 3px solid #005fcc; + outline-offset: 4px; +} diff --git a/t29-project-1/src/components/ActionButtons.tsx b/t29-project-1/src/components/ActionButtons.tsx new file mode 100644 index 0000000..c29b16b --- /dev/null +++ b/t29-project-1/src/components/ActionButtons.tsx @@ -0,0 +1,35 @@ +// ActionButtons.tsx +import './ActionButtons.css'; + +interface NavButtonProps { + onClick: () => void; + disabled?: boolean; +} + +export const NavPrevious = ({ onClick, disabled = false }: NavButtonProps) => ( + +); + +export const NavNext = ({ onClick, disabled = false }: NavButtonProps) => ( + +); diff --git a/t29-project-1/src/components/CatCard.css b/t29-project-1/src/components/CatCard.css new file mode 100644 index 0000000..33bd049 --- /dev/null +++ b/t29-project-1/src/components/CatCard.css @@ -0,0 +1,31 @@ +/* Card container using semantic article tag */ +article.cat-card { + width: 100%; + max-width: 420px; + min-height: 480px; + background-color: #ffffff; + border: 2px solid #e2e8f0; + border-radius: 16px; + padding: 1.5rem; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + margin: 0 auto; +} + +/* Temporary image box placeholder */ +.card-image-placeholder { + width: 100%; + height: 300px; + background-color: #f1f5f9; + border: 2px dashed #cbd5e1; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + color: #64748b; + font-weight: 500; +} diff --git a/t29-project-1/src/components/CatCard.tsx b/t29-project-1/src/components/CatCard.tsx new file mode 100644 index 0000000..5a84022 --- /dev/null +++ b/t29-project-1/src/components/CatCard.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import './CatCard.css'; + +export const CatCard: React.FC = () => { + return ( +
+
+

🐱 Cat Image Placeholder

+
+

Breed Name Placeholder

+

Temperament description placeholder

+
+ ); +}; + +export default CatCard; diff --git a/t29-project-1/src/components/Favorites.css b/t29-project-1/src/components/Favorites.css new file mode 100644 index 0000000..cf958f5 --- /dev/null +++ b/t29-project-1/src/components/Favorites.css @@ -0,0 +1,53 @@ +/* Star-only button wrapper */ +.star-btn { + background: none; + border: none; + padding: 0; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: transform 0.15s ease; +} + +.star-btn:hover { + transform: scale(1.05); +} + +.star-btn:active { + transform: scale(0.95); +} + +/* The actual rounded star SVG */ +.star-svg { + width: 50px; + height: 50px; + overflow: visible; + fill: #fff4c8; + stroke: #7d5d75; + stroke-width: 1.2px; + stroke-linejoin: round; + stroke-linecap: round; + transition: + fill 0.15s ease, + stroke 0.15s ease; +} + +/* Invert colors on BOTH hover and keyboard focus */ +.star-btn:hover .star-svg, +.star-btn:focus-visible .star-svg { + fill: #7d5d75; + stroke: #fff4c8; +} + +.star-btn:active .star-svg { + fill: #7d5d75; + stroke: #7d5d75; +} + +/* WCAG Requirement: Accessible keyboard focus outline */ +.star-btn:focus-visible { + outline: 3px solid #005fcc; + outline-offset: 4px; +} diff --git a/t29-project-1/src/components/Favorites.tsx b/t29-project-1/src/components/Favorites.tsx new file mode 100644 index 0000000..9fc2e58 --- /dev/null +++ b/t29-project-1/src/components/Favorites.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import './Favorites.css'; + +interface FavoritesProps { + onToggleFavorites: () => void; + isViewingFavorites?: boolean; +} + +export const Favorites: React.FC = ({ + onToggleFavorites, + isViewingFavorites = false, +}) => { + return ( + + ); +}; + +export default Favorites;