138 lines
2.1 KiB
CSS
138 lines
2.1 KiB
CSS
/*
|
|
* Freed.place
|
|
* Version 3.0
|
|
* Copyright (c) 2025 FreedTapestry21
|
|
*/
|
|
|
|
/* Jetbrains Mono font by Jetbrains */
|
|
@font-face {
|
|
font-family: 'Jetbrains Mono';
|
|
src: local(''),
|
|
url('./fonts/jbmono.woff2')
|
|
}
|
|
|
|
/* VGA font by VileR @ int10h.org! */
|
|
@font-face {
|
|
font-family: 'VGA';
|
|
src: local(''),
|
|
url('./fonts/ibm_vga8.woff2')
|
|
}
|
|
|
|
:root {
|
|
--accent-color: #b4befe;
|
|
--accent-color-dark: #9198cd;
|
|
--background-color: #191724;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background-color);
|
|
color: var(--accent-color);
|
|
font-family: 'Jetbrains Mono';
|
|
}
|
|
|
|
p {font-size: 18px;}
|
|
h1 {font-size: 34px;}
|
|
h2 {font-size: 30px;}
|
|
h3 {font-size: 26px;}
|
|
h4 {font-size: 22px;}
|
|
|
|
a {
|
|
text-decoration: underline dotted;
|
|
color: var(--accent-color-dark);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
/* Custom */
|
|
.center {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.img {
|
|
max-height: 45vh;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.circle {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.nocircle {
|
|
max-height: 30vh;
|
|
}
|
|
|
|
/* Menu */
|
|
.menu {
|
|
background-color: var(--accent-color);
|
|
color: var(--background-color);
|
|
|
|
width: 100%;
|
|
|
|
margin: auto;
|
|
}
|
|
|
|
.menu p {user-select: none; font-size: 20px;}
|
|
|
|
.menu a {
|
|
color: var(--background-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.menu a:hover {
|
|
color: var(--accent-color);
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
.name {text-align: left; width: 45%;}
|
|
.index {text-align: right; width: 45%;}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
background-color: var(--accent-color);
|
|
color: var(--background-color);
|
|
|
|
width: 100%;
|
|
|
|
margin: auto;
|
|
}
|
|
|
|
.footer p {font-size:12px;}
|
|
|
|
.footer a {
|
|
color: var(--background-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer a:hover {
|
|
color: var(--accent-color);
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
.info {text-align: left; width: 45%;}
|
|
.copyright {text-align: right; width: 45%;}
|
|
|
|
/* Boxes */
|
|
.box {
|
|
width: min(1400px, 80%);
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
.item {
|
|
font-family: VGA;
|
|
padding: 10px;
|
|
width: 50%;
|
|
|
|
margin: auto;
|
|
}
|
|
|
|
.content {margin: auto; min-height: 400px;}
|
|
|
|
.invert {flex-direction: row-reverse;}
|
|
|
|
.links {white-space: nowrap; overflow: scroll;}
|