z0x/z0x.ca
Code Activity Actions

first commit

Browse source
This commit is contained in:
z0x 2024-07-15 20:10:38 -04:00
commit 1c7877b6b1
12 changed files with 256 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

120
css/style.css Normal file
View file

@ -0,0 +1,120 @@
html, body {
margin: 0;
overflow: hidden;
color: #fff;
background-color: #222222;
background-attachment: fixed;
background-size: cover;
background-image: url("../img/gradient.webp"); }
a[href] {
color: transparent; }
.center {
display: flex;
overflow: hidden;
justify-content: center;
align-items: center;
min-height: 100vh; }
.box {
background-color: #0b0b0b80;
aspect-ratio: 1 / 1;
padding: 20px;
border-radius: 15%;
border: 3px solid #fff;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.75);
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box-404 {
background-color: #0b0b0b80;
aspect-ratio: 1 / 1;
padding: 20px;
border-radius: 15%;
border: 3px solid #fff;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.75);
text-align: center;
display: flex;
align-items: center;
justify-content: center; }
.logo {
width: 65%;
align-self: center; }
.header {
font-size: 4vh;
margin-top: auto; }
.header-404 {
font-size: 6vh; }
.unselectable {
-webkit-user-select: none;
user-select: none; }
@media (max-width: 768px) {
.box {
width: 70%;
}
.box-404 {
width: 40%;
}
}
@media (min-width: 768px) {
.box {
width: 15%;
}
.box-404 {
width: 10%;
}
}
@keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
.box {
animation: fadeIn 2s;
animation-fill-mode: forwards; }
.logo, .header {
opacity: 0;
animation: fadeIn 1.2s;
animation-fill-mode: forwards; }
.logo {
animation-delay: 1s; }
.header {
animation-delay: 1.35s; }
@keyframes snowfall {
0% {
transform: translateY(-10vh); }
100% {
transform: translateY(130vh); } }
.snowflake {
background: white;
border-radius: 50%;
position: fixed;
top: -5vh;
animation: snowfall infinite;
opacity: 0.1; }
@font-face {
font-family: 'SF-Regular';
src: url("../fonts/SF-Pro-Display-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap; }
h1, h2, h3, h4, h5, h6, summary, select, button, p {
font-family: 'SF-Regular', system-ui; }