Link to article: SCP Anthology Hub.
@import url('https://api.fonts.coollabs.io/css2?family=Teko:wght@400;700&display=swap');
span, a {
word-break: normal;
}
.halloween-cards-container {
display: flex;
flex-wrap: wrap;
grid-gap: 1.675rem;
justify-content: center;
margin: 0.5rem auto;
}
.halloween-cards-container .anthology-card {
display: flex;
flex-direction: column;
background-color: #111;
position: relative;
flex-basis: 13.25rem;
box-sizing: border-box;
font-size: 0.875em;
isolation: isolate;
transition: transform 0.15s ease-out;
}
.halloween-cards-container .anthology-card:is(:hover,:focus-within) {
transform: scale(1.325);
z-index: 1;
}
.halloween-cards-container .anthology-card > a:first-child {
font-size: 0;
display: block;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 3;
outline: none;
}
.halloween-cards-container .anthology-card > a:first-child:not([href*="scp-7"]) {
display: none;
}
.halloween-cards-container .anthology-card > a:first-child:not([href*="scp-7"]) ~ img {
cursor: not-allowed;
}
.anthology-card > h1 {
font-family: 'Teko', 'Inter', sans-serif;
font-weight: normal;
font-size: 1.75em;
line-height: 0.9;
margin: 0;
position: absolute;
width: 100%;
box-sizing: border-box;
padding: 0.285rem 2.25rem 0.125rem;
text-align: center;
background-color: #111;
color: white;
clip-path: polygon(0 0, 100% 0, 100% 0.5rem, calc(100% - 1.25rem) 0.5rem, calc(100% - 2.5rem) 100%, 2.5rem 100%, 1.25rem 0.5rem, 0% 0.5rem);
transition: color 0.05s linear, background-color 0.125s ease-out;
}
.anthology-card:is(:hover,:focus-within) > h1 {
color: black;
background-color: var(--fg-accent);
}
.anthology-card > img {
padding-top: .5rem;
height: 17.5rem;
width: 100%;
object-fit: cover;
z-index: -1;
}
.anthology-card > .antho-title {
display: flex;
width: calc(100% + 1rem);
max-width: unset!important;
align-items: center;
font-family: 'Teko', 'Inter', sans-serif;
isolation: isolate;
position: absolute;
bottom: 2.625rem;
left: -0.625rem;
transform: translateY(50%);
z-index: 4;
pointer-events: none;
}
.anthology-card > .antho-title span {
pointer-events: auto;
}
.anthology-card > .antho-title span:nth-child(1) {
--bg: #a22bca;
display: flex;
align-items: center;
justify-content: center;
height: 3rem;
min-width: 3.5rem;
width: 3.5rem;
box-sizing: border-box;
color: black;
font-weight: bold;
position: relative;
font-size: 1.675rem;
font-family: 'Inter', sans-serif;
transform: scale(1.3125);
z-index: 1;
}
.anthology-card > .antho-title span:nth-child(1)::before,
.anthology-card > .antho-title span:nth-child(1)::after {
content: "";
display: block;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: var(--bg);
z-index: -1;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.anthology-card > .antho-title span:nth-child(1)::before {
background-color: var(--fg-accent);
transition: transform 0.125s ease-out;
}
.anthology-card > .antho-title span:nth-child(2) {
min-height: 2.375em;
font-size: 1.675em;
font-weight: normal;
line-height: 0.875;
display: inline-grid;
align-items: center;
text-align: center;
padding: 0.175em 1.25em; padding-left: 1.75rem;
margin-left: -0.875rem;
background-color: #111;
background-image: linear-gradient(to right, var(--fg-accent) 0%, var(--fg-accent) 100%);
background-size: 0% 100%;
background-position: 0 100%;
background-repeat: no-repeat;
clip-path: polygon(0 0, calc(100% - 0.875em) 0, 100% 50%, calc(100% - 0.875em) 100%, 0 100%);
transition: all 0.175s ease-out;
}
.anthology-card:is(:hover,:focus-within) > .antho-title span:nth-child(1) {
--bg: #111;
color: white;
transition: color 0.125s linear;
}
.anthology-card:is(:hover,:focus-within) > .antho-title span:nth-child(1)::before {
transform: scale(1.15);
}
.anthology-card:is(:hover,:focus-within) > .antho-title span:nth-child(2) {
color: black;
background-size: 100% 100%;
}
/*-----------------------*/
/*-----------------------*/
/*
.anthology-card:nth-child(28) img {
transition: filter 0.175s linear;
}
.anthology-card:nth-child(28):is(:hover,:focus-within) img {
filter: invert(1);
}*/
:scp-wiki:theme:halloween
[info]
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
halloween-cards-container