blob: 4bf992981f0ae48b29c3fe86473b7d13f82b95f5 (
plain) (
tree)
|
|
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@import url('https://circuits.aleteoryx.me/oi.css');
html {
--foreforeground: #3788ae;
--foreground: #082f41;
--background: #03141c;
color: white;
background: black;
/*padding: 1cm;*/
font-size: 12pt;
font-family: 'Raleway', sans-serif;
width: 100vw;
overflow-x: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body > * {
width: max(60vw, 8cm);
--body-width: max(60vw, 8cm);
}
hr {
border: 0.5mm solid var(--foreforeground);
background: var(--foreforeground);
width: 100%;
height: 0%;
}
.hide {display: none;}
input, button, details{
color: white;
background: var(--foreground);
padding: 1rem;
border: none;
border-radius: 0.5cm;
font-size: 13pt;
margin: 0.5rem;
}
input::placeholder {
color: var(--foreforeground);
}
details :is(input, button) {
background: var(--background);
}
details {
padding: 1rem;
background: var(--foreground);
}
body {
height: calc(100% - 2cm);
margin: 1cm;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: max(60vw, 8cm);
background: var(--background);
padding: 1cm;
box-shadow: 0 0 5mm inset black;
}
a:link {
color: white;
}
a:visited {
color: var(--foreforeground);
}
kbd {
background: white;
color: black;
padding: 0.5mm;
border-radius: 1mm;
box-shadow: inset black -0.25mm -0.25mm 1mm;
}
summary,
button,
:is(input[type=radio], input[type=checkbox]),
:is(input[type=radio], input[type=checkbox]) + label {
cursor: pointer;
}
section#changelog {
height: 60vh;
overflow-y: auto;
overflow-x: hidden;
box-shadow: inset 0mm 0mm 5mm #000;
}
section#changelog > article {
margin: 5mm;
margin-bottom 0;
box-shadow: 0mm 0mm 2.5mm #000;
padding: 2.5mm;
background: var(--foreground);
}
#logo {
width: 5cm;
height: 5cm;
position: relative;
z-index: 0;
border-radius: 26px;
animation: logo 5s infinite ease;
overflow: hidden;
padding: none;
}
#logo > img {
width: 5cm;
z-index: -2;
margin: none;
position: relative;
}
@keyframes logo {
0% {
box-shadow: 0mm 0mm 1cm white, 0mm 0mm 0mm white;
}
50% {
box-shadow: 0mm 0mm 5mm white, 0mm 0mm 1cm var(--foreforeground);
}
100% {
box-shadow: 0mm 0mm 1cm white, 0mm 0mm 0mm white;
}
}
ul.links > li::marker {
font-family: "Icons";
font-size: 2.5mm;
content: "\e064 ";
}
#projects {
display: grid;
box-shadow: inset 0mm 0mm 5mm black;
padding: 1cm;
background: #020d12;
grid-gap: 1cm;
justify-content: center;
}
#projects > a {
border: solid white 1mm;
padding: 0;
background-size: cover;
background-position: center center;
overflow: hidden;
box-shadow: inset 0 0 3mm black , 0 0 3mm black;
position: relative;
color: white;
}
#projects > a * {
margin: 0mm;
}
#projects > a > div {
background-color: #0008;
backdrop-filter: blur(5px);
width: 100%;
margin: 0;
padding: 0.5cm;
position: absolute;
bottom: -1px;
z-index: 100;
}
@media (orientation:portrait) {
#projects {
grid-template-columns: 100%;
grid-auto-rows: var(--body-width);
}
#projects > a {
display: block;
min-height: var(--body-width);
}
}
@media (orientation:landscape) {
#projects {
--widhei: calc(var(--body-width) / 2 - 2cm);
grid-template-columns: var(--widhei) var(--widhei);
}
#projects > a {
display: block;
height: calc(var(--widhei) - 2cm);
}
}
code {
background: #041720;
padding: 0.5mm;
border-radius: 0.5mm;
}
|