summaryrefslogtreecommitdiff
path: root/stylesheets
diff options
context:
space:
mode:
authorKévin Le Gouguec <kevin.legouguec@gmail.com>2021-02-09 21:29:09 +0100
committerKévin Le Gouguec <kevin.legouguec@gmail.com>2021-02-09 21:29:09 +0100
commit3dd64f5ebff64ebf88824e0755ed43ba0ca2203a (patch)
tree319b840a6bd34062a95b88ed122da8f6c6545da2 /stylesheets
parent5fce06edbeaf2a157cce8718ca0da52b4626a1b9 (diff)
parent3cce24e09ecd52a87b34a230380d18bca6b6510d (diff)
downloadquatuorbellefeuille.com-3dd64f5ebff64ebf88824e0755ed43ba0ca2203a.tar.xz
Merge remote-tracking branch 'vps/quatuor'
Diffstat (limited to 'stylesheets')
-rw-r--r--stylesheets/commun.css2
-rw-r--r--stylesheets/membre.css30
-rw-r--r--stylesheets/quatuor.css54
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) {