moon and stuff

src/App.js

@@ -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 />

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="flex bg-black text-secondary top-14 bottom-8 w-screen h-screen">
-            <div className="fixed flex justify-center">
+        <div className="flex items-center justify-center text-4xl mx-auto">
-                <p>fuuuuuuuuuuuuuuuck</p>
+          <h1 className="text-center">Welcome fellow traveller!</h1>
-            </div>
         </div>
+      </div>
     );
-};
+  };  
 
 export default Home;

src/Moon.svg

@@ -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>

src/TopBar.js

@@ -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">
@@ -20,12 +20,11 @@ const TopBar = () => {
                             <p className="text-lg mx-4">About</p>
                         </div>
                     </div>
-                    <div className="fixed right-0 mr-6">
+                    <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">
+                            <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="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>
+                                <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;

src/bunny.svg

@@ -18,4 +18,4 @@
     
     <!-- Bunny mouth -->
     <path d="M 90 80 Q 100 90 110 80" fill="transparent" stroke="#000" stroke-width="2"/>
-</svg>
+</svg>

src/index.css

@@ -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',
+  font-family: 'Sarabun', sans-serif;
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }