74 lines
1.4 KiB
CSS
Executable file
74 lines
1.4 KiB
CSS
Executable file
/*****************************
|
|
* HERO TEXT
|
|
*****************************/
|
|
|
|
.hero-text {
|
|
flex: 1;
|
|
min-width: fit-content;
|
|
height: 50vh;
|
|
display: inline-block;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
padding: 5em;
|
|
font-family: var(--primary-font);
|
|
text-align: left;
|
|
margin: var(--zero);
|
|
|
|
h2 {
|
|
margin-bottom: 0.1em;
|
|
overflow: hidden;
|
|
border-right: .15em solid var(--tertiary-colour);
|
|
white-space: nowrap;
|
|
letter-spacing: .05em;
|
|
animation:
|
|
typing 5s steps(40, end) forwards 2s,
|
|
blink-caret 0.75s step-end infinite;
|
|
}
|
|
|
|
h4 {
|
|
font-weight: normal;
|
|
|
|
&#hover-text {
|
|
|
|
opacity: 0;
|
|
transition: opacity 0.5s ease-out;
|
|
|
|
&.fade-in {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.leave {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.accent-divider {
|
|
background-color: var(--secondary-colour);
|
|
width: 100%;
|
|
height: 10px;
|
|
margin: 1em 0;
|
|
}
|
|
}
|
|
|
|
@keyframes typing {
|
|
from {
|
|
width: 0
|
|
}
|
|
|
|
to {
|
|
width: 100%
|
|
}
|
|
}
|
|
|
|
@keyframes blink-caret {
|
|
|
|
from,
|
|
to {
|
|
border-color: transparent;
|
|
}
|
|
|
|
50% {
|
|
border-color: var(--tertiary-colour);
|
|
}
|
|
}
|