diff --git a/frontend/index.html b/frontend/index.html index 0211e3c..ae54c6f 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,9 +2,9 @@ - + - WF radio + Vite + Preact
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg deleted file mode 100644 index dac19cb..0000000 --- a/frontend/public/favicon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/frontend/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/app.jsx b/frontend/src/app.jsx index 0133166..9efff17 100644 --- a/frontend/src/app.jsx +++ b/frontend/src/app.jsx @@ -1,35 +1,43 @@ -// --- Imports --- - -// Functions import { useState } from 'preact/hooks' - -// Components -import NavBar from './components/NavBar/navbar' -import Button from './components/Buttons/button' - -// Styles +import preactLogo from './assets/preact.svg' +import viteLogo from '/vite.svg' 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 deleted file mode 100644 index dc86a70..0000000 Binary files a/frontend/src/assets/logo.png and /dev/null differ diff --git a/frontend/src/assets/preact.svg b/frontend/src/assets/preact.svg new file mode 100644 index 0000000..908f17d --- /dev/null +++ b/frontend/src/assets/preact.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/components/Buttons/button.jsx b/frontend/src/components/Buttons/button.jsx deleted file mode 100644 index 99bfec9..0000000 --- a/frontend/src/components/Buttons/button.jsx +++ /dev/null @@ -1,19 +0,0 @@ -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 deleted file mode 100644 index 86a5006..0000000 --- a/frontend/src/components/Buttons/button.module.css +++ /dev/null @@ -1,46 +0,0 @@ -.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 deleted file mode 100644 index 16c586d..0000000 --- a/frontend/src/components/NavBar/navbar.jsx +++ /dev/null @@ -1,16 +0,0 @@ -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 deleted file mode 100644 index 9bbdfbb..0000000 --- a/frontend/src/components/NavBar/navbar.module.css +++ /dev/null @@ -1,18 +0,0 @@ -.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 d5cd39c..008c962 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -1,5 +1,5 @@ import { render } from 'preact' -import './styles/global.css' +import './styles/index.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 9c0abcd..088ed3a 100644 --- a/frontend/src/styles/app.css +++ b/frontend/src/styles/app.css @@ -1,32 +1,25 @@ - #app { + max-width: 1280px; + margin: 0 auto; padding: 2rem; + text-align: center; } -a { - text-decoration: none; -} - -/* Logo */ - -.logo.img { - position: absolute; - top: 1.6rem; +.logo { height: 6em; padding: 1.5em; } +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.preact:hover { + filter: drop-shadow(0 0 2em #673ab8aa); +} -.logo.text { +.card { + padding: 2em; +} - 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 +.read-the-docs { + color: #888; +} diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css deleted file mode 100644 index a29148e..0000000 --- a/frontend/src/styles/global.css +++ /dev/null @@ -1,22 +0,0 @@ -/*-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 new file mode 100644 index 0000000..08a3ac9 --- /dev/null +++ b/frontend/src/styles/index.css @@ -0,0 +1,68 @@ +: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; + } +}