This commit is contained in:
Zoey 2024-01-14 13:00:51 +01:00
parent 30f23d7242
commit ca147cdbf8
5 changed files with 28 additions and 14 deletions

View file

@ -3,21 +3,17 @@
@tailwind utilities; @tailwind utilities;
@tailwind variants; @tailwind variants;
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.App-logo { .DarkModeButton {
animation: App-logo-spin infinite 20s linear; animation: DarkModeButton-spin 2.5s ease-in-out infinite alternate;
} }
} }
.H1Welcome {
//animation: Welcome-spin 1ms infinite ease-in-out;
}
.App-header { .App-header {
background-color: #282c34; background-color: #282c34;
min-height: 100vh; min-height: 100vh;
@ -33,7 +29,16 @@
color: #61dafb; color: #61dafb;
} }
@keyframes App-logo-spin { @keyframes DarkModeButton-spin {
from {
transform: rotate(-10deg);
}
to {
transform: rotate(10deg);
}
}
@keyframes Welcome-spin {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }

View file

@ -7,6 +7,8 @@ import SideBar from './SideBar';
import Home from './Home'; import Home from './Home';
function App() { function App() {
return ( return (
<div className="body"> <div className="body">

View file

@ -2,7 +2,7 @@ const Home = () => {
return ( return (
<div className="flex bg-black text-secondary top-14 bottom-8 w-screen h-screen"> <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"> <div className="flex items-center justify-center text-4xl mx-auto">
<h1 className="text-center">Welcome fellow traveller!</h1> <h1 className="H1Welcome">Welcome fellow traveller!</h1>
</div> </div>
</div> </div>
); );

View file

@ -24,6 +24,12 @@ const TopBar = () => {
<div className="DarkModeButton"> <div className="DarkModeButton">
<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"> <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> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
<title>Popup Title</title>
<desc>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</desc>
</svg> </svg>
</div> </div>
</div> </div>

View file

@ -9,7 +9,8 @@
@apply hover:text-texthover cursor-pointer transition-colors duration-300; @apply hover:text-texthover cursor-pointer transition-colors duration-300;
} }
.DarkModeButton { .DarkModeButton {
@apply cursor-pointer @apply cursor-pointer text-secondary bg-violet-950
border-4 border-violet-950 rounded-md
} }
} }