diff --git a/index.html b/index.html index 6006178..4882c65 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + Vite + Preact diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 0000000..4f83289 --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,18 @@ +import { useLocation } from 'preact-iso'; + +export function Header() { + const { url } = useLocation(); + + return ( +
+ +
+ ); +} diff --git a/src/index.jsx b/src/index.jsx index 287ab0e..9cdf9c1 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,16 +1,21 @@ import { render } from 'preact'; import { LocationProvider, Router, Route } from 'preact-iso'; -import { Home } from './pages/Home.jsx'; + +import { Header } from './components/Header.jsx'; +import { Home } from './pages/Home/index.jsx'; import { NotFound } from './pages/_404.jsx'; import './style.css'; export function App() { return ( - - - - +
+
+ + + + +
); } diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx deleted file mode 100644 index 398d592..0000000 --- a/src/pages/Home.jsx +++ /dev/null @@ -1,29 +0,0 @@ -import { useState } from 'preact/hooks'; - -import viteLogo from '/vite.svg'; -import preactLogo from '../assets/preact.svg'; - -export function Home() { - const [count, setCount] = useState(0); - - return ( - <> -
- - - - - - -
-

GitHub Codespaces ♥️ Preact

-
- -

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

-
-

Click on the Vite and Preact logos to learn more

- - ); -} diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx new file mode 100644 index 0000000..923de37 --- /dev/null +++ b/src/pages/Home/index.jsx @@ -0,0 +1,39 @@ +import preactLogo from '../../assets/preact.svg'; +import './style.css'; + +export function Home() { + return ( +
+ + Preact logo + +

Get Started building Vite-powered Preact Apps

+
+ + + +
+
+ ); +} + +function Resource(props) { + return ( + +

{props.title}

+

{props.description}

+ + ); +} diff --git a/src/pages/Home/style.css b/src/pages/Home/style.css new file mode 100644 index 0000000..f51cfc1 --- /dev/null +++ b/src/pages/Home/style.css @@ -0,0 +1,47 @@ +img { + margin-bottom: 1.5rem; +} + +img:hover { + filter: drop-shadow(0 0 2em #673ab8aa); +} + +.home section { + margin-top: 5rem; + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: 1.5rem; +} + +.resource { + padding: 0.75rem 1.5rem; + border-radius: 0.5rem; + text-align: left; + text-decoration: none; + color: #222; + background-color: #f1f1f1; + border: 1px solid transparent; +} + +.resource:hover { + border: 1px solid #000; + box-shadow: 0 25px 50px -12px #673ab888; +} + +@media (max-width: 639px) { + .home section { + margin-top: 5rem; + grid-template-columns: 1fr; + row-gap: 1rem; + } +} + +@media (prefers-color-scheme: dark) { + .resource { + color: #ccc; + background-color: #161616; + } + .resource:hover { + border: 1px solid #bbb; + } +} diff --git a/src/style.css b/src/style.css index 891e571..13fd296 100644 --- a/src/style.css +++ b/src/style.css @@ -3,9 +3,8 @@ line-height: 1.5; font-weight: 400; - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; + color: #222; + background-color: #ffffff; font-synthesis: none; text-rendering: optimizeLegibility; @@ -16,80 +15,56 @@ body { margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -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; - } } #app { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +header { + display: flex; + justify-content: flex-end; + background-color: #673ab8; +} + +header nav { + display: flex; +} + +header a { + color: #fff; + padding: 0.75rem; + text-decoration: none; +} + +header a.active { + background-color: #0005; +} + +header a:hover { + background-color: #0008; +} + +main { + flex: auto; + display: flex; + align-items: center; max-width: 1280px; margin: 0 auto; - padding: 2rem; text-align: center; } -.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); +@media (max-width: 639px) { + main { + margin: 2rem; + } } -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; +@media (prefers-color-scheme: dark) { + :root { + color: #ccc; + background-color: #1a1a1a; + } }