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.

1 files changed, 15 insertions, 54 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;
+}