275 lines
8.1 KiB
CSS
275 lines
8.1 KiB
CSS
/* Small decorative animations inside the homepage tiles */
|
|
@layer components {
|
|
/* Server rack */
|
|
.rack {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
width: min(100%, 24rem);
|
|
|
|
@media (min-width: 64em) {
|
|
.tile--server & {
|
|
gap: 0.7rem;
|
|
width: min(100%, 30rem);
|
|
}
|
|
}
|
|
}
|
|
|
|
.rack__unit {
|
|
display: grid;
|
|
position: relative;
|
|
grid-template-columns: auto auto minmax(0, 1fr) 4.5rem;
|
|
align-items: center;
|
|
gap: 0.55rem;
|
|
height: 2.4rem;
|
|
padding-inline: 0.9rem;
|
|
border: 1px solid var(--line);
|
|
border-radius: 0.6rem;
|
|
background: linear-gradient(180deg, #231e33, #1a1626);
|
|
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
|
|
}
|
|
|
|
.rack__led {
|
|
width: 0.45rem;
|
|
height: 0.45rem;
|
|
border-radius: 50%;
|
|
background: var(--pink);
|
|
box-shadow: 0 0 8px var(--pink);
|
|
animation: blink 1.6s steps(2, jump-none) infinite;
|
|
}
|
|
|
|
.rack__led--b1,
|
|
.rack__led--b2,
|
|
.rack__led--b3,
|
|
.rack__led--b4,
|
|
.rack__led--b5 {
|
|
background: var(--blue-text);
|
|
box-shadow: 0 0 8px var(--blue-text);
|
|
}
|
|
|
|
.rack__led--2 { animation-duration: 0.9s; }
|
|
.rack__led--3 { animation-duration: 2.3s; animation-delay: -0.6s; }
|
|
.rack__led--4 { animation-duration: 1.2s; animation-delay: -0.3s; }
|
|
.rack__led--b1 { animation-duration: 0.7s; animation-delay: -0.2s; }
|
|
.rack__led--b2 { animation-duration: 3.1s; }
|
|
.rack__led--b3 { animation-duration: 1.1s; animation-delay: -0.5s; }
|
|
.rack__led--b4 { animation-duration: 0.5s; }
|
|
.rack__led--5 { animation-duration: 1.9s; animation-delay: -1s; }
|
|
.rack__led--b5 { animation-duration: 0.8s; animation-delay: -0.1s; }
|
|
|
|
.rack__vents {
|
|
height: 0.9rem;
|
|
border-radius: 2px;
|
|
background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.09) 0 2px, transparent 2px 6px);
|
|
}
|
|
|
|
.rack__bar {
|
|
height: 0.3rem;
|
|
overflow: hidden;
|
|
border-radius: 9px;
|
|
background: rgb(255 255 255 / 0.08);
|
|
}
|
|
|
|
.rack__load {
|
|
display: block;
|
|
width: 45%;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: var(--fluid);
|
|
animation: load 5s var(--ease-in-out) infinite alternate;
|
|
}
|
|
|
|
.rack__load--2 { width: 70%; animation-duration: 3.4s; animation-delay: -1s; }
|
|
.rack__load--3 { width: 25%; animation-duration: 6s; animation-delay: -2.5s; }
|
|
.rack__load--4 { width: 55%; animation-duration: 4.2s; animation-delay: -0.4s; }
|
|
.rack__load--5 { width: 35%; animation-duration: 5.5s; animation-delay: -3s; }
|
|
|
|
@media (min-width: 64em) {
|
|
.tile--server .rack__unit {
|
|
height: 3.1rem;
|
|
grid-template-columns: auto auto minmax(0, 1fr) 6rem;
|
|
}
|
|
}
|
|
|
|
/* Network graph */
|
|
.net {
|
|
width: min(100%, 24rem);
|
|
height: auto;
|
|
overflow: visible;
|
|
}
|
|
|
|
.net__links path {
|
|
fill: none;
|
|
stroke: rgb(255 255 255 / 0.14);
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.net__flow path {
|
|
fill: none;
|
|
stroke: var(--pink);
|
|
stroke-width: 2.5;
|
|
stroke-linecap: round;
|
|
stroke-dasharray: 6 100;
|
|
animation: flow 3s linear infinite;
|
|
}
|
|
|
|
.net__flow path:nth-child(2) { stroke: var(--violet-text); animation-duration: 2.4s; animation-delay: -1.2s; }
|
|
.net__flow path:nth-child(3) { stroke: var(--white); animation-duration: 3.6s; animation-delay: -0.4s; }
|
|
.net__flow path:nth-child(4) { stroke: var(--blue-text); animation-duration: 2.8s; animation-delay: -2s; }
|
|
.net__flow path:nth-child(5) { animation-duration: 4s; animation-delay: -3s; }
|
|
|
|
.net__nodes rect {
|
|
fill: #1e1a2a;
|
|
stroke: rgb(255 255 255 / 0.25);
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
.net__core {
|
|
fill: var(--bg);
|
|
stroke: var(--pink);
|
|
stroke-width: 2;
|
|
filter: drop-shadow(0 0 8px rgb(255 118 164 / 0.7));
|
|
}
|
|
|
|
/* Shell script */
|
|
.code {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 1rem 1.1rem;
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: 0.8rem;
|
|
background: #0f0c16;
|
|
color: #d9d1e7;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.74rem;
|
|
line-height: 1.65;
|
|
white-space: pre;
|
|
|
|
& .c { color: var(--faint); }
|
|
& .k { color: var(--pink-text); }
|
|
& .s { color: var(--blue-text); }
|
|
}
|
|
|
|
.code__caret {
|
|
display: inline-block;
|
|
width: 0.55em;
|
|
height: 1.15em;
|
|
margin-left: 0.2em;
|
|
vertical-align: text-bottom;
|
|
background: var(--pink-text);
|
|
animation: blink 1.1s steps(2, jump-none) infinite;
|
|
}
|
|
|
|
/* Bars that keep sorting themselves */
|
|
.bars {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 0.4rem;
|
|
width: min(100%, 15rem);
|
|
height: 7rem;
|
|
}
|
|
|
|
.bars__bar {
|
|
flex: 1;
|
|
height: var(--to);
|
|
border-radius: 0.3rem 0.3rem 0.15rem 0.15rem;
|
|
background: linear-gradient(180deg, var(--violet-text), var(--blue));
|
|
animation: sort 7s var(--ease-in-out) infinite;
|
|
}
|
|
|
|
.bars__bar--1 { --from: 70%; --to: 18%; }
|
|
.bars__bar--2 { --from: 30%; --to: 28%; animation-delay: 0.08s; }
|
|
.bars__bar--3 { --from: 95%; --to: 38%; animation-delay: 0.16s; }
|
|
.bars__bar--4 { --from: 18%; --to: 48%; animation-delay: 0.24s; }
|
|
.bars__bar--5 { --from: 58%; --to: 58%; animation-delay: 0.32s; }
|
|
.bars__bar--6 { --from: 40%; --to: 70%; animation-delay: 0.4s; }
|
|
.bars__bar--7 { --from: 82%; --to: 84%; animation-delay: 0.48s; }
|
|
.bars__bar--8 { --from: 48%; --to: 100%; animation-delay: 0.56s; }
|
|
|
|
.bars__bar--3,
|
|
.bars__bar--8 {
|
|
background: linear-gradient(180deg, var(--pink), var(--violet));
|
|
}
|
|
|
|
/* Video editor timeline */
|
|
.edit {
|
|
--label: 2.2rem;
|
|
position: relative;
|
|
display: grid;
|
|
gap: 0.45rem;
|
|
width: 100%;
|
|
padding: 0.9rem;
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: 0.8rem;
|
|
background: #0f0c16;
|
|
}
|
|
|
|
.edit__ruler {
|
|
height: 0.6rem;
|
|
margin-left: var(--label);
|
|
background:
|
|
repeating-linear-gradient(90deg, rgb(255 255 255 / 0.22) 0 1px, transparent 1px 2.5rem),
|
|
repeating-linear-gradient(90deg, rgb(255 255 255 / 0.09) 0 1px, transparent 1px 0.5rem);
|
|
}
|
|
|
|
.edit__track {
|
|
position: relative;
|
|
height: 1.9rem;
|
|
margin-left: var(--label);
|
|
border-radius: 0.35rem;
|
|
background: rgb(255 255 255 / 0.03);
|
|
}
|
|
|
|
.edit__label {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: calc(-1 * var(--label));
|
|
translate: 0 -50%;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.68rem;
|
|
color: var(--faint);
|
|
}
|
|
|
|
.edit__clip {
|
|
position: absolute;
|
|
top: 3px;
|
|
bottom: 3px;
|
|
border-radius: 0.3rem;
|
|
}
|
|
|
|
.edit__clip--title { left: 30%; width: 22%; background: linear-gradient(90deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.55)); }
|
|
.edit__clip--a { left: 0; width: 34%; background: var(--pink); }
|
|
.edit__clip--b { left: 34.6%; width: 28%; background: var(--violet); }
|
|
.edit__clip--c { left: 63.2%; width: 36.8%; background: var(--blue); }
|
|
|
|
.edit__clip--wave {
|
|
left: 0;
|
|
width: 100%;
|
|
background: repeating-linear-gradient(90deg, var(--violet-text) 0 2px, transparent 2px 4px);
|
|
clip-path: polygon(0.0% 39%, 2.5% 26%, 5.0% 12%, 7.5% 14%, 10.0% 15%, 12.5% 28%, 15.0% 37%, 17.5% 21%, 20.0% 18%, 22.5% 16%, 25.0% 26%, 27.5% 36%, 30.0% 33%, 32.5% 23%, 35.0% 27%, 37.5% 29%, 40.0% 30%, 42.5% 33%, 45.0% 33%, 47.5% 33%, 50.0% 28%, 52.5% 36%, 55.0% 32%, 57.5% 39%, 60.0% 37%, 62.5% 34%, 65.0% 31%, 67.5% 28%, 70.0% 37%, 72.5% 34%, 75.0% 26%, 77.5% 23%, 80.0% 20%, 82.5% 28%, 85.0% 38%, 87.5% 31%, 90.0% 16%, 92.5% 12%, 95.0% 15%, 97.5% 23%, 100.0% 38%, 100.0% 62%, 97.5% 77%, 95.0% 85%, 92.5% 88%, 90.0% 84%, 87.5% 69%, 85.0% 62%, 82.5% 72%, 80.0% 80%, 77.5% 77%, 75.0% 74%, 72.5% 66%, 70.0% 63%, 67.5% 72%, 65.0% 69%, 62.5% 66%, 60.0% 63%, 57.5% 61%, 55.0% 68%, 52.5% 64%, 50.0% 72%, 47.5% 67%, 45.0% 67%, 42.5% 67%, 40.0% 70%, 37.5% 71%, 35.0% 73%, 32.5% 77%, 30.0% 67%, 27.5% 64%, 25.0% 74%, 22.5% 84%, 20.0% 82%, 17.5% 79%, 15.0% 63%, 12.5% 72%, 10.0% 85%, 7.5% 86%, 5.0% 88%, 2.5% 74%, 0.0% 61%);
|
|
}
|
|
|
|
.edit__playhead {
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
bottom: 0.5rem;
|
|
left: calc(0.9rem + var(--label) + 30%);
|
|
width: 2px;
|
|
background: var(--pink-text);
|
|
box-shadow: 0 0 12px var(--pink);
|
|
animation: playhead 8s linear infinite;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -5px;
|
|
width: 12px;
|
|
height: 10px;
|
|
border-radius: 2px 2px 6px 6px;
|
|
background: var(--pink-text);
|
|
}
|
|
}
|
|
}
|