Added css variables

silversonicaxel · May 6, 2024 · a34a291 · a34a291
1 parent 4c2f8ab
commit a34a291
Show file tree

Hide file tree

Showing 13 changed files with 110 additions and 80 deletions.
diff --git a/app/app.module.css b/app/app.module.css
@@ -1,5 +1,5 @@
 .uaapp_quote {
-  margin: 20px 0;
+  margin: var(--spacing-element) 0;
   text-align: right;
 }
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,7 +4,6 @@ import type { ReactNode } from 'react'
 import { font } from '../src/config/font'
 import { meta } from '../src/config/meta'
 import { Header } from '../src/views/header'
-import { Menu } from '../src/views/menu'
 
 type RootLayoutProps = {
   children: ReactNode
@@ -29,7 +28,6 @@ export default function RootLayout({ children }: RootLayoutProps) {
       <body className={font.className}>
         <main>
           <Header />
-          <Menu />
 
           {children}
         </main>

diff --git a/app/places/places.module.css b/app/places/places.module.css
@@ -1,6 +1,6 @@
 .uaplaces a {
   display: inline-block;
-  margin-bottom: 5px;
+  margin-bottom: var(--spacing-element-link);
   transition: transform 0.5s ease-in-out;
 }
 

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1,9 +1,18 @@
+:root {
+  --spacing-element: 20px;
+  --spacing-element-link: 5px;
+
+  --color-text-primary: white;
+  --color-background-primary: black;
+  --color-background-secondary: #2d2d2d;
+}
+
 html,
 body {
-  background: black;
-  color: white;
+  background-color: var(--color-background-primary);
+  color: var(--color-text-primary);
   font-family: 'Space Mono', 'Helvetica Neue', sans-serif;
-  margin: 0 20px;
+  margin: 0 var(--spacing-element);
   padding: 0;
 }
 
@@ -19,7 +28,7 @@ a {
 }
 
 a:hover {
-  background-color: #2d2d2d;
+  background-color: var(--color-background-secondary);
 }
 
 main {

diff --git a/src/views/header/header.module.css b/src/views/header/header.module.css
@@ -0,0 +1,10 @@
+.uaheader {
+  border-bottom: 5px solid white;
+  box-sizing: content-box;
+  height: 80px;
+  padding: var(--spacing-element) 0;
+}
+
+.uaheader_logo {
+  position: absolute;
+}
diff --git a/src/views/header/header.test.tsx b/src/views/header/header.test.tsx
@@ -1,20 +1,11 @@
 import { render, screen } from '@testing-library/react'
-import { describe, expect, test, vi } from 'vitest'
+import { describe, expect, test } from 'vitest'
 import { Header } from './header'
 
-vi.mock('next/head', () => {
-  return {
-    __esModule: true,
-    default: ({ children }: { children: Array<React.ReactElement> }) => {
-      return <>{children}</>
-    }
-  }
-})
-
 describe('Views > Header', () => {
-  test('display title', async () => {
+  test('display logo', () => {
     render(<Header />)
 
-    expect(screen.getByText('unknow art')).toBeDefined()
+    expect(screen.getByAltText('logo unknown art')).toBeDefined()
   })
 })
diff --git a/src/views/header/header.tsx b/src/views/header/header.tsx
@@ -1,19 +1,32 @@
-import Head from 'next/head'
+import Image from 'next/image'
+import Link from 'next/link'
+import React from 'react'
 import type { FC } from 'react'
+import { Menu } from '../menu'
+import { Meta } from '../meta'
+import styles from './header.module.css'
 
-type HeaderProps = {
-  title?: string
-}
-
-export const Header: FC<HeaderProps> = (props) => {
-  const { title } = props
+export const Header: FC = () => {
+  return (
+    <>
+      <Meta />
 
-  const headTitle = `unknow art${title ? ` - ${title}` : ''}`
+      <header className={styles.uaheader}>
+        <Link href='/'>
+          <Image
+            src='/logo.png'
+            alt='logo unknown art'
+            width={80}
+            height={80}
+            className={styles.uaheader_logo}
+            role='navigation'
+            aria-label='main logo'
+          />
+        </Link>
 
-  return (
-    <Head>
-      <title>{headTitle}</title>
-    </Head>
+        <Menu />
+      </header>
+    </>
   )
 }
 

diff --git a/src/views/menu/menu.module.css b/src/views/menu/menu.module.css
@@ -1,18 +1,7 @@
-.uaheader {
-  border-bottom: 5px solid white;
-  box-sizing: content-box;
-  height: 80px;
-  padding: 20px 0;
-}
-
-.ualogo {
-  position: absolute;
-}
-
-.uanav ul {
+.uamenu ul {
   display: flex;
   flex-direction: row-reverse;
-  gap: 20px;
+  gap: var(--spacing-element);
   list-style: none;
   padding: 0;
 }
diff --git a/src/views/menu/menu.test.tsx b/src/views/menu/menu.test.tsx
@@ -3,12 +3,6 @@ import { describe, expect, test } from 'vitest'
 import { Menu } from './menu'
 
 describe('Views > Menu', () => {
-  test('display logo', () => {
-    render(<Menu />)
-
-    expect(screen.getByAltText('logo unknown art')).toBeDefined()
-  })
-
   test('display navigation menu', () => {
     render(<Menu />)
 

diff --git a/src/views/menu/menu.tsx b/src/views/menu/menu.tsx
@@ -1,39 +1,24 @@
-import Image from 'next/image'
 import Link from 'next/link'
 import { memo } from 'react'
 import type { FC } from 'react'
 import styles from './menu.module.css'
 
 export const Menu: FC = memo(() => {
   return (
-    <header className={styles.uaheader}>
-      <Link href='/'>
-        <Image
-          src='/logo.png'
-          alt='logo unknown art'
-          width={80}
-          height={80}
-          className={styles.ualogo}
-          role='navigation'
-          aria-label='main logo'
-        />
-      </Link>
-
-      <nav className={styles.uanav}>
-        <ul aria-labelledby='menu'>
-          <li>
-            <Link href='/' aria-label='home'>
-              home
-            </Link>
-          </li>
-          <li>
-            <Link href='/places' aria-label='places'>
-              places
-            </Link>
-          </li>
-        </ul>
-      </nav>
-    </header>
+    <nav className={styles.uamenu}>
+      <ul aria-labelledby='menu'>
+        <li>
+          <Link href='/' aria-label='home'>
+            home
+          </Link>
+        </li>
+        <li>
+          <Link href='/places' aria-label='places'>
+            places
+          </Link>
+        </li>
+      </ul>
+    </nav>
   )
 })
 

diff --git a/src/views/meta/index.ts b/src/views/meta/index.ts
@@ -0,0 +1 @@
+export * from './meta'
diff --git a/src/views/meta/meta.test.tsx b/src/views/meta/meta.test.tsx
@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, test, vi } from 'vitest'
+import { Meta } from './meta'
+
+vi.mock('next/head', () => {
+  return {
+    __esModule: true,
+    default: ({ children }: { children: Array<React.ReactElement> }) => {
+      return <>{children}</>
+    }
+  }
+})
+
+describe('Views > Meta', () => {
+  test('display title', async () => {
+    render(<Meta />)
+
+    expect(screen.getByText('unknow art')).toBeDefined()
+  })
+})
diff --git a/src/views/meta/meta.tsx b/src/views/meta/meta.tsx
@@ -0,0 +1,20 @@
+import Head from 'next/head'
+import type { FC } from 'react'
+
+type MetaProps = {
+  title?: string
+}
+
+export const Meta: FC<MetaProps> = (props) => {
+  const { title } = props
+
+  const headTitle = `unknow art${title ? ` - ${title}` : ''}`
+
+  return (
+    <Head>
+      <title>{headTitle}</title>
+    </Head>
+  )
+}
+
+Meta.displayName = 'Meta'