Mohammad Hariri
5070f591d3
Animations - added opacity animation for experience page - added stagger animation for navbar items on mobile - added animation for landing page for years and language indications Pages - About Page mockup Redesign - Navbar to include icons on desktop
66 lines
799 B
CSS
66 lines
799 B
CSS
@layer base {
|
|
:root {
|
|
--navbar-height: 6rem;
|
|
--content-height: calc(100vh - var(--navbar-height));
|
|
}
|
|
|
|
main {
|
|
margin-top: var(--navbar-height);
|
|
height: 100%;
|
|
padding-bottom: 6rem;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.navbar-drawer {
|
|
height: var(--content-height);
|
|
}
|
|
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-fade-in {
|
|
opacity: 0;
|
|
animation: fadeIn 1s ease-in forwards;
|
|
}
|
|
|
|
.animate-slide-in {
|
|
opacity: 0;
|
|
animation: slideIn 1s ease-out forwards;
|
|
}
|
|
|
|
.delay-300 {
|
|
animation-delay: 300ms;
|
|
}
|
|
|
|
.delay-600 {
|
|
animation-delay: 600ms;
|
|
}
|
|
|
|
.delay-900 {
|
|
animation-delay: 900ms;
|
|
}
|