/* * @Title : mueki v6 (actualisation responsive 2016) * @autor : Charlie Jouvet (depuis PluXML http://www.pluxml.org) * @date : Février 2016 */ @import url(knacss-reset.css); /* 1 /////////////////////////////////////// RÉGLAGES GLOBAUX ///*/ /* --- Éléments Masqués --- */ header h2,small { display: none; } .no-margin { display: none; } /* --- masque le h1 sur pages statiques --- */ .aside-mask { display: none; } /* --- sur sidebar.php --- */ .repertory { display: none; } /* --- sur categorie.php --- */ footer { display: none; } .pas-de-rss { display: none; } /* --- sur home.php --- */ /* --- Les Blocs de Page --- */ body { background-color: White; font-family:akz, Verdana, Arial, Helvetica, sans-serif; color: #000; } .container { background-color: transparent; margin-right: auto; margin-left: auto; } /* centre tout le contenu dans l'écran */ header { background-color: transparent; } nav { background-color: transparent; } .main { background-color: transparent; } .article { background-color: transparent; } section { background-color: transparent; } /* --- Aqua main Gold Olive Orange Pink Violet Yellow White transparent --- */ /* --- Styles --- */ p { margin : 0; padding: 0; } div { margin : 0; padding: 0; } .menu li { list-style:none; } /* menu nav */ body { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } /* pour empécher la taille de texte mini bloquée sur Ipad / Iphone */ /* font-size de base est baissé à 62.5% qui corresponds a 10px et servant de base à toutes les tailles en REM suivantes */ /* --- Liens --- */ a:link { color: #000; text-decoration: none; } a:visited { color: #000; text-decoration: none; } a:hover { color: #000; text-decoration: none; } a:active { color: #000; text-decoration: none; } a:active, a:hover, a.active, .active a { color: #2d576d; } /* bleu mueki */ /* --- Appel des typos CSS3 --- */ @font-face { font-family:"akz"; src: url('../fonts/akzidgrobqlig.otf') ; } @font-face { font-family:"akz-ital"; src: url('../fonts/akzidgrobqligit.otf') ; } @font-face { font-family:"akz-bold"; src: url('../fonts/akzidgrobqbol.otf') ; } /* --------- styles fonts ---------- */ .gris { font-family:akz-ital, Verdana, Arial, Helvetica, sans-serif; color: #AAA; } .bold { font-family:akz-bold, Verdana, Arial, Helvetica, sans-serif; } .souli { font-family:akz, Verdana, Arial, Helvetica, sans-serif; text-decoration: underline; color: #000; } /* 2 /////////////////////////////////////// PAGES STATIQUES ///*/ /* --- pages front - accueil --- */ .colone { text-align: left; } .colone img { margin-bottom: 3% ; } /* --- pages archives --- */ .marge { text-align:justify; } /* --- textes en plusieurs langues --- */ .plr { text-align:justify; } .english { z-index:2; overflow:hidden; } .francais { z-index:3; overflow:hidden; } .deutsch { z-index:4; overflow:hidden; } .bt-english, .bt-francais, .bt-deutsch { display: block; background-color: #eee; color: #222; border:0px solid #111; } .bt-english:hover, .bt-francais:hover, .bt-deutsch:hover { background-color: #eee; color: #2d576d; cursor:pointer; } .bt-english:active, .bt-francais:active, .bt-deutsch:active { background-color: #eee; font-weight:bold; } .actif { font-weight:bold; color: #2d576d; } /* --- formulaires contact sur form.contact.php dans le dossier plugins-- */ #form_contact { background-color: #eee; margin-top:5px; padding: 1rem 0 0 0; font-family:Akz, Verdana, Arial, Helvetica, sans-serif; overflow:hidden;} #form_contact fieldset { border: 0 ; } #form_contact input[type=text], input { border:1px solid #DDD; margin: 0 0 10px 0; height: 25px; } #form_contact input[type=text], textarea { border:1px solid #DDD; margin: 0 0 10px 0; } #form_contact input[type=text]:hover, textarea:hover { border: 1px solid #AAA; cursor: pointer; } #form_contact input[type=text]:focus, textarea:focus { border: 1px solid #777; } #form_contact input[type=submit] { background-color: #EEE; border:1px solid #CCC; padding: 3px 4px; width:50px; } #form_contact input[type=submit]:hover { background-color: #2d576d; color: #FFF; cursor:pointer; } #form_contact input[type=submit]:active { background-color: #730E20; } #form_contact input[type=reset] { background-color: #EEE; border: 1px solid #CCC; padding: 3px 4px; width:50px; } #form_contact input[type=reset]:hover { background-color: #2d576d; color: #FFF; cursor: pointer; } #form_contact input[type=reset]:active { background-color: #730E20; } /* --- page archives dailies - Solution entièrement CSS au final --- */ .dailies-archives img { margin-bottom: 1.2rem; } .ancre { float:right; margin-right: 3%; } /* ancre vers le haut de page (placé dans header.php */ .inter { width: 98%; height: 5rem; padding-left: 2%; line-height:5.2rem; background-color: #eee; margin-bottom: 1.2rem; } .annee { display: inline; border: 1px solid #eee; padding: 3px 4px; margin: 0 5px 5px 0; background-color: #eee; } /* liens vers ancres par années */ /* 3 /////////////////////////////////////// PAGES BLOG ///*/ /* -- pager sur article.php pour passer d'un billet l'autre -- */ .lien-billet-solo { border: 1px solid #eee; padding: 3px 4px; margin-right:5px; } /* --- pager sur la page blog et categories--- */ .p_page { border: 1px solid #eee; padding: 3px 4px; margin-right:5px; } .p_first { border: 1px solid #eee; padding: 3px 4px; margin-right:5px; } .p_prev { border: 1px solid #eee; padding: 3px 4px; margin-right:5px; } .p_current { border: 1px solid #eee; padding: 3px 4px; margin-right:5px; } .p_next { border: 1px solid #eee; padding: 3px 4px; margin-right:5px; } .p_last { border: 1px solid #eee; padding: 3px 4px; margin-right:5px; } /* --- liste catégories sur article.php et categorie.php--- */ .menu-cat a:link { color : #aaa; } .menu-cat a:visited { color : #aaa; } .menu-cat a:hover { color : #aaa; } .menu-cat a:active { color : #aaa; } /* --- articles solo sur article.php --- */ .titre-billet-solo a:link { color : #000; } .titre-billet-solo a:visited { color : #000; } .titre-billet-solo a:hover { color : #000; } .titre-billet-solo a:active { color : #000; } /* -------- //////////////////////////// RESPONSIVE --------- */ /* ///////////// 1er/5 - ordi horizontal 1050x1680 ou 1600x2560 - mode LANDSCAPE --------- */ @media screen and (min-width: 1201px) and (orientation: landscape) { .container { width: 900px; margin-right: auto; margin-left: auto; } /* centre tout le contenu sur l'écran */ .header { position: fixed; width: 225px; height: 155px; } .nav { position: fixed; width: 225px; height: auto; top: 155px; } .main { position: relative; top: 35px; left: 225px; width: 75%; } /* --- header --- */ .header img { position: relative; top: 35px; height: 90px; } /* logo dans le header */ /* --- nav --- */ .responsive-menu { position: relative; left: -88px; text-align: right; } .nav li { font-size: 1.4rem; line-height: 1.8rem; } /* PAGES STATIQUES /////////////////////////////////////////////////////////*/ /* --- pages front - accueil --- */ .welcome { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; /* -webkit pour Chrome, Safari, Opera et -moz pour Firefox */ -webkit-column-gap: 1.8rem; -moz-column-gap: 1.8rem; column-gap: 1.8rem; } /* --- pages archives --- */ .marge-col1 { float: left; width: 240px; } .marge-col2 { float: right; width: 420px; } /* --- slideshow classique --- */ .ratio { position: relative; left: 0; width:100%; padding-bottom: 66.66%; } /* div en proportion 3x2 */ .carre { position: relative; left: 0; width:100%; padding-bottom: 66.66%; } /* div en proportion 1x1 NEUTRALISÈ ICI en 3x2 */ .katcink { position: relative; left: 0; width:100%; padding-bottom: 66.66%; } /* div en proportion 4x5 - niort NEUTRALISÈ ICI en 3x2 */ .troikat { position: relative; left: 0; width:100%; padding-bottom: 66.66%; overflow: hidden;} /* div en proportion 4x3 - livre geheim NEUTRALISÈ ICI en 3x2 */ .cycle-slideshow { position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: block; } .cycle-slideshow img { max-height:100%; } .cycle-slideshow div { max-height:100%; } .cadre { width:94%; height:91%; padding:20px; background-color: #eee; text-align:justify; } /* panneau texte en fin de diapo */ .cadre img { height: 60%; margin:1% 0 0 22%; } /* page tributaries */ .texte { margin-top:5px; } /* légende au dessous du diapo */ .avance { margin-top: 20px; } /* boutons avant - apres */ /* --- textes en plusieurs langues --- */ .plr { font-size: 1.3rem; } .english, .francais, .deutsch { position: relative; width: 82%; } .control { position: absolute; top:0; left:88%; width:250px; height:75px; z-index:6; } .bt-english, .bt-francais, .bt-deutsch { font-size: 1.2rem; width:80px; margin:0 0 1rem 0; } .note { padding:10px 0 0 0; font-size: 1.1rem; } /* --- page Info / Contact--- */ #form_contact input[type=text], input { width: 99.7%; } #form_contact textarea[type=text], textarea { width: 100%; } .copy { font-size: 1.2rem; } /* --- page archives dailies - Solution entièrement CSS au final --- */ .dailies-archives { /* -webkit pour Chrome, Safari, Opera et -moz pour Firefox */ -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 1.2rem; -moz-column-gap: 1.2rem; column-gap: 1.2rem; font-size: 0; /* pour enlever le résidu de marge invisible */ } /* PAGES BLOG /////////////////////////////////////////////////////////*/ /* --- articles en liste sur les pages home.php et categories.php--- */ .titre-billet-list { font-size: 1.3rem; margin: 0 0 8px 0; } .billet-list { margin-bottom: 25px; } .billet-list img { width:60%; } /* --- articles solo sur article.php --- */ .titre-billet-solo { font-size: 1.3rem; margin: 0 0 8px 0; } .billet-solo { margin-bottom: 25px; } .billet-solo img { width:60%; } .lien-billet-solo { display:table-cell; width:17%; z-index:4; } /* lien pour passer d'un article l'autre (sur article.php) */ /* --- liste catégories sur article.php et categorie.php--- */ .menu-cat { position: fixed; top:35px; left: 75%; width:100px; color : #aaa; background-color: transparent; } /* div englobant le menu catégories */ .menu-cat ul { position: relative; left: -25px; font-size: 1.3rem; list-style:none; margin-top: -2px; } /* liste des catégories sur la page article.php */ .menu-cat h3 { font-size: 1.3rem; text-decoration: underline; } /* titre du menu des catégories sur la page article.php */ /* --- pager sur la page blog et categories--- */ .pagination { margin: 50px 0 50px 0; } .p_page, .p_first, .p_prev, .p_current, .p_next, .p_last { position:relative; left:0; } } /* ///////////// 2e/5 - nexus7 1200x1920 - tablette en mode LANDSCAPE --------- */ @media screen and (max-width: 1200px) and (orientation: landscape) { .container { width: 85%; margin-right: auto; margin-left: auto; } /* centre tout le contenu sur l'écran */ .header { position: fixed; width: 15%; min-width: 140px; height: 155px; } .nav { position: fixed; width: 15%; min-width: 140px; height: auto; top: 155px; } .main { position: relative; top: 35px; left: 25%; max-width: 75%; } /* --- header --- */ .header img { float:right; position: relative; top: 35px; height: 90px; } /* logo dans le header */ /* --- nav --- */ .responsive-menu { float:right; position: relative; text-align: right; } .nav li { font-size: 1.4rem; line-height: 1.8rem; } /* PAGES STATIQUES /////////////////////////////////////////////////////////*/ /* --- pages front - accueil --- */ .welcome { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; /* -webkit pour Chrome, Safari, Opera et -moz pour Firefox */ -webkit-column-gap: 1.8rem; -moz-column-gap: 1.8rem; column-gap: 1.8rem; } /* --- pages archives --- */ .marge-col1 { float: left; width: 35%; font-size: 1.2rem; } .marge-col2 { float: right; width: 64%; font-size: 1.2rem; } /* --- slideshow classique --- */ .ratio { position: relative; left: 0; width:100%; padding-bottom: 66.66%; } /* div en proportion 3x2 */ .carre { position: relative; left: 0; width:100%; padding-bottom: 66.66%; } /* div en proportion 1x1 NEUTRALISÈ ICI en 3x2 */ .katcink { position: relative; left: 0; width:100%; padding-bottom: 66.66%; } /* div en proportion 4x5 - niort NEUTRALISÈ ICI en 3x2 */ .troikat { position: relative; left: 0; width:100%; padding-bottom: 66.66%; overflow: hidden; } /* div en proportion 4x3 - livre geheim NEUTRALISÈ ICI en 3x2 */ .cycle-slideshow { position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: block;} .cycle-slideshow img { max-height:100%; } .cadre { width:94%; height:91%; padding:20px; background-color: #eee; text-align:justify; } /* panneau texte en fin de diapo */ .cadre img { height: 60%; margin:1% 0 0 22%; } /* page tributaries */ .texte { margin-top:5px; } /* légende au dessous du diapo */ .avance { margin-top: 20px; } /* boutons avant - apres */ /* --- textes en plusieurs langues --- */ .plr { font-size: 1.3rem; } .english, .francais, .deutsch { position: relative; width: 86%; } .control { position: absolute; top:0; left:88%; width:250px; height:75px; z-index:6; } .bt-english, .bt-francais, .bt-deutsch { font-size: 1.2rem; width:80px; margin:0 0 1rem 0;} .note { padding:10px 0 0 0; font-size: 1.1rem; text-align:left; } /* --- page Info / Contact--- */ #form_contact input[type=text], input { width: 100%; } #form_contact textarea[type=text], textarea { width: 100%; } .copy { font-size: 1.2rem; } /* --- page archives dailies - Solution entièrement CSS au final --- */ .dailies-archives { /* -webkit pour Chrome, Safari, Opera et -moz pour Firefox */ -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 1.2rem; -moz-column-gap: 1.2rem; column-gap: 1.2rem; font-size: 0; /* pour enlever le résidu de marge invisible */ } /* PAGES BLOG /////////////////////////////////////////////////////////*/ /* --- articles en liste sur les pages home.php et categories.php--- */ .titre-billet-list { font-size: 1.3rem; margin: 0 0 8px 0; } .billet-list { margin-bottom: 25px; } .billet-list img { width:60%; } /* --- articles solo sur article.php --- */ .titre-billet-solo { font-size: 1.3rem; margin: 0 0 8px 0; } .billet-solo { margin-bottom: 25px; } .billet-solo img { width:60%; } .lien-billet-solo { display:block; height: 20px; width:58.5%; z-index:4; } /* lien pour passer d'un article l'autre (sur article.php) * /* --- liste catégories sur article.php et categorie.php--- */ .menu-cat { position: fixed; top:35px; left: 78%; width:100px; color : #aaa; } /* div englobant le menu catégories */ .menu-cat ul { position: relative; left: -25px; font-size: 1.3rem; list-style:none; margin-top: -2px; } /* liste des catégories sur la page article.php */ .menu-cat h3 { font-size: 1.3rem; text-decoration: underline; } /* titre du menu catégories sur la page article.php */ /* --- pager sur la page blog et categories--- */ .pagination { margin: 50px 0 50px 0; } .p_page, .p_first, .p_prev, .p_current, .p_next, .p_last { position:relative; left:0; } } /* ///////////// 3e/5 - iPhone 5/5s 640x1136 - iphone 4 et 5 en mode LANDSCAPE --------- */ @media screen and (max-width: 568px) and (orientation: landscape) { .container { width: 85%; margin-right: auto; margin-left: auto; } /* centre tout le contenu sur l'écran */ .header { position: fixed; width: 15%; min-width: 80px; height: 90px; } .nav { position: fixed; width: 15%; min-width: 80px; height: auto; top: 90px; } .main { position: relative; top: 25px; left: 22%; max-width: 78%; } /* --- header --- */ .header img { float:right; position: relative; top: 25px; height: 40px; } /* logo dans le header */ /* --- nav --- */ .responsive-menu { float:right; position: relative; text-align: right; } .nav li { font-size: 1.3rem; line-height: 1.8rem; } /* PAGES STATIQUES /////////////////////////////////////////////////////////*/ /* --- pages front - accueil --- */ .welcome { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; /* -webkit pour Chrome, Safari, Opera et -moz pour Firefox */ -webkit-column-gap: 1.8rem; -moz-column-gap: 1.8rem; column-gap: 1.8rem; } .colone { font-size: 0.9rem; } /* --- pages archives --- */ .marge-col1 { width: 100%; font-size: 1.2rem; } .marge-col2 { width: 100%; font-size: 1.2rem; } /* --- slideshow classique --- */ .ratio { position: relative; left: 0; width:90%; padding-bottom: 60%; } /* div en proportion 3x2 */ .carre { position: relative; left: 0; width:100%; padding-bottom: 66.66%; } /* div en proportion 1x1 NEUTRALISÈ ICI en 3x2 */ .katcink { position: relative; left: 0; width:100%; padding-bottom: 66.66%; } /* div en proportion 4x5 - niort NEUTRALISÈ ICI en 3x2 */ .troikat { position: relative; left: 0; width:100%; padding-bottom: 66.66%; } /* div en proportion 4x3 - livre geheim NEUTRALISÈ ICI en 3x2 */ .cycle-slideshow { position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: block;} .cycle-slideshow img { max-height:100%; } .cadre { width:94%; height:91%; padding:10px; background-color: #eee; text-align:justify; font-size: 0.8rem; } /* panneau texte en fin de diapo */ .cadre img { height: 60%; margin:1% 0 0 22%; } /* page tributaries */ .texte { margin-top:5px; } /* légende au dessous du diapo */ #alt-caption { font-size: 1.2rem; } .next, .prev { display: none; } /* boutons avant/apres masqués car swipe */ .avance { margin-top: 20px; } /* boutons avant - apres */ /* --- textes en plusieurs langues --- */ .plr { font-size: 1.3rem; } .english, .francais, .deutsch { position: relative; width: 86%; } .control { position: absolute; top:0; left:88%; width:250px; height:75px; z-index:6; } .bt-english, .bt-francais, .bt-deutsch { font-size: 1.2rem; width:80px; margin:0 0 1rem 0;} .note { padding:10px 0 0 0; font-size: 1.1rem; text-align:left; } /* --- page Info / Contact--- */ #form_contact input[type=text], input { width: 96%; } #form_contact textarea[type=text], textarea { width: 100%; } .copy { font-size: 1.2rem; } /* --- page archives dailies - Solution entièrement CSS au final --- */ .dailies-archives { /* -webkit pour Chrome, Safari, Opera et -moz pour Firefox */ -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 1.2rem; -moz-column-gap: 1.2rem; column-gap: 1.2rem; font-size: 0; /* pour enlever le résidu de marge invisible */ } .annee { font-size: 1.8rem; } /* liens vers ancres par années */ .years { font-size: 1.8rem; line-height: 4rem; } /* PAGES BLOG /////////////////////////////////////////////////////////*/ /* --- articles en liste sur les pages home.php et categories.php--- */ .titre-billet-list { font-size: 1.3rem; margin: 0 0 8px 0; } .billet-list { margin-bottom: 25px; } .billet-list img { width:60%; } /* --- articles solo sur article.php --- */ .titre-billet-solo { font-size: 1.3rem; margin: 0 0 8px 0; } .billet-solo { margin-bottom: 25px; } .billet-solo img { width:60%; } .lien-billet-solo { display:block; height: 20px; width:57.5%; z-index:4; } /* lien pour passer d'un article l'autre (sur article.php) */ /* --- liste catégories sur article.php et categorie.php--- */ .menu-cat { position: fixed; top:25px; left: 78%; width:100px; color : #aaa; } /* div englobant le menu catégories */ .menu-cat ul { position: relative; left: -22px; font-size: 1.1rem; list-style:none; margin-top: -2px; } /* liste des catégories sur la page article.php */ .menu-cat h3 { font-size: 1.1rem; text-decoration: underline; } /* titre du menu catégories sur la page article.php */ /* --- pager sur la page blog et categories--- */ .pagination { margin: 50px 0 50px 0; } .p_page, .p_first, .p_prev, .p_current, .p_next, .p_last { position:relative; left:0; } } /* //////////////////////////////////////////////////////////////////////// MODE PORTRAIT //////////////////////////////////////////////////////////////////////////////// */ /* ///////////// 4e/5 - nexus7 1200x1920 - tablettes et phones en mode PORTRAIT --------- */ @media screen and (max-width: 1200px) and (orientation: portrait) { .container { width: 90%; margin-right: auto; margin-left: auto; } /* centre tout le contenu sur l'écran */ .header { float: left; width: 31%; height: 150px; } .nav { height: 150px; margin-left: 20px; } /* --- header --- */ .header img { position: relative; top: 30px; height: 59%; float:right; z-index:4; } /* logo dans le header */ /* --- nav --- */ .responsive-menu { position: relative; top: 28px; margin-left: 20px; } .nav li { position: relative; font-size: 2rem; line-height: 2.4rem; left: 20px; } /* PAGES STATIQUES /////////////////////////////////////////////////////////*/ /* --- pages front - accueil --- */ .welcome { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; /* -webkit pour Chrome, Safari, Opera et -moz pour Firefox */ -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } .colone { font-size: 1.2rem; } /* --- pages archives --- */ .marge-col1 { position: relative; left: 34.5%; text-align: left; background-color: transparent; font-size: 1.8rem; max-width: 65.5%; } .marge-col2 { position: relative; left: 34.5%; text-align: left; background-color: transparent; font-size: 1.8rem; max-width: 65.5%; } /* --- slideshow classique --- */ .ratio { position: relative; left: 0; width:100%; padding-bottom: 66.66%; } /* div en proportion 3x2 */ .carre { position: relative; left: 0; width:100%; padding-bottom: 100%; } /* div en proportion 1x1 */ .katcink { position: relative; left: 0; width:100%; padding-bottom: 80%; } /* div en proportion 4x5 - niort */ .troikat { position: relative; left: 0; width:100%; padding-bottom: 75%; } /* div en proportion 4x3 - livre geheim */ .cycle-slideshow { position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: block;} .cycle-slideshow img { max-height:100%; } .cadre { width:94%; height:91%; padding:20px; background-color: #eee; text-align:justify; font-size: 1.3rem; } /* panneau texte en fin de diapo */ .cadre img { height: 45%; margin:0 0 0 30%; } /* page tributaries */ .texte { margin-top:5px; } /* légende au dessous du diapo */ #alt-caption { font-size: 1.6rem; } .avance { margin-top: 20px; font-size: 2rem; } /* boutons avant - apres */ /* --- textes en plusieurs langues --- */ .plr { font-size: 1.8rem; line-height: 2.1rem; } .english, .francais, .deutsch { position: relative; left: 6%; width: 72%; } .control { position: absolute; top:160px; left:80%; height:75px; z-index:6; } .bt-english, .bt-francais, .bt-deutsch { font-size: 1.6rem; width:80px; margin:0 0 1rem 0; } .note { padding:10px 0 0 0; font-size: 1.1rem; text-align:left; } /* --- page Info / Contact--- */ #form_contact input[type=text], input { width: 100%;} #form_contact textarea[type=text], textarea { width: 100%; } .copy { font-size: 1.4rem; } /* --- page archives dailies - Solution entièrement CSS au final --- */ .dailies-archives { /* -webkit pour Chrome, Safari, Opera et -moz pour Firefox */ -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 1.2rem; -moz-column-gap: 1.2rem; column-gap: 1.2rem; font-size: 0; /* pour enlever le résidu de marge invisible */ } .annee { font-size: 1.8rem; } /* liens vers ancres par années */ .years { font-size: 1.8rem; line-height: 4rem; } /* PAGES BLOG /////////////////////////////////////////////////////////*/ /* --- articles en liste sur les pages home.php er categories.php--- */ .titre-billet-list { position: relative; left: 34.5%; font-size: 1.6rem; margin: 0 0 8px 0; } .billet-list { position: relative; left: 34.5%; margin-bottom: 25px; } .billet-list img { width:60%; } /* --- articles solo sur page home.php et article.php --- */ .titre-billet-solo { position: relative; left: 34.5%; font-size: 1.6rem; margin: 0 0 2px 0;} .billet-solo { position: relative; left: 34.5%; } .billet-solo img { width:60%; } .lien-billet-solo { position: relative; display:block; height: 20px; left: 34.5%; width:58%; z-index:4; font-size: 1.6rem; } /* lien d'un article l'autre (sur article.php) */ /* --- liste des catégories sur la pages article.php --- */ .menu-cat { display: none; } /* div englobant le menu catégories */ /* -- PAS DE MENU CATEGORIES SUR TABLETTES ET PHONE VERTICALS --*/ /* --- pager sur la page blog et categories--- */ .pagination { margin-top:30px; font-size: 1.6rem; } .p_page, .p_first, .p_prev, .p_current, .p_next, .p_last { position:relative; left: 34.5%; } } /* ///////////// 5e/5 - iPhone 5/5s 640x1136 - iphone 4 et 5 en mode PORTRAIT --------- */ @media screen and (max-width: 568px) and (orientation: portrait) { .container { width: 90%; margin-right: auto; margin-left: auto; } /* centre tout le contenu sur l'écran */ .header { float: left; width: 29.8%; height: 120px; } .nav { height: 120px; margin-left: 20px; } /* --- header --- */ .header img { position: relative; top: 25px; height: 46%; float:right; z-index:4; } /* logo dans le header */ /* --- nav --- */ .responsive-menu { position: relative; top: 23px; } .nav li { position: relative; font-size: 1.1rem; line-height: 1.5rem; left: 16px; } /* PAGES STATIQUES /////////////////////////////////////////////////////////*/ /* --- pages front - accueil --- */ .welcome { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; /* -webkit pour Chrome, Safari, Opera et -moz pour Firefox */ -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; } .colone { font-size: 0.6rem; } /* --- pages archives --- */ .marge-col1 { position: relative; left: 34.5%; text-align: left; background-color: transparent; font-size: 1rem; max-width: 65.5%; } .marge-col2 { position: relative; left: 34.5%; text-align: left; background-color: transparent; font-size: 1rem; max-width: 65.5%; } /* --- slideshow classique --- */ .ratio { position: relative; left: 0; width:100%; padding-bottom: 66.66%; } /* div en proportion 3x2 */ .carre { position: relative; left: 0; width:100%; padding-bottom: 100%; } /* div en proportion 1x1 */ .katcink { position: relative; left: 0; width:100%; padding-bottom: 80%; } /* div en proportion 4x5 - niort */ .troikat { position: relative; left: 0; width:100%; padding-bottom: 75%; } /* div en proportion 4x3 - livre geheim */ .cycle-slideshow { position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: block;} .cycle-slideshow img { max-height:100%; } .cadre { height:100%; padding:10px; background-color: #eee; text-align:justify; font-size: 0.65rem; } /* panneau texte en fin de diapo */ .cadre img { height: 45%; margin:0 0 0 30%; } /* page tributaries */ .texte { margin-top:5px; } /* légende au dessous du diapo */ #alt-caption { font-size: 1rem; } .next, .prev { display: none; } /* boutons avant/apres masqués car swipe */ /* --- textes en plusieurs langues --- */ .plr { font-size: 1rem; line-height: 1.6rem; } .english, .francais, .deutsch { position: relative; left: 1%; width: 70%; } .control { position: absolute; top:140px; left:75%; height:75px; z-index:6; } .bt-english, .bt-francais, .bt-deutsch { font-size: 1rem; width:60px; margin:0 0 1rem 0; } .note { padding: 10px 0 0 0; font-size: 1.1rem; text-align:left; } /* --- page Info / Contact--- */ #form_contact input[type=text], input { width: 96%; } #form_contact textarea[type=text], textarea { width: 100%; } .copy { font-size: 1rem; } /* --- page archives dailies - Solution entièrement CSS au final --- */ .dailies-archives { /* -webkit pour Chrome, Safari, Opera et -moz pour Firefox */ -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 1.2rem; -moz-column-gap: 1.2rem; column-gap: 1.2rem; font-size: 0; /* pour enlever le résidu de marge invisible */ } .annee { font-size: 1rem; } /* liens vers ancres par années */ .years { font-size: 1.5rem; line-height: 4rem; } /* PAGES BLOG /////////////////////////////////////////////////////////*/ /* --- articles en liste sur les pages home.php er categories.php--- */ .titre-billet-list { position: relative; left: 34.5%; font-size: 1.2rem; margin: 0 0 8px 0; } .billet-list { position: relative; left: 34.5%; margin-bottom: 25px; } .billet-list img { width:60%; } /* --- articles solo sur page home.php et article.php --- */ .titre-billet-solo { position: relative; left: 34.5%; font-size: 1.2rem; margin: 0 0 2px 0;} .billet-solo { position: relative; left: 34.5%; } .billet-solo img { width:60%; } .lien-billet-solo { position: relative; display:block; height: 20px; left: 34.5%; width:56%; z-index:4; font-size: 1.2rem; } /* lien d'un article l'autre (sur article.php) */ /* --- liste des catégories sur la pages article.php --- */ .menu-cat { display: none; } /* div englobant le menu catégories */ /* -- PAS DE MENU CATEGORIES SUR TABLETTES ET PHONE VERTICALS --*/ /* --- pager sur la page blog et categories--- */ .pagination { margin-top:30px; font-size: 1rem; margin-bottom:30px; } .p_page, .p_first, .p_prev, .p_current, .p_next, .p_last { position:relative; left: 34.5%; } }