Link to article: Stop Making Sense.
@keyframes spin {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
:root{
--header-title: "Site-⌘";
--header-subtitle: "Stop Making Sense";
--accentColor: #e41b21;
}
div#extra-div-1 {
background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-6445/Surrealistics-Logo.png);
filter: opacity(20%);
}
:root{
/* ---------- Box variables ---------- */
--blockquote-background-color: 0, 0, 0;
--UI-opacity: 0.6875;
--blockquote-border-width: .5rem;
--blockquote-border-color: 228, 27, 33;
--window-shadow: 0 0 0.625rem rgb(var(--UI-dark-palette),0.5);
--UI-dark-palette: 255, 255, 255;
/* -------------------- */
}
/* ---------- Box code ---------- */
.box {
display: grid;
grid-template-areas:
"pic title"
"pic desc"
"pic desc";
grid-template-columns: 30% 70%;
background-color: rgba(var(--blockquote-background-color),var(--UI-opacity));
border-radius: 1.5rem;
margin: 1em;
border: solid var(--blockquote-border-width) rgb(var(--blockquote-border-color));
box-shadow: var(--window-shadow);
}
.pic {
grid-area: pic;
display: grid;
align-self: center;
padding: 1em;
transition: transform .30s;
}
.pic:hover {
animation: spin 0.5s linear infinite;
z-index: 2;
}
.pic:focus-within {
animation: spin 0.5s linear infinite;
z-index: 2;
}
.pic a:hover {
background-color: transparent;
}
.title {
display: grid;
grid-area: title;
align-self: center;
text-align: center;
padding: 0 1em;
}
.title h2 {
margin-bottom: 0;
}
.desc {
grid-area: desc;
display: grid;
align-self: center;
padding: 1em;
text-align: center;
}
.desc p {
margin-top: 0;
margin-bottom: 0.5rem;
}
@media only screen and (max-width: 767.98px) {
.box {
display: grid;
grid-template-areas:
"title title"
"pic pic"
"desc desc";
border: solid var(--blockquote-border-width) rgb(var(--blockquote-border-color));
}
.desc {
border-top: solid var(--blockquote-border-width) rgb(var(--blockquote-border-color));
}
div.skip_window {
padding: 0 0.5em;
margin: 1.5rem 0;
}
.skip_window::before {
padding: 0.625em 1.5rem;
margin: 1.5rem -0.6em;
}
.yui-navset.yui-navset-top .yui-content {
padding: 1em 0.5em;
}
}
/* -------------------- */
display: none;
:scp-wiki:theme:penumbra
[info]
component:preview
fragment:lapis-cards
fragment:lapis-cards
fragment:lapis-cards
fragment:lapis-cards
fragment:lapis-cards
fragment:lapis-cards
fragment:lapis-cards
fragment:lapis-cards
fragment:lapis-cards
fragment:lapis-cards
fragment:lapis-cards
fragment:lapis-cards
fragment:lapis-cards
fragment:lapis-cards
fragment:lapis-cards
fragment:lapis-cards
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
blockquote