diff --git a/frontend/index.html b/frontend/index.html index ae54c6f..0211e3c 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,9 +2,9 @@ - + - Vite + Preact + WF radio
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg new file mode 100644 index 0000000..dac19cb --- /dev/null +++ b/frontend/public/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/frontend/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/app.jsx b/frontend/src/app.jsx index 9efff17..0133166 100644 --- a/frontend/src/app.jsx +++ b/frontend/src/app.jsx @@ -1,43 +1,35 @@ +// --- Imports --- + +// Functions import { useState } from 'preact/hooks' -import preactLogo from './assets/preact.svg' -import viteLogo from '/vite.svg' + +// Components +import NavBar from './components/NavBar/navbar' +import Button from './components/Buttons/button' + +// Styles import './styles/app.css' +// Images +import logo from './assets/logo.png' + export function App() { const [count, setCount] = useState(0) return ( <>
- - - - - + + +
-

Vite + Preact

-
- -

- Edit src/app.jsx and save to test HMR -

-
-

- Check out{' '} - - create-preact - - , the official Preact + Vite starter -

-

- Click on the Vite and Preact logos to learn more -

+ + + + ) } diff --git a/frontend/src/assets/logo.png b/frontend/src/assets/logo.png new file mode 100644 index 0000000..dc86a70 Binary files /dev/null and b/frontend/src/assets/logo.png differ diff --git a/frontend/src/assets/preact.svg b/frontend/src/assets/preact.svg deleted file mode 100644 index 908f17d..0000000 --- a/frontend/src/assets/preact.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/components/Buttons/button.jsx b/frontend/src/components/Buttons/button.jsx new file mode 100644 index 0000000..99bfec9 --- /dev/null +++ b/frontend/src/components/Buttons/button.jsx @@ -0,0 +1,19 @@ +import { h } from 'preact' // Necessary ? +import styles from './button.module.css' + +function Button({ children, onClick, className, variant = 'primary', ...rest}) { + + const buttonClasses = `${styles.button} ${styles[variant] || ''} ${className || ''}` + + return ( + + ) +} + +export default Button; \ No newline at end of file diff --git a/frontend/src/components/Buttons/button.module.css b/frontend/src/components/Buttons/button.module.css new file mode 100644 index 0000000..86a5006 --- /dev/null +++ b/frontend/src/components/Buttons/button.module.css @@ -0,0 +1,46 @@ +.button { + + color: #eaeaea; + font-family: inherit; + font-weight: 500; + + padding: 10px 15px; + + border: .1em; + border-style: solid; + border-radius: .3em; + + transition: 300ms; +} + +.primary { + background-color: #353be5; + border-color: #4e53dc; +} + +.primary:hover { + background-color: #353be5; + border-color: #6b70f7; + + filter: drop-shadow(#353be580 0 0 .7em); +} + +.secondary { + background-color: #1a1a1a; + border-color: #2a2a2a; +} + +.secondary:hover { + background-color: #2a2a2a; + border-color: #3a3a3a; +} + +.tertiary { + background-color: #eaeaea00; + border-color: #eaeaea; +} + +.tertiary:hover { + background-color: #eaeaea16; + border-color: #eaeaea; +} \ No newline at end of file diff --git a/frontend/src/components/NavBar/navbar.jsx b/frontend/src/components/NavBar/navbar.jsx new file mode 100644 index 0000000..16c586d --- /dev/null +++ b/frontend/src/components/NavBar/navbar.jsx @@ -0,0 +1,16 @@ +import { h } from 'preact' // Necessary ? +import styles from './navbar.module.css' + +function NavBar({ children, className, ...rest}) { + + return ( +
+ {children} +
+ ) +} + +export default NavBar; \ No newline at end of file diff --git a/frontend/src/components/NavBar/navbar.module.css b/frontend/src/components/NavBar/navbar.module.css new file mode 100644 index 0000000..9bbdfbb --- /dev/null +++ b/frontend/src/components/NavBar/navbar.module.css @@ -0,0 +1,18 @@ +.navbar { + position: absolute; + top: 2.5rem; + right: 3rem; + left: 21rem; + + margin: 1rem; + height: 5rem; + + background-color: #1a1a1a; + color: #eaeaea; + + border: #3a3a3a solid; + border-width: .1em; + border-radius: .5rem; + + +} \ No newline at end of file diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index 008c962..d5cd39c 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -1,5 +1,5 @@ import { render } from 'preact' -import './styles/index.css' +import './styles/global.css' import { App } from './app.jsx' render(, document.getElementById('app')) diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css index 088ed3a..9c0abcd 100644 --- a/frontend/src/styles/app.css +++ b/frontend/src/styles/app.css @@ -1,25 +1,32 @@ + #app { - max-width: 1280px; - margin: 0 auto; padding: 2rem; - text-align: center; } -.logo { +a { + text-decoration: none; +} + +/* Logo */ + +.logo.img { + position: absolute; + top: 1.6rem; height: 6em; padding: 1.5em; } -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.preact:hover { - filter: drop-shadow(0 0 2em #673ab8aa); -} -.card { - padding: 2em; -} +.logo.text { -.read-the-docs { - color: #888; -} + position: relative; + left: 4rem; + top: 1.3rem; + + color: #eaeaea; + font-family: Inter; + font-weight: 600; + + padding: 1.5em; + + font-size: 3em; +} \ No newline at end of file diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css new file mode 100644 index 0000000..a29148e --- /dev/null +++ b/frontend/src/styles/global.css @@ -0,0 +1,22 @@ +/*-Impports----------------------------------------------------------*/ +@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); + + +:root { + font-family: 'IBM Plex Mono'; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #0c0c0c; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + min-width: 320px; +} diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css deleted file mode 100644 index 08a3ac9..0000000 --- a/frontend/src/styles/index.css +++ /dev/null @@ -1,68 +0,0 @@ -:root { - font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -}