Sigma+ (with M+)
評価: 0+x
blank.png

参照リビジョン: 35 (2025/02/03)
最終更新日: 24 May 2025 02:03

これはテーマ作成の補助的なレイヤーとして使用するためにEstrellaYoshteEstrellaYoshteによって作成されたメタコンポーネントです。

使用するには、以下の構文をページに置いてください。

[[include :pseudo-scp-jp:component:sigma-plus]]

Sigma+はこれ単体で、以下を含むより最近のCSSの慣習やプロパティを使用しながら、元の外観のほとんどを保持しています。

  • 拡張可能なCSS変数
  • グリッドとフレックスを基にしたレイアウト
  • 完全にタブ選択可能なナビゲーション
  • RTL (右横書き) への対応

開発者ノート

このコンポーネントの主な目的は、時代遅れになったサイトテーマの基本レイアウトを解消する負担を軽減することです。こうした負担は実装されるカスタマイズの量を制限したり、望むレイアウトを実現するためのCSSの複雑性/オーバーヘッドを大幅に増加させたり、最適化されていないCSSが増えることで状況をさらに悪化させたり、あるいはこれら3つが不適切に組み合わさったりする傾向があります。

Sigma+は互換レイヤーとして可能な限り高いパススルーを維持するために、セマンティックフローおよびビジュアルフローの大部分を再実装するのみに留めていますが、いくつかの例外があります。

  • ヘッダーの装飾: ヘッダーおよびページ全体の背景は元々#container-wrapの背景画像でしたが、実際の#header#top-barから意味的に分離されていて、サイズやレイアウトの変更 (エンドユーザー設定、ブラウザのデフォルト設定、画面サイズなど) に反応しなくなっていました。そのため、両方のdiv要素のbackground-imageに変更しました。
  • Top Bar dropdowns: modified to be better responsive to screen sizes, as well as overriding generally annoying styles from Wikidot's default. Made tab-navigable.
  • Rate & Info module: significantly restyled for better semantic separation and easier to modify with variables. Undid Info module's idiosyncratic CSS.
  • Tabs: Replaced the spritesheet used to style the tabs with CSS variables. Slightly less annoying to deal with.

訳者ノート

日本語化に際して、以下の変更を加えています。

  • メインフォント変更: 本文等の日本語フォントをM PLUS 1に変更しています。この設定は--spj_jafont-base変数によって制御されています。
  • フォントサイズ変更: 基本的に日本語フォントは上下幅が大きいため、文字サイズを.82emから.85emに拡大しています。
  • 行間隔変更: 日本語フォントに合わせて、行間隔も変更しています。この値は--spj_base-line-height変数で制御されています (デフォルト: 1.5)。
  • クレジットモジュール用コード追加: SCP-JPでRateモジュールの代わりに使用されているクレジットモジュールのためのコードを追加しています。
  • Jstyles併用時用カスタムプロパティ: 日本語表現用Wiki構文拡張スタイルを使用したい場合は、次のコードをCSSモジュールに挿入してください。この機能のために--spj_lafont-mono, --mono-font変数を用意しています。必要に応じて変更・カスタムしてください。

tt {
font-family: var(--body-font);
}
.tt {
font-family: var(--mono-font);
font-size: 98%;
}

Example

plus-example.png

:root {
--header-title: "We don't have a 55";
--sp_header-height: 21.75rem;
}

Source Code:

:where(:root) {
    --header-title: "SCP財団";
    --header-subtitle: "確保、収容、保護";
 
    --spj_jafont-base: "M PLUS 1";
    --spj_lafont-base: verdana, arial, helvetica;
    --spj_lafont-header: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica;
    --spj_lafont-mono: 'Andare Mono', 'Courier New', Courier;
 
    --spj_base-line-height: 1.5;
 
    --body-font: var(--spj_lafont-base), var(--spj_jafont-base), sans-serif;
    --header-font: var(--spj_lafont-header), var(--spj_jafont-base);
    --mono-font: var(--spj_lafont-mono), monospace;
 
/*---------- Sigma-plus-origin properties ----------*/
 
    --sp_header-title-size: min(calc(2.675rem * var(--sp_header-title-scale)), calc(1.25rem * var(--sp_header-title-scale) + 2.5vw));
    --sp_header-subtitle-size: min(calc(.875rem * var(--sp_header-subtitle-scale)), calc(0.475rem * var(--sp_header-subtitle-scale) + 1.25vw));
    --sp_header-title-scale: 1;
    --sp_header-subtitle-scale: 1;
 
    --sp_header-logo: url(https://scp-jp.github.io/files/util/common/media/component/theme/logo.png);
    --sp_header-logo-size: 6.25rem;
    --sp_header-logo-adaptive-size: min(var(--sp_header-logo-size), calc(var(--sp_header-logo-size)*0.575 + 5vw));
    --sp_header-height: 8.75rem;
 
    --sp_header-gradient-top-color: #000000;
    --sp_header-gradient-top-stop: .4;
    --sp_header-gradient-bottom-color: #6B4040;
    --sp_header-gradient-bottom-stop: .95;
 
    --sp_diagonal-stripes-angle: 45deg;
    --sp_diagonal-stripes-width: .08rem;
    --sp_diagonal-stripes-gap: .22rem;
    --sp_diagonal-stripes-color: #FFAFAF09;
 
    --sp_top-bar-height: 1.375rem;
    --sp_top-bar-gradient-top-color: #535353;
    --sp_top-bar-gradient-bottom-color: #3B3B3B;
 
    --sp_top-bar-link-color: #fff;
    --sp_top-bar-link-hover-color: #a01;
    --sp_top-bar-link-hover-background: #fff;
 
    --sp_dropdown-width: calc(8.25rem + 2.25vw);
    --sp_dropdown-background: #eee;
    --sp_dropdown-link-color: var(--sp_top-bar-link-hover-color);
    --sp_dropdown-link-hover-color: var(--sp_top-bar-link-hover-color);
    --sp_dropdown-link-background: transparent;
    --sp_dropdown-link-border: 0.05rem solid #ddd;
    --sp_dropdown-link-hover-background: var(--sp_top-bar-link-hover-background);
 
    --sp_side-bar-width: 14rem;
 
    --sp_area-max-width: 62.5rem;
    --sp_area-min-margin: 1.25rem;
    --sp_area-comp-margin: max(calc((100vw - var(--sp_area-max-width))/2), var(--sp_area-min-margin));
    --sp_final-header-height: calc(var(--sp_header-height) + var(--sp_top-bar-height));
 
    --sp_rate-module-text-color: #FFF;
    --sp_rate-module-background: #633;
    --sp_rate-module-sub-color: var(--sp_rate-module-text-color);
    --sp_rate-module-active-color: var(--sp_rate-module-text-color);
 
    --sp_rate-module-button-color: var(--sp_rate-module-background);
    --sp_rate-module-button-background: #fff6f0;
    --sp_rate-module-button-hover-color: var(--sp_rate-module-active-color);
    --sp_rate-module-button-hover-background: var(--sp_rate-module-background);
 
    --sp_tab-text-color: #000;
    --sp_tab-background: #fefefe;
    --sp_tab-border-color: #a3a3a3;
    --sp_tab-hover-text-color: var(--sp_tab-text-color);
    --sp_tab-hover-background: #ffd3d3;
    --sp_tab-hover-border-color: var(--sp_tab-border-color);
    --sp_tab-selected-text-color: #fff;
    --sp_tab-selected-background: #901;
    --sp_tab-selected-border-color: #65000b;
 
    --sp_hovertip-background: #fff;
    --sp_hovertip-border: 0.05rem solid black;
}
 
textarea, input { font-family: inherit; }
 
/* Font patch for SCP-JP */
body {
    font-family: var(--body-font);
    font-size: .85em;
}
#header h1 a {
    font-family: "BauhausLTDemi", "Arial", var(--spj_jafont-base), sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-font);
}
li, p {
    line-height: var(--spj_base-line-height);
}
 
/*--------------*/
/*--- HEADER ---*/
/*--------------*/
 
/* unset the faux header bg */
div#container-wrap { background-image: none; }
 
#header {
    /* Recreating (sans top bar) with gradients */
    background-image:
 
        /* Diagonal stripes */
        repeating-linear-gradient(var(--sp_diagonal-stripes-angle),
            var(--sp_diagonal-stripes-color), var(--sp_diagonal-stripes-color) var(--sp_diagonal-stripes-width),
            transparent var(--sp_diagonal-stripes-width), transparent var(--sp_diagonal-stripes-gap)),
 
        /* Header gradient colors */
        linear-gradient(to bottom,
            var(--sp_header-gradient-top-color) calc(var(--sp_header-gradient-top-stop) * var(--sp_header-height)),
            var(--sp_header-gradient-bottom-color) calc(var(--sp_header-gradient-bottom-stop) * var(--sp_header-height))
        );
    background-repeat: repeat-x;
    background-size: auto;
    background-position: initial;
 
    /* De-styling sigma */
    padding-bottom: 0;
    height: auto;
    width: 100%;
    max-width: unset;
    min-height: var(--sp_final-header-height);
    z-index: initial;
 
    /* Grid layout */
    display: grid;
    grid-template-areas:
        ". login login ."
        ". . . ."
        ". h1 search ."
        ". h2 search ."
        ". . . ."
        "top-bar top-bar top-bar top-bar";
    grid-template-rows: auto 1fr auto auto 1fr auto;
    grid-template-columns: var(--sp_area-comp-margin) 1fr auto var(--sp_area-comp-margin);
}
 
/* Header logo */
#header::before {
    content: "";
    display: block;
    background: var(--sp_header-logo) no-repeat center;
    background-size: contain;
    grid-row: 2/6;
    grid-column: 2/3;
    width: var(--sp_header-logo-adaptive-size);
}
 
/*--------------*/
/*--- TOP BAR ---*/
/*--------------*/
 
#top-bar {
    grid-area: top-bar;
 
    /* De-styling sigma-9 */
    position: relative;
    z-index: initial;
    top: initial; right: initial;
    max-width: unset;
    line-height: unset;
    height: 100%;
    font-size: .875em;
 
    padding-inline: var(--sp_area-min-margin);
    box-sizing: border-box;
    min-height: var(--sp_top-bar-height);
 
    /* Recreating top bar image with gradients */
    background-image:
        linear-gradient(to bottom,
            var(--sp_top-bar-gradient-top-color) 0%,
            var(--sp_top-bar-gradient-bottom-color) 100%);
}
 
#top-bar > div[class*="top-bar"] {
    max-width: var(--sp_area-max-width);
    height: 100%;
    margin: auto;
    position: static;
    left: initial;
    bottom: initial;
    z-index: initial;
}
#top-bar ul, #top-bar li {
    float: none;
}
#top-bar div[class*="top-bar"] > ul {
    height: 100%;
    display: flex;
    justify-content: end;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    max-height: unset;
    border: none;
    line-height: 1.275;
    color: var(--sp_top-bar-link-color);
    padding: 0;
    padding-inline: calc(var(--sp_dropdown-width)*0.05 + 0.25vw);
    box-sizing: border-box;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a:hover,
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li:is(.sfhover, :hover, :focus-within) > a {
    color: var(--sp_top-bar-link-hover-color);
    background: var(--sp_top-bar-link-hover-background);
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul {
    left: initial;
    min-width: max(100%, var(--sp_dropdown-width));
    width: max-content;
    background: var(--sp_dropdown-background);
    box-sizing: border-box;
    z-index: 3;
    visibility: visible;
    pointer-events: none;
    opacity: 0;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li:where(:not(:last-child)) > ul {
    inset-inline-start: 0;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li:where(:last-child) > ul {
    right: initial;
    inset-inline-end: 0;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li:is(.sfhover, :hover, :focus-within) ul {
    pointer-events: auto;
    opacity: 1;
}
 
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a {
    min-width: max-content;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.5;
    overflow: initial;
    max-height: initial;
    padding: 0.125em 0.75em;
    border-top: var(--sp_dropdown-link-border);
    color: var(--sp_dropdown-link-color);
    background: var(--sp_dropdown-link-background);
    text-align: start;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a:is(:hover,:focus) {
    color: var(--sp_dropdown-link-hover-color);
    background: var(--sp_dropdown-link-hover-background);
}
 
#top-bar .open-menu, #top-bar .open-menu > p { display: contents; }
#top-bar .open-menu a { z-index: 9; }
 
/*--------------*/
/*--- LOGIN ---*/
/*--------------*/
 
#login-status {
    top: initial;
    right: initial;
    position: relative;
    z-index: 3;
    grid-area: login;
    text-align: end;
    padding-block-start: 0.5rem;
}
#account-options {
    right: initial;
    inset-inline-end: 0;
    inset-block-start: 100%;
    display: block!important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.075s linear;
}
#account-topbutton:focus + #account-options,
#account-options:is(:hover, :focus-within) {
    opacity: 1;
    pointer-events: auto;
}
 
/* Safari support */
@media not all and (min-resolution:.001dpcm) { @media {
#account-topbutton:hover + #account-options {
    opacity: 1;
    pointer-events: auto;
}
}}
 
/*--------------*/
/*--- SEARCH ---*/
/*--------------*/
 
#search-top-box {
    grid-area: search;
    position: relative;
    right: initial;
    top: initial;
    width: auto;
    display: flex;
    align-items: center;
    text-align: unset;
    z-index: initial;
}
 
#search-top-box-form {
    display: flex;
    gap: 0.325rem;
}
 
#search-top-box-input, #search-top-box-form input[type=submit] {
    margin: 0;
    appearance: none;
}
 
/*------------------*/
/*--- HEADER TEXT ---*/
/*------------------*/
 
#header h1 { grid-area: h1; }
#header h2 { grid-area: h2; }
#search-top-box { grid-area: search; }
#header h1, #header h2 {
    margin-left: initial;
    padding: 0;
    padding-inline-start: calc(var(--sp_header-logo-adaptive-size)*1.05);
    float: none;
    max-height: initial;
    font-size: 1rem;
}
#header h1 a, #header h2 span {
    margin: 0;
    padding: 0;
    line-height: 1.125;
    max-height: initial;
    max-width: max-content;
    display: inline-block;
    font-size: 0rem;
    letter-spacing: 0;
}
#header h1 a::before {
    content: var(--header-title);
    font-size: var(--sp_header-title-size);
}
#header h2 span::before {
    content: var(--header-subtitle);
    font-size: var(--sp_header-subtitle-size);
    letter-spacing: 0.05vw;
}
 
/*-----------------------*/
/*-----------------------*/
/*-----------------------*/
 
/*------------------*/
/*--- MAIN AREA ---*/
/*------------------*/
 
#content-wrap {
    min-height: unset;
    width: calc(100% - var(--sp_area-min-margin)*2);
    display: flex;
    max-width: var(--sp_area-max-width);
    column-gap: 2.325rem;
}
 
#main-content {
    padding: 0;
    margin: 0;
    max-width: 100%;
    min-width: 0rem;
    flex: 1 1 auto;
    overflow-wrap: break-word;
}
#page-content { font-size: unset; }
 
/* Side Bar */
@media not all and (max-width: 767px) {
    #side-bar {
        position: static;
        inset: initial;
    }
}
div#side-bar {
    width: var(--sp_side-bar-width);
    flex: 0 0 var(--sp_side-bar-width);
}
 
/* Breadcrumbs */
#breadcrumbs, .pseudocrumbs {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.55ch;
}
.pseudocrumbs > p { display: contents; }
 
/*--------------------*/
/*--- USER DISPLAY ---*/
/*--------------------*/
 
.printuser {
    display: inline-flex;
    align-items: baseline;
    grid-gap: 0.25em;
    text-indent: 0;
}
.printuser a { margin-right: 0; }
.printuser > a:first-child {
    display: flex;
    user-select: none;
    align-self: center;
    min-width: max-content;
}
.printuser > a:first-child img {
    height: 1.25em;
    width: 1.25em;
    padding: 0;
    padding-left: 0.5em;
    object-fit: contain;
    background-size: cover;
    overflow: hidden;
    margin: 0;
}
 
/*-----------------*/
/*--- RATE & INFO MODULE ---*/
/*-----------------*/
 
/* Baseline reset */
div.page-rate-widget-box,
div.rate-box-with-credit-button {
    display: inline-flex;
    align-items: center;
    background-color: var(--sp_rate-module-background);
    border: none;
    padding: 0.075em;
    margin-right: 0;
}
div.page-rate-widget-box .cancel a:hover { background: transparent; }
 
/*-----------------*/
 
div.page-rate-widget-box {
    flex-wrap: wrap;
}
div.page-rate-widget-box .rate-points {
    padding: 0 .675em;
    color: var(--sp_rate-module-text-color);
}
#main-content div.page-rate-widget-box span:is(.rate-points, .btn) {
    border: none;
    border-radius: unset;
    background: transparent;
}
.page-rate-widget-box :is(.rateup, .ratedown) a {
    margin: 0;
    color: var(--sp_rate-module-button-color);
    background-color: var(--sp_rate-module-button-background);
}
.page-rate-widget-box :is(.rateup, .ratedown) a:is(:hover,:focus) {
    color: var(--sp_rate-module-button-hover-color);
    background-color: var(--sp_rate-module-button-hover-background);
}
 
div.page-rate-widget-box .cancel a { color: var( --sp_rate-module-sub-color); }
div.page-rate-widget-box .cancel a:is(:hover,:focus) { color: var( --sp_rate-module-active-color); }
 
/*-----------------*/
 
div.rate-box-with-credit-button {
    align-items: stretch;
}
 
div.rate-box-with-credit-button .page-rate-widget-box {
    background-color: transparent;
    border-radius: inherit;
    padding: 0;
}
 
div.rate-box-with-credit-button .creditButton {
    display: block;
}
div.rate-box-with-credit-button .creditButton p {
    display: contents;
    font-size: unset;
}
div.creditButton p a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .925em;
    width: 1.375em;
    height: 100%;
    color: var( --sp_rate-module-text-color);
    padding: 0; padding-top: .1425em;
    border: 0;
    border-inline-start: solid 0.05em var( --sp_rate-module-sub-color);
    box-sizing: border-box;
    margin: 0;
}
div.creditButton p a:is(:hover,:focus) { color: var(--sp_rate-module-button-hover-color); }
 
:is(div,ul).creditRate {
    display: block;
    float: none;
    text-align: end;
    margin-right: 0;
}
div.creditRate .rateBox { display: contents; }
 
div#u-credit-view, div#u-credit-otherwise {
    display: grid;
    place-content: center;
}
div.modalcontainer {
    position: relative;
    top: unset;
    bottom: unset;
    left: unset;
    right: unset;
    height: auto;
}
div.modalbox {
    display: flex;
    flex-direction: column;
}
 
/*-------------*/
/*--- IMAGE BLOCK ---*/
/*-------------*/
 
div.scp-image-block.block-right {
margin-right: 0;
}
div.scp-image-block.block-left {
margin-left: 0;
}
@media screen and (max-width: 640px) {
    div.scp-image-block:is(.block-right,.block-left) {
        margin: .75em auto; float: none;
    }
}
 
/*-------------*/
/*--- TABS ---*/
/*-------------*/
 
.yui-navset { clear: both; }
 
.yui-navset .yui-nav {
    display: flex;
    flex-wrap: wrap;
}
.yui-navset.yui-navset-top .yui-nav :is(li, .selected) {
    display: block;
    margin: 0;
    padding: 0;
}
.yui-navset.yui-navset-top .yui-nav li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    border-width: 0.05rem;
    box-sizing: border-box;
    padding: 0.325rem 0.625rem;
}
 
.yui-navset.yui-navset-top .yui-nav :is(li, .selected) a em {
    position: static;
    inset: unset;
    border: none;
    padding: 0;
}
 
/* ------------------------- */
.yui-navset.yui-navset-top .yui-nav li a {
    color: var(--sp_tab-text-color);
    background: var(--sp_tab-background);
    border-color: var(--sp_tab-border-color);
}
 
.yui-navset.yui-navset-top .yui-nav li a:where(:hover,:focus) {
    color: var(--sp_tab-hover-text-color);
    background: var(--sp_tab-hover-background);
    border-color: var(--sp_tab-hover-border-color);
}
 
.yui-navset.yui-navset-top .yui-nav .selected a {
    color: var(--sp_tab-selected-text-color);
    background: var(--sp_tab-selected-background);
    border-color: var(--sp_tab-selected-border-color);
}
 
/*-------------*/
/*--- FOOTNOTE ---*/
/*-------------*/
 
.hovertip {
    background: var(--sp_hovertip-background)!important;
    border: var(--sp_hovertip-border)!important;
}
 
/*-------------*/
/*--- TAGS ---*/
/*-------------*/
 
#main-content .page-tags { text-align: start; }
#main-content .page-tags span {
    max-width: max-content;
    display: flex;
    flex-wrap: wrap;
    grid-gap: 0.375rem;
}
#main-content .page-tags a {
    margin: 0;
}
 
/*------------------*/
/*--- BOTTOM OPTIONS ---*/
/*------------------*/
 
#page-info, .page-watch-options, .page-options-bottom {
    text-align: end;
    height: auto;
}
:where(#page-options-container) .page-options-bottom a {
    display: inline-block;
}
 
#who-rated-page-area > div {
    column-width: 13.75em;
    column-gap: 0.75rem;
}
 
/*------------------*/
/*--- END AREA ---*/
/*------------------*/
 
#footer {
    display: flex!important;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    align-items: baseline;
    grid-gap: 0.5ch;
}
#footer .options {
    display: flex!important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    float: none;
    order: 1;
    width: auto;
    font-size: 0;
    margin-inline: 0.25rem;
    text-align: inherit;
}
#footer .options a {
    display: flex;
    align-items: center;
    font-size: 0.625rem;
    padding-inline: 0.375rem;
    border-inline-start: currentColor solid 0.05rem;
}
 
#license-area {
    padding-inline: var(--sp_area-min-margin);
}
 
#footer-bar {
    max-width: 100%;
    margin: 0 auto;
    border: none;
    padding: 0 var(--sp_area-comp-margin);
}
#footer-bar .units {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: .5rem;
}
#footer-bar .unit {
    float: none;
    width: auto;
    flex-basis: 10.25rem;
}
 
/*------------------*/
/*--- MOBILE Q ---*/
/*------------------*/
 
@media (max-width: 767px) {
    #top-bar { padding-inline: 0; }
    #top-bar div[class*="top-bar"] > ul { justify-content: center; }
    #top-bar div[class*="top-bar"] > ul > li { flex-grow: 1; }
}
 
/* ===== Patch for SCP-JP ===== */
/* クレジットモジュールの表示パッチ */
div.rate-box-with-credit-button .creditButton {
    display: inline-flex;
}
div.rate-box-with-credit-button .page-rate-widget-box {
    background-color: var(--sp_rate-module-background);
}
div.page-rate-widget-box .rate-points {
    padding-top: .1425em;
}
.creditButton a {
    display: flex;
    align-items: center;
    justify-content: center;
 
    height: 100%;
    box-sizing: border-box;
    padding:0; padding-top: .1425em;
    border: 0;
    margin: 0;
    color: var(--sp_rate-module-text-color);
}
.creditButton a:is(:hover, :focus) {
    color: var(--sp_rate-module-button-hover-color);
}
.heritage-rating-module ~ .creditButton a:hover {
    color: var(--sp_rate-module-button-hover-color);
}
特に明記しない限り、このページのコンテンツは次のライセンスの下にあります: Creative Commons Attribution-ShareAlike 3.0 License