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.

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;
 }