Thème de la berge de rivière

EH TOI LÀ !

Cette page est utilisée pour le fonctionnement du site,

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


Ceci est le thème Berge de Rivière. Pour utiliser ce thème sur votre article, copiez le code suivant en haut du code de votre page :

[[include component:river-bank-theme]]

Tous les articles postés sur le site doivent utiliser le code du dessus, mais il ne marchera pas sur votre page sandbox ! Pour cela, il vous faudra utiliser celui-ci :

[[include :fondationscp:component:river-bank-theme]]


logo-scp.svg

Image d'exemple.

Texte avec une note de bas de page1

Premier Titre

Premier Titre

Second Titre

Premier Titre

Second Titre

Troisième Titre

Premier Titre

Second Titre

Troisième Titre

Quatrième Titre

Premier Titre

Second Titre

Troisième Titre

Quatrième Titre

Cinquième Titre

Premier Titre

Second Titre

Troisième Titre

Quatrième Titre

Cinquième Titre
Sixième Titre

Ceci est un onglet.

Ceci est un bloc de citation faisable en mettant un chevron ">" suivi d'un espace au début de chaque ligne.
Plus de texte


C'est un trait horizontal

Blocs de citation imbriqués

Titre Titre Titre
Contenu Contenu Contenu
Contenu Longue cellule
Très longue cellule

Ce thème permet aussi d'utiliser des éléments personnalisés que vous pouvez utiliser comme ceci :

Les en-têtes animés peuvent être créés en ajoutant le code ci-dessous :

[[module CSS]]
:root{
--river-text-content: "CONTENU À INSÉRER ICI";
}
[[/module]]
[[=]]
[[div_ class="rivertext"]]
+ CONTENU À INSÉRER ICI
[[/div]]
[[/=]]

Le même contenu devrait être ajouté à la fois dans la variable —river-text-content et dans la div "rivertext". Pensez à ajouter le symbole "+ " avec l'espace avant le contenu à l'intérieur de la div "rivertext"' et les guillemets autour du contenu dans la variable —river-text-content variable. Ce texte peut être utilisé plusieurs fois sur la page, mais un seul message donné peut s'afficher. Si ça plante, vous avez sans doute tapé un truc trop long.

Ce qui donne :

THÈME BERGE DE RIVIÈRE

Si vous placez un délimiteur "-----" à l'intérieur d'une div "fancyhr", cela donne ceci :

[[div class="fancyhr"]]
-----
[[/div]]


Vous pouvez également enclore n'importe quel élément dans une bordure spéciale avec la classe "fancyborder" :

[[div_ class="fancyborder"]]
Texte
[[/div]]
Texte

La police principale et des petits titres est Lato.
La police des grands titres est Amatic SC.
la police de l'interface est Dosis.
La police de l'en-tête et du texte animé est Yanone Kaffeesatz.


/* Thème de la berge de la rivière par IronShears
* Thème Wikidot 2022
*    Basé sur le thème Dust Jacket par Woedenaz et le thème Black Highlighter par Woedenaz et Croquembouche
* Image, texture de rivière et logo d'en-tête par IronShears, publiés sous licence CC-BY-SA 3.0
* Texture du Fancy Border et de Fancy hr par Stygian Blue, editée par IronShears, publiée sous licence CC-BY-SA 3.0
* Icône par Stygian Blue, publié sous licence CC-BY-SA 3.0
*   */
 
/*Importation de polices*/
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Dosis:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap');
 
/*Importation du thème Dust Jacket*/
@import url("https://wanderers-library.wikidot.com/component:theme/code/1");
:root{
 
/*En-tête*/
--gold-foil: linear-gradient( rgb(var(--dark-accent)), rgb(var(--gray-monochrome)));
--gradient-header: url("http://fondationscp.wdfiles.com/local--files/component%3Ariver-bank-theme/riverheader.gif");
--logo-image: url("http://fondationscp.wdfiles.com/local--files/component%3Ariver-bank-theme/LANTERN_PROJECT.png");
 
/* Couleurs du thème */
    --white-monochrome: 168, 188, 185;
/*offwhite-greenish page color*/
 
    --light-pale-gray-monochrome: 76, 131, 161;
    /* off-white paper edge color */
 
    --gray-monochrome: 76, 131, 161;
    /* light-blue*/
 
    --dark-gray-monochrome: 23, 34, 58;
    /* black*/
 
    --light-gray-monochrome: 48, 80, 49;
    /* dark green*/
 
    --bright-accent: 119, 141, 118;
    /* light green*/
 
    --dark-accent: 23, 34, 58;
    /* black*/
 
    --alt-accent:  237, 220, 183;
    --very-light-gray-monochrome: var(--white-monochrome);
    --medium-accent: var(--bright-accent);
--swatch-menubg-color: var(--light-gray-monochrome);
--swatch-text-tertiary-color: var(--dark-accent);
--swatch-secondary-color: var(--alt-accent);
    --black-monochrome: var(--dark-accent);
-login-myaccount-hover-bg-color: var(--bright-accent);
--rating-module-text-color: var(--alt-accent);
--link-color: var(--light-gray-monochrome);
--rating-module-button-plus-color: var(--white-monochrome);
--rating-module-button-negative-color: var(--dark-gray-monochrome);
--rating-module-button-cancel-color: var(--gray-monochrome);
--rating-module-button-credit-color: var(--swatch-secondary-color);
 
/*Rab*/
--river-text-content: "THÈME BERGE DE RIVIÈRE";
--river-texture: url('http://fondationscp.wdfiles.com/local--files/component%3Ariver-bank-theme/waves.png');
--river-texture-trans: url('http://fondationscp.wdfiles.com/local--files/component%3Ariver-bank-theme/wavestransleft.png');
--river-texture-trans-left: url('http://fondationscp.wdfiles.com/local--files/component%3Ariver-bank-theme/wavestransright.png');
--fancy-hr: url("http://fondationscp.wdfiles.com/local--files/component%3Ariver-bank-theme/riverhr.png");
--fancy-border: url("http://fondationscp.wdfiles.com/local--files/component%3Ariver-bank-theme/riverborder.png");
 
/* Polices */
--body-font: 'Lato', sans-serif;
--title-font: 'Dosis', sans-serif;
--UI-font: 'Dosis', sans-serif;
}
/*TRUCS POUR LE CORPS DE LA PAGE*/
 
#page-content a{
font-weight: bold;
 text-decoration: underline;
}
 
body{
background-color: rgb(var(--white-monochrome));
}
 
blockquote, .blockquote, div.blockquote, [class*="blockquote"] {
  border-style: dashed;
  border-radius: 10px;
  background-color: rgb(var(--very-light-gray-monochrome));
}
 
.fancyborder{
border-image-source: var(--fancy-border);
border-image-slice: 300;
  border-image-repeat: round;
}
 
.fancyhr hr{
border-image-source: var(--fancy-hr);
border-top: 4vw solid transparent;
}
 
div.page-watch-options a, div.page-watch-options a:visited {
  --hover-link-color: red;
}
 
/*en-tête*/
div#extra-div-1 {
    background: var(--gradient-header);
    background-repeat: repeat;
    background-position: left;
    background-size: auto 100%;
}
 
#login-status #account-options {
  background-image: none;
  background-color: rgb(var(--black-monochrome));
}
 
#header{
--login-username-color: var(--alt-accent);
--login-myaccount-color: var(--alt-accent);
}
 
#login-status {
color: rgb(var(--black-monochrome));
}
#login-status #account-topbutton {
background-color: rgb(var(--alt-accent));
}
 
#header h1 a {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 200%;
}
 
#header h1 a, #header h1 a::before, #header h1 a::after {
  color: rgb(var(--white-monochrome));
}
 
#header h1 a::before {
  text-shadow: black 0.125rem 0rem 0, black  0.0675rem 0.1052rem 0, black  -0.052rem 0.1137rem 0, black  -0.1237rem 0.0176rem 0, black  -0.0817rem -0.0946rem 0, black  0.0355rem -0.1199rem 0, black  0.12rem -0.0349rem 0;
}
 
#header h1 a::after {
  background-repeat: repeat-x;
  background-position: center;
background-size: 6rem;
    background-image: none;
  animation: wave 50s linear infinite;
}
 
/*Suppression du motif de feuille d'or*/
#page-title::before,
.meta-title::before,
#page-title::after,
.meta-title::after {
    background-image: var(--gold-foil);
}
 
hr {
    background: var(--gold-foil);
}
 
#content-wrap {
background-image: var(--river-texture);
background-repeat: repeat-x;
background-position: left bottom;
background-size: 100px;
  animation: wave-bottom 50s linear infinite;
}
 
/*Animations*/
 
@keyframes wave{
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -99% 0;
  }
}
 
@keyframes wave-bottom{
  0% {
    background-position-x: 100%;
  }
  100% {
    background-position-x: -99%;
  }
}
@keyframes wave-bottom-left{
  0% {
    background-position-x: -99%;
  }
  100% {
    background-position-x: 100%;
  }
}
 
/*titre "rivière"*/
div.rivertext {
    height: 12vw;
}
 
div.rivertext h1 {
font-family: 'Yanone Kaffeesatz', sans-serif !important;
font-size: 10vw !important;
}
 
div.rivertext h1::before {
text-shadow: black 0.125rem 0rem 0, black 0.0675rem 0.1052rem 0, black -0.052rem 0.1137rem 0, black -0.1237rem 0.0176rem 0, black -0.0817rem -0.0946rem 0, black 0.0355rem -0.1199rem 0, black 0.12rem -0.0349rem 0;
content: var(--river-text-content);
}
 
div.rivertext h1::after {
  background-repeat: repeat-x;
  background-position: center bottom;
background-size: 10vw;
    background-image: var(--river-texture);
  animation: wave 50s linear infinite;
 -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
content: var(--river-text-content);
}
 
div.rivertext h1,
div.rivertext h1::before,
div.rivertext h1::after {
position: absolute;
left: 0;
right: 0;
}
 
/*style de la page*/
 
#page-content h1{
font-family: 'Amatic SC', cursive;
font-size: 500%;
margin-bottom: -20px;
}
#page-content h2{
font-family: 'Amatic SC', cursive;
font-size: 400%;
margin-bottom: -15px;
}
#page-content h3{
font-family: 'Amatic SC', cursive;
font-size: 300%;
margin-bottom: -12px;px;
}
 
/*module de vote en bas de page*/
#who-rated-page-area {
  background-color: rgb(var(--white-monochrome));
  border-radius: 10px;
  padding: 9px;
  border-style: dashed;
  border-color: rgb(var(--bright-accent));
}
 
/*bas de page*/
 
#footer a {
  background-color: rgb(var(--black-monochrome));
border-radius: 2px;
  margin-left: 10px;
  margin-right: 10px;
background-image: none;
}
 
#license-area a, #license-area a:visited {
pointer-events:auto;
  background-color: rgb(var(--black-monochrome));
border-radius: 2px;
  margin-left: 10px;
  margin-right: 10px;
}
#license-area a:hover{
color: rgb(var(--black-monochrome));
}
 
#footer {
  --footer-bg-color: transparent;
  --footer-text-color: rgb(var(--black-monochrome));
  --footer-link-color: var(--swatch-text-secondary-color);
  --footer-link-hover-color: var(--swatch-primary-darkest);
font-size: 1rem;
height: 100px;
background-image: var(--river-texture-trans-left);
background-position-y: center;
background-size: 100px;
z-index: 2;
position: relative;
margin-top: -60px;
  animation: wave-bottom-left 50s linear infinite;
pointer-events: auto;
padding-bottom: 30px;
}
 
#license-area{
font-size: 1rem;
color: rgb(var(--black-monochrome));
pointer-events:  none;
background-color: transparent;
height: 100px;
background-image: var(--river-texture-trans);
background-position-y: center;
background-size: 100px;
z-index: 3;
position: relative;
margin-top: -60px;
  animation: wave-bottom 50s linear infinite;
padding-top: 30px;
}
Sauf mention contraire, le contenu de cette page est protégé par la licence Creative Commons Attribution-ShareAlike 3.0 License