SailorZoop/ZoeysBits
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

WIP

Browse source
This commit is contained in:
Zoey 2024-01-14 11:24:34 +01:00
parent ba6b25934a
commit 8d262a40c0
11 changed files with 120 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
ZoeysBits.code-workspace
View file

@ -3,6 +3,5 @@
{
"path": "."
}
],
"settings": {}
]
}

BIN
public/bunnie48px.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 703 B

8
public/index.html
View file

@ -2,14 +2,14 @@
<html lang="en">
<head>
<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="theme-color" content="#000000" />
<meta
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
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.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Zoey's Bits</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

14
public/manifest.json
View file

@ -3,19 +3,9 @@
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"src": "bunnie48px.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
"sizes": "48x48"
}
],
"start_url": ".",

25
src/App.js
View file

@ -1,23 +1,18 @@
import logo from './logo.svg';
import './App.css';
import TopBar from './TopBar';
import BottomBar from './BottomBar';
import SideBar from './SideBar';
import Home from './Home';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
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 className="flex">
<Home />
<TopBar />
<BottomBar />
</div>
);
}

11
src/BottomBar.js Normal file
View 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">&copy; LibreBun 2024</p>
</div>
</div>
);
};
export default BottomBar;

11
src/Home.js Normal file
View 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
View 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
View 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;

14
src/index.css
View file

@ -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 {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

12
tailwind.config.js
View file

@ -1,9 +1,17 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
content: ["./src/**/*.{html,js}"],
darkMode: false,
theme: {
extend: {},
extend: {
colors: {
primary: "#111111",
secondary: "#f9b6c1",
sidebar: "#161616",
texthover: "#eae8f0",
},
},
},
plugins: [],
}