« MediaWiki:Common.css » : différence entre les versions
De gahan
Aller à la navigationAller à la recherche
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 847 : | Ligne 847 : | ||
.paper2 { | .paper2 { | ||
background-color: #f8f5de; | background-color: #f8f5de; | ||
background-image: linear-gradient(to right, #f1f0e9 40%, #f1f0e9 45%, #bbb593 50%, #f1f0e9 55%, #f1f0e9 | background-image: linear-gradient(to right, #f1f0e9 40%, #f1f0e9 45%, #bbb593 50%, #f1f0e9 55%, #e4e1d4 60%, #f1f0e9 70%); | ||
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; | box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; | ||
} | } | ||
Version du 5 juin 2024 à 12:33
/*====================*/
/* VARIABLES GLOBALES */
/* ET */
/* BASES */
/*====================*/
:root {
--color_main: #661810; /* Couleur général du site - Bordeaux */
--color_main2: #923F31; /* Couleur général +clair */
--color_main3: #CAADA8; /* Couleur général ++clair */
--color_main_dark: #47100B; /* Variation dark du color-main */
--color_gradient1: #496D27; /* ok */
--color_gradient2: #9F4A3B; /* ok */
--color_gradient3: #448086; /* ok */
--color_gradient4: #00BA97; /* pas testé */
--color_gradient5: #00DBF2; /* pas testé */
--color_home_h2: #4D1712;
--color_main_grey1: #F5F5F5; /* Gris clair+ */
--color_main_grey2: #EAEAEA; /* Gris clair */
--color_main_grey3: #E0E0E0; /* Gris moyen - Fond du site */
--color_main_grey4: #D8D8D8; /* Gris foncé */
--color_main_grey5: #CACACA; /* Gris foncé+ */
--color_a: #0752CA; /* Couleur des liens hypertexte (save #0858D9) */
--a_link_title_icon: "⮊"; /* Flèches des liens de titre */
--a_link_title_color: #002C75; /* Couleurs des flèches (save #002C75) */
--fs: 12px; /* Taille de police de base */
--ff: Calibri, sans-serif; /* Famille de police de base */
--fs_XXS: 85%; --fs_XS: 90%; --fs_S: 95%; --fs_M: 100%; --fs_L: 105%; --fs_XL: 110%; --fs_XXL: 115%; /* Taille de police modifiée */
--h1_size: 230%; --h2_size: 210%; --h3_size: 170%; --h4_size: 140%; --h5_size: 125%; --h6_size: 110%;
--content_marg_left: 135px;
--content_marg_right: 195px;
--menu_marg_top: 140px;
--box_shadow_menu: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
--ibox_size: 270px;
}
/*====================*/
/* BODY et BASE */
/*====================*/
body {
background-image: none;
background-color: var(--color_main_grey3);
font-family: var(--ff);
font-size: var(--fs);
}
#mw-page-base { /* Pour bandeau du haut de Vector */
background-image: none;
background-color: var(--color_main_grey3);
}
.mw-body {line-height: 1.4}
.mw-body h1, .mw-body-content h1, .mw-body-content h2 {font-family: var(--ff);}
.vector-body {font-size: 130%;} /* Correction pour Vector (mode déconnecté) */
/*====================*/
/* MAIN DU SITE */
/*====================*/
#content {
margin-left: var(--content_marg_left);
margin-right: var(--content_marg_right);
text-align: justify;
border-right: 1px solid #aaaaaa;
}
#footer, .mw-footer {text-align: center;}
/*====================*/
/* HEADER */
/*====================*/
h1, h2, h3, h4, h5, h6, .mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 {
font-variant-caps: small-caps;
font-weight: bold;
color: var(--color_main);
padding-top: 0.1em;
padding-bottom: 0.1em;
padding-left: 0.2em;
margin-top: 0.5em;
line-height: 1em;
margin-bottom: 0.5em;
}
h1, .mw-body h1 {
font-size: var(--h1_size);
background-color: var(--color_main);
/* border-radius: 5px 30px 5px 30px / 5px 20px 5px 20px; */
border-radius: 15px 15px 15px 15px;
color: white;
padding-left: 0.5em;
box-shadow: rgba(0, 0, 0, 0.22) 0px 10px 10px;
line-height: 1.3em;
}
h2, .mw-body h2 {
font-size: var(--h2_size);
box-shadow: 0px 13px 10px -5px var(--color_main_grey4);
border-bottom: 3px solid var(--color_main);
margin-top: 0.7em;
}
.page-Accueil h2 {
color: var(--color_home_h2);
border: 1px solid var(--color_home_h2);
border-bottom: 3px solid var(--color_home_h2);
border-right: 3px solid var(--color_home_h2);
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.2) 1.95px 1.95px 2.6px;
background-color: var(--color_main_grey1);
line-height: 1.2em;
padding-left: 0.5em;
}
h3, .mw-body h3 {
font-size: var(--h3_size);
border-bottom: 2px solid var(--color_main2);
/* border-image: linear-gradient(to right, var(--color_main), var(--color_main3)) 1; */
}
h4, .mw-body h4 {
font-size: var(--h4_size);
color: black;
border-bottom: 1px solid var(--color_main2);
/* border-image: linear-gradient(to right, var(--color_main), white) 1; */
}
h5, .mw-body h5 {font-size: var(--h5_size); color: black;}
h6, .mw-body h6 {font-size: var(--h6_size); color: black;}
/* Ajouter une icône après les titres contenant des liens, sauf pour les liens "MODIFIER" */
h1 a:not(.mw-editsection a), h2 a:not(.mw-editsection a), h3 a:not(.mw-editsection a),
h4 a:not(.mw-editsection a), h5 a:not(.mw-editsection a), h6 a:not(.mw-editsection a),
.mw-body h1 a:not(.mw-editsection a), .mw-body h2 a:not(.mw-editsection a),
.mw-body h3 a:not(.mw-editsection a), .mw-body h4 a:not(.mw-editsection a),
.mw-body h5 a:not(.mw-editsection a), .mw-body h6 a:not(.mw-editsection a) {
color: inherit; /* Conserver la couleur du titre */
text-decoration: none; /* Supprimer le soulignement par défaut des liens */
position: relative; /* Nécessaire pour le pseudo-élément */
}
h1 a:not(.mw-editsection a)::after, h2 a:not(.mw-editsection a)::after, h3 a:not(.mw-editsection a)::after,
h4 a:not(.mw-editsection a)::after, h5 a:not(.mw-editsection a)::after, h6 a:not(.mw-editsection a)::after,
.mw-body h1 a:not(.mw-editsection a)::after, .mw-body h2 a:not(.mw-editsection a)::after,
.mw-body h3 a:not(.mw-editsection a)::after, .mw-body h4 a:not(.mw-editsection a)::after,
.mw-body h5 a:not(.mw-editsection a)::after, .mw-body h6 a:not(.mw-editsection a)::after {
font-family: -apple-system;
vertical-align: middle;
content: var(--a_link_title_icon);
font-size: 1em;
color: var(--a_link_title_color);
margin-left: 0.4em;
}
/*====================*/
/* HEADER non-header */
/*====================*/
.nh2, .nh3, .nh4, .nh5, .nh6 {
font-variant-caps: small-caps;
font-weight: bold;
color: var(--color_main);
padding-top: 0.1em;
padding-bottom: 0.1em;
margin-top: 0.5em;
line-height: 1em;
}
.nh2 {font-size: var(--h2_size);} .nh3 {font-size: var(--h3_size);}
.nh4 {font-size: var(--h4_size); color: black;} .nh5 {font-size: var(--h5_size); color: black;} .nh6 {font-size: var(--h6_size); color: black;}
/*====================*/
/* SIDEBAR */
/*====================*/
#sidebar, #mw-panel {
position: fixed;
top: var(--menu_marg_top);
left: 0px;
/* border: 1px solid #a2a9b1; */
box-shadow: var(--box_shadow_menu);;
border-radius: 0px 10px 10px 0px;
padding: 6px 0px 6px 0px;
}
#sidebar a, {font-size: var(--fs_S);}
body.skin--responsive #sidebar .pBody {
background-color: transparent;
border: none;
}
/* Taille du menu pour Vector */
.vector-menu-portal .vector-menu-content li {font-size: var(--fs_M);}
.vector-user-menu-legacy li {font-size: var(--fs_M);}
.vector-menu-tabs li a {font-size: var(--fs_M);}
.vector-menu-heading {font-size: var(--fs_M);}
.vector-menu-heading-label {font-size: 150%;}
#left-navigation {margin-left: 13em;}
#p-search, #sidebar .portlet {width: calc(var(--content_marg_left) - 5px);}
#p-search h3, #p-NAVIGATION h3, #p-tb h3, #p-OUTILS_SPECIAUX h3 {font-weight: bold; border: none; box-shadow: none; font-size: var(--fs_XL);}
#p-search ul, #p-NAVIGATION ul, #p-tb ul, #p-OUTILS_SPECIAUX ul {margin: 0.25em;}
#p-search input[type="search"] {
font-family: var(--ff);
width: 9.1em;
font-size: var(--fs_XS);
}
#p-search input[type="submit"] { /* Style du bouton de recherche */
font-family: var(--ff);
background-color: var(--color_main2);
color: #fff;
border: none;
border-radius: 4px;
padding: 5px 10px;
cursor: pointer;
font-size: var(--fs_XS);
box-shadow: rgba(0, 0, 0, 0.20) 0px 5px 5px;
}
#p-search input[type="submit"] {display: none;} /* Supprime les boutons de recherche inutiles */
#p-search-label {display: none;} /* Supprime le titre du bouton Rechercher */
#sidebar ul {list-style-type: "●";}
#sidebar ul li {padding-left: 0.1em;}
#sidebar li::marker {color: #6F6F6F; font-size: 100%;}
/*====================*/
/* SOMMAIRE (TOC) */
/*====================*/
#toc, #toc * {text-align: left;}
#toc ul ul {margin-left: 1em; font-size: 95%; font-weight: normal;}
#toc {
font-size: var(--fs_S);
line-height: 1.3em;
border: none;
border-radius: 10px 0px 0px 10px;
box-shadow: var(--box_shadow_menu);
position: fixed;
top: var(--menu_marg_top);
right: 0;
max-height: calc(90vh - 150px); /* Ajustez cette valeur selon vos besoins */
overflow-y: auto;
background-color: var(--color_main_grey3); /* avant c'était #E8E8E8 */
width: calc(var(--content_marg_right) - 20px);
}
#toc ul {margin: 0.3em 0;}
/* #toc > ul {font-weight: bold;} H2 de toc en gras*/
#toc .toctitle {display: none;} /* Supprime le titre du Sommaire */
#toc .tocnumber { padding-right: 0.3em;}
/*====================*/
/* HORIZONTAL LIST */
/*====================*/
.hlist dd, .hlist dt, .hlist li, .hlist ul {
margin: 0;
display: inline;
}
.hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul, .hlist ol dl, .hlist ol ol, .hlist ol ul, .hlist ul dl, .hlist ul ol, .hlist ul ul {
display: inline;
}
.hlist dd:not(:last-child):after, .hlist li:not(:last-child):after { /* Ajout d'un • après chaque élément sauf le dernier */
content: " • ";
color: var(--color_main);
}
/*====================*/
/* FONT SIZE */
/*====================*/
.fontsize_XXS {font-size: var(--fs_XXS);}
.fontsize_XS {font-size: var(--fs_XS);}
.fontsize_S {font-size: var(--fs_S);}
.fontsize_M {font-size: var(--fs_M);}
.fontsize_L {font-size: var(--fs_L);}
.fontsize_XL {font-size: var(--fs_XL);}
.fontsize_XXL {font-size: var(--fs_XXL);}
.fontsize_XXS, .fontsize_XS, .fontsize_S, .fontsize_M, .fontsize_L, .fontsize_XL, .fontsize_XXL {display: inline-block;}
/*====================*/
/* LIEN HYPERTEXTE */
/*====================*/
a {position: relative;}
a:hover {text-decoration: none;}
a::after:not(h2 a, h3 a, h4 a, h5 a, h6 a,
.mw-body h2 a, .mw-body h3 a, .mw-body h4 a, .mw-body h5 a, .mw-body h6 a) { /* la liste de not permet d'exclure les titres qui sont des liens */
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background-color: var(--color_main);
transition: width 0.5s ease-in-out;
}
a:hover::after {width: 100%;}
a, a:visited {color: var(--color_a);}
a.new, a.new:visited {color: #cc2200;}
a:has(img):hover::after {width: 0;} /* Enlève l'effet de hover pour les liens autour des images */
#p-logo a:hover::after {width: 0%;} /* Enlève l'effet de hover sur le logo du site */
/*====================*/
/* FIL D'ARIANE */
/*====================*/
.breadcrumb {
display: inline-block;
/* background: linear-gradient(to right, var(--color_main3), white); */
/* border-radius: 3px 0px 0px 15px / 3px 0px 0px 10px; */
border-width: 0px 0px 2px 0px;
border-style: none none solid none;
border-image: linear-gradient(to right, var(--color_main), white) 1;
margin-bottom : 1em;
}
.breadcrumb a {
margin-right: 0.5em; /* Ajoute de l'espace après chaque lien */
margin-left: 0.1em;
}
.post-it {
float: right;
background-color: #E0DA15;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
transform: rotate(-8deg);
padding: 1.5em;
font-family: "Segoe Print";
text-align: center;
}
/*====================*/
/* INFOBOX */
/*====================*/
.infobox {
display: flex;
flex-wrap: wrap;
width: var(--ibox_size);
font-family: Calibri;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Ajoute une ombre */
float: right;
background-color :#EEEEEE;
font-size: 80%;
vertical-align: top;
text-align: left;
line-height: 1.7;
margin: 0px 0px 15px 15px;
}
.infobox-title {
width: 100%;
font-weight: bold;
background-color: var(--color_main);
color: white;
font-size: 115%;
text-align: center;
}
.infobox-img {
width: var(--ibox_size);
height: auto;
}
.infobox-30 {width: 28%; padding:0 0 0 2%; font-weight: bold;}
.infobox-70 {width: 65%; padding:0 0 0 2%;}
/*====================*/
/* QUOTE */
/*====================*/
q {font-style: italic;}
p {margin: 0; line-height: 1.4;}
/*====================*/
/* PUCES */
/*====================*/
.mw-content-ltr ul {margin: 0.3em 0 0 1.1em;}
ul {
list-style-type: none;
list-style-image: none;
list-style-type: "\002B27";
list-style-position: outside;
line-height: 1.3em;
/* margin: 0.3em; */
}
ul ul {
list-style-type: none;
list-style-image: none;
list-style-type: "\002B28";
}
ul ul ul {
list-style-type: none;
list-style-image: none;
list-style-type: "\002B2A";
}
li::marker {color: var(--color_main); font-size: 90%;}
li {padding-left: 0.2em}
/*====================*/
/* mw-collapsible A REFAIRE */
/*====================*/
.mw-collapsible span.mw-collapsible-toggle {
float:left;
margin-left:0;
margin-right:1em;
background-color: #FAFAFA;
}
.mw-collapsible-content {
padding-left: 10px;
padding-top: 1.5em;
}
/*====================*/
/* PAPER */
/*====================*/
.paper {
background-color: #f8f5de;
background-image: linear-gradient(to right, rgba(255,210,0,0.4), rgba(200, 160, 0, 0.1) 15%, rgba(0,0,0,0) 35%, rgba(200, 160, 0, 0.1) 65%);
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.paper-titre {
padding: 1em 1.75em 0em 1.75em;
color: var(--color_main);
font-family: "Old English Text MT";
font-size: 200%;
}
.paper-titre [class^="image-"] {
margin-bottom: 0;
}
.paper-text {
padding: 3em;
color: rgba(0,0,0,0.85);
letter-spacing: 0.03em;
font-family: Geranium;
font-size: var(--fs_XS);
}
.paper-text::first-letter {
color: var(--color_main);
font-family: "Old English Text MT";
font-size: 4em;
line-height: 1;
float: left;
margin-right: 0;
}
/*====================*/
/* BLOCS */
/*====================*/
.section-title {
/* box-shadow: rgba(0, 0, 0, 0.25) 0px 12px 14px, rgba(0, 0, 0, 0.22) 0px 10px 10px; */
box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 15px;
padding: 0.2em 1em;
font-size: 150%;
font-weight: bold;
font-variant-caps: small-caps;
color: #FFFFFF;
background-color: var(--color_main);
/* border-style: solid; border-width: 1px; border-color: #D9D9D9; */
border-radius: 5px 30px 0px 0px;
}
.section-content {
/* box-shadow: rgba(0, 0, 0, 0.25) 0px 12px 14px, rgba(0, 0, 0, 0.22) 0px 10px 10px; */
box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 15px;
padding: 1em;
background-color: var(--color_main_grey2);
/* border-style: solid; border-width: 0 1px 1px 1px; border-color: #D9D9D9; */
border-radius: 0px 0px 5px 5px;
}
/* Section par défaut avec 1% d'espace entre elles. Adapté lorsqu'il s'agit de textes uniquement sans box. */
.section-100 {width: 98%; padding: 10px 1%;}
.section-90 {float: left; width: 88%; padding: 10px 1%;}
.section-80 {float: left; width: 78%; padding: 10px 1%;}
.section-70 {float: left; width: 68%; padding: 10px 1%;}
.section-60 {float: left; width: 58%; padding: 10px 1%;}
.section-50 {float: left; width: 48%; padding: 10px 1%;}
.section-40 {float: left; width: 38%; padding: 10px 1;}
.section-30 {float: left; width: 28%; padding: 10px 1%;}
.section-20 {float: left; width: 18%; padding: 10px 1%;}
.section-10 {float: left; width: 8%; padding: 10px 1%;}
/* Section par défaut avec 0.5% d'espace entre elles. Plus adapté lorsqu'il s'agit de box. */
.sectionb-100 {width: 99%; padding: 10px 0.5%;}
.sectionb-90 {float: left; width: 89%; padding: 10px 0.5%;}
.sectionb-80 {float: left; width: 79%; padding: 10px 0.5%;}
.sectionb-70 {float: left; width: 69%; padding: 10px 0.5%;}
.sectionb-60 {float: left; width: 59%; padding: 10px 0.5%;}
.sectionb-50 {float: left; width: 49%; padding: 10px 0.5%;}
.sectionb-40 {float: left; width: 39%; padding: 10px 0.5%;}
.sectionb-30 {float: left; width: 29%; padding: 10px 0.5%;}
.sectionb-20 {float: left; width: 19%; padding: 10px 0.5%;}
.sectionb-10 {float: left; width: 9%; padding: 10px 0.5%;}
pre,.mw-code {font-size: 11px !important;}
.italique {font-style: italic;}
.Bl-Shad0 {
box-shadow: rgba(0, 0, 0, 0.25) 0px 6px 6px;
hyphens: auto;
text-align: justify;
}
.Bl-Shad0T {
box-shadow: rgba(0, 0, 0, 0.25) 0px 6px 6px;
hyphens: auto;
text-align: justify;
padding: 1em;
}
.Justify {
hyphens: auto;
text-align: justify;
}
.Coll {
hyphens: auto;
text-align: justify;
column-count: 2;
}
.Coll3 {
hyphens: auto;
text-align: justify;
column-count: 3;
}
.Coll4 {
hyphens: auto;
text-align: justify;
column-count: 4;
}
/*====================*/
/* IMG DYNAMIC SIZE */
/*====================*/
.image-10w, .image-20w, .image-30w, .image-40w, .image-50w, .image-60w, .image-70w, .image-80w, .image-90w, .image-100w {
height: auto;
margin: 0 15px 15px 15px;
}
.image-10w {width: 10%;}
.image-20w {width: 20%;}
.image-30w {width: 30%;}
.image-40w {width: 40%;}
.image-50w {width: 50%;}
.image-60w {width: 60%;}
.image-70w {width: 70%;}
.image-80w {width: 80%;}
.image-90w {width: 90%;}
.image-100w {width: 100%; margin: 0 0 15 0;}
/*====================*/
/* LIVRE */
/*====================*/
.livre {
position: relative;
text-align: center;
font-family: "Pristina";
font-weight: bold;
font-size: 150%;
transition: 0.5s;
margin: 0 10px 10px 10px;
}
.livre a {color: #404040;}
.livre-titre {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.livre:hover{transform: rotate(2deg);
}
/*====================*/
/* ZOOM DE CARTE */
/*====================*/
.titrecarte {
text-align: center;
color: var(--color_main);
font-size: 120%;
font-weight: bold;
}
/* .titrecarte::after { content: " =";} */
/* .titrecarte::before { content: "= ";} */
.zoominfo {
font-size: 80%;
/* width: 1024px; */
width: 1200px;
text-align: right;
margin-left: auto;
margin-right: auto;
}
.structure {
position: relative;
margin-left: auto;
margin-right: auto;
/* width: 1024px; */
/* height: 768px; */
width: 1200px;
height: 900px;
display: grid;
grid-template: repeat(11, 1fr)/repeat(11, 1fr);
}
.cell {
/* border: 1px solid gray; */
background-color: transparent;
z-index: 1;
}
.cell:nth-child(n):hover ~ .mapcontent {--zoom: 1.8;} /* Le zoom réel est de la valeur de --zoom + 1 */
.cell:nth-child(1):hover ~ .mapcontent {--posX: 0%; --posY: 0%;}
.cell:nth-child(2):hover ~ .mapcontent {--posX: 10%; --posY: 0%;}
.cell:nth-child(3):hover ~ .mapcontent {--posX: 20%; --posY: 0%;}
.cell:nth-child(4):hover ~ .mapcontent {--posX: 30%; --posY: 0%;}
.cell:nth-child(5):hover ~ .mapcontent {--posX: 40%; --posY: 0%;}
.cell:nth-child(6):hover ~ .mapcontent {--posX: 50%; --posY: 0%;}
.cell:nth-child(7):hover ~ .mapcontent {--posX: 60%; --posY: 0%;}
.cell:nth-child(8):hover ~ .mapcontent {--posX: 70%; --posY: 0%;}
.cell:nth-child(9):hover ~ .mapcontent {--posX: 80%; --posY: 0%;}
.cell:nth-child(10):hover ~ .mapcontent {--posX: 90%; --posY: 0%;}
.cell:nth-child(11):hover ~ .mapcontent {--posX: 100%; --posY: 0%;}
.cell:nth-child(12):hover ~ .mapcontent {--posX: 0%; --posY: 10%;}
.cell:nth-child(13):hover ~ .mapcontent {--posX: 10%; --posY: 10%;}
.cell:nth-child(14):hover ~ .mapcontent {--posX: 20%; --posY: 10%;}
.cell:nth-child(15):hover ~ .mapcontent {--posX: 30%; --posY: 10%;}
.cell:nth-child(16):hover ~ .mapcontent {--posX: 40%; --posY: 10%;}
.cell:nth-child(17):hover ~ .mapcontent {--posX: 50%; --posY: 10%;}
.cell:nth-child(18):hover ~ .mapcontent {--posX: 60%; --posY: 10%;}
.cell:nth-child(19):hover ~ .mapcontent {--posX: 70%; --posY: 10%;}
.cell:nth-child(20):hover ~ .mapcontent {--posX: 80%; --posY: 10%;}
.cell:nth-child(21):hover ~ .mapcontent {--posX: 90%; --posY: 10%;}
.cell:nth-child(22):hover ~ .mapcontent {--posX: 100%; --posY: 10%;}
.cell:nth-child(23):hover ~ .mapcontent {--posX: 0%; --posY: 20%;}
.cell:nth-child(24):hover ~ .mapcontent {--posX: 10%; --posY: 20%;}
.cell:nth-child(25):hover ~ .mapcontent {--posX: 20%; --posY: 20%;}
.cell:nth-child(26):hover ~ .mapcontent {--posX: 30%; --posY: 20%;}
.cell:nth-child(27):hover ~ .mapcontent {--posX: 40%; --posY: 20%;}
.cell:nth-child(28):hover ~ .mapcontent {--posX: 50%; --posY: 20%;}
.cell:nth-child(29):hover ~ .mapcontent {--posX: 60%; --posY: 20%;}
.cell:nth-child(30):hover ~ .mapcontent {--posX: 70%; --posY: 20%;}
.cell:nth-child(31):hover ~ .mapcontent {--posX: 80%; --posY: 20%;}
.cell:nth-child(32):hover ~ .mapcontent {--posX: 90%; --posY: 20%;}
.cell:nth-child(33):hover ~ .mapcontent {--posX: 100%; --posY: 20%;}
.cell:nth-child(34):hover ~ .mapcontent {--posX: 0%; --posY: 30%;}
.cell:nth-child(35):hover ~ .mapcontent {--posX: 10%; --posY: 30%;}
.cell:nth-child(36):hover ~ .mapcontent {--posX: 20%; --posY: 30%;}
.cell:nth-child(37):hover ~ .mapcontent {--posX: 30%; --posY: 30%;}
.cell:nth-child(38):hover ~ .mapcontent {--posX: 40%; --posY: 30%;}
.cell:nth-child(39):hover ~ .mapcontent {--posX: 50%; --posY: 30%;}
.cell:nth-child(40):hover ~ .mapcontent {--posX: 60%; --posY: 30%;}
.cell:nth-child(41):hover ~ .mapcontent {--posX: 70%; --posY: 30%;}
.cell:nth-child(42):hover ~ .mapcontent {--posX: 80%; --posY: 30%;}
.cell:nth-child(43):hover ~ .mapcontent {--posX: 90%; --posY: 30%;}
.cell:nth-child(44):hover ~ .mapcontent {--posX: 100%; --posY: 30%;}
.cell:nth-child(45):hover ~ .mapcontent {--posX: 0%; --posY: 40%;}
.cell:nth-child(46):hover ~ .mapcontent {--posX: 10%; --posY: 40%;}
.cell:nth-child(47):hover ~ .mapcontent {--posX: 20%; --posY: 40%;}
.cell:nth-child(48):hover ~ .mapcontent {--posX: 30%; --posY: 40%;}
.cell:nth-child(49):hover ~ .mapcontent {--posX: 40%; --posY: 40%;}
.cell:nth-child(50):hover ~ .mapcontent {--posX: 50%; --posY: 40%;}
.cell:nth-child(51):hover ~ .mapcontent {--posX: 60%; --posY: 40%;}
.cell:nth-child(52):hover ~ .mapcontent {--posX: 70%; --posY: 40%;}
.cell:nth-child(53):hover ~ .mapcontent {--posX: 80%; --posY: 40%;}
.cell:nth-child(54):hover ~ .mapcontent {--posX: 90%; --posY: 40%;}
.cell:nth-child(55):hover ~ .mapcontent {--posX: 100%; --posY: 40%;}
.cell:nth-child(56):hover ~ .mapcontent {--posX: 0%; --posY: 50%;}
.cell:nth-child(57):hover ~ .mapcontent {--posX: 10%; --posY: 50%;}
.cell:nth-child(58):hover ~ .mapcontent {--posX: 20%; --posY: 50%;}
.cell:nth-child(59):hover ~ .mapcontent {--posX: 30%; --posY: 50%;}
.cell:nth-child(60):hover ~ .mapcontent {--posX: 40%; --posY: 50%;}
.cell:nth-child(61):hover ~ .mapcontent {--posX: 50%; --posY: 50%;}
.cell:nth-child(62):hover ~ .mapcontent {--posX: 60%; --posY: 50%;}
.cell:nth-child(63):hover ~ .mapcontent {--posX: 70%; --posY: 50%;}
.cell:nth-child(64):hover ~ .mapcontent {--posX: 80%; --posY: 50%;}
.cell:nth-child(65):hover ~ .mapcontent {--posX: 90%; --posY: 50%;}
.cell:nth-child(66):hover ~ .mapcontent {--posX: 100%; --posY: 50%;}
.cell:nth-child(67):hover ~ .mapcontent {--posX: 0%; --posY: 60%;}
.cell:nth-child(68):hover ~ .mapcontent {--posX: 10%; --posY: 60%;}
.cell:nth-child(69):hover ~ .mapcontent {--posX: 20%; --posY: 60%;}
.cell:nth-child(70):hover ~ .mapcontent {--posX: 30%; --posY: 60%;}
.cell:nth-child(71):hover ~ .mapcontent {--posX: 40%; --posY: 60%;}
.cell:nth-child(72):hover ~ .mapcontent {--posX: 50%; --posY: 60%;}
.cell:nth-child(73):hover ~ .mapcontent {--posX: 60%; --posY: 60%;}
.cell:nth-child(74):hover ~ .mapcontent {--posX: 70%; --posY: 60%;}
.cell:nth-child(75):hover ~ .mapcontent {--posX: 80%; --posY: 60%;}
.cell:nth-child(76):hover ~ .mapcontent {--posX: 90%; --posY: 60%;}
.cell:nth-child(77):hover ~ .mapcontent {--posX: 100%; --posY: 60%;}
.cell:nth-child(78):hover ~ .mapcontent {--posX: 0%; --posY: 70%;}
.cell:nth-child(79):hover ~ .mapcontent {--posX: 10%; --posY: 70%;}
.cell:nth-child(80):hover ~ .mapcontent {--posX: 20%; --posY: 70%;}
.cell:nth-child(81):hover ~ .mapcontent {--posX: 30%; --posY: 70%;}
.cell:nth-child(82):hover ~ .mapcontent {--posX: 40%; --posY: 70%;}
.cell:nth-child(83):hover ~ .mapcontent {--posX: 50%; --posY: 70%;}
.cell:nth-child(84):hover ~ .mapcontent {--posX: 60%; --posY: 70%;}
.cell:nth-child(85):hover ~ .mapcontent {--posX: 70%; --posY: 70%;}
.cell:nth-child(86):hover ~ .mapcontent {--posX: 80%; --posY: 70%;}
.cell:nth-child(87):hover ~ .mapcontent {--posX: 90%; --posY: 70%;}
.cell:nth-child(88):hover ~ .mapcontent {--posX: 100%; --posY: 70%;}
.cell:nth-child(89):hover ~ .mapcontent {--posX: 0%; --posY: 80%;}
.cell:nth-child(90):hover ~ .mapcontent {--posX: 10%; --posY: 80%;}
.cell:nth-child(91):hover ~ .mapcontent {--posX: 20%; --posY: 80%;}
.cell:nth-child(92):hover ~ .mapcontent {--posX: 30%; --posY: 80%;}
.cell:nth-child(93):hover ~ .mapcontent {--posX: 40%; --posY: 80%;}
.cell:nth-child(94):hover ~ .mapcontent {--posX: 50%; --posY: 80%;}
.cell:nth-child(95):hover ~ .mapcontent {--posX: 60%; --posY: 80%;}
.cell:nth-child(96):hover ~ .mapcontent {--posX: 70%; --posY: 80%;}
.cell:nth-child(97):hover ~ .mapcontent {--posX: 80%; --posY: 80%;}
.cell:nth-child(98):hover ~ .mapcontent {--posX: 90%; --posY: 80%;}
.cell:nth-child(99):hover ~ .mapcontent {--posX: 100%; --posY: 80%;}
.cell:nth-child(100):hover ~ .mapcontent {--posX: 0%; --posY: 90%;}
.cell:nth-child(101):hover ~ .mapcontent {--posX: 10%; --posY: 90%;}
.cell:nth-child(102):hover ~ .mapcontent {--posX: 20%; --posY: 90%;}
.cell:nth-child(103):hover ~ .mapcontent {--posX: 30%; --posY: 90%;}
.cell:nth-child(104):hover ~ .mapcontent {--posX: 40%; --posY: 90%;}
.cell:nth-child(105):hover ~ .mapcontent {--posX: 50%; --posY: 90%;}
.cell:nth-child(106):hover ~ .mapcontent {--posX: 60%; --posY: 90%;}
.cell:nth-child(107):hover ~ .mapcontent {--posX: 70%; --posY: 90%;}
.cell:nth-child(108):hover ~ .mapcontent {--posX: 80%; --posY: 90%;}
.cell:nth-child(109):hover ~ .mapcontent {--posX: 90%; --posY: 90%;}
.cell:nth-child(110):hover ~ .mapcontent {--posX: 100%; --posY: 90%;}
.cell:nth-child(111):hover ~ .mapcontent {--posX: 0%; --posY: 100%;}
.cell:nth-child(112):hover ~ .mapcontent {--posX: 10%; --posY: 100%;}
.cell:nth-child(113):hover ~ .mapcontent {--posX: 20%; --posY: 100%;}
.cell:nth-child(114):hover ~ .mapcontent {--posX: 30%; --posY: 100%;}
.cell:nth-child(115):hover ~ .mapcontent {--posX: 40%; --posY: 100%;}
.cell:nth-child(116):hover ~ .mapcontent {--posX: 50%; --posY: 100%;}
.cell:nth-child(117):hover ~ .mapcontent {--posX: 60%; --posY: 100%;}
.cell:nth-child(118):hover ~ .mapcontent {--posX: 70%; --posY: 100%;}
.cell:nth-child(119):hover ~ .mapcontent {--posX: 80%; --posY: 100%;}
.cell:nth-child(120):hover ~ .mapcontent {--posX: 90%; --posY: 100%;}
.cell:nth-child(121):hover ~ .mapcontent {--posX: 100%; --posY: 100%;}
.mapcontent {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
--zoom: 0;
--posX: 0%;
--posY: 0%;
overflow: hidden;
}
.mapzoom img {
transform: scale(calc(var(--zoom) * 1.5 + 1));
transform-origin: var(--posX) var(--posY);
transition: all 1s ease-out;
}
.map {
width: 50%;
}
/*====================*/
/* TIMELINE */
/*====================*/
.timeline {
width: 100%;
text-align: center;
font-weight: bold;
}
.period1, .period2, .period3 {
float: left;
height: 4em;
color: white;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.2em;
border: solid;
border-color: #EEEEEE;
border-left-width: 2px;
border-right-width: 0px;
border-top-width: 2px;
border-bottom-width: 2px;
box-sizing: border-box;
}
.period1 {background-color: var(--color_gradient1);}
.period2 {background-color: var(--color_gradient2);}
.period3 {background-color: var(--color_gradient3);}
/*====================*/
/* TEST */
/*====================*/
.paper2 {
background-color: #f8f5de;
background-image: linear-gradient(to right, #f1f0e9 40%, #f1f0e9 45%, #bbb593 50%, #f1f0e9 55%, #e4e1d4 60%, #f1f0e9 70%);
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.parallax {
height: 1000px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.parallax1 {
background-image: url("http://www.jammerjun.net/gahan/images/b/b4/Lande_1.jpg");
}
/*background-image: url("http://www.jammerjun.net/gahan/Lande_1.jpg");*/
