diff --git a/FrameRate/src/App.css b/FrameRate/src/App.css deleted file mode 100644 index d6c7c9a..0000000 --- a/FrameRate/src/App.css +++ /dev/null @@ -1,182 +0,0 @@ -.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 { - 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; - } -} - -#next-steps { - 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); - } -} - -#next-steps ul { - list-style: none; - padding: 0; - display: flex; - gap: 8px; - margin: 32px 0 0; - - .logo { - height: 18px; - } - - 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; - - &:hover { - box-shadow: var(--shadow); - } - .button-icon { - height: 18px; - width: 18px; - } - } - - @media (max-width: 1024px) { - margin-top: 20px; - 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; - } -} - -.ticks { - position: relative; - width: 100%; - - &::before, - &::after { - content: ''; - position: absolute; - top: -4.5px; - border: 5px solid transparent; - } - - &::before { - left: 0; - border-left-color: var(--border); - } - &::after { - right: 0; - border-right-color: var(--border); - } -} diff --git a/FrameRate/src/App.tsx b/FrameRate/src/App.tsx index 8cebd60..d80a585 100644 --- a/FrameRate/src/App.tsx +++ b/FrameRate/src/App.tsx @@ -1,101 +1,12 @@ -import { useState } from 'react'; -import heroImg from './assets/hero.png'; -import reactLogo from './assets/react.svg'; -import viteLogo from './assets/vite.svg'; -import './App.css'; +import './index.css'; +import { Layout } from './components/layout/Layout'; +import { FeaturedMovie } from './components/FeaturedMovie'; function App() { - const [count, setCount] = useState(0); - return ( - <> -
-
- - React logo - Vite logo -
-
-

Get started

-

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

-
- -
- -
- -
-
- -

Documentation

-

Your questions, answered

- -
-
- -

Connect with us

-

Join the Vite community

- -
-
- -
-
- + + + ); } diff --git a/FrameRate/src/components/FeaturedMovie.tsx b/FrameRate/src/components/FeaturedMovie.tsx new file mode 100644 index 0000000..c60e632 --- /dev/null +++ b/FrameRate/src/components/FeaturedMovie.tsx @@ -0,0 +1,60 @@ +import { featuredMovie as movie, featuredReview as review, genres } from '../data/mockData'; + +const IMAGE_BASE = 'https://image.tmdb.org/t/p'; +const DICE = ['⚀', '⚁', '⚂', '⚃', '⚄', '⚅']; + +export function FeaturedMovie() { + const year = movie.release_date.slice(0, 4); + const genreNames = movie.genre_ids.map(id => genres[id]); + const rounded = Math.round(movie.average_rating); + + return ( +
+ {/* Venstre: tekst */} +
+

Utvalgt fra topplisten

+

{movie.title}

+ +

+ {year} + {genreNames.join(' / ')} +

+ +
+ +
+

Terningkast {movie.average_rating.toFixed(1)}

+

Basert på {movie.review_count} anmeldelser

+
+
+ +
+

«{review.text}»

+
+ — {review.author}, {review.date} +
+
+ +
+ + Les mer om filmen + + +
+
+ + {/* Høyre: plakat */} + {`Plakat +
+ ); +} diff --git a/FrameRate/src/components/layout/Footer.tsx b/FrameRate/src/components/layout/Footer.tsx new file mode 100644 index 0000000..a53d2c2 --- /dev/null +++ b/FrameRate/src/components/layout/Footer.tsx @@ -0,0 +1,28 @@ +export function Footer() { + return ( + + ); +} diff --git a/FrameRate/src/components/layout/Header.tsx b/FrameRate/src/components/layout/Header.tsx new file mode 100644 index 0000000..1e7a485 --- /dev/null +++ b/FrameRate/src/components/layout/Header.tsx @@ -0,0 +1,71 @@ +// ---------- Lyset i menyen ---------- + +/** Flytter lyset i menyen til en x-posisjon (piksler fra venstre kant av menyen). */ +function moveLight(nav: HTMLElement, x: number) { + nav.style.setProperty('--x', `${x}px`); +} + +/** Mus: lyset følger musepekeren. */ +function handleMouseMove(e: React.MouseEvent) { + const nav = e.currentTarget; + moveLight(nav, e.clientX - nav.getBoundingClientRect().left); +} + +/** Tastatur: lyset hopper til midten av lenken som får fokus. */ +function handleFocus(e: React.FocusEvent) { + const nav = e.currentTarget; + const link = e.target.getBoundingClientRect(); + moveLight(nav, link.left - nav.getBoundingClientRect().left + link.width / 2); +} + +// ---------- Headeren ---------- + +export function Header() { + return ( +
+ {/* Lysstrålen fra kameraet ved sidelasting. Ren pynt, så skjult for skjermlesere. */} +
+ ); +} diff --git a/FrameRate/src/components/layout/Layout.tsx b/FrameRate/src/components/layout/Layout.tsx new file mode 100644 index 0000000..79054a5 --- /dev/null +++ b/FrameRate/src/components/layout/Layout.tsx @@ -0,0 +1,14 @@ +import type { ReactNode } from 'react'; +import { Header } from './Header'; +import { Footer } from './Footer'; + +/** Header og footer som er lik på alle sider. Sideinnholdet havner i
. */ +export function Layout({ children }: { children: ReactNode }) { + return ( + <> +
+
{children}
+