WordPress_Themes/NAN_Student_Handbook
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

splash and page transitions completed

Browse Source
This commit is contained in:
prospect
2024-01-19 05:02:27 -05:00
parent a8edae6d2c
commit 6656ee528b
5 changed files with 172 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
assets/css/styles.css
View File

@@ -913,10 +913,35 @@ select {
--tw-backdrop-sepia: ;
}
.visible {
visibility: visible;
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
.fixed {
position: fixed;
}
@@ -1739,10 +1764,6 @@ html {
margin-right: calc(2rem * var(--tw-space-x-reverse));
margin-left: calc(2rem * (1 - var(--tw-space-x-reverse)));
}
.lg\:px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
@@ -2005,19 +2026,57 @@ body.login {
translate: 0;
}
#content-container {
transition: opacity 0.3s ease-in-out; /* Adjust the duration and timing function as needed */
#header-nav.out-of-view {
opacity: 0;
translate: 0 -100%;
transition: opacity 2000ms ease-in-out;
transition: translate 1000ms ease-in-out;
}
.active #content-container {
opacity: 0; /* Initial opacity when collapsing */
transition: opacity 0.3s ease-in-out; /* Adjust the duration and timing function as needed */
#header-nav.in-view {
opacity: 1;
translate: 0 0;
}
.active #content-container.visible {
opacity: 1; /* Opacity when expanding */
#content-container.page-transition {
opacity: 0;
transform: perspective(800px) rotateY(-90deg) scale(0.9);
transform-origin: left center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
background: linear-gradient(to right, rgba(255, 255, 255, 0.8) 50%, transparent 50%);
background-size: 200% 100%;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-position 0.3s ease-in-out;
}
#content-container:not(.page-transition) {
opacity: 1;
transform: perspective(800px) rotateY(0deg) scale(1);
transform-origin: left center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0);
background-position: 100% 0;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-position 0.3s ease-in-out;
}
@media (min-width: 1024px) {
#content-container.page-transition {
opacity: 0;
transform: perspective(800px) rotateY(-5deg) scale(1);
transform-origin: left center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
background: linear-gradient(to right, rgba(255, 255, 255, 0.8) 50%, transparent 50%);
background-size: 200% 100%;
background-position: 100% 0;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-position 0.3s ease-in-out;
}
#content-container:not(.page-transition) {
opacity: 1;
transform: perspective(800px) rotateY(0deg) scale(1);
transform-origin: left center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0);
background-position: 0 0;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-position 0.3s ease-in-out;
}
}
#footer-nav.out-of-view {
opacity: 0;
translate: 0 100%;