CSS PLACESTYLE

EH TOI LÀ !

Cette page est utilisée en interne par le Wiki SCP,

MERCI DE NE PAS MODIFIER CETTE PAGE
SANS LA PERMISSION DU STAFF.

placeholderword.png

.

Qu'est-ce que c'est ?

Voici le CSS Placestyle : un dérivé du Thème Pénombre d'EstrellaYoshteEstrellaYoshte créé par Placeholder McDPlaceholder McD destiné à être utilisé dans les articles de l'auteur éponyme. Ce thème a été conçu pour être facilement mis à jour et appliqué à un large éventail de travaux. Fondamentalement, c'est Pénombre, moins quelques trucs que je ne voulais pas, plus quelques trucs que j'aime du CSS Blankstyle de HarryBlankHarryBlank, plus quelques fonctionnalités supplémentaires !

Comment l'utiliser

Pour utiliser ce thème, copiez cette syntaxe en haut de votre page :

[[include :fondationscp:theme:placestyle]]

Notez que ce thème comprend les éléments suivants :

Lorsque vous utilisez ce thème avec le module de crédit, intégrez le module dans une [[div]] afin que l'apparition du volet d'information ne soit pas retardée par le module de fondu.

Ce thème reprend du code provenant de PeppersGhostPeppersGhost et son Image Block Peppo et d'EstrellaYoshte pour centrer les images par défaut et les blocs d'images de sorte qu'ils apparaissent de manière plus esthétique sur les petits écrans (sur mobile, en gros). La quasi-totalité du code de ce thème est dérivé du Thème Pénombre.

Merci à CroquemboucheCroquembouche, EstrellaYoshteEstrellaYoshte et NagirosNagiros pour avoir créé ensemble la plupart du code qui est inclus dans ce thème.

Le cellule de tableau ci-dessus se trouve dans un bloc latéral classique. Les blocs latéraux peuvent être rattachés à des sections spécifiques du texte via la div limit. Si vous faites défiler le code de cette page, vous remarquerez que le bloc latéral ne dépasse pas le titre CODE SOURCE.

Les principales différences entre le CSS PLACESTYLE et Pénombre sont les suivantes :

  • la police du corps de la page (Verdana) est la même que celle de Sigma-9
  • la police de l'entête (BauhausLTDemi) est la même que celle du Blankstyle
  • les blocs d'image simplifiés ressemblent à ceux de Sigma-9
  • les tableaux ont un marge intérieure (sauf ceux qui se trouvent dans les blocs latéraux) comme sur le Blankstyle
  • les entêtes des tableaux sont colorées selon la variable accentColor
  • la div tableb sépare les cellules (et les légendes des images !) au sein des tableaux comme sur le Blankstyle
  • les blocs latéraux ont un fond transparent comme sur le Blankstyle
  • le span bt colore (selon la variable accentColor) et met le texte en gras comme sur le Thème Ad Astra de NatVoltaicNatVoltaic et stormbreathstormbreath (la couleur est en fait légèrement plus claire que celle de l'accentColor utilisée pour plus de lisibilité)
  • le bouton pour afficher/cacher le menu latéral est carré
  • Les notes de bas de page améliorées s'adaptent automatiquement à la couleur de la variable accentColor
  • Les collabsibles sont plus fantaisistes et leur affichage lorsqu'ils sont définis sur hideLocation="both" est plus intuitif

EXEMPLES

Les notes de mise à jour sont disponibles dans le fil de discussion de la page originale.

CODE SOURCE :

/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#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;
    }
}
:root {
    --posX: calc(50% - 358px - 12rem);
}
 
/*--- Footnote Auto-counter --*/
#page-content {
    counter-reset: megacount;
}
 
/*--- Footnote Superscript Number --*/
.fnnum {
    display: inline-block;
    text-indent: calc(-1% - 0.1em);
    overflow: hidden;
    line-height: 83%;
    text-decoration: none;
    font-weight: bold;
    font-style: initial;
    color: transparent;
    position: relative; top: -0.25em; font-size: 82%;
    padding: .15em calc(.21em - 0.4px) .12em calc(.11em - 1px);
    margin-left: -0.06em;
    margin-right: -0.25em;
    counter-increment: megacount;
    user-select: none;
}
.fnnum::after {
    content: "" counter(megacount);
    color: var(--fnColor, #E6283C);
}
.fnnum:hover {
    text-decoration: none;
    cursor: pointer;
    background-color: var(--fnColor, #E6283C);
}
.fnnum:hover::after { color: white; }
 
/*--- Footnote Content Wrapper --*/
.fncon {
    position: absolute;
    right: calc(var(--posX) + 80px);
    line-height: 1.2;
    padding: 0.82rem;
    width: 10.3rem;
    background: white;
    border: 2px solid black;
    font-weight: initial;
    font-style: initial;
    text-align: initial;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s linear, right 0.3s cubic-bezier(.08,.72,.5,.94);
    z-index: 9;
}
.fnnum:hover + .fncon {
    opacity: 1;
    right: var(--posX);
}
.fncon::before {
    position: absolute;
    top: 0; left: 0;
    transform: translateX(-52%) translateY(-55%) scale(1.15);
    background-color: var(--fnColor, #E6283C);
    color: white;
    content: counter(megacount);
    font-size: initial;
    font-weight: bold;
    font-style: initial;
    padding-left: 0.32em; padding-right: 0.32em;
    padding-top: 0.18rem; padding-bottom: 0.08rem;
}
 
/*--- Mobile Query --*/
@media only screen and (max-width: 1279px) {
    .fncon {
        position: fixed;
        bottom: 1.3rem;
        left: calc(11% - 50px);
        width: 70%;
        transition: opacity 0.15s linear, left 0.3s cubic-bezier(.08,.72,.5,.94);
    }
    .fnnum:hover + .fncon {
        left: 11%;
     }
}
CODE
thème
révision de page: 9, édité la dernière fois: 17 Oct 2021 14:04
Éditer Voter (0) Étiquettes Discuter Historique Fichiers Imprimer Outils du site + Options
Sauf mention contraire, le contenu de cette page est protégé par la licence Creative Commons Attribution-ShareAlike 3.0 License