610 lines
No EOL
15 KiB
CSS
610 lines
No EOL
15 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;
|
|
}
|
|
/* -- font nuts -- */
|
|
|
|
/* -- 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;
|
|
}
|
|
|
|
footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
margin-bottom: 2rem;
|
|
font-size: 16px;
|
|
}
|
|
|
|
footer > a, footer > p, footer > p > a {
|
|
color: var(--header);
|
|
font-size: 16px;
|
|
}
|
|
|
|
footer > a {
|
|
margin-top: 20px;
|
|
}
|
|
/* -- end of usual css things -- */
|
|
|
|
/* -- styling the rest of the elements/custom stuff -- */
|
|
.main {
|
|
position: relative;
|
|
width: 60rem;
|
|
top: 2rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.pfp-image {
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
|
|
.site-intro {
|
|
margin: -2px;
|
|
}
|
|
|
|
.nav, .nav > a {
|
|
color: var(--header-2);
|
|
font-size: 16px;
|
|
text-shadow: 0px 0px 8px var(--header-2);
|
|
}
|
|
|
|
.arrow {
|
|
color: var(--accent-1);
|
|
text-shadow: 0px 0px 8px var(--accent-1);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.dot {
|
|
color: var(--accent-1);
|
|
text-shadow: 0px 0px 8px var(--accent-1);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.anchors, .anchors > a {
|
|
color: var(--header);
|
|
font-size: 32px;
|
|
text-shadow: 0px 0px 14px var(--accent-1);
|
|
margin: 0px 0px 5px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.anchors:hover, .anchors > a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.links-n-socials > .fedi > .dot, .links-n-socials > .messaging > .dot, .links-n-socials > .platforms > .dot, .links-n-socials > .misc > .dot {
|
|
color: var(--accent-1);
|
|
text-shadow: 0px 0px 8px var(--accent-1);
|
|
margin-top: 22px;
|
|
margin-left: 14px;
|
|
margin-right: 14px;
|
|
}
|
|
|
|
footer > .dot {
|
|
font-size: 16px;
|
|
margin-top: 20px;
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.separator {
|
|
display: flex;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 20px;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.separator > small {
|
|
color: var(--bg-t);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.pfp {
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
|
|
.intro-text {
|
|
text-align: center;
|
|
transform: translateY(4%)
|
|
}
|
|
|
|
/* -- below is all the css used only for the social cards, and its probably Very Bad so get a puke bag or something read -- */
|
|
.fedi, .firefish, .firefish-icon, .akkoma, .akkoma-icon, .messaging, .revolt, .revolt-icon, .matrix, .matrix-icon, .xmpp, .xmpp-icon, .platforms, .listenbrainz, .listenbrainz-icon, .gitgay, .gitgay-icon, .github, .github-icon, .misc, .retrospring, .retrospring-icon, .archiveorg, .archive-icon, .shitposts, .amoguscloud, .warning {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.firefish-icon, .akkoma-icon, .revolt-icon, .matrix-icon, .xmpp-icon, .listenbrainz-icon, .gitgay-icon, .github-icon, .retrospring-icon, .archive-icon, .amoguscloud {
|
|
margin-top: 20px;
|
|
margin-right: 8px;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
/* -- fedi section -- */
|
|
|
|
/* -- firefish -- */
|
|
.firefish > p > small, .firefish > p > small > a {
|
|
font-size: 16px;
|
|
background: #E74788;
|
|
background: linear-gradient(to right, #E74788 0%, #F6AE4A 100%);
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
-webkit-background-clip: text;
|
|
text-shadow: 0px 0px 8px #F1775D;
|
|
}
|
|
/* -- */
|
|
|
|
/* -- akkoma -- */
|
|
.akkoma > p > small, .akkoma > p > small > a {
|
|
font-size: 16px;
|
|
color: #CBA6D7;
|
|
text-shadow: 0px 0px 8px #CBA6D7;
|
|
}
|
|
/* -- */
|
|
|
|
/* -- messaging section -- */
|
|
|
|
/* -- revolt -- */
|
|
.revolt > p > small, .revolt > p > small > a {
|
|
font-size: 16px;
|
|
background: #FF4654;
|
|
background: linear-gradient(to right, #FF4654 0%, #FF558B 100%);
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
-webkit-background-clip: text;
|
|
text-shadow: 0px 0px 8px #FF4654;
|
|
}
|
|
/* -- */
|
|
|
|
/* -- matrix -- */
|
|
.matrix > p > small, .matrix > p > small > a {
|
|
font-size: 16px;
|
|
background: #FFFFFF;
|
|
background: linear-gradient(to right, #FFFFFF 0%, #4B4B4B 100%);
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
-webkit-background-clip: text;
|
|
text-shadow: 0px 0px 8px #4B4B4B;
|
|
}
|
|
/* -- */
|
|
|
|
/* -- xmpp -- */
|
|
.xmpp > p > small, .xmpp > p > small > a {
|
|
font-size: 16px;
|
|
background: #EED49F;
|
|
background: linear-gradient(to right, #A6DA95 0%, #EED49F 100%);
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
-webkit-background-clip: text;
|
|
text-shadow: 0px 0px 8px #11A4D8;
|
|
}
|
|
/* -- */
|
|
|
|
/* -- other platforms that i guess count as social -- */
|
|
|
|
/* -- listenbrainz -- */
|
|
.listenbrainz > p > small, .listenbrainz > p > small > a {
|
|
font-size: 16px;
|
|
background: #DA9014;
|
|
background: linear-gradient(to right, #8AADf4 0%, #EB743B 100%);
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
-webkit-background-clip: text;
|
|
text-shadow: 0px 0px 8px #D58C17;
|
|
}
|
|
/* -- */
|
|
|
|
/* -- git.gay -- */
|
|
.gitgay > p > small, .gitgay > p > small > a {
|
|
font-size: 16px;
|
|
background: #69CB86;
|
|
background: linear-gradient(to right, #FE9494 0%, #FFC783 31%, #69CB86 56%, #83A8FF 79%, #C56AD4 100%);
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
-webkit-background-clip: text;
|
|
text-shadow: 0px 0px 8px #69CB86;
|
|
}
|
|
/* -- */
|
|
|
|
/* -- gith*b -- */
|
|
.github > p > small, .github > p > small > a {
|
|
font-size: 16px;
|
|
color: #CDD6F4;
|
|
text-shadow: 0px 0px 8px #CDD6F4;
|
|
}
|
|
/* -- */
|
|
|
|
/* -- misc. links -- */
|
|
|
|
/* -- retrospring -- */
|
|
.retrospring > p > small, .retrospring > p > small > a {
|
|
font-size: 16px;
|
|
color: #CA9EE6;
|
|
text-shadow: 0px 0px 8px #5E35B1;
|
|
}
|
|
|
|
/* -- are chives dot org -- */
|
|
.archiveorg > p > small, .archiveorg > p > small > a {
|
|
font-size: 16px;
|
|
background: #FFFFFF;
|
|
background: linear-gradient(to right, #FFFFFF 0%, #000000 100%);
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
-webkit-background-clip: text;
|
|
text-shadow: 0px 0px 8px #777777;
|
|
}
|
|
|
|
/* -- lil warning message :3 -- */
|
|
.warning {
|
|
margin-top: 3rem;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
color: #E78284;
|
|
text-shadow: 0px 0px 8px #E78284;
|
|
}
|
|
|
|
/* -- end of puke code -- */
|
|
|
|
.yoshi {
|
|
display: flex;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
/* -- end of styling the rest of the elements -- */
|
|
|
|
/* -- shirnk cards if screen is small -- */
|
|
@media screen and (max-width: 1000px) {
|
|
.main {
|
|
width: 100%;
|
|
max-width: 90%;
|
|
transform: translate(6%, 0%);
|
|
margin-left: unset;
|
|
margin-right: unset;
|
|
}
|
|
|
|
.intro-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.pfp, .pixel-corners--wrapper {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.pixel-corners--wrapper {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.fedi, .messaging, .platforms, .misc, .warning {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.fedi > .dot, .messaging > .dot, .platforms > .dot, .misc > .dot {
|
|
display: none;
|
|
}
|
|
|
|
footer {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
footer > p, footer > a, footer > p > a {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
footer > .dot {
|
|
display: none;
|
|
}
|
|
}
|
|
/* -- yea -- */ |