Properly implemented the home animation sequence.
This commit is contained in:
g_it
parent
12e9d62059
commit
1b3ef37a16
GPG key ID:
A2B0A7C06A054627
8 changed files with 246 additions and 387 deletions
|
|
@ -1,11 +1,10 @@
|
|||
@import url(_colours.css);
|
||||
|
||||
/*****************************
|
||||
* INDEX
|
||||
* Styling for index pages.
|
||||
* CHAPTER
|
||||
* Styling for chapter pages.
|
||||
*****************************/
|
||||
|
||||
/* Hide all the extra space around the content */
|
||||
.md-content__inner,
|
||||
.md-main__inner,
|
||||
.md-grid,
|
||||
|
|
@ -18,7 +17,6 @@ body,
|
|||
max-width: none;
|
||||
}
|
||||
|
||||
/* Make the content fill the entire viewing space */
|
||||
article,
|
||||
.md-container {
|
||||
min-height: 100%;
|
||||
|
|
@ -41,13 +39,11 @@ body {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
/* Hide the navigation elements and the title of the page */
|
||||
header,
|
||||
.md-content .md-typeset h1 {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* This was creating an annoying space at the top */
|
||||
article.md-content__inner.md-typeset:before,
|
||||
article.md-content__inner.md-typeset:after {
|
||||
content: none;
|
||||
140
content/assets/css/_home.css
Executable file
140
content/assets/css/_home.css
Executable file
|
|
@ -0,0 +1,140 @@
|
|||
@import url(_colours.css);
|
||||
|
||||
/*****************************
|
||||
* HOME
|
||||
* Styling for the homepage.
|
||||
*****************************/
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
margin: 0 auto;
|
||||
max-width: 900px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content ul {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 30px;
|
||||
height: 1.4em;
|
||||
justify-content: center;
|
||||
left: 50%;
|
||||
line-height: 1.4em;
|
||||
list-style: none;
|
||||
margin: 0 !important;
|
||||
max-width: 900px;
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 20px;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.content ul li {
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
font-size: calc((min(100vw, 900px)) / 10);
|
||||
inset: 0;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
pointer-events: auto;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content ul li a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.content ul li:nth-child(2) {
|
||||
font-family: var(--primary-font);
|
||||
}
|
||||
|
||||
.content ul li:nth-child(3) {
|
||||
font-family: var(--secondary-font);
|
||||
}
|
||||
|
||||
.content ul li:nth-child(4) {
|
||||
font-family: var(--tertiary-font);
|
||||
}
|
||||
|
||||
.content .faces {
|
||||
align-items: center;
|
||||
flex-grow: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 320px;
|
||||
margin-top: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.faces .slide {
|
||||
border-radius: 10px;
|
||||
left: 50%;
|
||||
max-width: 600px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
visibility: hidden;
|
||||
width: 80%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.faces .slide img {
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.down-arrow {
|
||||
animation: flash 1s infinite;
|
||||
bottom: 20px;
|
||||
color: var(--secondary-colour);
|
||||
font-size: 2rem;
|
||||
left: 50%;
|
||||
position: fixed;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1,10 +1,6 @@
|
|||
@import url(_colours.css);
|
||||
@import url(_fonts.css);
|
||||
@import url(_size.css);
|
||||
@import url(_loader.css);
|
||||
@import url(_page-resume.css);
|
||||
@import url(_hero-text.css);
|
||||
@import url(_faces.css);
|
||||
@import url(_media-player.css);
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,213 +0,0 @@
|
|||
@import url(_colours.css);
|
||||
@import url("https: //api.fonts.coollabs.io/css2?family=Lato:wght@300;400;700;900&family=Libre+Baskerville&family=DM+Mono:wght@400;500&display=swap");
|
||||
|
||||
header,
|
||||
nav,
|
||||
footer,
|
||||
.md-content .md-typeset h1 {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
article,
|
||||
.md-container {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.md-content__inner,
|
||||
.md-main__inner,
|
||||
.md-grid,
|
||||
html,
|
||||
body,
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.md-grid {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* This was creating an annoying space at the top */
|
||||
article.md-content__inner.md-typeset:before,
|
||||
article.md-content__inner.md-typeset:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.columns {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
flex: 1;
|
||||
min-width: 100vw;
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 5em;
|
||||
font-family: 'Libre Baskerville', serif;
|
||||
}
|
||||
|
||||
.top-row h2 {
|
||||
margin-bottom: 0.1em;
|
||||
font-size: 5vw;
|
||||
font-weight: 900;
|
||||
overflow: hidden;
|
||||
border-right: .15em solid #818589;
|
||||
white-space: nowrap;
|
||||
letter-spacing: .05em;
|
||||
animation:
|
||||
typing 5s steps(40, end) forwards 2s,
|
||||
blink-caret 0.75s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
from {
|
||||
width: 0
|
||||
}
|
||||
|
||||
to {
|
||||
width: 100%
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink-caret {
|
||||
|
||||
from,
|
||||
to {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
50% {
|
||||
border-color: #818589;
|
||||
}
|
||||
}
|
||||
|
||||
.top-row p {
|
||||
font-size: 3vw;
|
||||
color: #818589;
|
||||
}
|
||||
|
||||
.top-row * {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Image Container Styling */
|
||||
.image-container {
|
||||
width: 100%;
|
||||
height: 33.33vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-container:hover {
|
||||
filter: invert(50%);
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.columns {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
#loader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #EFE5DC;
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9998;
|
||||
transition: opacity 1s ease-out, transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
#loader.fade-out {
|
||||
opacity: 0;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
#loader img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#loading-text {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 24px;
|
||||
color: black;
|
||||
/* Change text color if needed */
|
||||
animation: pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Add fade-out animation */
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
animation: fadeOut 1s ease-out forwards;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue