Link to article: Yossipossi Authorphage.
@import url('https://scp-wiki.wdfiles.com/local--files/yossipossi-authorphage/Outfit_wght%40100..900.css');
@import url('https://scp-wiki.wdfiles.com/local--files/yossipossi-authorphage/Lexend%2BDeca_wght%40100..900.css');
.article-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.article {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 80% 20% auto;
aspect-ratio: 3/4;
margin: 0.5rem;
background-size: cover;
background-position: center, center;
border-radius: 1rem;
position: relative;
overflow: hidden;
transition-duration: 0.3s;
color: var(--very-light-blue);
overflow-anchor: none;
}
.article:is(:hover, :active, :focus-within) {
grid-template-rows: 0% 20% auto;
transition-duration: 0.5s;
}
@media (prefers-reduced-motion: reduce) {
.article {
transition-duration: 0s;
}
.article:is(:hover, :active, :focus-within) {
transition-duration: 0s;
}
}
.article .placard {
display: flex;
flex-direction: column;
justify-content: center;
margin: auto;
padding: 0.5rem;
width: 100%;
height: 100%;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.5);
transition-duration: 0.3s;
position: relative;
font-family: "Outfit";
text-shadow: 0px 0px 1px black;
}
.placard > p {
margin-bottom: 0;
margin-top: 0;
}
.placard .url {
font-size: 200%;
}
.coauthors {
font-size: 95%;
opacity: 0.7;
margin-left: 5px;
}
.title {
font-size: 140%;
}
.biglink {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 30;
}
.article .description {
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
padding: 0.5rem;
transition-duration: 0.3s;
position: relative;
font-family: "Lexend Deca";
font-weight: 350;
overflow-anchor: none;
}
.article .quote {
font-size: 95%;
padding: 2px;
border-left: 2px solid var(--light-blue);
padding-left: 10px;
color: var(--light-blue);
font-style: italic;
}
.article .text {
font-size: 90%;
text-shadow: 0px 0px 1px black;
}
.article .text a {
color: var(--light-blue);
text-decoration: underline dotted;
}
.article:is(:hover, :active, :focus-within) :is(.placard, .description) {
background-color: rgba(0, 0, 0, 0.8);
transition-duration: 0.5s;
}
@media (prefers-reduced-motion: reduce) {
.article :is(.description, .placard) {
transition-duration: 0s;
}
.article:is(:hover, :active, :focus-within) :is(.placard, .description) {
transition-duration: 0s;
}
}
:is(.article, .other-item) a, :is(.article, .other-item) a:visited {
color: white;
}
.newest {
position: absolute;
right: 0;
top: 0;
width: min-content;
height: min-content;
font-family: "Outfit";
text-shadow: 0px 0px 1px black;
background: rgba(0, 0, 0, 0.5);
text-align: center;
display: flex;
border-bottom-left-radius: 1rem;
transition-duration: 0.3s;
opacity: 1;
font-weight: bold;
}
.article:is(:hover, :active, :focus-within) .newest {
opacity: 0;
transition-duration: 0.5s;
}
@media (prefers-reduced-motion: reduce) {
.newest {
transition-duration: 0s;
}
.article:is(:hover, :active, :focus-within) .newest {
transition-duration: 0s;
}
}
.newest p {
margin: auto;
padding: 6px;
}
.article.dummy {
background: grey;
opacity: 0.1;
}
@media (max-width: 900px) {
.article.dummy {
display: none;
}
}
.article-container.other {
grid-template-columns: repeat(2, 1fr);
}
.other-item {
position: relative;
margin: 0.5rem;
border-radius: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(115deg, rgba(0, 0, 0, 0.8) 40%, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.5) 60%);
background-size: 400%, 400%;
background-position: 90%, 90%;
transition-duration: 0.8s;
padding: 6px;
box-sizing: border-box;
}
.other-item:is(:hover, :active, :focus-within) {
background-position: 0% 0%;
transition-duration: 0.8s;
}
@media (prefers-reduced-motion: reduce) {
.other-item {
transition-duration: 0s;
}
.other-item:is(:hover, :active, :focus-within) {
background-position: 400% 400%;
transition-duration: 0s;
}
}
.other-title {
font-size: 150%;
margin: auto;
}
.other-title a, .other-subtitle {
color: var(--very-light-blue);
font-family: "Outfit";
}
.other-subtitle {
opacity: 0.7;
margin: auto;
font-size: 95%;
}
@media (max-width: 530px) {
.article-container.other {
grid-template-columns: 1fr;
}
.other-subtitle {
font-size: 80%;
}
}
:is(.tales, .jokes) .article:not(.evangelion) .title {
display: none;
}
:is(.tales, .jokes) .article:not(.evangelion) .placard {
text-align: center;
}
:is(.tales, .jokes) .article .placard .coauthors {
display: block;
}
.article.evangelion .title {
font-size: 105%;
}
.article:is(.blood, .yurt) .title {
font-size: 110%;
}
:is(.article.planet, .article.sins) .title {
font-size: 130%;
}
.article:is(.sixthousand, .sexthology) .placard-name .url {
font-size: 150%;
}
.article:is(.YOSSISTYLE, .yukon) .placard-name .url {
font-size: 175%;
}
.article.blood .coauthors {
font-size: 50%;
}
.article.THAUMIEL .coauthors {
font-size: 85%;
}
.article:is(.blood) .coauthors {
align-self: center;
flex-shrink: 100000000000000; // fucking chrome istg
}
.article:is(.blood) .placard-name {
display: flex;
}
:root {
--background: linear-gradient( 115deg, hsl(211.48, 75.31%, 15.88%) 0%, hsl(211.48, 75.31%, 15.68%) 8.1%, hsl(211.48, 75.31%, 15.11%) 15.5%, hsl(211.48, 75.31%, 14.23%) 22.5%, hsl(211.48, 75.31%, 13.1%) 29%, hsl(211.48, 75.31%, 11.76%) 35.3%, hsl(211.48, 75.31%, 10.29%) 41.2%, hsl(211.48, 75.31%, 8.73%) 47.1%, hsl(211.48, 75.31%, 7.15%) 52.9%, hsl(211.48, 75.31%, 5.59%) 58.8%, hsl(211.48, 75.31%, 4.12%) 64.7%, hsl(211.48, 75.31%, 2.79%) 71%, hsl(211.48, 75.31%, 1.65%) 77.5%, hsl(211.48, 75.31%, 0.77%) 84.5%, hsl(211.48, 75.31%, 0.2%) 91.9%, hsl(0, 0%, 0%) 100% );
--very-light-blue: #f5f5ff;
--light-blue: #b7d2ff;
--blue: #144272;
--dark-blue: #0A2647;
--link-color: #0075ba;
}
@keyframes wave {
0% {
background-position: 0% 0%;
}
100% {
background-position: 50% 50%;
}
}
/* BIG CHANGES */
html {
height: 100%;
scrollbar-color: var(--light-blue) var(--dark-blue);
}
body {
background: var(--background);
background-size: 200% 200%;
background-attachment: fixed;
animation-name: wave;
animation-duration: 20s;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
color: var(--very-light-blue);
}
@media (prefers-reduced-motion: reduce) {
body {
animation: none;
}
}
#container::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 20vh;
background: linear-gradient( to bottom, hsla(211.48, 75.31%, 15.88%, 0.75) 0%, hsla(211.48, 75.31%, 15.88%, 0.74) 8.1%, hsla(211.48, 75.31%, 15.88%, 0.714) 15.5%, hsla(211.48, 75.31%, 15.88%, 0.672) 22.5%, hsla(211.48, 75.31%, 15.88%, 0.618) 29%, hsla(211.48, 75.31%, 15.88%, 0.556) 35.3%, hsla(211.48, 75.31%, 15.88%, 0.486) 41.2%, hsla(211.48, 75.31%, 15.88%, 0.412) 47.1%, hsla(211.48, 75.31%, 15.88%, 0.338) 52.9%, hsla(211.48, 75.31%, 15.88%, 0.264) 58.8%, hsla(211.48, 75.31%, 15.88%, 0.194) 64.7%, hsla(211.48, 75.31%, 15.88%, 0.132) 71%, hsla(211.48, 75.31%, 15.88%, 0.078) 77.5%, hsla(211.48, 75.31%, 15.88%, 0.036) 84.5%, hsla(211.48, 75.31%, 15.88%, 0.01) 91.9%, hsla(211.48, 75.31%, 15.88%, 0) 100% );
z-index: 50;
pointer-events: none;
}
#main-content {
max-width: 100%;
}
p {
color: var(--very-light-blue);
}
h1, h2, h3, h4, h5, h6 {
color: var(--light-blue);
font-family: "Outfit";
}
h2 {
font-weight: bold;
font-size: 200%;
}
textarea, input {
color: var(--dark-blue);
background-color: var(--very-light-blue);
}
#page-title {
display: none;
}
blockquote {
border: 1px solid var(--light-blue);
background-color: var(--dark-blue);
}
/* HEADER */
div#container-wrap {
background: transparent;
}
#header {
background: none;
z-index: 100;
}
#header > :is(h1, h2) {
display: none;
}
@media (max-width: 530px) {
#header * {
opacity: 1 !important;
}
}
@media (prefers-reduced-motion: reduce) {
#top-bar, .mobile-top-bar, #search-top-box-form input[type="submit"], #login-status {
opacity: 1 !important;
}
}
/* LINKS */
a {
color: var(--link-color);
background: transparent;
}
a.newpage {
color: var(--link-color);
}
a:visited {
color: var(--link-color);
background: transparent;
}
/* TOP BAR */
#top-bar, .mobile-top-bar {
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: 0;
height: 20px;
width: 100vw;
padding: 20px;
opacity: 0.8;
transition-duration: 0.3s;
box-sizing: border-box;
font-family: "Lexend Deca";
font-size: 90%;
}
.top-bar {
width: 75%;
margin: auto;
left: unset;
}
.mobile-top-bar {
top: 20px;
}
:is(#top-bar, .mobile-top-bar):is(:hover, :active, :focus, :focus-within) {
opacity: 1;
transition-duration: 0.3s;
}
#top-bar .top-bar > ul {
display: flex;
margin: auto;
justify-content: center;
gap: 10px;
}
#top-bar .top-bar ul {
float: none;
}
#top-bar ul li a {
color: var(--light-blue);
}
#top-bar ul li:hover a {
color: var(--dark-blue);
background-color: var(--very-light-blue);
}
#top-bar ul li ul li a {
color: var(--dark-blue);
}
/* RATING MODULE */
.page-rate-widget-box {
margin-right: 0px;
}
.page-rate-widget-box .rate-points {
background-color: var(--dark-blue) !important;
border: solid 1px var(--light-blue) !important;
}
.page-rate-widget-box :is(.rateup, .ratedown) {
background-color: var(--dark-blue);
border-top: solid 1px var(--light-blue);
border-bottom: solid 1px var(--light-blue);
font-weight: bold;
transition: .5s;
}
.page-rate-widget-box :is(.rateup, .ratedown) a {
background: var(--dark-blue);
color: var(--light-blue);
padding: 0 4px;
margin: 0 1px;
transition: .5s;
}
.page-rate-widget-box :is(.rateup, .ratedown) a:hover {
background: var(--dark-blue);
color: var(--light-blue);
text-decoration: none;
transition: .5s;
}
.page-rate-widget-box .cancel {
background-color: var(--dark-blue);
border: solid 1px var(--light-blue);
border-left: 0;
border-radius: 0 5px 5px 0;
transition: .5s;
}
.page-rate-widget-box .cancel a {
background: transparent;
text-transform: uppercase;
color:var(--light-blue);
transition: .5s;
}
.page-rate-widget-box .cancel a:hover {
border-radius: 0 3px 3px 0;
background: var(--dark-blue);
color: var(--light-blue);
text-decoration: none;
transition: .5s;
}
/* SEARCH BAR */
div#search-top-box {
top: 40px;
position: fixed;
}
#search-top-box-form input[type=submit] {
border: solid 1px var(--light-blue);
color: var(--light-blue);
background: var(--dark-blue);
border-radius: 0;
opacity: 0.8;
transition-duration: 0.3s;
}
#search-top-box-form input[type="submit"]:hover {
opacity: 1;
transition-duration: 0.3s;
}
#search-top-box-form input[type=submit]:is(:hover, :focus) {
border: solid 1px var(--light-blue);
color: var(--light-blue);
background: var(--dark-blue);
border-radius: 1px 1px 1px 1px;
}
@media (max-width: 530px) {
div#search-top-box {
top: 20px;
font-size: 85%;
}
}
/* SIDEBAR */
#side-bar {
z-index: 200;
background-color: var(--dark-blue) !important;
color: var(--very-light-blue);
box-sizing: border-box;
}
#side-bar .side-block {
border-radius: 0px;
}
#side-bar a {
color: var(--link-color);
}
#top-bar .open-menu a {
border: 2px solid var(--light-blue);
background-color: var(--dark-blue);
color: var(--light-blue);
}
#side-bar .side-block h2 {
color: var(--very-light-blue);
}
#side-bar div.side-block {
box-shadow: 0 2px 6px var(--dark-blue) !important;
border: 4px double var(--light-blue);
background: var(--dark-blue) !important;
font-family: "Lexend Deca";
font-size: 90%;
}
#side-bar .side-block .heading {
border-bottom: solid 1px var(--very-light-blue);
font-family: "Outfit";
font-size: 0.9em;
padding-left: 0px;
}
#side-bar div.menu-item img {
filter: hue-rotate(310deg);
}
/* LOGIN DETAILS */
#login-status {
position: fixed;
opacity: 0.8;
transition-duration: 0.3s;
font-family: "Lexend Deca";
}
#login-status:hover {
opacity: 1;
transition-duration: 0.3s;
}
#login-status, #login-status a {
color: var(--light-blue);
}
a#account-topbutton {
border: 1px solid var(--light-blue);
}
div#account-topbotton {
border: 1px solid var(--light-blue);
width: 6em;
}
#account-options {
width: auto;
background-color: var(--very-light-blue);
}
#account-options li a {
color: var(--dark-blue);
}
.printuser img.small {
padding: 0 0 0 0;
border: 1px solid var(--light-blue);
background-image: none !important;
}
.printuser a:first-child {
margin-right: 3px;
}
@media (max-width: 530px) {
#login-status {
width: 100vw;
text-align: center;
box-sizing: border-box;
left: 0;
top: 10px;
font-size: 80%;
}
}
/* OTHER */
#page-info, #edit-page-form :not(.alert, textarea, #lock-timer, input, .btn-default) {
color: var(--very-light-blue);
}
#lock-info, #lock-timer {
color: var(--dark-blue);
background-color: var(--very-light-blue);
}
.page-source {
color: var(--very-light-blue);
}
.change-textarea-size {
padding-right: 2em;
}
.change-textarea-size a:hover {
text-decoration: none;
background-color: #BBB;
}
.preview-message {
border: 1px solid var(--dark-blue);
background-color: var(--very-light-blue);
color: var(--dark-blue);
}
.owindow, .owindow p, .modal-body > p {
color: var(--dark-blue);
}
:not(.modal-body) > table {
color: var(--very-light-blue);
}
#footer {
background: var(--dark-blue);
color: var(--very-light-blue);
}
#license-area {
color: var(--very-light-blue);
background: var(--dark-blue);
}
#license-area a::after {
content: ".";
}
#odialog-hovertips {
color: var(--dark-blue);
}
grid-column: span 2
:scp-wiki:component:toggle-sidebar
[info]
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
fragment:authorphage-0
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
article-container
article
dummy
article-container
tales
article
dummy
article-container
jokes
article
dummy
article
dummy
article-container
other
other-item
anthology-2025
biglink
other-title
other-subtitle
other-item
tacttheohub
biglink
other-title
other-subtitle
other-item
aapt
biglink
other-title
other-subtitle
other-item
aat
biglink
other-title
other-subtitle
other-item
stt
biglink
other-title
other-subtitle