moon and stuff
This commit is contained in:
parent
8d262a40c0
commit
30f23d7242
|
@ -1,4 +1,4 @@
|
|||
import logo from './logo.svg';
|
||||
//import logo from './logo.svg';
|
||||
import './App.css';
|
||||
|
||||
import TopBar from './TopBar';
|
||||
|
@ -9,7 +9,7 @@ import Home from './Home';
|
|||
|
||||
function App() {
|
||||
return (
|
||||
<div className="flex">
|
||||
<div className="body">
|
||||
<Home />
|
||||
<TopBar />
|
||||
<BottomBar />
|
||||
|
|
10
src/Home.js
10
src/Home.js
|
@ -1,11 +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 className="flex bg-black text-secondary top-14 bottom-8 w-screen h-screen">
|
||||
<div className="flex items-center justify-center text-4xl mx-auto">
|
||||
<h1 className="text-center">Welcome fellow traveller!</h1>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
export default Home;
|
3
src/Moon.svg
Normal file
3
src/Moon.svg
Normal file
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<path d="M50 0 A50 50 0 0 0 50 100 Z" fill="yellow" stroke="black"/>
|
||||
</svg>
|
After Width: | Height: | Size: 140 B |
|
@ -1,6 +1,6 @@
|
|||
const TopBar = () => {
|
||||
return (
|
||||
<div className="fixed top-0 left-0 h-16 w-screen flex flex-row bg-primary text-secondary
|
||||
<div className="fixed top-0 left-0 h-14 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">
|
||||
|
@ -22,10 +22,9 @@ const TopBar = () => {
|
|||
</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 xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="half-crescent-moon">
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
||||
</svg>
|
||||
<span className="ml-2">123</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -34,5 +33,4 @@ const TopBar = () => {
|
|||
);
|
||||
};
|
||||
|
||||
|
||||
export default TopBar;
|
Before Width: | Height: | Size: 743 B After Width: | Height: | Size: 742 B |
|
@ -2,6 +2,7 @@
|
|||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@tailwind variants;
|
||||
@import url(https://fonts.googleapis.com/css2?family=Sarabun);
|
||||
|
||||
@layer components {
|
||||
.TopButton {
|
||||
|
@ -14,9 +15,7 @@
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-family: 'Sarabun', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue