Exp 0055

クレジット

タイトル: Foundlessテーマ
作者: ©︎Greyve
原題: Foundless Theme
作成年: 2020

---

テーマカラー

Charade--gray-monochrome(48, 48, 64)

Gulf Stream--medium-accent(139, 179, 180)

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

Santas Grey--light-gray-monochrome(160, 160, 180)

Snuff--pale-gray-monochrome(220, 220, 240)

{$subcolor3-name}{$subcolor3-variable}{$subcolor3-info}

Half Baked--pale-accent(140, 202, 202)

Eden--dark-accent(33, 40, 78)

{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

---

使い方

これはBlack Highlighterベースのテーマです。つまりこのテーマを使用するにはBlack Highlighterテーマもインポートする必要があります。詳細については、ここを参照してください。

このテーマをインポートするには、あなたのページに以下を追加するだけです:

[[include :scp-jp:theme:black-highlighter-theme]]
[[include :scp-jp:theme:foundless]]

例

財団のない世界ロゴ by stephlynch

罫線は、5つのハイフン「-----」を使用して作成でき、何かの内側（例: ブロック引用）に配置されていなければページ全体に適用されます。このドキュメントのセクションを区切る線は罫線です。

---

見出しは、行の先頭に1～6文字の「+」を置くことで作成できます

▼ 見出し

1番目の見出し

2番目の見出し

3番目の見出し

4番目の見出し

5番目の見出し

6番目の見出し

タブを作る

ここにダミーテキストが表示されていると想像してください。

タブが作られた

見てください、ここにもテキストがあります。

なんと奇妙な。

長いタブ

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

これは長いタブです。テキストがたくさん入っています。

空のタブ

空のタブ

空のタブ

空のタブ

空のタブ

空のタブ

本当に空ですよ

これは引用ブロックです。各行の先頭に半角の「> 」を置くことで作成されます。
追加のテキスト

---

これは罫線です

入れ子になった引用ブロック

そしてもう1段¹

これは	テーブルです
もう	作り方は
知っているはずです

---

ヘッダー、見出し、bodyフォントはRoboto。
使用している等幅フォントはPT Mono。

コード

▼ コードを表示

/*
    Foundless Theme
    [2020 Wikidot Theme]
     Created by Greyve
     Logo by stephlynch
*/
@supports(display: grid) {
 
    /* ROOT - Header & General Recoloring */
    :root {
     /* Intro */
     --theme-base: "nuscp";
     --theme-id: "foundless";
     --theme-name: "Foundless Theme";
 
     /* Header */
     --logo-image: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A8260379-40-0v3d/unfounded.gif");
     --header-title: "財団のない世界";
     --header-subtitle: "異常存在は財団に収容されない";
 
     /* Colors */
     --pale-gray-monochrome: 220, 220, 240;
     /* Light Grey */
     --light-gray-monochrome: 160, 160, 180;
     /* Accent Light Gray */
     --gray-monochrome: 48, 48, 64;
     /* Gray  */
     --dark-gray-monochrome: 48, 48, 64;
     /*Gray */
 
     --pale-accent: 140, 202, 202;
     /* Pale Blue*/
     --bright-accent: 206, 233, 234;
     /* Light Blue*/
     --medium-accent: 139, 179, 180;
     /* Blue */
     --dark-accent: 68, 92, 109;
     /* Dark Blue */
     --newpage-color: 135, 158, 176;
     /* Grey Blue */
 
     /* Menu Colors */
     --swatch-menubg-color: var(--gray-monochrome);
     --swatch-menubg-light-color: var(--pale-gray-monochrome);
     --swatch-menubg-medium-color: var(--light-gray-monochrome);
     --swatch-menubg-medium-dark-color: var(--black-monochrome);
     --swatch-menubg-dark-color: var(--dark-gray-monochrome);
     --swatch-menubg-black-color: var(--black-monochrome);
     --swatch-menubg-hover-color: var(--gray-monochrome);
     --swatch-menutxt-dark-color: var(--dark-accent);
     --swatch-menutxt-light-color: var(--white-monochrome);
     --swatch-border-color: var(--black-monochrome);
 
     /* Link Colors */
     --link-color: var(--medium-accent);
     --visited-link-color: var(--dark-accent);
     --hover-link-color: var(--bright-accent);
 
     /* Rating Module Colors */
     --rating-module-text-color: var(--black-monochrome);
 
     /* Header Colors */
     --swatch-topmenu-border-color: var(--light-gray-monochrome);
     --swatch-topmenu-bg-color: var(--light-gray-monochrome);
 
     /* Navbar Shadow */
     --gradient-background:
     linear-gradient(to bottom,
     rgba(var(--background-gradient-color), 0.5) 0,
     rgba(var(--background-gradient-color), 0) var(--background-gradient-distance));
     --background-gradient-color: var(--dark-accent);
     --background-gradient-distance: 15rem;
 
     --header-gradient-color-bottom: 68, 92, 109;
     --header-gradient-color-middle: 135, 158, 176;
     --header-gradient-color-top: 154, 180, 181;
 
     --diagonal-stripes: repeating-linear-gradient(135deg,
     hsla(0, 0%, 100%, 0),
     hsla(0, 0%, 100%, 0) 0.25vh,
     rgba(88, 88, 88, 0.1) 0.35vh,
     rgba(88, 88, 88, 0.2) 0.5vh);
    }
 
    /* Filter */
    --filter: hue-rotate(268deg) saturate(50%) brightness(111%);
 
    /* Ayers' Info Bar */
    --barColour: rgb(var(--dark-accent));
 
    #header {
     /* ===HEADER ELEMENTS=== */
     /* ===SEARCH ELEMENT=== */
     /* Focus is when the search box has been clicked on */
     --search-icon-focus-color: var(--swatch-alternate-color);
    }
 
    #top-bar {
     /* ===DROPDOWN MENU=== */
     --dropdown-links-hover-color: var(--swatch-text-tertiary-color);
    }
 
    #side-bar {
     /* ===SIDEBLOCK MENU=== */
     --sideblock-heading-border-color: var(--dark-accent);
     --sideblock-heading-bg-color: var(--medium-accent), 0.25;
     --sideblock-heading-text-color: var(--swatch-text-tertiary-color);
 
     --sidebar-links-hover-bg-color: var(--light-gray-monochrome)
    }
 
    #interwiki {
     --sideblock-heading-bg-color: var(--medium-accent), 0.25;
    }
 
    /* ===FOOTER=== */
    #footer {
     --footer-link-hover-color: var(--swatch-text-tertiary-color);
    }
 
    /* ===LICENSE AREA=== */
    #license-area {
     --license-link-hover-color: var(--swatch-text-tertiary-color);
    }
 
    #main-content {
     /* ===MAIN CONTENT UI ELEMENTS */
     /* ===UI ICONS=== */
     /* ===PAGE OPTIONS ICONS=== */
     --ui-icon-hover-color: var(--dark-accent);
 
     /* ===TEXT EDITOR ICONS=== */
     --editor-icon-color: var(--swatch-menutxt-dark-color);
     --editor-icon-hover-bg: var(--dark-accent);
 
     /* ===TABS=== */
     --tabs-txt: var(--swatch-text-tertiary-color);
     --tabs-hover-bg: var(--swatch-primary-darkest);
     --tabs-hover-txt: var(--swatch-text-secondary-color);
     --tabs-selected-bg: var(--swatch-primary-darker);
     --tabs-selected-txt: var(--swatch-text-secondary-color);
     --tabs-selected-outline: var(--swatch-primary-darker);
 
     /* ===TABLES=== */
     --tables-header-bg: var(--light-gray-monochrome);
 
     /* Color for special .colorbar-quote blockquote class */
     --blockquote-colorbar-color: var(--swatch-primary-darker), 1;
 
     /* ===PAGE TAGS=== */
     --pagetags-text-hover-color: var(--swatch-primary-darkest);
    }
 
    /* ===GLOBAL ELEMENTS=== */
    :root {
     /* ===UI BUTTONS=== */
     --ui-button-bg: var(--swatch-alternate-color);
     --ui-button-txt: var(--swatch-text-secondary-color);
     --ui-button-hover-bg: var(--swatch-primary-darkest);
     --ui-button-hover-outline: var(--swatch-primary-darkest);
 
     /* ===FOOTNOTES HOVER BLOCK=== */
     --hoverblock-bg: var(--swatch-alternate-color);
    }
 
    ::-moz-selection {
     background: rgba(var(--swatch-primary-darkest), 1);
     color: rgb(var(--swatch-primary));
    }
 
    ::selection {
     background: rgba(var(--swatch-primary-darkest), 1);
     color: rgb(var(--swatch-primary));
    }
 
    /* Header Logo Compensation */
    #header {
     background-position: left 0 top 0;
     background-size: var(--header-height-on-desktop) auto;
    }
 
    /* Page Title */
    #page-title {
     border-color: rgb(var(--dark-gray));
     color: rgb(var(--medium-accent));
    }
 
    /* Page Rating Module */
    .page-rate-widget-box {
     border-color: rgb(var(--pale-gray-monochrome));
     background: linear-gradient(to top,
     rgba(var(--pale-gray-monochrome), 1) 0%,
     rgba(var(--pale-gray-monochrome), 1) 100%);
    }
 
    #page-content .rate-box-with-credit-button {
     border-color: rgb(var(--pale-gray-monochrome));
     background: none;
    }
 
    #page-content .rate-box-with-credit-button .page-rate-widget-box {
     border-color: rgb(var(--pale-gray-monochrome));
     background: linear-gradient(to top,
     rgba(var(--pale-gray-monochrome), 1) 0%,
     rgba(var(--pale-gray-monochrome), 1) 100%);
    }
 
    #page-content .rate-box-with-credit-button>.creditButton>p>a::before {
     background-color: rgb(var(--pale-gray-monochrome));
    }
 
    #page-content .rate-box-with-credit-button>.creditButton:hover {
     background: rgba(var(--bright-accent), 0.8);
    }
 
    #page-content .creditRate.creditModule .rate-box-with-credit-button .creditButton, .creditRate.creditModule .heritage-rating-module~.creditButton {
     background: linear-gradient(to top,
     rgba(var(--pale-gray-monochrome), 1) 0%,
     rgba(var(--pale-gray-monochrome), 1) 100%);
    }
 
    #page-content .modalbox {
     border-radius: 0;
     background: rgb(var(--pale-gray-monochrome)) !important;
     box-shadow: 0 2px 6px rgba(var(--bright-accent), 0.5);
     color: rgb(var(--gray-monochrome));
    }
}

出典: Foundless Theme(rev.18)
作成日(EN): 2020/10/3

著者ポスト

財団のない世界カノンの関連テーマです。標準のBlack Highlighterテーマとは色、濃淡、明暗が正反対になるようにデザインされており、財団がないことによる明るさと同じくらい財団がない世界の殺伐とした雰囲気を表現しています。

アニメーションロゴを制作してくださったstephlynch氏、このロゴがなければこのテーマは成り立たなかったことでしょう。そしてそのロゴの実装に貴重な協力をいただいたCroquembouche氏に多大な感謝を捧げます。

画像ライセンス

ファイルページ: Foundlessテーマ - unfounded.gif

ソース: https://scp-wiki.wikidot.com/theme:foundless
ライセンス: CC BY-SA 3.0

タイトル: unfounded.gif
著作権者: stephlynch
公開年: 2020

Footnotes

1. そしてここに脚注！