tailwindcss rewrite
This commit is contained in:
z0x
parent
c19ed0113d
commit
e7a707b4e2
11 changed files with 90 additions and 318 deletions
19
404.html
19
404.html
|
|
@ -3,19 +3,20 @@
|
|||
<meta charset="utf-8" />
|
||||
<title>404</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" href="./css/style.css" />
|
||||
<link rel="icon" type="image/x-icon" href="./img/logo_bg.svg" />
|
||||
<meta name="darkreader-lock">
|
||||
<link rel="icon" type="image/x-icon" href="./img/logo_bg.svg">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="./img/logo_bg.svg">
|
||||
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="./img/logo_bg.svg">
|
||||
<meta name="darkreader-lock">
|
||||
<link rel="stylesheet" href="./snowflake.css">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="center">
|
||||
<div class="box-404">
|
||||
<h1 class="header-404">404</h1>
|
||||
<body class="bg-cover bg-[url('../img/gradient.webp')] text-white overflow-hidden">
|
||||
<div class="flex items-center justify-center min-h-screen">
|
||||
<div class="bg-[rgba(11,11,11,0.6)] aspect-square rounded-3xl border-2 border-white flex flex-col items-center justify-center w-full h-full max-w-[40vmin] max-h-[40vmin] md:max-w-[20vmin] md:max-h-[20vmin]">
|
||||
<h1 class="text-6xl">404</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div id="snowflake-container"></div>
|
||||
<script src="./js/snowflakes.ts"></script>
|
||||
</div>
|
||||
<script src="./snowflakes.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
120
css/style.css
120
css/style.css
|
|
@ -1,120 +0,0 @@
|
|||
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; }
|
||||
Binary file not shown.
55
img/logo.svg
55
img/logo.svg
|
|
@ -7,7 +7,7 @@
|
|||
xml:space="preserve"
|
||||
style="clip-rule:evenodd;fill-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"
|
||||
id="svg3"
|
||||
sodipodi:docname="logo_glow-v2.svg"
|
||||
sodipodi:docname="logo.svg"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
|
|
@ -32,34 +32,7 @@
|
|||
smooth_angles="360"
|
||||
helper_size="10"
|
||||
simplify_individual_paths="false"
|
||||
simplify_just_coalesce="false" /><linearGradient
|
||||
id="linearGradient14"
|
||||
inkscape:collect="always"><stop
|
||||
style="stop-color:#ffffff;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop14" /><stop
|
||||
style="stop-color:#ffffff;stop-opacity:0;"
|
||||
offset="1"
|
||||
id="stop15" /></linearGradient><radialGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#linearGradient14"
|
||||
id="radialGradient15"
|
||||
cx="250"
|
||||
cy="250"
|
||||
fx="250"
|
||||
fy="250"
|
||||
r="250"
|
||||
gradientUnits="userSpaceOnUse" /><filter
|
||||
inkscape:collect="always"
|
||||
style="color-interpolation-filters:sRGB"
|
||||
id="filter15"
|
||||
x="-0.027"
|
||||
y="-0.027"
|
||||
width="1.054"
|
||||
height="1.054"><feGaussianBlur
|
||||
inkscape:collect="always"
|
||||
stdDeviation="5.625"
|
||||
id="feGaussianBlur15" /></filter><filter
|
||||
simplify_just_coalesce="false" /><filter
|
||||
inkscape:label="Evanescent"
|
||||
inkscape:menu="Blurs"
|
||||
inkscape:menu-tooltip="Blur the contents of objects, preserving the outline and adding progressive transparency at edges"
|
||||
|
|
@ -110,32 +83,24 @@
|
|||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#cccccc"
|
||||
inkscape:zoom="1.855092"
|
||||
inkscape:cx="249.85283"
|
||||
inkscape:cy="249.85283"
|
||||
inkscape:window-width="1910"
|
||||
inkscape:window-height="1033"
|
||||
inkscape:cx="249.58331"
|
||||
inkscape:cy="249.58331"
|
||||
inkscape:window-width="2256"
|
||||
inkscape:window-height="1504"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg3" />
|
||||
|
||||
<circle
|
||||
style="clip-rule:evenodd;display:none;fill:#000000;fill-rule:evenodd;stroke-width:0.5;stroke-linejoin:round;stroke-miterlimit:2"
|
||||
id="path2"
|
||||
cx="250"
|
||||
cy="250"
|
||||
r="250" /><path
|
||||
d="M 250.00006,0 270,140 c 3.4607,21.50491 14.59856,42.82248 30,58.22174 15.40134,15.40234 38.49574,28.31697 60,31.77826 L 500,250.00001 360,270 c -21.50426,3.4613 -44.59866,16.37593 -60,31.77826 C 284.59856,317.17752 273.4607,338.49509 270,360 L 250.00006,500 230,360 C 226.5393,338.49509 215.40134,317.17752 200,301.77826 184.59856,286.37593 161.50426,273.4613 140,270 L 0,250.00001 140,230 c 21.50426,-3.46129 44.59856,-16.37592 60,-31.77826 C 215.40134,182.82248 226.5393,161.50491 230,140 Z"
|
||||
style="clip-rule:evenodd;display:none;fill:url(#radialGradient15);fill-rule:evenodd;stroke-width:0.307125;stroke-linejoin:round;stroke-miterlimit:2;filter:url(#filter15)"
|
||||
id="path1-2"
|
||||
sodipodi:nodetypes="ccccccccccccccccc"
|
||||
inkscape:label="path2" /><circle
|
||||
style="display:inline;mix-blend-mode:normal;fill:url(#radialGradient27);fill-opacity:1;stroke-width:0.300003;filter:url(#filter1)"
|
||||
id="path24"
|
||||
cx="250"
|
||||
cy="250"
|
||||
r="150" /><path
|
||||
r="150"
|
||||
inkscape:label="backlight" /><path
|
||||
d="M 250.00005,25 268,151 c 3.11463,19.35442 13.1387,38.54023 27,52.39957 13.86121,13.8621 34.64617,25.48527 54,28.60043 L 475,250.00001 349,268 c -19.35383,3.11517 -40.13879,14.73834 -54,28.60043 C 281.1387,310.45977 271.11463,329.64558 268,349 L 250.00005,475 232,349 C 228.88537,329.64558 218.86121,310.45977 205,296.60043 191.1387,282.73834 170.35383,271.11517 151,268 L 25,250.00001 151,232 c 19.35383,-3.11516 40.1387,-14.73833 54,-28.60043 C 218.86121,189.54023 228.88537,170.35442 232,151 Z"
|
||||
style="clip-rule:evenodd;display:inline;fill:#ffffff;fill-rule:evenodd;stroke-width:0.276412;stroke-linejoin:round;stroke-miterlimit:2"
|
||||
id="path1"
|
||||
sodipodi:nodetypes="ccccccccccccccccc" /></svg>
|
||||
sodipodi:nodetypes="ccccccccccccccccc"
|
||||
inkscape:label="star" /></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 3.9 KiB |
|
|
@ -7,7 +7,7 @@
|
|||
xml:space="preserve"
|
||||
style="clip-rule:evenodd;fill-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"
|
||||
id="svg3"
|
||||
sodipodi:docname="logo_glow-v2_bg.svg"
|
||||
sodipodi:docname="logo_bg.svg"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
|
|
@ -32,34 +32,7 @@
|
|||
smooth_angles="360"
|
||||
helper_size="10"
|
||||
simplify_individual_paths="false"
|
||||
simplify_just_coalesce="false" /><linearGradient
|
||||
id="linearGradient14"
|
||||
inkscape:collect="always"><stop
|
||||
style="stop-color:#ffffff;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop14" /><stop
|
||||
style="stop-color:#ffffff;stop-opacity:0;"
|
||||
offset="1"
|
||||
id="stop15" /></linearGradient><radialGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#linearGradient14"
|
||||
id="radialGradient15"
|
||||
cx="250"
|
||||
cy="250"
|
||||
fx="250"
|
||||
fy="250"
|
||||
r="250"
|
||||
gradientUnits="userSpaceOnUse" /><filter
|
||||
inkscape:collect="always"
|
||||
style="color-interpolation-filters:sRGB"
|
||||
id="filter15"
|
||||
x="-0.027"
|
||||
y="-0.027"
|
||||
width="1.054"
|
||||
height="1.054"><feGaussianBlur
|
||||
inkscape:collect="always"
|
||||
stdDeviation="5.625"
|
||||
id="feGaussianBlur15" /></filter><filter
|
||||
simplify_just_coalesce="false" /><filter
|
||||
inkscape:label="Evanescent"
|
||||
inkscape:menu="Blurs"
|
||||
inkscape:menu-tooltip="Blur the contents of objects, preserving the outline and adding progressive transparency at edges"
|
||||
|
|
@ -110,32 +83,30 @@
|
|||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#cccccc"
|
||||
inkscape:zoom="1.855092"
|
||||
inkscape:cx="249.85283"
|
||||
inkscape:cy="249.85283"
|
||||
inkscape:window-width="1910"
|
||||
inkscape:window-height="1033"
|
||||
inkscape:cx="250.12237"
|
||||
inkscape:cy="249.58331"
|
||||
inkscape:window-width="2256"
|
||||
inkscape:window-height="1504"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg3" />
|
||||
|
||||
<circle
|
||||
style="clip-rule:evenodd;fill-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;fill:#000000;stroke-width:0.5"
|
||||
style="clip-rule:evenodd;display:inline;fill:#000000;fill-rule:evenodd;stroke-width:0.5;stroke-linejoin:round;stroke-miterlimit:2"
|
||||
id="path2"
|
||||
cx="250"
|
||||
cy="250"
|
||||
r="250" /><path
|
||||
d="M 250.00006,0 270,140 c 3.4607,21.50491 14.59856,42.82248 30,58.22174 15.40134,15.40234 38.49574,28.31697 60,31.77826 L 500,250.00001 360,270 c -21.50426,3.4613 -44.59866,16.37593 -60,31.77826 C 284.59856,317.17752 273.4607,338.49509 270,360 L 250.00006,500 230,360 C 226.5393,338.49509 215.40134,317.17752 200,301.77826 184.59856,286.37593 161.50426,273.4613 140,270 L 0,250.00001 140,230 c 21.50426,-3.46129 44.59856,-16.37592 60,-31.77826 C 215.40134,182.82248 226.5393,161.50491 230,140 Z"
|
||||
style="clip-rule:evenodd;display:none;fill:url(#radialGradient15);fill-rule:evenodd;stroke-width:0.307125;stroke-linejoin:round;stroke-miterlimit:2;filter:url(#filter15)"
|
||||
id="path1-2"
|
||||
sodipodi:nodetypes="ccccccccccccccccc"
|
||||
inkscape:label="path2" /><circle
|
||||
r="250"
|
||||
inkscape:label="background" /><circle
|
||||
style="display:inline;fill:url(#radialGradient27);fill-opacity:1;stroke-width:0.300003;filter:url(#filter1)"
|
||||
id="path24"
|
||||
cx="250"
|
||||
cy="250"
|
||||
r="150" /><path
|
||||
r="150"
|
||||
inkscape:label="backlight" /><path
|
||||
d="M 250.00005,25 268,151 c 3.11463,19.35442 13.1387,38.54023 27,52.39957 13.86121,13.8621 34.64617,25.48527 54,28.60043 L 475,250.00001 349,268 c -19.35383,3.11517 -40.13879,14.73834 -54,28.60043 C 281.1387,310.45977 271.11463,329.64558 268,349 L 250.00005,475 232,349 C 228.88537,329.64558 218.86121,310.45977 205,296.60043 191.1387,282.73834 170.35383,271.11517 151,268 L 25,250.00001 151,232 c 19.35383,-3.11516 40.1387,-14.73833 54,-28.60043 C 218.86121,189.54023 228.88537,170.35442 232,151 Z"
|
||||
style="clip-rule:evenodd;display:inline;fill:#ffffff;fill-rule:evenodd;stroke-width:0.276412;stroke-linejoin:round;stroke-miterlimit:2"
|
||||
id="path1"
|
||||
sodipodi:nodetypes="ccccccccccccccccc" /></svg>
|
||||
sodipodi:nodetypes="ccccccccccccccccc"
|
||||
inkscape:label="star" /></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 4.1 KiB |
|
|
@ -1,8 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-matrix" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M4 3h-1v18h1" />
|
||||
<path d="M20 21h1v-18h-1" />
|
||||
<path d="M7 9v6" />
|
||||
<path d="M12 15v-3.5a2.5 2.5 0 1 0 -5 0v.5" />
|
||||
<path d="M17 15v-3.5a2.5 2.5 0 1 0 -5 0v.5" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 469 B |
38
index.html
38
index.html
|
|
@ -3,35 +3,21 @@
|
|||
<meta charset="utf-8" />
|
||||
<title>z0x</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<meta property="og:title" content="z0x" />
|
||||
<meta property="og:description" content="z0x's homepage" />
|
||||
<meta property="og:url" content="https://z0x.ca" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="./img/logo_bg.svg" />
|
||||
<meta property="og:image:alt" content="logo" />
|
||||
<meta property="og:image:width" content="256" />
|
||||
<meta property="og:image:height" content="256" />
|
||||
<meta property="og:site_name" content="z0x.ca" />
|
||||
|
||||
<link rel="stylesheet" href="./css/style.css" />
|
||||
<link rel="preload" href="./img/matrix.svg" as="image" />
|
||||
<link rel="preload" href="./img/logo_bg.svg" as="image" />
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="./img/logo_bg.svg" />
|
||||
<meta name="darkreader-lock">
|
||||
<link rel="icon" type="image/x-icon" href="./img/logo_bg.svg">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="./img/logo_bg.svg">
|
||||
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="./img/logo_bg.svg">
|
||||
|
||||
<meta name="darkreader-lock">
|
||||
<link rel="stylesheet" href="./snowflake.css">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="center">
|
||||
<div class="box">
|
||||
<a>
|
||||
<img class="logo" src="./img/logo.svg" alt="logo" />
|
||||
</a>
|
||||
<h1 class="header unselectable">z0x</h1>
|
||||
<div id="snowflake-container"></div>
|
||||
<script src="./js/snowflakes.ts"></script>
|
||||
<body class="bg-cover bg-[url('../img/gradient.webp')] text-white overflow-hidden">
|
||||
<div class="flex items-center justify-center min-h-screen">
|
||||
<div class="bg-[rgba(11,11,11,0.6)] aspect-square rounded-3xl border-2 border-white flex flex-col items-center justify-center w-full h-full max-w-[60vmin] max-h-[60vmin] md:max-w-[35vmin] md:max-h-[35vmin]">
|
||||
<img class="w-2/3 mb-4" src="./img/logo.svg" alt="logo" />
|
||||
<h1 class="text-4xl">z0x</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div id="snowflake-container"></div>
|
||||
<script src="./snowflakes.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
function createSnowflakes() {
|
||||
const numSnowflakes = 50;
|
||||
const maxSize = 0.2;
|
||||
const maxTranslate = 10;
|
||||
const container = document.getElementById('snowflake-container');
|
||||
|
||||
function randomBetween(min, max) {
|
||||
return (Math.random() * max) + min;
|
||||
}
|
||||
|
||||
if (container) {
|
||||
for (let i = 0; i < numSnowflakes; i++) {
|
||||
let randomSize = randomBetween(5, 25) + "px";
|
||||
let randomLeft = randomBetween(0, window.innerWidth) + "px";
|
||||
let randomDuration = randomBetween(3, 10);
|
||||
|
||||
const snowflake = document.createElement('div');
|
||||
snowflake.classList.add('snowflake');
|
||||
snowflake.style.width = randomSize;
|
||||
snowflake.style.height = randomSize;
|
||||
snowflake.style.left = randomLeft;
|
||||
snowflake.style.animationDuration = randomDuration + "s";
|
||||
snowflake.style.animationDelay = randomBetween(0, 5) + "s";
|
||||
|
||||
container.appendChild(snowflake);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
createSnowflakes();
|
||||
36
robots.txt
36
robots.txt
|
|
@ -1,36 +0,0 @@
|
|||
User-agent: *
|
||||
Disallow:
|
||||
|
||||
User-agent: AdsBot-Google
|
||||
User-agent: Amazonbot
|
||||
User-agent: anthropic-ai
|
||||
User-agent: Applebot-Extended
|
||||
User-agent: AwarioRssBot
|
||||
User-agent: AwarioSmartBot
|
||||
User-agent: Bytespider
|
||||
User-agent: CCBot
|
||||
User-agent: ChatGPT-User
|
||||
User-agent: Claude-Web
|
||||
User-agent: ClaudeBot
|
||||
User-agent: cohere-ai
|
||||
User-agent: DataForSeoBot
|
||||
User-agent: Diffbot
|
||||
User-agent: FacebookBot
|
||||
User-agent: FriendlyCrawler
|
||||
User-agent: Google-Extended
|
||||
User-agent: GoogleOther
|
||||
User-agent: GPTBot
|
||||
User-agent: img2dataset
|
||||
User-agent: ImagesiftBot
|
||||
User-agent: magpie-crawler
|
||||
User-agent: Meltwater
|
||||
User-agent: omgili
|
||||
User-agent: omgilibot
|
||||
User-agent: peer39_crawler
|
||||
User-agent: peer39_crawler/1.0
|
||||
User-agent: PerplexityBot
|
||||
User-agent: PiplBot
|
||||
User-agent: scoop.it
|
||||
User-agent: Seekr
|
||||
User-agent: YouBot
|
||||
Disallow: /
|
||||
16
snowflake.css
Normal file
16
snowflake.css
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
@keyframes fadeIn {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
@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;
|
||||
}
|
||||
27
snowflakes.ts
Normal file
27
snowflakes.ts
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
function createSnowflakes() {
|
||||
const numSnowflakes = 50;
|
||||
const maxSize = 0.2;
|
||||
const maxTranslate = 10;
|
||||
const container = document.getElementById('snowflake-container');
|
||||
function randomBetween(min, max) {
|
||||
return (Math.random() * max) + min;
|
||||
}
|
||||
if (container) {
|
||||
for (let i = 0; i < numSnowflakes; i++) {
|
||||
let randomSize = randomBetween(5, 25) + "px";
|
||||
let randomLeft = randomBetween(0, window.innerWidth) + "px";
|
||||
let randomDuration = randomBetween(3, 10);
|
||||
|
||||
const snowflake = document.createElement('div');
|
||||
snowflake.classList.add('snowflake');
|
||||
snowflake.style.width = randomSize;
|
||||
snowflake.style.height = randomSize;
|
||||
snowflake.style.left = randomLeft;
|
||||
snowflake.style.animationDuration = randomDuration + "s";
|
||||
snowflake.style.animationDelay = randomBetween(0, 5) + "s";
|
||||
|
||||
container.appendChild(snowflake);
|
||||
}
|
||||
}
|
||||
}
|
||||
createSnowflakes();
|
||||
Loading…
Add table
Reference in a new issue