init
This commit is contained in:
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="27.68" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 296"><path fill="#673AB8" d="m128 0l128 73.9v147.8l-128 73.9L0 221.7V73.9z"></path><path fill="#FFF" d="M34.865 220.478c17.016 21.78 71.095 5.185 122.15-34.704c51.055-39.888 80.24-88.345 63.224-110.126c-17.017-21.78-71.095-5.184-122.15 34.704c-51.055 39.89-80.24 88.346-63.224 110.126Zm7.27-5.68c-5.644-7.222-3.178-21.402 7.573-39.253c11.322-18.797 30.541-39.548 54.06-57.923c23.52-18.375 48.303-32.004 69.281-38.442c19.922-6.113 34.277-5.075 39.92 2.148c5.644 7.223 3.178 21.403-7.573 39.254c-11.322 18.797-30.541 39.547-54.06 57.923c-23.52 18.375-48.304 32.004-69.281 38.441c-19.922 6.114-34.277 5.076-39.92-2.147Z"></path><path fill="#FFF" d="M220.239 220.478c17.017-21.78-12.169-70.237-63.224-110.126C105.96 70.464 51.88 53.868 34.865 75.648c-17.017 21.78 12.169 70.238 63.224 110.126c51.055 39.889 105.133 56.485 122.15 34.704Zm-7.27-5.68c-5.643 7.224-19.998 8.262-39.92 2.148c-20.978-6.437-45.761-20.066-69.28-38.441c-23.52-18.376-42.74-39.126-54.06-57.923c-10.752-17.851-13.218-32.03-7.575-39.254c5.644-7.223 19.999-8.261 39.92-2.148c20.978 6.438 45.762 20.067 69.281 38.442c23.52 18.375 42.739 39.126 54.06 57.923c10.752 17.85 13.218 32.03 7.574 39.254Z"></path><path fill="#FFF" d="M127.552 167.667c10.827 0 19.603-8.777 19.603-19.604c0-10.826-8.776-19.603-19.603-19.603c-10.827 0-19.604 8.777-19.604 19.603c0 10.827 8.777 19.604 19.604 19.604Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,42 @@
|
||||
import { useLocation } from 'preact-iso';
|
||||
import * as NavigationMenu from '@radix-ui/react-navigation-menu';
|
||||
import classNames from 'classnames';
|
||||
import { Box, Heading } from '@radix-ui/themes';
|
||||
import './styles.css';
|
||||
|
||||
export function Header() {
|
||||
const { url } = useLocation();
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Heading>Dev Blog/ Live Résumé</Heading>
|
||||
<NavigationMenu.Root orientation="horizontal" className="NavigationMenuRoot">
|
||||
<NavigationMenu.List className="NavigationMenuList">
|
||||
<NavigationMenu.Item>
|
||||
<NavigationMenu.Link className="NavigationMenuLink" href="/">
|
||||
Home
|
||||
</NavigationMenu.Link>
|
||||
</NavigationMenu.Item>
|
||||
<NavigationMenu.Item>
|
||||
<NavigationMenu.Link className="NavigationMenuLink" href="/about">
|
||||
About
|
||||
</NavigationMenu.Link>
|
||||
</NavigationMenu.Item>
|
||||
<NavigationMenu.Item>
|
||||
<NavigationMenu.Link className="NavigationMenuLink" href="/articles">
|
||||
Articles
|
||||
</NavigationMenu.Link>
|
||||
</NavigationMenu.Item>
|
||||
|
||||
<NavigationMenu.Indicator className="NavigationMenuIndicator">
|
||||
<div className="Arrow" />
|
||||
</NavigationMenu.Indicator>
|
||||
</NavigationMenu.List>
|
||||
|
||||
<div className="ViewportPosition">
|
||||
<NavigationMenu.Viewport className="NavigationMenuViewport" />
|
||||
</div>
|
||||
</NavigationMenu.Root>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
/*@import '@radix-ui/colors/black-alpha.css';*/
|
||||
|
||||
|
||||
/* reset */
|
||||
|
||||
button,
|
||||
p {
|
||||
all: unset;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { render } from 'preact';
|
||||
import { LocationProvider, Router, Route } from 'preact-iso';
|
||||
|
||||
import { Header } from './components/Header/index.jsx';
|
||||
import { Home } from './pages/Home/index.jsx';
|
||||
import { About } from './pages/About/index.jsx';
|
||||
import { Articles } from './pages/Articles/index.jsx';
|
||||
import { NotFound } from './pages/_404.jsx';
|
||||
import { Theme, Flex, Button, Box, Container, Heading } from '@radix-ui/themes';
|
||||
import '@radix-ui/themes/styles.css';
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
<LocationProvider>
|
||||
<Theme accentColor="sky" grayColor="slate">
|
||||
<Container size="3">
|
||||
<Flex direction="column" justify="center" align="center">
|
||||
<Header />
|
||||
<Box>
|
||||
<Router>
|
||||
<Route path="/" component={Home} />
|
||||
<Route path="/about" component={About} />
|
||||
<Route path="/articles" component={Articles} />
|
||||
<Route default component={NotFound} />
|
||||
</Router>
|
||||
<Button>Hi</Button>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Container>
|
||||
</Theme>
|
||||
</LocationProvider>
|
||||
);
|
||||
}
|
||||
|
||||
render(<App />, document.getElementById('app'));
|
||||
@@ -0,0 +1,7 @@
|
||||
export function About(){
|
||||
return (
|
||||
<div>
|
||||
<h3>About Me / Live Résumé</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
export function Articles(){
|
||||
return (
|
||||
<div></div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import preactLogo from '../../assets/preact.svg';
|
||||
//import './style.css';
|
||||
|
||||
export function Home() {
|
||||
return (
|
||||
<div class="home">
|
||||
<a href="https://preactjs.com" target="_blank">
|
||||
<img src={preactLogo} alt="Preact logo" height="160" width="160" />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
export function NotFound() {
|
||||
return (
|
||||
<section>
|
||||
<h1>404: Not Found</h1>
|
||||
<p>It's gone :(</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/*
|
||||
@import '@radix-ui/colors/sky.css';
|
||||
@import '@radix-ui/colors/slate.css';
|
||||
*/
|
||||
:root {
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
:root {
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user