anims
This commit is contained in:
parent
30f23d7242
commit
ca147cdbf8
27
src/App.css
27
src/App.css
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue