Try to position calendar away from noticeable background elements

I'd call that ropecasting, but it feels more like shooting wooden
arrows at the robodinosaurs.  Without a bow, by throwing them like
darts.

1 files changed, 28 insertions, 2 deletions

diff --git a/stylesheets/index.css b/stylesheets/index.css
index a8d1fce..f69ffb7 100644
--- a/stylesheets/index.css
+++ b/stylesheets/index.css
@@ -72,8 +72,34 @@ a#next-concert:hover, a#next-concert:focus {
     a#next-concert {
         bottom: auto;
         left: auto;
-        top: 10%;
-     }
+    }
+
+    /* Try to keep calendar above the heads but below the lamp 🤕 */
+    @media (max-aspect-ratio: 1/2) {
+        a#next-concert {
+            top: 30%;
+        }
+    }
+    @media (min-aspect-ratio: 1/2) {
+        a#next-concert {
+            top: 27%;
+        }
+    }
+    @media (min-aspect-ratio: 2/3) {
+        a#next-concert {
+            top: 26%;
+        }
+    }
+    @media (min-aspect-ratio: 3/4) {
+        a#next-concert {
+            top: 23%;
+        }
+    }
+    @media (min-aspect-ratio: 85/100) {
+        a#next-concert {
+            top: 0;
+        }
+    }
 }
 
 @media (min-width: 50em) {