From 1830fdb46fd8f5aad3247be9d6938234e0093ee9 Mon Sep 17 00:00:00 2001
From: Simon Lydell <simon.lydell@gmail.com>
Date: Sun, 2 Jun 2024 22:49:29 +0200
Subject: [PATCH] Avoid flickering when hovering Lucy just right

---
 _includes/page-header.html | 13 +++++++------
 styles/main.css            | 17 +++++++++++++----
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/_includes/page-header.html b/_includes/page-header.html
index 7deee411..7f9b1477 100644
--- a/_includes/page-header.html
+++ b/_includes/page-header.html
@@ -26,12 +26,13 @@
   <div class="hero">
     <div class="content">
       {% if include.image %}
-      <img
-        data-show-pride
-        class="hero-lucy wide-only"
-        src="{{ include.image }}"
-        alt="{{ include.alt }}"
-      />
+      <div class="hero-lucy-container wide-only" data-show-pride>
+        <img
+          class="hero-lucy"
+          src="{{ include.image }}"
+          alt="{{ include.alt }}"
+        />
+      </div>
       {% endif %}
       <div class="text">{{ include.content }}</div>
     </div>
diff --git a/styles/main.css b/styles/main.css
index f14b3d5c..0402cbc2 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -201,10 +201,19 @@ main.content {
   margin-right: 0.25em;
 }
 
+.hero-lucy-container {
+  flex-shrink: 0;
+  height: 268px;
+  width: 280px;
+  margin: 0 var(--gap-5) var(--gap-2) var(--gap-5);
+  overflow: hidden;
+  /* Needed to not cut Lucy's corners when rotating: */
+  padding: var(--gap-1);
+  box-sizing: content-box;
+}
 .hero-lucy {
-  height: 307px;
-  width: 400px;
-  padding: var(--gap-1) var(--gap-6) var(--gap-3) var(--gap-6);
+  height: 100%;
+  width: 100%;
   transition: transform 0.2s ease;
 }
 .footer-lucy {
@@ -214,7 +223,7 @@ main.content {
   content: url("/images/lucy/lucyhappy.svg");
   transform: rotate(23deg);
 }
-.hero-lucy:hover {
+.hero-lucy-container:hover .hero-lucy {
   content: url("/images/lucy/lucyhappy.svg");
   transform: rotate(23deg);
 }