From 787d03e48471ba62cd830379428f04d996f0b74b Mon Sep 17 00:00:00 2001 From: polo Date: Thu, 17 Feb 2022 18:13:00 +0100 Subject: model update --- public/discographie.css | 79 +++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 66 insertions(+), 13 deletions(-) (limited to 'public/discographie.css') diff --git a/public/discographie.css b/public/discographie.css index f2e9a5b..b4c3d51 100644 --- a/public/discographie.css +++ b/public/discographie.css @@ -14,6 +14,8 @@ aside font-family: 'Monospace'; /*margin-right: 10px;*/ /*position: absolute;*/ + position: relative; + bottom: 30px; } aside div @@ -29,7 +31,9 @@ aside div font-weight: bold; /*text-decoration: underline;*/ /*border: 1px red solid;*/ - margin: 13px 0 0 0; + margin: 0px; + /*position: relative; + bottom: 45px;*/ } #chronologie @@ -41,6 +45,7 @@ aside div z-index: 1; /* placer le menu déroulant au dessus */ /*background-color: #9fa8d0;*/ background-color: #a4afd4; + border: 2px #3d4c9d solid; } #chronologie p @@ -90,7 +95,7 @@ section h3 { - margin-top: 45px; + /*margin-top: 45px;*/ } form p @@ -115,12 +120,24 @@ input border: 4px black groove; } +#articles +{ + display: flex; + justify-content: space-around; + flex-wrap: wrap; + align-items: flex-end; +} + article { margin: 5px 0px; - width: 45%; + width: 32%; /*min-width: 300px;*/ } +.articleAvecEditeur +{ + width: 100%; +} .vignette { @@ -148,7 +165,11 @@ a /*border: 2px white solid;*/ } -article a:hover +.articleSansEditeur a +{ + border: 2px white solid; +} +.articleSansEditeur a:hover { border: 2px blue solid; } @@ -158,6 +179,24 @@ a:hover figure figcaption text-decoration: underline; } +.articleSansEditeur p +{ + /*border: 1px black solid;*/ + text-align: center; + margin-top: 0px; +} + +.articleSansEditeur img +{ + vertical-align: middle; +} + +/* image dans le formulaire */ +.imageFormulaire +{ + float: right; + max-width: 25%; +} /* page dédiée à un album */ #albumHTML @@ -181,8 +220,8 @@ a:hover figure figcaption #contenu { - position: relative; - bottom: 35px; + /*position: relative;*/ + /*bottom: 35px;*/ } #albumHTML @@ -204,8 +243,8 @@ a:hover figure figcaption #contenu { - position: relative; - bottom: 24px; + /*position: relative; + bottom: 24px;*/ } #albumHTML @@ -213,6 +252,10 @@ a:hover figure figcaption /* annuler le positionnement du contenu */ margin-top: 42px; } + article + { + width: 40%; + } } @media screen and (max-width: 479px) @@ -235,22 +278,28 @@ a:hover figure figcaption width: 320px; } - #chronologie + #bouton_chronologie { - display: flex; + width: 130px; + font-size: initial; /* 150% est plus petit que "normal" */ + padding-top: 5px; + } + #chronologie + { + /*display: flex;*/ } #chronologie p { - max-width: 80px; - margin: 2px; + /*max-width: 80px;*/ + margin: 5px; } #contenu { /*position: relative;*/ - bottom: 15px; + /* bottom: 15px;*/ } #albumHTML @@ -258,4 +307,8 @@ a:hover figure figcaption /* annuler le positionnement du contenu */ margin-top: 32px; } + article + { + width: 48%; + } } -- cgit v1.2.3