quatuorbellefeuille.com

commit 7b4a6d4ac296f5170550604474fede05c98fea06
parent 9d0c584ffbd251b12e387f31d19d2c2201fbe46f
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Tue,  3 Nov 2020 22:57:32 +0100

Add artist portraits back

Use as many character-width-independent units as possible, to make
sure nothing moves too much when zooming.

Move some body CSS to common stylesheet. Probably broke events page,
ah well.  All in due time.

Fix "transition" property: apply only to "filter". Otherwise when
zooming images are resized with a slow 1s transition.

Diffstat:
M
artistes.css
 | 
69
+++++++++++++++------------------------------------------------------
M
artistes.html
 | 
10
++++------
M
commun.css
 | 
12
++++++++++++

3 files changed, 31 insertions(+), 60 deletions(-)
diff --git a/artistes.css b/artistes.css
@@ -1,17 +1,9 @@
-body {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
 .main {
-    flex-grow: 1;
     display: flex;
-    background: #ccc;
 }
 
 .main div {
-    padding: 2em;
+    padding: 2%;
 }
 
 #photos {
@@ -20,51 +12,20 @@ body {
     background: #eee;
 }
 
-#bio {
-    background: #bbb;
+#photos img {
+    width: 40%;
+    border-color: #ddd;
+    border-width: 1vw;
+    border-style: solid;
+    border-radius: 10%;
+    filter: grayscale(1);
+    transition: filter 1s;
 }
 
-/* #photos-inner { */
-/*     position: fixed; */
-/* } */
-
-/* #photos-inner img { */
-/*     position: absolute; */
-/*     height: 33%; */
-/*     border-color: #ddd; */
-/*     border-width: 10px; */
-/*     border-style: solid; */
-/*     border-radius: 20%; */
-/*     filter: grayscale(1); */
-/*     transition: 1s; */
-/* } */
-
-/* #photos-inner img:hover { */
-/*     filter: none; */
-/* } */
-
-/* /\* TODO: fix photos div height when zoomed out *\/ */
-/* img:nth-of-type(1) { */
-/*     left: 1%; */
-/*     top: 5%; */
-/* } */
-
-/* img:nth-of-type(2) { */
-/*     right: 1%; */
-/*     top: 10%; */
-/* } */
-
-/* img:nth-of-type(3) { */
-/*     left: 1%; */
-/*     top: 30%; */
-/* } */
-
-/* img:nth-of-type(4) { */
-/*     right: 1%; */
-/*     top: 35%; */
-/* } */
+#photos img:hover {
+    filter: none;
+}
 
-/* #bio { */
-/*     width: 45%; */
-/*     background: #fee; */
-/* } */
+#bio {
+    background: #bbb;
+}
diff --git a/artistes.html b/artistes.html
@@ -23,12 +23,10 @@
 
   <div class="main">
     <div id="photos">
-      <div id="photos-inner">
-        <!-- <img src="https://v3.goldensun-world.com/img/artwork/vlad_b.jpg"> -->
-        <!-- <img src="https://v3.goldensun-world.com/img/artwork/garet_b.jpg"> -->
-        <!-- <img src="https://v3.goldensun-world.com/img/artwork/ivan_b.jpg"> -->
-        <!-- <img src="https://v3.goldensun-world.com/img/artwork/sofia_b.jpg"> -->
-      </div>
+      <img src="https://v3.goldensun-world.com/img/artwork/vlad_b.jpg">
+      <img src="https://v3.goldensun-world.com/img/artwork/garet_b.jpg">
+      <img src="https://v3.goldensun-world.com/img/artwork/ivan_b.jpg">
+      <img src="https://v3.goldensun-world.com/img/artwork/sofia_b.jpg">
     </div>
 
     <div id="bio">
diff --git a/commun.css b/commun.css
@@ -29,6 +29,18 @@ nav ol li {
     flex: 1;
 }
 
+body {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+}
+
+.main {
+    flex-grow: 1;
+    background: #ccc;
+}
+
 footer {
     margin: auto;
 }