Link to article: SCP Anthology 2024 / Earthworm.
.earthworm--anth24 {
--anth24-rgb: 240, 36, 77;
--anth24-accent: rgb(var(--anth24-rgb));
--anth24-accent-faded: rgba(var(--anth24-rgb), 0.27);
--earthworm-segment-border-color: var(--anth24-accent);
--cut: 1.25rem;
font-family: monospace;
font-size: 1rem;
letter-spacing: 0.05rem;
align-items: center;
gap: 1rem 0;
margin-block: 1rem;
}
@media (max-width: 550px), (min-width: 768px) and (max-width: 850px) {
.earthworm { flex-direction: column; }
}
.earthworm--anth24 p { margin: 0 calc(var(--cut) / 2); }
.earthworm--anth24 .earthworm__hub {
min-height: calc(var(--cut) * 2);
padding-inline: calc(var(--cut) / 2);
margin-inline: calc(var(--cut) * -1 * 0.707);
background: none;
border: none;
z-index: 0;
}
.earthworm--anth24 .earthworm__hub::before,
.earthworm--anth24 .earthworm__hub::after {
content: "";
position: absolute;
inset: 0;
transition: transform 0.1s ease, background-color 0.2s ease;
z-index: -2;
--d: 1;
clip-path: polygon(0% var(--cut), calc(var(--cut) * var(--d)) 0%, calc(100% - (var(--cut) * var(--d))) 0%, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - (var(--cut) * var(--d))) 100%, calc(var(--cut) * var(--d)) 100%, 0% calc(100% - var(--cut)));
}
.earthworm--anth24 .earthworm__hub::before {
--d: 1.15;
background-color: var(--anth24-accent);
}
.earthworm--anth24 .earthworm__hub::after {
background-color: color-mix(in srgb, rgb(16, 220, 179) 15%, currentColor 75%);
filter: invert(1) brightness(2);
z-index: -1;
transform: scale(0.97, 0.92);
--d: 1.1;
}
.earthworm--anth24 .earthworm__hub:has(a:hover)::before {
transform: scale(1.06, 1.2);
--d: 1.3;
}
.earthworm--anth24 .earthworm__previous,
.earthworm--anth24 .earthworm__next,
.earthworm--anth24 .earthworm__arrowhead {
transition: background-image 0.2s ease;
background-image: linear-gradient(to left, transparent, transparent);
}
.earthworm--anth24 .earthworm__previous {
border-top-color: transparent;
padding-right: calc(var(--cut) / 2);
}
.earthworm--anth24 .earthworm__next {
border-bottom-color: transparent;
padding-left: calc(var(--cut) / 2);
}
.earthworm--anth24 a { color: currentColor; }
.earthworm--anth24 a::before {
content: "";
position: absolute;
inset: -2px;
}
.earthworm--anth24 .earthworm__previous:has(a:hover) {
background-image: linear-gradient(to right, var(--anth24-accent-faded), transparent);
}
.earthworm--anth24 .earthworm__next:has(a:hover) {
background-image: linear-gradient(to left, var(--anth24-accent-faded), transparent);
}
.earthworm--anth24 .earthworm__previous:has(a:hover) .earthworm__arrowhead,
.earthworm--anth24 .earthworm__next:has(a:hover) .earthworm__arrowhead {
background-image: linear-gradient(to left, var(--anth24-accent-faded), var(--anth24-accent-faded));
}