From 7b4a6d4ac296f5170550604474fede05c98fea06 Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Tue, 3 Nov 2020 22:57:32 +0100
Subject: 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.
---
 artistes.css  | 69 +++++++++++++----------------------------------------------
 artistes.html | 10 ++++-----
 commun.css    | 12 +++++++++++
 3 files changed, 31 insertions(+), 60 deletions(-)

diff --git a/artistes.css b/artistes.css
index 043c0cb..2f33f7b 100644
--- 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
index ec1db8b..77a3da5 100644
--- 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
index 6f83f21..782463f 100644
--- 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;
 }
-- 
cgit v1.2.3