From cad7f747a88e6968401c269131711194ea5885b6 Mon Sep 17 00:00:00 2001 From: forest Date: Sun, 1 Aug 2021 15:36:36 -0500 Subject: [PATCH] =?UTF-8?q?set=20widths=20of=20everything=20in=20the=20mag?= =?UTF-8?q?ical-flying-div=20interaction=20=F0=9F=98=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit so that nothing is left up to the browser 😬 --- index.html | 8 ++++---- static/serverscoop.css | 31 +++++++++++++++++++++++-------- 2 files changed, 27 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 46a7290..6f7aa2c 100644 --- a/index.html +++ b/index.html @@ -44,14 +44,14 @@
-
+
technology food pyramid showing serverscoop at the base, with operating systems and applications on top
-
+
A cute looking person squatting like a hipster
-
+
two nerds looking smug, confident, and happy .button-links { display: none; @@ -187,9 +196,6 @@ header { margin-top: 100px; display: flex; } - .pyramid-image { - right: 0; - } } @media screen and (max-width: 768px) { @@ -205,12 +211,14 @@ header { } .pyramid-image { position: relative; + + /* 1.5vw away from the right hand side of the container, 85vw wide */ width: 85vw; - right: 3vw; + right: calc(1.5vw + 85vw); } .squatting-person { top: 42vw; - right: 74vw; + right: calc(72vw + 23vw); width: 23vw; } .splash > .button-links { @@ -303,6 +311,9 @@ header { .arms-crossed-people-image { position: relative; top: -10px; + + /* 180px wide, so shift half 180px to center it. */ + right: calc(0px + (180px * 0.5)); width: 180px; } @@ -315,6 +326,7 @@ header { @media screen and (max-width: 1280px) { .arms-crossed-people-image { + right: calc(0px + (150px * 0.5)); width: 150px; top: -30px; } @@ -339,6 +351,7 @@ header { } .arms-crossed-people-image { + right: calc(0px + (120px * 0.5)); width: 120px; top: -50px; } @@ -361,8 +374,10 @@ footer { margin-bottom: 100px; } -.position-absolute { +.magical-flying-div-anchor { position: absolute; + width: 0; + height: 0; } .horizontal {