SCP Anthology 2024 / Earthworm

Link to article: SCP Anthology 2024 / Earthworm.

Module Styles

• .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));
  }

Inline Styles

• (none)

Includes

• :scp-wiki:component:earthworm [info]

CSS Classes

• (none)

Page Source

[[include :scp-wiki:component:earthworm
| previous-url = {$previous-url}
| previous-title = {$previous-title}
| next-url = {$next-url}
| next-title = {$next-title}
| hub-url = {$hub-url}
| hub-title = {$hub-title}
| class = earthworm--anth24 {$class}
]]

[[module css]]
.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));
}
[[/module]]