g_it/site
g_it/site
1
0
Fork 0
Code Issues Releases 1 Wiki Activity Actions

Properly implemented the home animation sequence.

Browse source
This commit is contained in:
g_it 2026-02-04 22:10:31 +01:00
commit 1b3ef37a16
Signed by untrusted user who does not match committer: g_it
GPG key ID: A2B0A7C06A054627
8 changed files with 246 additions and 387 deletions
Download patch file Download diff file Expand all files Collapse all files

213
content/assets/css/index.css
View file

@ -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;
}