More info on page

This commit is contained in:
Bingus_Violet 2024-02-12 11:12:15 -06:00
parent 0fb3204df1
commit bebacd675d
5 changed files with 164 additions and 131 deletions

View file

@ -1,3 +1,10 @@
/*
This is the GLOBAL css file.
Any changes made in here, will apply to the ENTIRE site.
Only put changes here if you intend to put changes across
the whole site!
*/
@font-face {
font-display: swap;
font-family: 'Rubik';
@ -15,6 +22,12 @@
color: white;
}
main:nth-of-type(1) {
width: 90%;
max-width: 1000px;
margin: auto;
}
body {
background-color: black;
overflow-x: hidden;
@ -31,14 +44,6 @@ body {
animation: hideContent 2.5s;
}
main {
opacity: 1;
animation: fadeDelay 3s cubic-bezier(0.075, 0.82, 0.165, 1);
width: 90%;
max-width: 1000px;
margin: auto;
}
a {
color: rgb(175, 225, 255);
display: inline-block;
@ -76,14 +81,6 @@ a {
background-color: rgb(10, 0, 25);
}
.animatedTitle {
animation: mainText 3s cubic-bezier(0.075, 0.82, 0.165, 1);
margin: auto;
max-width: 75%;
/* outline: 1px white solid; */
}
hr {
border: 2px gray solid;
margin: 20px;
@ -94,101 +91,17 @@ p {
margin: 5px;
}
#card {
background-color: rgb(15, 5, 80);
padding: 15px;
border: 2px white solid;
margin: 20px auto;
width: 95%;
max-width: 800px;
z-index: 3;
position: relative;
}
.pfp {
border-radius: 15px;
border: darkgray 4px solid;
width: 60%;
aspect-ratio: 1/1;
transform: scale(0.9);
border-radius: 50%;
}
img {
width: 100%;
max-width: 135px;
transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
h2 {
font-size: 1.8rem;
}
.rainDrop {
position: fixed;
z-index: -2;
visibility: hidden;
width: 4px;
height: 120px;
background: rgba(0, 0, 150, 0.5);
}
.mainTitle {
font-size: 2.75rem;
color: rgb(215, 80, 255);
display: block;
padding-top: 5px;
line-height: 2.2rem;
}
.note {
color: gray;
font-size: 1rem;
}
@keyframes mainText {
0% {
transform: translateY(calc(50vh - 6rem)) scale(1.5);
opacity: 0;
height: 4rem;
}
50% {
opacity: 1;
height: 4rem;
transform: translateY(calc(50vh - 6rem)) scale(1.25);
}
100% {
transform: translateY(0) scale(1);
}
}
@keyframes fadeDelay {
0% {
opacity: 0;
}
66% {
opacity: 0;
transform: translateY(25vh)
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes hideContent {
0% {
overflow-y: hidden;
overflow-x: hidden;
}
100% {
overflow-y: hidden;
overflow-x: hidden;
}
}