WIP
This commit is contained in:
parent
ba6b25934a
commit
8d262a40c0
|
|
@ -1,8 +1,7 @@
|
||||||
{
|
{
|
||||||
"folders": [
|
"folders": [
|
||||||
{
|
{
|
||||||
"path": "."
|
"path": "."
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
"settings": {}
|
|
||||||
}
|
}
|
||||||
BIN
public/bunnie48px.png
Normal file
BIN
public/bunnie48px.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 703 B |
|
|
@ -2,14 +2,14 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
<link rel="icon" href="%PUBLIC_URL%/bunnie48px.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#000000" />
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="Web site created using create-react-app"
|
content="For all your bunny needs."
|
||||||
/>
|
/>
|
||||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/bunnie48px.png" />
|
||||||
<!--
|
<!--
|
||||||
manifest.json provides metadata used when your web app is installed on a
|
manifest.json provides metadata used when your web app is installed on a
|
||||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
work correctly both with client-side routing and a non-root public URL.
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
<title>React App</title>
|
<title>Zoey's Bits</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
|
|
||||||
|
|
@ -3,19 +3,9 @@
|
||||||
"name": "Create React App Sample",
|
"name": "Create React App Sample",
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "favicon.ico",
|
"src": "bunnie48px.png",
|
||||||
"sizes": "64x64 32x32 24x24 16x16",
|
|
||||||
"type": "image/x-icon"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "logo192.png",
|
|
||||||
"type": "image/png",
|
"type": "image/png",
|
||||||
"sizes": "192x192"
|
"sizes": "48x48"
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "logo512.png",
|
|
||||||
"type": "image/png",
|
|
||||||
"sizes": "512x512"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"start_url": ".",
|
"start_url": ".",
|
||||||
|
|
|
||||||
25
src/App.js
25
src/App.js
|
|
@ -1,23 +1,18 @@
|
||||||
import logo from './logo.svg';
|
import logo from './logo.svg';
|
||||||
import './App.css';
|
import './App.css';
|
||||||
|
|
||||||
|
import TopBar from './TopBar';
|
||||||
|
import BottomBar from './BottomBar';
|
||||||
|
import SideBar from './SideBar';
|
||||||
|
|
||||||
|
import Home from './Home';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="flex">
|
||||||
<header className="App-header">
|
<Home />
|
||||||
<img src={logo} className="App-logo" alt="logo" />
|
<TopBar />
|
||||||
<p>
|
<BottomBar />
|
||||||
Edit <code>src/App.js</code> and butt to reload.
|
|
||||||
</p>
|
|
||||||
<a
|
|
||||||
className="App-link"
|
|
||||||
href="https://reactjs.org"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Learn React
|
|
||||||
</a>
|
|
||||||
</header>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
11
src/BottomBar.js
Normal file
11
src/BottomBar.js
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
const BottomBar = () => {
|
||||||
|
return (
|
||||||
|
<div className="fixed bottom-0 left-0 h-8 w-screen flex flex-row bg-primary text-secondary shadow-sm justify-center items-center">
|
||||||
|
<div className="fixed flex justify-center">
|
||||||
|
<p className="text-sm">© LibreBun 2024</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BottomBar;
|
||||||
11
src/Home.js
Normal file
11
src/Home.js
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
const Home = () => {
|
||||||
|
return (
|
||||||
|
<div className="fixed flex bg-black text-secondary top-16 bottom-8 w-screen h-screen">
|
||||||
|
<div className="fixed flex justify-center">
|
||||||
|
<p>fuuuuuuuuuuuuuuuck</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Home;
|
||||||
12
src/SideBar.js
Normal file
12
src/SideBar.js
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
const SideBar = () => {
|
||||||
|
return (
|
||||||
|
<div className="fixed left-0 h-screen flex-shrink-0 w-24 flex flex-col bg-sidebar text-secondary shadow-sm justify-center items-center">
|
||||||
|
<div className="fixed flex flex-shrink-0">
|
||||||
|
<p className="text-sm">butts</p>
|
||||||
|
<p className="text-sm">butts2</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SideBar;
|
||||||
38
src/TopBar.js
Normal file
38
src/TopBar.js
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
const TopBar = () => {
|
||||||
|
return (
|
||||||
|
<div className="fixed top-0 left-0 h-16 w-screen flex flex-row bg-primary text-secondary
|
||||||
|
shadow-sm justify-center items-center space-x-2">
|
||||||
|
<div className="topbar-clickables">
|
||||||
|
<div className="center left-0 flex justify-center items-center">
|
||||||
|
<div className="fixed left-0 ml-6">
|
||||||
|
<img src={process.env.PUBLIC_URL + "/bunnie48px.png"} alt="Bunnie"/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="TopButton">
|
||||||
|
<p className="text-lg mx-4">Projects</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-px bg-black h-8"></div>
|
||||||
|
<div className="TopButton">
|
||||||
|
<p className="text-lg mx-4">Rants</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-px bg-black h-8"></div>
|
||||||
|
<div className="TopButton">
|
||||||
|
<p className="text-lg mx-4">About</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="fixed right-0 mr-6">
|
||||||
|
<div className="DarkModeButton">
|
||||||
|
<svg className="ml-4 flex items-center" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z"></path>
|
||||||
|
</svg>
|
||||||
|
<span className="ml-2">123</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export default TopBar;
|
||||||
|
|
@ -1,3 +1,17 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
@tailwind variants;
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.TopButton {
|
||||||
|
@apply hover:text-texthover cursor-pointer transition-colors duration-300;
|
||||||
|
}
|
||||||
|
.DarkModeButton {
|
||||||
|
@apply cursor-pointer
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,17 @@
|
||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
mode: 'jit',
|
||||||
content: ["./src/**/*.{html,js}"],
|
content: ["./src/**/*.{html,js}"],
|
||||||
|
darkMode: false,
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: "#111111",
|
||||||
|
secondary: "#f9b6c1",
|
||||||
|
sidebar: "#161616",
|
||||||
|
texthover: "#eae8f0",
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue