PLACESTYLE CSS
PLACESTYLE CSS
Přeloženo uživatelem: ModularModular
VYTVOŘENO DNE: 08 May 2021 11:52

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.

placeholderword.png

.

What Is This?

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!

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.


How to Use

To use this theme, copy this syntax onto the top of your page:

[[include :scp-wiki: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.

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.


The main differences between PLACESTYLE CSS and Penumbra are:

  • body font (Verdana) matches Sigma-9
  • header font ('Josefin Sans', BauhausLTDemi) 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.


Patch notes can be found in the discussion thread.


SOURCE CODE:

/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
/* This should fix the open-menu button in mobile view */
#top-bar div.open-menu a {
background-size: 0 !important;
}
 
#top-bar .open-menu a {
        position: fixed;
        top: 0.5em;
        left: 0.5em;
        z-index: 5;
        font-family: 'Nanum Gothic', san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
}
 
@media (min-width: 768px) {
 
    .mobile-top-bar, #top-bar .open-menu {
        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!important;
        position: fixed;
        top: 0;
        left: -19em;
        width: 17em;
        height: 100%;
        overflow-y: auto;
        z-index: 10;
        padding: 0.3em 0.675em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.5s ease-in-out;
    }
 
    #side-bar:target {
        display: block;
        left: 0;
        width: 17em;
        margin: 0;
        z-index: 10;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
    }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    .close-menu {
        margin-left: 19em;
        opacity: 0;
    }
}
Není-li uvedeno jinak, obsah této stránky je pod licencí Creative Commons Attribution-ShareAlike 3.0 License