这是为 马赛克的故事 设定创作的版式。
该版式基于 黑色标记笔 主题版式 并使用了切换侧边栏组件和居中页眉组件。
该版式仅用于撰写Tesserae(系列故事)。你也可以将其用于其他类型的作品和页面,但风险自负。
若需使用该版式,请在页面顶端插入以下文字:
[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:component:toggle-sidebar-bhl]]
[[include :scp-wiki:component:centered-header-bhl]]
[[include :scp-wiki-cn:theme:tales-of-the-mosaic]]
该版式使用了三个“时间段”的场景作为各自的页眉图片,默认为白日。如果你想要切换到黄昏,请将上述代码的最后一行替换为这个:
[[include :scp-wiki-cn:theme:tales-of-the-mosaic | dusk=--]]
页眉图片预览
如果你想要切换到夜晚,请将上述代码的最后一行替换为这个:
[[include :scp-wiki-cn:theme:tales-of-the-mosaic | night=--]]
页眉图片预览
如果你想要创作一篇 Tessera ,你可以复制粘贴以下模板,并快速填写你需要的所有页面结构:
[[div class="title-container"]]
[[module rate]]
[[div class="tessera-eyebrow-container"]]
[[span class="tessera-eyebrow-text"]]Tessera[[/span]]
[[/div]]
[[span class="tessera-title"]]标题[[/span]]
[[div id="title-byline"]]
作者:你的名字
[[/div]]
[[/div]]
[[div class="tessera-body"]]
故事放于此处
[[/div]]
[[div class="earthworm"]]
[[div class="tessera-eyebrow-container"]]
[[span class="tessera-eyebrow-text"]]上一篇[[/span]]
[[/div]]上一篇故事
[[div class="tessera-eyebrow-container"]]
[[span class="tessera-eyebrow-text"]]下一篇[[/span]]
[[/div]]下一篇故事
[[/div]]
你需要做的就是用你的内容替换该模板中所有的粗体文本。以下是关于每行粗体文本需要填写什么内容的详细信息:
| 标题 | 请在此处填写你创作的故事的标题。 |
| 你的名字 | 你的用户名。如果你有一个作者页,你可以链接到你的作者页。如果你创作的故事使用了某个人的艺术作品,你可以在这下面另起一行并加上“艺术作品由……创作”,并在中间填上这位艺术家的名字。 |
| 故事放于此处 | 请在此处填写你创作的故事。如果你不知道这一部分应该填写什么,那可能是因为你今天还没有准备好发布一篇 Tessera 。 |
| 上一篇故事 | 请在此处填上该系列的上一篇 Tessera 的链接。在请使用[[[上一篇 Tessera 的标题]]]的格式填写。1 |
| 下一篇故事 | 请在此处填上该系列的下一篇 Tessera 的链接。如果下一篇 Tessera 还没有被创作出来,请在此处添加//敬请期待//。 |
请记得在你的页面使用预览组件和版权模块。同时,你也应该参与 Croquembouche的A/B测试 并在页面底部添加第二个评分模块,因为我,Jezixo,认为这会为你的页面带来好运。
音频文件说明
要创作一篇带有音频的 Tessera ,请使用以下模板作为页面结构。
请先将音频文件上传到你的页面,并获得指向该文件的直接链接(通过单击页面底部的“附件”,然后单击“信息”,并复制“完整的文件 URL”旁边的链接)。
然后,将该链接粘贴到模板中,替换“音频文件链接”。
如果这份音频文件是其他人制作的,请别忘了在署名部分注明他们。
[[div class="title-container"]]
[[module rate]]
[[div class="tessera-eyebrow-container"]]
[[span class="tessera-eyebrow-text"]]Tessera[[/span]]
[[/div]]
[[span class="tessera-title"]]标题[[/span]]
[[div id="title-byline"]]
作者:你的名字
[[/div]]
[[div class="audio"]]
[[include :snippets:html5player
|type=audio
|url=音频文件链接
]]
[[/div]]
[[/div]]
[[div class="tessera-body"]]
故事放于此处
[[/div]]
[[div class="earthworm"]]
[[div class="tessera-eyebrow-container"]]
[[span class="tessera-eyebrow-text"]]上一篇[[/span]]
[[/div]]上一篇故事
[[div class="tessera-eyebrow-container"]]
[[span class="tessera-eyebrow-text"]]下一篇[[/span]]
[[/div]]下一篇故事
[[/div]]
/* Tales of the Mosaic Theme [2025 Wikidot Theme] Created by Jezixo CC BY-SA 3.0 */ /* ADDING FANCY FONTS */ @import url('https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica+SC&display=swap'); /* ———— COLORS ———— */ /* SETTING COLOR PALETTE */ :root { --white-monochrome: 251,250,249; --pale-gray-monochrome: 241, 241, 241; --light-pale-gray-monochrome: 242, 245, 247; --very-light-gray-monochrome: 211, 216, 222; --light-gray-monochrome: 151, 160, 168; --gray-monochrome: 40, 40, 40; --dark-gray-monochrome: 30, 30, 30; --black-monochrome: 12, 12, 12; --pale-accent: 118, 162, 186; --bright-accent: 44, 103, 166; --medium-accent: 29, 60, 89; --dark-accent: 19, 41, 52; --alt-accent: 240, 164, 117; } /* ADJUSTING UI ELEMENT COLORS */ :root { --link-color: var(--black-monochrome); --visited-link-color: var(--black-monochrome); --newpage-color: var(--white-monochrome); --footnotes-footer-num-color: var(--medium-accent); --header-gradient-color-bottom: var(--gray-monochrome); --swatch-menubg-medium-dark-color: var(--dark-gray-monochrome); --login-myaccount-underline-color: var(--swatch-text-secondary-color); --login-myaccount-hover-color: var(--white-monochrome); } #main-content { --tabs-bg: var(--dark-accent); --tabs-bottom-border-color: none; --toc-header-bg-color: var(--medium-accent); --toc-header-text-color: var(--white-monochrome); } #page-content { color: rgb(var(--white-monochrome)); } #login-status #account-options { background: rgb(var(--black-monochrome)); } @media (min-width: 36rem) { #search-top-box { background: rgba(var(--search-focus-textbox-bg-color), 0.1); } } #header h1 a:focus { outline-color: rgb(var(--alt-accent)); } #content-wrap { background: linear-gradient(34.77deg, #011018 29.51%, #132934 76.89%, #011018 107.83%); } /* ———— STYLING UI ELEMENTS ———— */ /* PAGE VARIABLES */ :root { --base-font-size: 1rem; --body-font: "EB Garamond", serif; --header-font: "EB Garamond", serif; --UI-font: Hepta Slab, PTRootUI,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantrell,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; --header-title: "Tales of the Mosaic"; --header-subtitle: "It's always been this way"; --logo-image: none; --diagonal-stripes: none; --header-height-on-desktop: 16rem; --header-height-on-mobile: 16rem; } /* LINKS */ #page-content a { font-weight: bold; text-decoration: underline; color: rgba(var(--white-monochrome)); } #page-content a:visited { color: rgba(var(--white-monochrome)); } #page-content a:hover:not(.footnote-footer a:hover, #u-source-code-button .collapsible-block a:hover, #page-content .tessera-body a:hover) { color: rgb(var(--alt-accent)); } /* MAKING UTILITY ELEMENTS READABLE */ .licensebox .collapsible-block-link { color: rgba(var(--white-monochrome)); opacity: 1; } /* This extra margin fixes a bug on the theme page where the tags intersect the theme licensebox. */ .licensebox { margin-bottom: 2rem; } div.page-watch-options a, .licensebox p, .page-tags a, #page-info { color: rgba(var(--white-monochrome)); } #action-area { background: rgb(var(--white-monochrome)); border-radius: 8px; padding: 1rem; } #action-area a { color: rgb(var(--black-monochrome)); text-decoration: underline; } div#revision-list .pager a:hover { color: rgb(var(--black-monochrome)); text-decoration: underline; } div#revision-list .pager a, .code p, .footnotes-footer .footnote-footer a::before, .modalbox a, tbody tr td #toc #toc-list a { color: rgb(var(--black-monochrome)); } /* PAGE HEADER TEXT */ #header h1 a, #header h1 a::before { display: flex; font-size: 0em; } #header h2 span::before { display: none; } #header h2 span { margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 4em); width: 80%; } #header h1 a::after { font-weight: 400; font-size: 3.2rem; font-family: 'IM Fell DW Pica SC', 'EB Garamond', serif; } #header h2 span::after { text-transform: none; font-family: 'EB Garamond', 'IM Fell DW Pica SC', serif; font-size: 1.5rem; font-weight: bold; margin-top: 0.5rem; } /* BREADCRUMBS */ #breadcrumbs a:before, .pseudocrumbs a:before { content: none; display: none; } :is(#breadcrumbs,.pseudocrumbs) a { margin-right: 0px; color: rgb(var(--white-monochrome)); padding-right: 0.3rem; } :is(#breadcrumbs,.pseudocrumbs) a:hover { color: rgb(var(--alt-accent)); text-decoration: underline; } #breadcrumbs, .pseudocrumbs { color: rgb(var(--white-monochrome)); } /* ———— SKYLINE HEADER ANIMATION ———— */ /* Making the nav bar solid, so the animation can appear from behind it */ div#header { width: 100%; max-width: 100%; } @media (min-width: 36rem) { #search-top-box { right: 15%; } #login-status { left: 15%; } } #header div#top-bar { max-width: none; } .top-bar { margin: auto; } #header div#top-bar { max-width: none; background: rgb(var(--dark-gray-monochrome)); border-block: 2px solid rgb(var(--black-monochrome)); } /* SKYLINE LAYERS */ #extra-div-1, #extra-div-2, #extra-div-3, #extra-div-4, #extra-div-5 { position: absolute; top: 0; width: 100%; opacity: 0; height: 310px; } /* Layer 1 – Background */ #extra-div-1 { background: calc(50% - -40px) top/1640px repeat-x; animation: fadeIn 1.5s ease-in 0.5s forwards; z-index: 0; } /* Layer 2 - Lighthouse */ #extra-div-2 { background: calc(50% - -40px) top/1640px repeat-x; animation: fadeIn 0.5s ease-in 0.3s forwards; z-index: 1; } /* Layer 3 - Farthest buildings */ #extra-div-3 { background: calc(50% - -40px) top/1620px repeat-x; animation: backgroundZoomIn 1.5s ease-out 0.5s forwards, fadeIn 1.5s ease-in 0.5s forwards; z-index: 2; } /* Layer 4 - Mid-distance buildings */ #extra-div-4 { background: calc(50% - -50px) top/1620px repeat-x; animation: slideLeft 1.5s ease-out 0.5s forwards, backgroundZoomIn 1.5s ease-out 0.5s forwards, fadeIn 1s ease-in 0.5s forwards; z-index: 3; } /* Layer 5 - Closest buildings */ #extra-div-5 { background: calc(50% - -30px) top/1620px repeat-x; animation: slideRight 1.5s ease-out 0.5s forwards, backgroundZoomIn 1.5s ease-out 0.5s forwards, fadeIn 0.5s ease-in 0.5s forwards; z-index: 4; } /* HEADER TEXT ANIMATION */ #header h1 a::after { transform: scale(0.7); opacity: 0; animation: textGrowIn 1s ease-out 1s forwards; } #header h2 span { transform: scale(0.7); opacity: 0; animation: textGrowIn 1s ease-out 1.2s forwards; } /* SKYLINE ANIMATIONS */ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes backgroundZoomIn { 0% { background-size: 1620px; } 100% { background-size: 1640px; } } @keyframes slideRight { 0% { background-position-x: calc(50% - -30px); } 100% { background-position-x: calc(50% - -40px); } } @keyframes slideLeft { 0% { background-position-x: calc(50% - -50px); } 100% { background-position-x: calc(50% - -40px); } } @keyframes textGrowIn { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* WHITE LINE ANIMATION */ /* Making the white line around the title grow in on page load */ .title-container .tessera-eyebrow-container::before, .title-container .tessera-eyebrow-container::after { animation: whiteLineReveal 2s cubic-bezier(.43,0,.1,1) 0.5s; animation-fill-mode: both; } .title-container .tessera-eyebrow-container::before { transform: rotate(180deg); } @keyframes whiteLineReveal { from { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); } to { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } } /* ACCESSIBILITY MODE */ /* Turning off all animations if user prefers reduced motion */ @media (prefers-reduced-motion: reduce) { #extra-div-1, #extra-div-2, #extra-div-3, #extra-div-4, #extra-div-5, #header h1 a::after, #header h2 span { opacity: 1; background: calc(50% - -40px) top/1640px repeat-x; animation: none; transform: none; } .title-container .tessera-eyebrow-container::before, .title-container .tessera-eyebrow-container::after { animation: none; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } } /* ———— CUSTOM PAGE ELEMENTS ———— */ /* TITLE SECTION */ div#page-title { display: none; } .title-container { width: fit-content; margin: 1rem auto 3rem; text-align: center; } span.tessera-title { font-weight: bold; color: rgb(var(--white-monochrome)); font-size: 2.5rem; max-width: 24.3rem; display: block; margin: 0.5rem auto 0.5rem; } /* EYEBROW HEADER */ .tessera-eyebrow-container { margin: 3rem auto 0rem; display: flex; align-items: center; } .tessera-eyebrow-text { text-transform: uppercase; color: rgb(var(--white-monochrome)); font-weight: 700; font-size: 1rem; width: max-content; display: block; margin-inline: 1rem; letter-spacing: 0.15rem; font-family: 'IM Fell DW Pica SC', 'EB Garamond', serif; } .tessera-eyebrow-container p, .title-container p { margin: 0px; } .tessera-eyebrow-container::before, .tessera-eyebrow-container::after { content: ""; height: 1px; background: rgb(var(--white-monochrome)); width: 100%; } /* AUTHOR TAG */ div#u-title-byline { text-align: center; font-weight: 700; font-size: 1.2rem; } div#u-title-byline a { font-weight: 700; } div#u-title-byline p { margin: 0px; } /* TESSERA BODY PAPER DOCUMENT */ .tessera-body { padding: 24px 40px; background: linear-gradient(203.04deg, #FBFAF9 40.5%, #f1f1f1 100%); box-shadow: 0px 16px 32px -4px rgba(12, 12, 13, 0.1), 0px 4px 4px -4px rgba(12, 12, 13, 0.05), inset 0px 0px 30px 0px #AE8B75; border-radius: 0px; margin-block: 2.5rem; max-width: 35rem; margin: 0rem auto 3rem; } .tessera-body p { font-weight: 500; font-size: 1.2rem; color: rgb(var(--dark-gray-monochrome)); } #page-content .tessera-body a { font-weight: bold; color: rgba(var(--bright-accent)); text-decoration: underline; } #page-content .tessera-body a:visited { color: rgb(var(--black-monochrome)); } #page-content .tessera-body a:hover { color: rgb(var(--medium-accent)); text-decoration-style: double; } @media (max-width: 479px) { .tessera-body { padding: 1rem 1rem; } } /* This makes the color of images in the paper doc blend with the paper color - ideal for Costodias' monochrome line art, though you might want to disable this when using other kinds of art. */ .paper img { mix-blend-mode: multiply; } /* MOSAIC EARTHWORM */ .earthworm { margin-block: 3rem; font-weight: bold; font-size: 1.5rem; color: rgb(var(--white-monochrome)); text-align: center; } #page-content .earthworm a { font-weight: bold; padding: 0.5rem 1rem; margin: 1rem auto; display: block; text-align: center; font-size: 1.2rem; text-decoration: none; transition: 0.5s; border: 1px solid rgb(var(--white-monochrome)); background: rgb(var(--dark-accent)); border-radius: 0px 8px 0px 8px; border-left-color: rgb(var(--alt-accent)); border-bottom-color: rgb(var(--alt-accent)); max-width: 25rem; } #page-content .earthworm a:visited { color: rgb(var(--white-monochrome)); border-color: rgb(var(--light-gray-monochrome)); } #page-content .earthworm a:hover { text-decoration: none; border: 1px solid rgb(var(--alt-accent)); color: rgb(var(--alt-accent)); } .earthworm .tessera-eyebrow-container { margin: 3rem auto 1rem; } .earthworm p, .earthworm a { font-weight: bold; } /* AUDIO PLAYER */ .audio { margin-top: 2rem; } .audio iframe { width: 300px; } /* ———— MOBILE TWEAKS ———— */ /* Making the title text wrap on small screens */ @media (max-width: 460px) { #header h1 a { padding: 0; line-height: 1; } #header h2 span { padding-top: 15%; } } /* Making the title size smaller on small screens */ @media (max-width: 300px) { #header h1 a::after { font-size: 2rem; } } /* Fixing nav bar text size */ @media only screen and (max-width: 56.25rem) { #header div[class*=top-bar]>ul>li>a { background: 0 0; font-size: calc(var(--base-font-size)*(13/15)); } } /* ———— DAY THEME ———— */ /* These values get replaced when the other themes are enabled. */ div#header { --login-line-divider-color: var(--swatch-primary-darkest); --login-username-color: var(--swatch-primary-darkest); --login-myaccount-color: var(--swatch-primary-darkest); --login-myaccount-hover-color: var(--white-monochrome); --search-icon-color: var(--black-monochrome); } :root { --header-gradient-color-bottom: 1, 16, 24; --header-gradient-color-middle: 255, 255, 255; --header-gradient-color-top: 255, 255, 255; } #extra-div-1 { background-image: url('http://scp-wiki.wikidot.com/local--files/theme:tales-of-the-mosaic/day-bg.webp'); } #extra-div-2 { background-image: url('https://scp-wiki.wikidot.com/local--files/theme:tales-of-the-mosaic/day-lighthouse.webp'); } #extra-div-3 { background-image: url('https://scp-wiki.wikidot.com/local--files/theme:tales-of-the-mosaic/day-layer1.webp'); } #extra-div-4 { background-image: url('https://scp-wiki.wikidot.com/local--files/theme:tales-of-the-mosaic/day-layer2.webp'); } #extra-div-5 { background-image: url('https://scp-wiki.wikidot.com/local--files/theme:tales-of-the-mosaic/day-layer3.webp'); } #header h1 a::after { text-shadow: 5px 0px 5px #132934, 0px 4px 5px #132934, -5px 0px 5px #132934, 0px -4px 5px #132934, 5px 5px 10px #132934, -5px 5px 10px #132934, -5px -5px 10px #132934, 5px -5px 10px #132934; } #header h2 span::after { text-shadow: 5px 0px 5px #132934, 0px 4px 5px #132934, -5px 0px 5px #132934, 0px -4px 5px #132934, 5px 5px 10px #132934, -5px 5px 10px #132934, -5px -5px 10px #132934, 5px -5px 10px #132934; }
请按如下方式引用此页:
“马赛克的故事 版式”,作者 Jezixo,来自 SCP 维基。原文链接:https://scp-wiki.wikidot.com/theme:tales-of-the-mosaic。译者 EasyEDG,来自 SCP-CN 维基。译文链接:http://scp-wiki-cn.wikidot.com/theme:tales-of-the-mosaic。遵循 CC BY-SA 协议。
更多详情请参阅授权指南。
白日“时间段”页眉图片
文件名: daybg.webp
图像作者:Jezixo 和
Ghostdyes
授权协议: CC BY-SA 3.0
来源链接: 马赛克的故事 版式
文件名: daylayer-1.webp
图像作者:Jezixo 和
Ghostdyes
授权协议: CC BY-SA 3.0
来源链接: 马赛克的故事 版式
文件名: daylayer-2.webp
图像作者:Jezixo 和
Ghostdyes
授权协议: CC BY-SA 3.0
来源链接: 马赛克的故事 版式
文件名: daylayer-3.webp
图像作者:Jezixo 和
Ghostdyes
授权协议: CC BY-SA 3.0
来源链接: 马赛克的故事 版式
文件名: daylighthouse.webp
图像作者:Jezixo 和
Ghostdyes
授权协议: CC BY-SA 3.0
来源链接: 马赛克的故事 版式
黄昏“时间段”页眉图片
文件名: duskbg.webp
图像作者:Jezixo 和
Ghostdyes
授权协议: CC BY-SA 3.0
来源链接: 马赛克的故事 版式
文件名: dusklayer-1.webp
图像作者:Jezixo 和
Ghostdyes
授权协议: CC BY-SA 3.0
来源链接: 马赛克的故事 版式
文件名: dusklayer-2.webp
图像作者:Jezixo 和
Ghostdyes
授权协议: CC BY-SA 3.0
来源链接: 马赛克的故事 版式
文件名: dusklayer-3.webp
图像作者:Jezixo 和
Ghostdyes
授权协议: CC BY-SA 3.0
来源链接: 马赛克的故事 版式
文件名: dusklighthouse.webp
图像作者:Jezixo 和
Ghostdyes
授权协议: CC BY-SA 3.0
来源链接: 马赛克的故事 版式
夜晚“时间段”页眉图片
文件名: nightbg.webp
图像作者:Jezixo 和
Ghostdyes
授权协议: CC BY-SA 3.0
来源链接: 马赛克的故事 版式
文件名: nightlayer-1.webp
图像作者:Jezixo 和
Ghostdyes
授权协议: CC BY-SA 3.0
来源链接: 马赛克的故事 版式
文件名: nightlayer-2.webp
图像作者:Jezixo 和
Ghostdyes
授权协议: CC BY-SA 3.0
来源链接: 马赛克的故事 版式
文件名: nightlayer-3.webp
图像作者:Jezixo 和
Ghostdyes
授权协议: CC BY-SA 3.0
来源链接: 马赛克的故事 版式
文件名: nightlighthouse.webp
图像作者:Jezixo 和
Ghostdyes
授权协议: CC BY-SA 3.0
来源链接: 马赛克的故事 版式





