370 lines
No EOL
9.2 KiB
CSS
370 lines
No EOL
9.2 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: 'JetBrains Mono', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
}
|
|
|
|
/* -- normal -- */
|
|
@font-face {
|
|
font-family: "JetBrains Mono";
|
|
src:
|
|
local("JetBrains Mono"),
|
|
local("JetBrainsMono Nerd Font"),
|
|
url("/assets/jetbrainsmono/fonts/ttf/JetBrainsMono-Regular.ttf") format("opentype"),
|
|
url("/assets/jetbrainsmono/fonts/webfonts/JetBrainsMono-Regular.woff2") format("woff2");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
/* -- bold -- */
|
|
@font-face {
|
|
font-family: "JetBrains Mono";
|
|
src:
|
|
local("JetBrains Mono"),
|
|
local("JetBrainsMono Nerd Font"),
|
|
url("/assets/jetbrainsmono/fonts/ttf/JetBrainsMono-Bold.ttf") format("opentype"),
|
|
url("/assets/jetbrainsmono/fonts/webfonts/JetBrainsMono-Bold.woff2") format("woff");
|
|
font-weight: bold;
|
|
font-style: bold;
|
|
}
|
|
|
|
/* -- italic -- */
|
|
@font-face {
|
|
font-family: "JetBrains Mono";
|
|
src:
|
|
local("JetBrains Mono"),
|
|
local("JetBrainsMono Nerd Font"),
|
|
url("/assets/jetbrainsmono/fonts/ttf/JetBrainsMono-Italic.ttf") format("opentype"),
|
|
url("/assets/jetbrainsmono/fonts/webfonts/JetBrainsMono-Italic.woff2") format("woff");
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* -- bold italic -- */
|
|
@font-face {
|
|
font-family: "JetBrains Mono";
|
|
src:
|
|
local("JetBrains Mono"),
|
|
local("JetBrainsMono Nerd Font"),
|
|
url("/assets/jetbrainsmono/fonts/ttf/JetBrainsMono-BoldItalic.ttf") format("opentype"),
|
|
url("/assets/jetbrainsmono/fonts/webfonts/JetBrainsMono-BoldItalic.woff2") format("woff");
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* -- 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 -- */
|
|
|
|
/* -- usual css things -- */
|
|
h1 {
|
|
color: var(--header);
|
|
font-size: 32px;
|
|
text-shadow: 0px 0px 14px var(--accent-1);
|
|
margin: 0px 0px 5px;
|
|
}
|
|
|
|
h2 {
|
|
color: var(--header-2);
|
|
font-size: 26px;
|
|
text-shadow: 0px 0px 8px var(--header-2);
|
|
}
|
|
|
|
li, p {
|
|
color: var(--fg);
|
|
font-size: 20px;
|
|
margin: 20px 0px 0px 0px;
|
|
}
|
|
|
|
ul {
|
|
margin: 0px;
|
|
}
|
|
|
|
small {
|
|
color: var(--fg);
|
|
font-size: 16px;
|
|
}
|
|
|
|
a {
|
|
color: var(--accent-1);
|
|
text-shadow: 0px 0px 5px var(--accent-1);
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* -- end of usual css things -- */
|
|
|
|
/* -- styling the rest of the elements/custom stuff -- */
|
|
.main {
|
|
width: 100%;
|
|
max-width: 60%;
|
|
position: absolute;
|
|
top: 20%;
|
|
transform: translate(31%, -7%);
|
|
}
|
|
|
|
.pfp-image {
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
|
|
.site-intro {
|
|
margin: -2px;
|
|
}
|
|
|
|
.navnt {
|
|
color: var(--header-2);
|
|
text-shadow: 0px 0px 8px var(--header-2);
|
|
}
|
|
|
|
.arrow {
|
|
color: var(--accent-1);
|
|
text-shadow: 0px 0px 8px var(--accent-1);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.intro-box, .links-n-socials, .about-me, .fun-facts {
|
|
position: relative;
|
|
display: flex;
|
|
padding: 30px;
|
|
background-color: var(--bg);
|
|
}
|
|
|
|
.intro-text, .links-n-socials, .about-me, .fun-facts {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.intro-box {
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.links-n-socials .links-list {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.pfp {
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
|
|
.intro-text {
|
|
text-align: center;
|
|
transform: translateY(4%)
|
|
}
|
|
|
|
.links-n-socials {
|
|
position: relative;
|
|
}
|
|
/* -- end of styling the rest of the elements -- */
|
|
|
|
/* -- shirnk cards if screen is small -- */
|
|
@media screen and (max-width: 600px) {
|
|
.main {
|
|
width: 100%;
|
|
max-width: 90%;
|
|
transform: translate(4%, -3%);
|
|
}
|
|
}
|
|
/* -- yea -- */ |