Foundation Collective

工事中

[[include :1119s:foundation-collective]]

Darkviolet--bright-accent(148,0,211) / #9400d3

Purple--medium-accent(128,0,128) / #800080

Indigo--dark-accent(75,0,130) / #4b0082

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

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

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

WHITE--white(252,252,255) / #FCFCFF

BLACK--black(48,48,51) / #303033

GRAY-0--pale-gray(240,240,244) / #F0F0F4

GRAY-1--light-gray(196,200,204) / #C8C8CC

GRAY-2--gray(150,150,153) / #969699

GRAY-3--dark-gray(96,96,102) / #606066

{$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}

タイトル

レベル2のタイトル

レベル3のタイトル

レベル4のタイトル

レベル5のタイトル

レベル6のタイトル

太字 | 下線 | 取り消し線 | テレタイプ　テキスト ^上付き_下付き

---

ヘッダー	長ーーーーーーいヘッダー	リンク	リンク
セル内容	長ーーーーーーいセル内容	リンク	リンク

タブ1

タブ内容

タブ2

タブ内容

漢字

タブ内容

alphabet

タブ内容

長ーーーーーーーーーーいタブ

タブ内容

画像ブロック

引用文¹

二重

Footnotes

1. 脚注

リンク (多分訪問したはずのリンク) (未作成ページのリンク)

+ 折り畳み

折り畳みの中の何かです

---

+ CODE

:root {
/* colors */
    --bright-accent: 148,0,211;
    --medium-accent: 128,0,128;
    --dark-accent: 75,0,130;
    --white: 252,252,255;
    --black: 48,48,51;
    --pale-gray: 240,240,244;
    --light-gray: 196,200,204;
    --gray: 150,150,153;
    --dark-gray: 96,96,102;
    --link-newpage: 221,102,17;
/* title */
    --header-title-text: "FC subnet";
    --header-title-color: rgb(var(--white));
    --header-subtitle-text: "世界をより理に適ったものへと";
    --header-subtitle-color: rgb(var(--light-gray));
}
 
/* Body */
body#html-body {
    background: rgb(var(--white));
    color: rgb(var(--black));
}
 
/* Header */
div#container-wrap {
    background-image:
        linear-gradient(180deg,rgb(0,0,0,1) 50px, rgba(0,0,0,0)),
        repeating-linear-gradient(45deg,rgba(255,255,255,0.1) 0 1px, rgba(0,0,0,0) 1px 4px),
        linear-gradient(180deg,rgb(var(--dark-accent)) 70px, rgb(var(--medium-accent)));
    background-size: 100% 141px;
}
#header {
    height: 140px;
    background: url(http://1119s.wikidot.com/local--files/foundation-collective/fc-logo.png) 10px 40px / 75px 75px no-repeat;
}
#header h1 a span {
    font-size: 0px;
    position: relative;
}
#header h1 a span::after {
    content: var(--header-title-text);
    color: var(--header-title-color);
    font-size: 42px;
}
#header h2 span {
    font-size: 0px;
    position: relative;
}
#header h2 span::after {
    content: var(--header-subtitle-text);
    color: var(--header-subtitle-color);
    font-size: 12px;
}
 
/* Top-Bar */
#container-wrap::after {
    content: "";
    /*display: block;*/
    position: absolute;
        top: 140px;
        left: 0;
    width: 100%;
    height: 23px;
    background: linear-gradient(180deg, rgb(var(--dark-gray)), rgb(var(--black)));
    box-shadow: 0 2px 6px -2px rgba(0,0,0,0.8);
}
#top-bar ul li a:hover, #top-bar ul li.sfhover a, #top-bar ul li:hover a {
    color: rgb(var(--medium-accent)) !important;
}
#top-bar ul li.sfhover a:hover {
    background: rgba(255,255,255,0.5);
}
#top-bar ul li:hover a:hover {
    background: rgba(255,255,255,0.95);
}
#top-bar ul li.sfhover a, #top-bar ul li:hover a {
    background: rgba(255,255,250,0.95);
}
#top-bar ul li:hover a:hover {
    color: rgb(var(--bright-accent));
}
 
/* Login-Status */
#login-status {
    color: rgb(var(--gray));
}
#login-status a {
    color: rgb(var(--light-gray));
}
#account-options {
    background-color: rgba(0,0,0,0.95);
    border: solid rgb(var(--bright-accent)) 1px;
}
#account-options li a {
    color: rgb(var(--bright-accent));
}
#account-options li a:hover {
    color: rgb(var(--medium-accent));
}
 
/* Search-Box */
#search-top-box-input,
#search-top-box-form input[type=submit] {
    border: solid 1px rgb(var(--dark-gray));
    border-radius: 0;
    background-image: none;
    background-color: rgb(var(--black));
    color: rgb(var(--light-gray));
}
#search-top-box-input:hover,
#search-top-box-input:focus,
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    border-color: rgb(var(--bright-accent));
    background: rgb(var(--dark-gray));
    color: rgb(var(--white));
}
 
/* Side-Bar */
#side-bar .side-block {
    border: solid 2px;
    border-color: rgb(var(--medium-accent)) rgb(var(--dark-accent));
    border-radius: 0;
    background: rgba(var(--pale-gray),0.8);
    box-shadow: none;
}
@media (max-width: 767px) {
    #side-bar {
        background: rgba(0,0,0,0.8);
    }
}
#side-bar .side-block .heading,
#side-bar .collapsible-block-unfolded-link .collapsible-block-link {
    border-color: rgb(var(--dark-accent));
    color: rgb(var(--dark-accent));
}
#side-bar img[src$="home.png"],
#side-bar img[src$="default.png"],
#side-bar img[src$="main.png"],
#side-bar img[src$="forum.png"] {
    filter: hue-rotate(300deg);
}
 
/* Content */
#page-title {
    color: rgb(var(--medium-accent));
    border-color: rgb(var(--medium-accent));
}
h1 {
    color: rgb(var(--black));
}
a {
    color: rgb(var(--medium-accent));
}
a.newpage {
    color: rgb(var(--link-newpage));
}
 
/* Table */
table.wiki-content-table tr th {
    border: solid rgb(var(--gray)) 1px;
    background-color: rgb(var(--light-gray));
}
table.wiki-content-table tr td {
    border: solid rgb(var(--gray)) 1px;
    background-color: rgb(var(--white));
}
 
/* Tab */
.yui-navset .yui-nav li a {
    border-color: rgb(var(--light-gray));
    background: rgb(var(--pale-gray));
}
.yui-navset .yui-nav li a em {
    border-color: rgb(var(--light-gray));
    color: rgb(var(--black))
}
.yui-navset .yui-nav li a:hover {
    border-color: rgb(var(--bright-accent));
    background: rgb(var(--pale-gray));
}
.yui-navset .yui-nav li a:hover em {
    border-color: rgb(var(--bright-accent));
}
.yui-navset .yui-nav li.selected a,
.yui-navset .yui-nav li.selected a:hover,
.yui-navset .yui-nav li.selected a:focus {
    border-color: rgb(var(--bright-accent));
    background: rgb(var(--dark-accent));
}
.yui-navset .yui-nav li.selected a em,
.yui-navset .yui-nav li.selected a:hover em,
.yui-navset .yui-nav li.selected a:focus {
    border-color: rgb(var(--bright-accent));
    color: rgb(var(--white));
}
.yui-navset .yui-nav {
    border-color: rgb(var(--dark-gray));
}
.yui-navset .yui-content {
    border-color: rgb(var(--dark-gray));
    border-top: none;
    background: rgb(var(--pale-gray));
}
 
/* Tab alt */
.themealt .yui-navset .yui-nav {
    display: flex;
    flex-wrap: wrap;
    border-color: rgb(var(--dark-gray));
}
.themealt .yui-navset .yui-nav li {
    flex-grow: 1;
    display: block;
    border: solid rgb(var(--light-gray)) 1px;
    background: rgb(var(--pale-gray));
    margin: 0;
    text-align: center;
}
.themealt .yui-navset .yui-nav li:hover {
    background: rgb(var(--light-gray));
}
.themealt .yui-navset .yui-nav li.selected {
    border: solid rgb(var(--bright-accent)) 1px;
    background: rgb(var(--dark-accent));
    margin: 0;
}
.themealt .yui-navset .yui-nav li a,
.themealt .yui-navset .yui-nav li a:hover,
.themealt .yui-navset .yui-nav li a:focus,
.themealt .yui-navset .yui-nav li.selected a,
.themealt .yui-navset .yui-nav li.selected a:hover,
.themealt .yui-navset .yui-nav li.selected a:focus,
.themealt .yui-navset .yui-nav li a em {
    border: none 0;
    background: none;
    color: rgb(var(--black));
}
.themealt .yui-navset .yui-nav li.selected a em {
    padding: 0.25em 0.75em;
    color: rgb(var(--white));
}
.themealt .yui-navset .yui-content {
    border-color: rgb(var(--dark-gray));
    botlrder-top: none 0;
    background: rgb(var(--pale-gray));
}
 
/* Toc */
#toc {
    border: dashed rgb(var(--dark-accent)) 1px;
    background-color: rgb(var(--pale-gray));
}
 
/* Hover Tip */
.hovertip {
    background: rgba(var(--pale-gray),0.95) !important;
    border-color: rgb(var(--dark-gray)) !important;
}
.hovertip .content .footnote .f-footer {
    color: rgb(var(--gray));
}
 
/* Box */
blockquote, div.blockquote {
    border: dashed rgb(var(--dark-gray)) 1px;
    background: rgb(var(--pale-gray));
}
.sexy-box{
    border: solid rgb(var(--light-gray)) 1px;
    background: rgb(var(--pale-gray));
    margin: 1em;
    padding: 0 1em;
}
.code {
    border: dashed rgb(var(--light-gray)) 1px;
    background: rgb(var(--pale-gray));
}
 
/* Collapsible alt */
.themealt .collapsible-block-link {
    display: block;
    border-bottom: solid rgb(var(--medium-accent)) 3px;
    background: rgba(var(--gray),0.2);
    padding: 3px 0;
    text-align: center;
    color: rgb(var(--medium-accent));
}
.themealt .collapsible-block-link:hover {
    background: rgba(var(--gray),0.4);
    text-decoration: none;
}
.themealt .collapsible-block-unfolded-link .collapsible-block-link {
    border-color: rgb(var(--dark-accent));
    color: rgb(var(--dark-accent));
}
 
/* Window */
.owindow {
    border: solid rgb(var(--dark-accent)) 2px;
    background-color: rgb(var(--dark-gray));
    color: rgb(var(--pale-gray));
}
.owindow .title {
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--white));
}
.owindow a, div.owindow h1 {
    color: rgb(var(--white));
}
.owindow > a {
    text-decoration: underline;
    transition: 0.2s;
}
.owindow a:hover {
    background: rgb(var(--light-gray));
}
.owindow .button-bar a {
    border: solid rgb(var(--gray)) 1px;
    background: rgb(var(--light-gray));
    color: rgb(var(--bright-accent));
}
.owindow .button-bar a:hover {
    border: solid rgb(var(--light-gray)) 1px;
    background: rgb(var(--gray));
    color: rgb(var(--dark-accent));
}
.modal-body img {
    background-color: transparent !important;
}
 
#lock-info {
    border: solid rgb(var(--light-gray)) 1px;
    background: rgb(var(--pale-gray));
}
div.preview-message {
    border-color: rgb(var(--medium-accent));
    background-color: rgba(var(--pale-gray),0.95);
}
 
/* Others */
::-webkit-scrollbar-thumb {
    background: rgba(68,68,68,0.5);
}
::-webkit-scrollbar-track {
    background: rgba(170,170,170,0.8);
}
 
::selection {
    background: rgba(var(--bright-accent),0.3);
}
 
@media (max-width:840px) {
#header h1 a span::after {
    letter-spacing: 0.5px;
}
#header {
    background-position: 10px 50px;
    /*background-size: 75px 75px;*/
}
}
@media (max-width:480px) {
#header {
    background-position: 8px 64px;
    background-size: 55px 55px;
}
#header h1 a span::after {
    letter-spacing: 0.2px;
    font-size: 36px;
}
#header h2 a span::after {
    font-size: 6px;
}
}