97 lines
1.9 KiB
SCSS
97 lines
1.9 KiB
SCSS
main {
|
|
display: unset;
|
|
flex-direction: unset;
|
|
align-items: unset;
|
|
}
|
|
|
|
.lines {
|
|
background-image: url("/diagonal_lines_home.png");
|
|
background-size: cover;
|
|
background-repeat: repeat;
|
|
min-height: 75vh;
|
|
padding-inline: 10vw;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
|
|
.home-main-box {
|
|
padding-block: 7vh;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100vw;
|
|
|
|
.home-title-box {
|
|
justify-self: flex-start;
|
|
margin-right: 5vw;
|
|
|
|
h1 {
|
|
font-size: 72px;
|
|
color: #e6e6e6;
|
|
background: linear-gradient(to right, #e6e6e6 0, white 8%, #e6e6e6 16%);
|
|
background-position: 0;
|
|
background-color: #e6e6e6;
|
|
background-repeat: no-repeat;
|
|
background-size: 500px;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: shine 3s infinite linear;
|
|
animation-fill-mode: forwards;
|
|
text-size-adjust: none;
|
|
}
|
|
|
|
.home-title {
|
|
margin: 0;
|
|
color: #fff;
|
|
font-family: "Tanker-Regular";
|
|
}
|
|
|
|
.using-engines {
|
|
width: 21vw;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
justify-self: flex-end;
|
|
margin: 0;
|
|
margin-top: 2vh;
|
|
max-width: 500px;
|
|
&p {
|
|
z-index: 2;
|
|
}
|
|
.avatar {
|
|
position: absolute;
|
|
top: 0%;
|
|
right: 0%;
|
|
width: 4vw;
|
|
height: 4vw;
|
|
border-radius: 2.5vw;
|
|
background-size: cover;
|
|
transition: opacity 0.5s linear;
|
|
background-image: url("/img/avatar.webp");
|
|
z-index: 1;
|
|
&.portrait {
|
|
top: 5%;
|
|
right: 5%;
|
|
background-image: url("/img/portrait.webp");
|
|
&:hover {
|
|
opacity: 100;
|
|
}
|
|
}
|
|
&:hover {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes shine {
|
|
0% {
|
|
background-position: -200px;
|
|
}
|
|
100% {
|
|
background-position: 500px;
|
|
}
|
|
}
|