diff options
| author | Kévin Le Gouguec <kevin.legouguec@gmail.com> | 2021-02-09 21:29:09 +0100 |
|---|---|---|
| committer | Kévin Le Gouguec <kevin.legouguec@gmail.com> | 2021-02-09 21:29:09 +0100 |
| commit | 3dd64f5ebff64ebf88824e0755ed43ba0ca2203a (patch) | |
| tree | 319b840a6bd34062a95b88ed122da8f6c6545da2 /stylesheets | |
| parent | 5fce06edbeaf2a157cce8718ca0da52b4626a1b9 (diff) | |
| parent | 3cce24e09ecd52a87b34a230380d18bca6b6510d (diff) | |
| download | quatuorbellefeuille.com-3dd64f5ebff64ebf88824e0755ed43ba0ca2203a.tar.xz | |
Merge remote-tracking branch 'vps/quatuor'
Diffstat (limited to 'stylesheets')
| -rw-r--r-- | stylesheets/commun.css | 2 | ||||
| -rw-r--r-- | stylesheets/membre.css | 30 | ||||
| -rw-r--r-- | stylesheets/quatuor.css | 54 |
3 files changed, 27 insertions, 59 deletions
diff --git a/stylesheets/commun.css b/stylesheets/commun.css index a27a044..60c2ea6 100644 --- a/stylesheets/commun.css +++ b/stylesheets/commun.css @@ -2,7 +2,7 @@ body { --gold: #E4B63A; margin: 0; - background-color: #deffe3; + background-color: white; font-family: 'Open Sans', sans-serif; } diff --git a/stylesheets/membre.css b/stylesheets/membre.css index 86d370b..adf11f4 100644 --- a/stylesheets/membre.css +++ b/stylesheets/membre.css @@ -1,26 +1,34 @@ main { display: grid; grid-template-columns: 60% 40%; - padding-right: 4%; + align-items: center; + justify-self: center; + width: 80%; } -main > div { - padding: 2%; +#bio { + justify-self: center; } -#bio dl { - display: grid; - grid-template-columns: 1fr 2fr; - align-items: center; +#bio dt, #bio dd { + display: inline; } -#photo { - height: 90%; - align-self: center; +#bio dt { + font-weight: bold; +} + +#bio dd { + margin-left: 0; +} + +#bio dl { + margin-top: 0.2em; + margin-bottom: 0.2em; } #photo img { width: 100%; height: 100%; - object-fit: cover; + object-fit: contain; } diff --git a/stylesheets/quatuor.css b/stylesheets/quatuor.css index f72c9af..05fbf4c 100644 --- a/stylesheets/quatuor.css +++ b/stylesheets/quatuor.css @@ -1,41 +1,23 @@ @media (min-width: 40em) { main { - display: flex; - } - - main div { - padding: 2%; + width: 80%; + justify-self: center; } main #photos { display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr; - - position: sticky; - top: 0; - max-height: 80vh; + grid-template-columns: repeat(4, auto); + justify-content: space-around; + width: 100%; } #photos > * { - position: relative; - width: 6em; height: 100%; - background-color: #ddd; /* Workaround for chromium bug#377847. */ - border-color: #ddd; - border-width: 0.3em; - border-style: solid; - border-radius: 0.3em; - overflow: hidden; } #photos img.portrait { - position: absolute; - width: 100%; - height: 100%; - object-fit: cover; - object-position: center; - filter: grayscale(1); + height: 60vh; + filter: grayscale(0.5); transition: filter 1s, transform 1s; } @@ -43,28 +25,6 @@ filter: none; transform: scale(1.05); } - - #photos > *:nth-of-type(1) { - top: -0.4em; - } - - #photos > *:nth-of-type(2) { - left: -1.6em; - top: 1.2em; - } - - #photos > *:nth-of-type(3) { - left: 1.6em; - top: -1.2em; - } - - #photos > *:nth-of-type(4) { - top: 0.4em; - } - - #bio > *:first-child { - margin-top: 0; - } } @media (max-width: 40em) { |
