/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600&display=swap');
/* Set the font size back to normal */
#page-content { font-size: 1rem; }
body { font-family: 'Libre Baskerville', serif; }
/* Hide the page title. I'll make my own damned title */
#page-title { display: none; }
/* - == === CUSTOM SYNTAX === == - */
/* The inkblot header contains the title and the info box thingy */
.inkblot-header {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
position: relative;
margin: 1rem 0 3rem;
width: 100%;
left: 0;
max-width: none !important; /* override #page-content div */
}
@media (min-width: 768px) {
/* On desktop, header expands over the top of the sidebar */
.inkblot-header {
width: calc(100% + 18 * 0.82rem);
left: calc(-18 * 0.82rem);
}
}
/* The inkblot title is a grid */
.inkblot-title {
flex: 1 1 0;
font-size: min(4rem, 10vw);
font-family: 'Prata', serif;
display: inline-grid;
grid-template-areas:
"one two"
"three four";
grid-gap: 0.1em;
max-width: 100%;
position: relative;
margin: 1rem;
}
.inkblot-title::before {
content: "";
border-radius: 74% 26% 27% 77% / 74% 38% 73% 38%;
background-color: var(--inkblot-accent, transparent);
position: absolute;
height: 40%; width: 100%; top: 50%; left: 50%;
transform: translate(-50%, -50%) skewY(-6deg);
max-width: min(50vw, 80%);
}
.inkblot-title > * { z-index: 1; white-space: nowrap; }
.inkblot-title .title-1 { grid-area: one; place-self: start end; }
.inkblot-title .title-2 { grid-area: two; place-self: start start; }
.inkblot-title .title-3 { grid-area: three; place-self: start end; }
.inkblot-title .title-4 { grid-area: four; place-self: start start; }
.inkblot-title p { margin: 0; line-height: 1em; text-align: center; }
/* Italics encroach to the right a bit, so push them back */
.inkblot-title > em, .inkblot-title .title-1 em, .inkblot-title .title-3 em {
position: relative;
left: -0.1em;
}
@media (max-width: 767px) {
.inkblot-title {
flex-basis: 100%;
}
}
/* The info box is itself a flex container */
.inkblot-info {
flex: 1 1 0;
text-align: center;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
.inkblot-info > p {
min-width: 12.5rem;
}
/* On desktop, if the header overflows onto two rows, it will overlap the sidebar.
* The max-width of the info thingy is reduced so it won't be wider than #page-content.
* justify-content:flex-end on .inkblot-header pushes it to the right.
* !important to override wikidot's default max-width on everything
*/
@media (min-width: 768px) {
.inkblot-info {
max-width: calc(100% - 18 * 0.82rem) !important;
}
}
/* The image should only be styled fancy inside the info section.
* It could be easily modified to allow a fancy image outside of the info
* section, but I don't want to do that, because this arrangement is necessary
* for proper line-wrapping on mobile, and the misformatted image acts as a
* good indicator that something has gone wrong.
*/
.inkblot-info .inkblot-image { flex: 0 1 10rem; min-width: 10rem; }
.inkblot-info .inkblot-image img {
border-radius: 65% 35% 43% 57% / 41% 35% 65% 59%;
box-shadow: 0.5rem 0 var(--inkblot-accent, transparent);
/* The height is 8rem, but I want it slightly bigger */
height: 10rem; width: 10rem;
margin: -1rem 0;
}
/* The inksplot class makes anything blobby */
.inksplot {
border-width: 0.5rem;
border-style: solid;
border-color: var(--inkblot-accent); /* if no accent, will not override */
padding: 2rem 4rem;
margin: 1rem -3rem;
border-radius: 38% 95% 94% 42% / 62% 56% 84% 75%;
}
/* On mobile, the inkblot is rectangular and boring to save space */
@media (max-width: 960px) and (min-width: 767px), (max-width: 650px) {
.inksplot {
padding: 1rem;
border-radius: 5rem / 3rem;
margin: 1rem -1rem;
}
}
/* - == === DISTRIBUTED BLOBS === == - */
/* I want some blobs of colour down the page.
* Thankfully, Wikidot gives me some extra dives to play with:
* 6 in #container-wrap-wrap and 3 in #container.
* They are #extra(c?)-div-[1-6]. That's a lot of selectors. */
#container-wrap-wrap, #container { position: relative; overflow: hidden; }
/* Based on CSS by Murray Smith (CC BY-SA 3.0)
* https://stackoverflow.com/a/14451916/4958427 */
[id^=extra][id*=-div-] {
position: absolute;
z-index: -1;
pointer-events: none;
--content-width: min(1040px, 100vw);
--content-margin: calc(50vw - var(--content-width) / 2);
--blob-width: 30rem;
--blob-radius: calc(var(--blob-width) * 0.67);
background-color: var(--inkblot-accent, transparent);
top: var(--top-offset);
transform: rotate(var(--rotation))
translate(calc(var(--sin-rotation) * 0.866 * var(--blob-radius) / 2),
calc(-1 * var(--cos-rotation) * 0.866 * var(--blob-radius) / 2))
skewX(-30deg)
scale(1, 0.866);
}
[id^=extra][id*=-div-]:before,
[id^=extra][id*=-div-]:after {
content: '';
position: absolute;
background-color: inherit;
}
[id^=extra][id*=-div-],
[id^=extra][id*=-div-]:before,
[id^=extra][id*=-div-]:after {
width: var(--blob-width); height: var(--blob-width);
border-top-right-radius: 95%;
}
[id^=extra][id*=-div-]:before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0,-50%);
}
[id^=extra][id*=-div-]:after {
transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
}
/* A lot of maths went into this.
* To centre a triangle onto its container, it needs the following translation:
* where A is the angle of rotation:
* x:
* sin(N)
* * 0.866 (scale offset)
* * radius
* / 2
* y:
* -1
* * cos(N)
* * 0.866 (scale offset)
* * radius
* / 2
* Triangles have an order of symmetry around 120deg, so any angles above that
* are pointless.
*/
#extra-div-1,
#extra-div-3,
#extra-div-5,
#extrac-div-1,
#extrac-div-3 {
right: calc(var(--blob-radius) * -2 + var(--content-margin));
}
#extra-div-2,
#extra-div-4,
#extra-div-6,
#extrac-div-2 {
left: calc(var(--blob-radius) * -2 + var(--content-margin));
}
#extra-div-1 {
--blob-width: 30rem;
--top-offset: 500px;
--rotation: 53.33deg; --sin-rotation: 0.802; --cos-rotation: 0.597;
}
#extra-div-2 {
--blob-width: 30rem;
--top-offset: 1300px;
--rotation: 40deg; --sin-rotation: 0.642; --cos-rotation: 0.766;
}
#extra-div-3 {
--blob-width: 20rem;
--top-offset: 2100px;
--rotation: 66.66deg; --sin-rotation: 0.918; --cos-rotation: 0.396;
}
#extra-div-4 {
--blob-width: 15rem;
--top-offset: 2900px;
--rotation: 13.33deg; --sin-rotation: 0.231; --cos-rotation: 0.973;
}
#extra-div-5 {
--blob-width: 40rem;
--top-offset: 3700px;
--rotation: 26.66deg; --sin-rotation: 0.448; --cos-rotation: 0.893;
}
#extra-div-6 {
--blob-width: 25rem;
--top-offset: 4500px;
--rotation: 106.66deg; --sin-rotation: 0.958; --cos-rotation: -0.286;
}
#extrac-div-1 {
--blob-width: 15rem;
--top-offset: 5300px;
--rotation: 93.33deg; --sin-rotation: 0.998; --cos-rotation: -0.058;
}
#extrac-div-2 {
--blob-width: 10rem;
--top-offset: 6100px;
--rotation: 120deg; --sin-rotation: 0.855; --cos-rotation: -0.500;
}
#extrac-div-3 {
--blob-width: 7rem;
--top-offset: 6900px;
--rotation: 80deg; --sin-rotation: 0.984; --cos-rotation: 0.173;
}
/* - == === HEADER === == - */
/* Replace the header background */
/* 324px is twice the height of the default header */
div#container-wrap { background: url(https://scp-wiki.wdfiles.com/local--files/theme%3Ainkblot/review-header.svg) top left/100% 648px no-repeat; }
#header { background: radial-gradient(circle at left 75px top 90px, var(--inkblot-accent, transparent) 42px, transparent 42.5px); }
/* Replace the header text */
/* Centre the text into the middle of the header */
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
/* Move the subtitle down a smidge */
#header h2 { margin-top: 0.3rem; }
/* Hide the existing text */
#header h1 span, #header h2 span { font-size: 0; }
/* Style the new text */
#header h1 a::before, #header h2::before {
color: #333;
font-family: 'Montserrat', sans-serif;
text-shadow: none;
}
/* Set the new text's content from variable */
#header h1 a::before {
content: var(--header-title, "华尔登工作室");
font-weight: 300;
}
#header h2::before {
content: var(--header-subtitle, "未知的鉴赏家");
font-weight: 600;
}
/* Hide the search box and tuck the button next to the login */
#search-top-box { top: 10px; transform: translateY(-7%); }
#search-top-box-form > input[type=text] { display: none; }
#search-top-box-form > input[type=submit] {
background:
url(https://scp-wiki.wdfiles.com/local--files/theme%3Ainkblot/search-solid.svg) 50%/0.8rem no-repeat,
var(--inkblot-accent, transparent)
!important /* don't revert on mouseover */;
border: none;
border-radius: 50%;
font-size: 0;
height: 1.5rem; width: 1.5rem;
}
#login-status { right: calc(10px + 2rem); color: #333a; }
#login-status a { color: #b01a; }
/* - == === TOPBAR === == - */
#top-bar { display: flex; justify-content: center; right: 0; }
#top-bar a { color: #333d; }
/* - == === SIDEBAR === == - */
/* Move the side bar down, out of the way of the inkblot header */
@media (min-width: 768px) {
#side-bar { top: 12rem; }
}
/* Make the sidebar look pretty */
/* Keep the side block colours - I like them */
#side-bar .side-block,
#interwiki .side-block {
border: none;
border-radius: 0.5rem;
box-shadow: none;
}
#side-bar .heading,
#interwiki .heading {
margin: 0.6rem 0 0.5rem;
padding: 0;
color: #000a;
height: 1rem;
display: flex;
justify-content: space-around;
align-items: center;
border: none;
}
#side-bar .heading::before,
#side-bar .heading::after,
#interwiki .heading::before,
#interwiki .heading::after {
content: "";
height: 1px;
box-sizing: border-box;
border-bottom: 1px dotted #333;
margin: 0.1rem 0.5rem 0;
flex: 1 1 0;
}
#side-bar .menu-item > img,
#interwiki .menu-item > img {
visibility: hidden;
}
/* !important to override wikidot style */
#top-bar .open-menu a {
border-radius: 1px;
border: none;
border-left: 0.25rem solid var(--inkblot-accent, #333);
border-right: 1px dotted #333;
}
@media (max-width: 767px) {
#side-bar {
background-image:
radial-gradient(
circle at left 10% top 90%,
var(--inkblot-accent, white) 25%,
transparent 25%
),
linear-gradient(-75deg, #ccc 30%, white 30%);
border-right: 4px dotted #444 !important;
background-clip: padding-box;
}
}
/* - == === RATING MODULE === == - */
.page-rate-widget-box { box-shadow: none; }
.page-rate-widget-box {
display: inline-flex;
justify-content: flex-end;
align-items: center;
border-radius: 0;
border-width: 1px 0;
border-style: dotted;
border-color: #333;
padding: 0.1rem;
margin-right: 3rem;
}
.page-rate-widget-box .rate-points,
.page-rate-widget-box .cancel {
background-color: transparent !important;
border-radius: 0;
border: none;
color: #333 !important; /* override reset when bottom rating opened */
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown,
.page-rate-widget-box .cancel {
background-color: var(--inkblot-accent, transparent);
border-radius: 50%;
border: none;
color: #333;
height: 1.5rem; width: 1.5rem;
position: relative;
margin-left: 0.25rem;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a,
.page-rate-widget-box .cancel a {
position: absolute;
display: block;
top: 0; left: 0; height: 100%; width: 100%;
text-align: center; line-height: 1.5rem;
color: #333;
padding: 0;
margin: 0;
font-weight: bold;
}
.page-rate-widget-box .cancel a { color: transparent; }
.page-rate-widget-box .cancel a::after {
content: "✖";
position: absolute;
color: #333;
top: 0; left: 0; height: 100%; width: 100%;
}
.page-rate-widget-box .rateup a:hover { background-color: limegreen; }
.page-rate-widget-box .ratedown a:hover { background-color: tomato; }
.page-rate-widget-box .cancel a:hover {
color: transparent;
background-color: transparent;
border-radius: 0;
}
/* Info module compatibility */
/* More specific because will probably be imported before the info module */
#page-content .rate-box-with-credit-button {
background: none;
border-radius: 0;
box-shadow: none;
border-width: 1px 0;
border-style: dotted;
border-color: #333;
display: flex;
align-items: center;
}
.rate-box-with-credit-button .page-rate-widget-box {
border: none;
}
.creditButton {
height: 1rem;
width: 1rem;
background-color: var(--inkblot-accent, transparent);
border-radius: 50%;
}
#page-content .creditButton p a {
color: #333;
border: none;
line-height: 1rem;
margin-left: 0;
}
/* - == === IMAGE BLOCKS === == - */
.scp-image-block {
border: none;
border-top: 1px dotted #333;
box-shadow: none;
}
.scp-image-block .scp-image-caption {
background: none;
border-top: solid 0.25rem var(--inkblot-accent, transparent);
padding-top: 0.5rem;
font-weight: normal;
}
.scp-image-block img {
padding: 0.5rem;
box-sizing: border-box;
}
@media (min-width: 768px) {
.scp-image-block.block-left {
margin-left: -100px;
}
}
@media (min-width: 1250px) {
.scp-image-block.block-right {
margin-right: -100px;
}
}
@media (max-width: 600px) {
.scp-image-block.block-left, .scp-image-block.block-right {
float: none; clear: both; margin-left: auto; margin-right: auto;
}
}
/* - == === OTHER STUFF === == - */
li, p { line-height: 1.5em; }
#page-content h1, #page-content h2, #page-content h3,
#page-content h4, #page-content h5, #page-content h6 {
font-family: 'Libre Baskerville', serif;
color: #333;
margin: 1em 0 0.5em 0;
letter-spacing: 0;
}
#page-content h1 {
font-family: 'Prata', serif; font-size: 3rem; text-align: center;
}
#page-content h2 { font-size: 2rem; font-weight: bold; }
hr {
margin: 3rem;
height: 1rem;
background: radial-gradient(circle at center, var(--inkblot-accent, transparent) 0.375rem, transparent calc(0.375rem + 0.5px));
display: flex;
justify-content: space-around;
align-items: center;
}
hr::before, hr::after {
content: "";
height: 1px;
box-sizing: border-box;
border-bottom: 1px dotted #333;
width: calc(50% - 3rem);
}
.page-tags span {
border-top: 1px dotted #333;
}
.footnotes-footer {
margin-top: 2rem;
}
#page-content {
margin-bottom: 2rem;
}
#footer {
background: transparent;
}
#footer a {
color: black;
}
#breadcrumbs, .pseudocrumbs {
display: flex;
flex-direction: row-reverse;
font-size: 0;
margin-top: -1rem;
}
#breadcrumbs a, .pseudocrumbs a {
font-size: 0.82rem;
margin-left: 0.3rem;
}
#breadcrumbs a::before, .pseudocrumbs a:before {
content: "«";
margin-right: 0.3rem;
}
.licensebox {
font-size: 0.82rem;
font-family: verdana, arial, helvetica, sans-serif;
margin: 1rem 0 -1.5rem;
}
span, a {
word-break: normal;
}
blockquote, div.blockquote {
border: none;
border-left: thick solid var(--inkblot-accent, #eee);
background: none;
}
