271 lines
No EOL
6.7 KiB
CSS
271 lines
No EOL
6.7 KiB
CSS
:root {
|
|
--page-bg: #121E19;
|
|
--bg: #24342D;
|
|
--bg-t: #00513B;
|
|
--header: #BCFFE1;
|
|
--header-2: #E3F5EA;
|
|
--fg: #F4FFF7;
|
|
--accent-1: #36FFC4;
|
|
--shadow: #36FFC4;
|
|
}
|
|
|
|
html {
|
|
background: var(--page-bg);
|
|
font-family: JetBrainsMono Nerd Font;
|
|
}
|
|
|
|
/* -- pixelated border radius -- */
|
|
.pixel-corners,
|
|
.pixel-corners--wrapper {
|
|
clip-path: polygon(0px calc(100% - 28px),
|
|
4px calc(100% - 28px),
|
|
4px calc(100% - 20px),
|
|
8px calc(100% - 20px),
|
|
8px calc(100% - 12px),
|
|
12px calc(100% - 12px),
|
|
12px calc(100% - 8px),
|
|
20px calc(100% - 8px),
|
|
20px calc(100% - 4px),
|
|
28px calc(100% - 4px),
|
|
28px 100%,
|
|
calc(100% - 28px) 100%,
|
|
calc(100% - 28px) calc(100% - 4px),
|
|
calc(100% - 20px) calc(100% - 4px),
|
|
calc(100% - 20px) calc(100% - 8px),
|
|
calc(100% - 12px) calc(100% - 8px),
|
|
calc(100% - 12px) calc(100% - 12px),
|
|
calc(100% - 8px) calc(100% - 12px),
|
|
calc(100% - 8px) calc(100% - 20px),
|
|
calc(100% - 4px) calc(100% - 20px),
|
|
calc(100% - 4px) calc(100% - 28px),
|
|
100% calc(100% - 28px),
|
|
100% 28px,
|
|
calc(100% - 4px) 28px,
|
|
calc(100% - 4px) 20px,
|
|
calc(100% - 8px) 20px,
|
|
calc(100% - 8px) 12px,
|
|
calc(100% - 12px) 12px,
|
|
calc(100% - 12px) 8px,
|
|
calc(100% - 20px) 8px,
|
|
calc(100% - 20px) 4px,
|
|
calc(100% - 28px) 4px,
|
|
calc(100% - 28px) 0px,
|
|
28px 0px,
|
|
28px 4px,
|
|
20px 4px,
|
|
20px 8px,
|
|
12px 8px,
|
|
12px 12px,
|
|
8px 12px,
|
|
8px 20px,
|
|
4px 20px,
|
|
4px 28px,
|
|
0px 28px);
|
|
position: relative;
|
|
}
|
|
.pixel-corners {
|
|
border: 4px solid transparent;
|
|
margin-bottom: 30px;
|
|
}
|
|
.pixel-corners--wrapper {
|
|
width: fit-content;
|
|
height: fit-content;
|
|
}
|
|
.pixel-corners--wrapper .pixel-corners {
|
|
display: block;
|
|
clip-path: polygon(4px 28px,
|
|
8px 28px,
|
|
8px 20px,
|
|
12px 20px,
|
|
12px 12px,
|
|
20px 12px,
|
|
20px 8px,
|
|
28px 8px,
|
|
28px 4px,
|
|
calc(100% - 28px) 4px,
|
|
calc(100% - 28px) 8px,
|
|
calc(100% - 20px) 8px,
|
|
calc(100% - 20px) 12px,
|
|
calc(100% - 12px) 12px,
|
|
calc(100% - 12px) 20px,
|
|
calc(100% - 8px) 20px,
|
|
calc(100% - 8px) 28px,
|
|
calc(100% - 4px) 28px,
|
|
calc(100% - 4px) calc(100% - 28px),
|
|
calc(100% - 8px) calc(100% - 28px),
|
|
calc(100% - 8px) calc(100% - 20px),
|
|
calc(100% - 12px) calc(100% - 20px),
|
|
calc(100% - 12px) calc(100% - 12px),
|
|
calc(100% - 20px) calc(100% - 12px),
|
|
calc(100% - 20px) calc(100% - 8px),
|
|
calc(100% - 28px) calc(100% - 8px),
|
|
calc(100% - 28px) calc(100% - 4px),
|
|
28px calc(100% - 4px),
|
|
28px calc(100% - 8px),
|
|
20px calc(100% - 8px),
|
|
20px calc(100% - 12px),
|
|
12px calc(100% - 12px),
|
|
12px calc(100% - 20px),
|
|
8px calc(100% - 20px),
|
|
8px calc(100% - 28px),
|
|
4px calc(100% - 28px));
|
|
}
|
|
.pixel-corners::after,
|
|
.pixel-corners--wrapper::after {
|
|
content: "";
|
|
position: absolute;
|
|
clip-path: polygon(0px calc(100% - 28px),
|
|
4px calc(100% - 28px),
|
|
4px calc(100% - 20px),
|
|
8px calc(100% - 20px),
|
|
8px calc(100% - 12px),
|
|
12px calc(100% - 12px),
|
|
12px calc(100% - 8px),
|
|
20px calc(100% - 8px),
|
|
20px calc(100% - 4px),
|
|
28px calc(100% - 4px),
|
|
28px 100%,
|
|
calc(100% - 28px) 100%,
|
|
calc(100% - 28px) calc(100% - 4px),
|
|
calc(100% - 20px) calc(100% - 4px),
|
|
calc(100% - 20px) calc(100% - 8px),
|
|
calc(100% - 12px) calc(100% - 8px),
|
|
calc(100% - 12px) calc(100% - 12px),
|
|
calc(100% - 8px) calc(100% - 12px),
|
|
calc(100% - 8px) calc(100% - 20px),
|
|
calc(100% - 4px) calc(100% - 20px),
|
|
calc(100% - 4px) calc(100% - 28px),
|
|
100% calc(100% - 28px),
|
|
100% 28px,
|
|
calc(100% - 4px) 28px,
|
|
calc(100% - 4px) 20px,
|
|
calc(100% - 8px) 20px,
|
|
calc(100% - 8px) 12px,
|
|
calc(100% - 12px) 12px,
|
|
calc(100% - 12px) 8px,
|
|
calc(100% - 20px) 8px,
|
|
calc(100% - 20px) 4px,
|
|
calc(100% - 28px) 4px,
|
|
calc(100% - 28px) 0px,
|
|
28px 0px,
|
|
28px 4px,
|
|
20px 4px,
|
|
20px 8px,
|
|
12px 8px,
|
|
12px 12px,
|
|
8px 12px,
|
|
8px 20px,
|
|
4px 20px,
|
|
4px 28px,
|
|
0px 28px,
|
|
0px 50%,
|
|
4px 50%,
|
|
4px 28px,
|
|
8px 28px,
|
|
8px 20px,
|
|
12px 20px,
|
|
12px 12px,
|
|
20px 12px,
|
|
20px 8px,
|
|
28px 8px,
|
|
28px 4px,
|
|
calc(100% - 28px) 4px,
|
|
calc(100% - 28px) 8px,
|
|
calc(100% - 20px) 8px,
|
|
calc(100% - 20px) 12px,
|
|
calc(100% - 12px) 12px,
|
|
calc(100% - 12px) 20px,
|
|
calc(100% - 8px) 20px,
|
|
calc(100% - 8px) 28px,
|
|
calc(100% - 4px) 28px,
|
|
calc(100% - 4px) calc(100% - 28px),
|
|
calc(100% - 8px) calc(100% - 28px),
|
|
calc(100% - 8px) calc(100% - 20px),
|
|
calc(100% - 12px) calc(100% - 20px),
|
|
calc(100% - 12px) calc(100% - 12px),
|
|
calc(100% - 20px) calc(100% - 12px),
|
|
calc(100% - 20px) calc(100% - 8px),
|
|
calc(100% - 28px) calc(100% - 8px),
|
|
calc(100% - 28px) calc(100% - 4px),
|
|
28px calc(100% - 4px),
|
|
28px calc(100% - 8px),
|
|
20px calc(100% - 8px),
|
|
20px calc(100% - 12px),
|
|
12px calc(100% - 12px),
|
|
12px calc(100% - 20px),
|
|
8px calc(100% - 20px),
|
|
8px calc(100% - 28px),
|
|
4px calc(100% - 28px),
|
|
4px 50%,
|
|
0px 50%);
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: #36ffc4;
|
|
display: block;
|
|
pointer-events: none;
|
|
}
|
|
.pixel-corners::after {
|
|
margin: -4px;
|
|
}
|
|
/* -- end of pixelated borders -- */
|
|
|
|
|
|
.main {
|
|
width: 100%;
|
|
max-width: 60%;
|
|
position: absolute;
|
|
top: 20%;
|
|
transform: translate(31%, -15%);
|
|
}
|
|
|
|
.intro-box, .socials, .about-me {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
padding: 30px;
|
|
background-color: var(--bg);
|
|
}
|
|
|
|
.pfp {
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
|
|
.intro-text {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
transform: translateY(4%)
|
|
}
|
|
|
|
.socials {
|
|
position: relative;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* -- shirnk cards if screen is small -- */
|
|
@media screen and (max-width: 600px) {
|
|
.main {
|
|
width: 100%;
|
|
max-width: 90%;
|
|
transform: translate(4%, -15%);
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
color: var(--header);
|
|
font-size: 32px;
|
|
text-shadow: 0px 0px 14px var(--accent-1);
|
|
}
|
|
|
|
h2 {
|
|
color: var(--header-2);
|
|
font-size: 26px;
|
|
text-shadow: 0px 0px 8px var(--header-2);
|
|
}
|
|
|
|
p {
|
|
color: var(--fg);
|
|
font-size: 20px;
|
|
} |