diff --git a/frontend/index.html b/frontend/index.html index 0fca6f04..78357eeb 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,7 +4,7 @@ - frontend + Damp
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg index 6893eb13..34534755 100644 --- a/frontend/public/favicon.svg +++ b/frontend/public/favicon.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 84c76beb..f657f66c 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -3,6 +3,7 @@ import { GameList } from './components/GameList/GameList'; import { mockGames } from './mocks/games'; import { SearchBar } from './components/SearchBar/SearchBar'; import { useDebounce } from './hooks/useDebounce'; +import { Logo} from './components/Logo/Logo'; /** * Midlertidig forside: viser spillene med mockdata til GraphQL er klart. @@ -32,8 +33,8 @@ function App() { }; return ( -
-

Spill

+
+ {/* NY: logoen øverst til høyre */}

Søkeresultater

diff --git a/frontend/src/assets/logo/damp-logo-horizontal-on-dark.svg b/frontend/src/assets/logo/damp-logo-horizontal-on-dark.svg new file mode 100644 index 00000000..e341514d --- /dev/null +++ b/frontend/src/assets/logo/damp-logo-horizontal-on-dark.svg @@ -0,0 +1 @@ +Damp diff --git a/frontend/src/assets/logo/damp-logo-horizontal-on-light.svg b/frontend/src/assets/logo/damp-logo-horizontal-on-light.svg new file mode 100644 index 00000000..d23dcef8 --- /dev/null +++ b/frontend/src/assets/logo/damp-logo-horizontal-on-light.svg @@ -0,0 +1 @@ +Damp diff --git a/frontend/src/assets/logo/damp-logo-stacked-on-dark.svg b/frontend/src/assets/logo/damp-logo-stacked-on-dark.svg new file mode 100644 index 00000000..980071ea --- /dev/null +++ b/frontend/src/assets/logo/damp-logo-stacked-on-dark.svg @@ -0,0 +1 @@ +Damp diff --git a/frontend/src/assets/logo/damp-logo-stacked-on-light.svg b/frontend/src/assets/logo/damp-logo-stacked-on-light.svg new file mode 100644 index 00000000..6ceb29b3 --- /dev/null +++ b/frontend/src/assets/logo/damp-logo-stacked-on-light.svg @@ -0,0 +1 @@ +Damp diff --git a/frontend/src/assets/logo/damp-mark-on-dark.svg b/frontend/src/assets/logo/damp-mark-on-dark.svg new file mode 100644 index 00000000..e2a0f87e --- /dev/null +++ b/frontend/src/assets/logo/damp-mark-on-dark.svg @@ -0,0 +1 @@ +Damp logo mark diff --git a/frontend/src/assets/logo/damp-mark-on-light.svg b/frontend/src/assets/logo/damp-mark-on-light.svg new file mode 100644 index 00000000..a81e0c36 --- /dev/null +++ b/frontend/src/assets/logo/damp-mark-on-light.svg @@ -0,0 +1 @@ +Damp logo mark diff --git a/frontend/src/components/Logo/Logo.css b/frontend/src/components/Logo/Logo.css new file mode 100644 index 00000000..a91c291b --- /dev/null +++ b/frontend/src/components/Logo/Logo.css @@ -0,0 +1,37 @@ +/* Smale skjermer: øverst til venstre, scroller vekk så den ikke dekker innholdet */ +.logo { + position: absolute; + top: 20px; + left: 20px; + z-index: 10; +} + +.logo img { + display: block; + height: 88px; + width: auto; +} + +@media (max-width: 600px) { + .logo img { + height: 56px; /* Mindre logo på mobil */ + } +} + +/* Brede skjermer: fast og midt i sidepanelet til venstre. Må stå sist i filen */ +@media (min-width: 1320px) { + .logo { + position: fixed; + top: 20px; + /* Midten av sidepanelet. 1126px er bredden på #root i index.css; endres den, må den endres her også */ + left: calc((100vw - 1126px) / 4); + /* Flytter logoen halvparten av sin egen bredde til venstre, så midten av logoen havner midt i panelet */ + transform: translateX(-50%); + } + + .logo img { + height: auto; + /* Større: opptil 160px bred, men aldri bredere enn panelet minus 24px luft på hver side */ + width: min(90px, calc((100vw - 1126px) / 2 - 48px)); + } +} \ No newline at end of file diff --git a/frontend/src/components/Logo/Logo.tsx b/frontend/src/components/Logo/Logo.tsx new file mode 100644 index 00000000..24eb3dcd --- /dev/null +++ b/frontend/src/components/Logo/Logo.tsx @@ -0,0 +1,13 @@ +import logoOnDark from '../../assets/logo/damp-logo-stacked-on-dark.svg'; +import logoOnLight from '../../assets/logo/damp-logo-stacked-on-light.svg'; +import './Logo.css'; + +/** Damp-logoen (symbol med navnet under). Bytter versjon etter lyst/mørkt tema. */ +export function Logo() { + return ( + + + Damp + + ); +}