117 lines
1.9 KiB
CSS
117 lines
1.9 KiB
CSS
:root {
|
|
--background: #13092b;
|
|
--background-2: #090f2b;
|
|
--foreground: #ddd;
|
|
--accent: #f9027a;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
background-color: var(--background);
|
|
background-attachment: fixed;
|
|
background-position: center;
|
|
color: var(--foreground);
|
|
margin: 0;
|
|
}
|
|
|
|
.page-container {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
max-width: 100vw;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.content {
|
|
margin: 16px;
|
|
padding: 8px 16px;
|
|
width: calc(100vw - 32px);
|
|
max-width: 720px;
|
|
/* flex: 1; */
|
|
background-color: var(--background-2);
|
|
border: 1px solid var(--accent);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.file-content {
|
|
background-color: white;
|
|
width: 100%;
|
|
}
|
|
|
|
iframe.file-content {
|
|
resize: vertical;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
.nav-buttons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
}
|
|
|
|
.nav-button {
|
|
flex: 1;
|
|
display: grid;
|
|
place-content: center;
|
|
padding: 8px 0;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-button:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.footer {
|
|
margin-bottom: 16px;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.icon-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
.icon-row > * {
|
|
margin-right: 16px;
|
|
}
|
|
.icon-row svg {
|
|
transition: fill 200ms ease;
|
|
fill: white;
|
|
}
|
|
.hover-email:hover {
|
|
fill: var(--accent);
|
|
}
|
|
.hover-discord:hover {
|
|
fill: #5865F2;
|
|
}
|
|
.hover-github:hover {
|
|
fill: #24292f;
|
|
}
|
|
.hover-mastodon:hover {
|
|
fill: #3c99dc;
|
|
}
|
|
.hover-reddit:hover {
|
|
fill: #ff4500;
|
|
}
|
|
.hover-twitch:hover {
|
|
fill: #6441a5;
|
|
}
|
|
.hover-twitter:hover {
|
|
fill: #00acee;
|
|
}
|
|
.hover-code:hover {
|
|
fill: #3a86ff;
|
|
}
|
|
.icon {
|
|
height: 1.2em;
|
|
fill: var(--foreground-dim);
|
|
vertical-align: sub;
|
|
}
|