Placestyle
Placestyle
作成者: YS_GPCRYS_GPCR
作成日: 02 May 2022 17:34

The above page info table is automatically generated by a Listpages module within the authorbox, a left-handed sidebox. This is automatically applied to all pages that include this page, unless you wrap the Placestyle include in a display: none; div. It sits on the left side so that it can seamlessly be used in tandem with traditional sideboxes. It does not display on mobile.
上記のページ情報テーブルは左手側のサイドボックスであるauthorbox内に、ListPagesモジュールによって自動生成されています。これはPlacestyleのinclude構文をdisplay: none; divで囲まない限り、このページをインクルードするすべてのページに自動的に適用されます。左側に設置されているため、従来のサイドボックスとシームレスに平行して使用できます。モバイルでは表示されません。

placeholderword.png

.

評価: 0+–x
blank.png

クレジット

PLACESTYLE CSS
By: Placeholder McDPlaceholder McD

Thank you to CroquemboucheCroquembouche, EstrellaYoshteEstrellaYoshte and NagirosNagiros for collectively creating most of the code that is included in this theme.
このテーマに含まれている殆どのコードを共同制作してくださったことに関して、CroquemboucheCroquembouche、EstrellaYoshteEstrellaYoshte、NagirosNagirosの3名に感謝します。

評価: 0+–x

これは何?

This is Placestyle CSS: a fork of EstrellaYoshteEstrellaYoshte's Penumbra Theme created by Placeholder McDPlaceholder McD for use in his articles. It exists so it can be easily updated and applied across a wide range of works. It's basically Penumbra, minus some stuff I didn't want, plus some stuff I like from HarryBlankHarryBlank's Blankstyle CSS, plus some extra goodies!
このPlacestyle CSSは、Placeholder McDPlaceholder McDが自身の記事に使用するために作成した、EstrellaYoshteEstrellaYoshteのPenumbraテーマの派生テーマです。幅広い作品に適用し、簡単に更新することができるように作成されました。Penumbraをベースに、私の望まない要素を除き、好きな要素をHarryBlankHarryBlankのBlankstyle CSSから加え、さらに幾つか良いものを加えています！

It almost certainly will not work with other themes, most of all Black Highlighter. Do not use this unless you know what you're getting into.
他のテーマ、特にBlack Highlighterと共にはほぼ確実に機能しません。何が起こるか分からないのであれば、使用しないでください。

使い方

To use this theme, copy this syntax onto the top of your page:
このテーマを使用するには、次の構文をページの最上部にコピー＆ペーストしてください。

[[include :scp-jp:theme:placestyle]]

Note that this theme includes the following components:
このテーマには次のコンポーネントがインクルードされていることに留意してください。

When using this theme in conjunction with the info-rate module, wrap the module in a [[div]] to ensure that the information panel is not delayed by the Fade-In.
このテーマをinfo-rateモジュールやcreditモジュールと併用する際は、情報パネルがフェードイン構文によって遅延しないようにするために、それらのモジュールを[[div]]で囲んでください。

This theme borrows code from PeppersGhostPeppersGhost's Image Block Peppo and EstrellaYoshte which centers base images and image-blocks so that they appear more aesthetically on smaller screens (read: mobile). Nigh-all of this theme's code is derived from Penumbra Theme.
このテーマではPeppersGhostPeppersGhostのImage Block PeppoとEstrellaYoshteから、小さな画面 (モバイル端末など) で画像ブロックを中央寄せにして綺麗に見せるためのコードを転用しています。このテーマのほぼすべてのコードはPenumbraテーマからの派生です。

Thank you to CroquemboucheCroquembouche, EstrellaYoshteEstrellaYoshte and NagirosNagiros for collectively creating most of the code that is included in this theme.
このテーマに含まれている殆どのコードを共同制作してくださったことに関してCroquemboucheCroquembouche、EstrellaYoshteEstrellaYoshte、NagirosNagirosの3名に感謝します。

The above table cell is within a normal sidebox. Sideboxes can be attached to only specific sections of text by using the limit div. If you scroll through this page's code, you'll notice the sidebox does not continue past the SOURCE CODE header.

上記のテーブルは通常のサイドボックス内にあります。limit divを使用することで、文章の特定の区間のみにサイドボックスを付属させることができます。このページのコードをスクロールしていくと、サイドボックスは「ソースコード」の見出しより先へはついてこないことがわかるでしょう。

The main differences between PLACESTYLE CSS and Penumbra are:
PLACESTYLE CSSとPenumbraの主な違いは次の通りです。

  • body font (Verdana) matches Sigma-9
  • title font (Monserrat) matches Blankstyle
  • simplified scp-image-block resembles Sigma-9
  • tables have internal padding (except in the sidebox) a la Blankstyle
  • table header cells are colored according to accentColor
  • tableb div separates cells (and image-captions!) within its tables a la Blankstyle
  • transparent sidebox background a la Blankstyle
  • bt span bolds and colors text (according to accentColor) a la NatVoltaicNatVoltaic and stormbreathstormbreath's Ad Astra Theme (it's actually slightly brighter than whatever accentColor you use, for readability)
  • square toggle sidebar button
  • BetterFootnotes automatically adjust according to accentColor
  • ACS Component is recolored to fit dark themes a la NagirosNagiros' Night Rush Theme
  • ACS Component does not have the "ITEM#:" text in its top-left corner, a la Blankstyle
  • Fancy collapsibles with hideLocation="both" display more intuitively
  • the authorbox, a left-handed sidebox which displays author info via listpages, is automatically added to any page that uses this theme (unless you wrap the include in a div style="display: none;". They do not interfere with normal sideboxes.
  • Sigma-9と同じ本文フォント (Verdana) を使用している
  • Blankstyleと同じ見出しフォント (Monserrat) を使用している
  • シグマ-9に似せたシンプルな画像ブロック
  • Blankstyleと同様に、テーブルに内部パディングがある (サイドボックス内のものは除く)
  • テーブルのヘッダーセルがaccentColorに従って色付けされる
  • Blankstyleと同様に、tableb divを用いてセル同士を (および画像キャプションも！) 分割できる
  • Blankstyleと同様の、透明なサイドボックス背景
  • NatVoltaicNatVoltaicとstormbreathstormbreathのアド・アストラ テーマと同様に、bt spanで文章を太字にし、(accentColorに従って) 色付けできる (可読性のために、どのようなaccentColorを使っていたとしても実際にはそれよりも少し明るくなる)
  • 四角いサイドバーボタン
  • BetterFootnotesがaccentColorに従って自動調整される
  • NagirosNagirosのNight Rushテーマと同様に、ACSコンポーネントがダークテーマに合うように配色を変更されている
  • Blankstyleと同様に、ACSコンポーネントの左上の「アイテム番号:」が非表示化されている
  • hideLocation="both"を指定された折りたたみの装飾がより直感的に表示される
  • ListPagesモジュールによって作者情報を表示する左手側のサイドボックスであるauthorboxが、このテーマを使用するあらゆるページに (include構文をdiv style="display: none;"で囲まない限り) 自動的に追加される (通常のサイドボックスとは干渉しない)

例

Patch notes can be found in the discussion thread.

パッチノートはディスカッションスレッドにあります。

ソースコード:

/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        bottom: 0.5em;
        left: 0.5em;
        z-index: 15;
        font-family: san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888 !important;
        background-color: #fff !important;
        border-radius: 3em;
        color: #888 !important;
        text-decoration: none!important;
}
 
@media (min-width: 768px) {
 
    .mobile-top-bar {
        display: block;
    }
 
    .mobile-top-bar li {
        display: none;
    }
 
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -25em;
        width: 17em;
        height: 100%;
        background-color: rgb(184, 134, 134);
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        -webkit-transition: left 0.5s ease-in-out 0.1s;
        -moz-transition: left 0.5s ease-in-out 0.1s;
        -ms-transition: left 0.5s ease-in-out 0.1s;
        -o-transition: left 0.5s ease-in-out 0.1s;
        transition: left 0.5s ease-in-out 0.1s;
    }
 
    #side-bar:after {
        content: "";
        position: absolute;
        top: 0;
        width: 0;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
 
    }
 
    #side-bar:target {
        display: block;
        left: 0;
        width: 17em;
        margin: 0;
        border: 1px solid #dedede;
        z-index: 10;
    }
 
    #side-bar:target + #main-content {
        left: 0;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.3) 1px 1px repeat;
        z-index: -1;
    }
}
:root {
    --timeScale: 1;
    --timeDelay: 0s;
}
 
/* Converting middle divider from box-shadow to ::before pseudo-element */
.anom-bar > .bottom-box { box-shadow: none!important; }
.anom-bar > .bottom-box::before {
    position: absolute;
    content: " ";
    width: 100%;
    height: 0.5rem;
    background-color: rgb(var(--black-monochrome, 12, 12, 12));
    transform: translateY(-0.74rem);
}
 
/* DIVIDER */
.anom-bar > .bottom-box::before {
    animation-name: divider;
    animation-duration: calc(0.74s * var(--timeScale));
    animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
}
 
/* CLASSIFIED LEVEL BARS */
div.top-center-box  > * {
    animation-name: bar;
    animation-duration: calc(0.45s * var(--timeScale));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
div.top-center-box > :nth-child(1) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(2) { animation-delay: calc(0.32s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(3) { animation-delay: calc(0.45s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(4) { animation-delay: calc(0.61s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(5) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(6) { animation-delay: calc(0.95s * var(--timeScale) + var(--timeDelay)); }
 
/* TOP TEXT */
div.top-left-box, div.top-right-box {
    clip-path: polygon( 0% -50%, 150% -50%, 150% 100%, 0% 100%);
}
 
div.top-left-box > *, div.top-right-box > * {
    position: relative;
    animation-name: bottomup;
    animation-duration: calc(0.65s * var(--timeScale));
    animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/* CONTAINMENT, DISRUPTION, RISK CLASSES */
div.text-part > * {
    clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%);
    animation-name: expand2;
    animation-duration: calc(0.5s * var(--timeScale));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
div.text-part > :nth-child(1) {
    animation-name: expand1;
}
div.text-part > :nth-child(1) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }
div.text-part > :nth-child(2) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }
div.text-part > :nth-child(3) { animation-delay: calc(0.86s * var(--timeScale) + var(--timeDelay)); }
 
div.main-class::before, div.main-class::after {
    animation-name: iconslide;
    animation-duration: calc(0.45s * var(--timeScale));
    animation-delay: calc(0.8s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 /* BOTTOM TEXT */
div.main-class > *,  div.disrupt-class > *, div.risk-class > * {
    white-space: nowrap;
    animation-name: flowIn;
    animation-duration: calc(0.42s * var(--timeScale));
    animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/* DIAMOND */
div.arrows {
    animation-name: arrowspin;
    animation-duration: calc(0.7s * var(--timeScale));
    animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 
div.quadrants > * {
    animation-name: fade;
    animation-duration: calc(0.3s * var(--timeScale));
    animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 
div.top-icon, div.right-icon, div.left-icon, div.bottom-icon {
    animation-name: nodegrow;
    animation-duration: calc(0.4s * var(--timeScale));
    animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
div.diamond-part {
    clip-path: polygon( -10% 0.37%, 120% 0.37%, 120% 100%, -10% 100%);
    animation-name: diamondBorder;
    animation-duration: calc(0.8s * var(--timeScale));
    animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
    will-change: box-shadow;
}
 
/* MOBILE QUERY */
@media (max-width: 480px ) {
    .anom-bar > .bottom-box::before {
        display:none;
    }
    .anom-bar > .bottom-box {
        box-shadow: 0 -0.5rem 0 0 rgb(var(--black-monochrome, 12, 12, 12))!important;
    }
    div.top-center-box  > * {
        animation-name: bar-mobile;
        animation-duration: calc(0.9s * var(--timeScale));
    }
    div.top-center-box > :nth-child(1) { animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(2) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(3) { animation-delay: calc(0.3s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(4) { animation-delay: calc(0.4s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(5) { animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(6) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }
 
}
 
/*--- Motion Accessibility ---*/
@media screen and (prefers-reduced-motion: reduce) {
    div.anom-bar-container { --timeScale: 0!important; }
}
 
/*-------------------------*/
 
@keyframes divider {
    from { max-width: 0%;  }
    to { max-width: 100%; }
}
 
@keyframes bar {
    from { max-width: 0%; }
    to { max-width: 100%; }
}
@keyframes bar-mobile {
    from { max-height: 0%; }
    to { max-height: 100%; }
}
 
@keyframes bottomup {
    from { top: 100px; }
    to { top: 0; }
}
 
@keyframes expand1 {
    from { opacity: 0; clip-path: inset(0 calc(100% - 0.75rem) 0 0); }
    to { opacity: 1; clip-path: inset(0); }
}
@keyframes iconslide {
    from { opacity: 0; transform: translateX(-5rem); }
    to { opacity: 1; transform: translateX(0); }
}
 
@keyframes expand2 {
    from { opacity: 0; width: 1%; }
    to { opacity: 1; width: calc(100% - 0.25rem); }
}
@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
 
@keyframes flowIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
 
@keyframes arrowspin {
    from { clip-path: circle(0%); transform: rotate(135deg); }
    to { clip-path: circle(75%); transform: rotate(0deg); }
}
@keyframes nodegrow {
    from { transform: scale(0);}
    to {  transform: scale(1);}
}
@keyframes diamondBorder {
    from { box-shadow: -0.5rem -20rem 0 0 rgb(var(--black-monochrome, 12, 12, 12)); }
    to { box-shadow: -0.5rem 0 0 0 rgb(var(--black-monochrome, 12, 12, 12)); }
}
コード
テーマ
ページリビジョン: 5, 最終更新: 11 Sep 2022 15:22
編集 評価 (0) タグ ディスカッション 履歴 ファイル 印刷 サイトツール + オプション
特に明記しない限り、このページのコンテンツは次のライセンスの下にあります: Creative Commons Attribution-ShareAlike 3.0 License