Avoid flickering when hovering Lucy just right

gleam-lang · Jul 18, 2024 · 1830fdb · 1830fdb
1 parent f10479d
commit 1830fdb
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git 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
@@ -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);
 }