Add a new years celebration logo to the hero

Libera-Chat · Dec 31, 2023 · e5be62a · e5be62a
1 parent aeb9b3b
commit e5be62a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/_includes/hero.html b/_includes/hero.html
@@ -1,6 +1,10 @@
 <section class="hero">
   <div class="logo">
-    <img min-height="60px" alt="" src="/static/img/libera-color.svg" data-proofer-ignore>
+    <picture>
+      <source media="(prefers-reduced-motion)" type="image/png" srcset="/static/img/libera-newyears.png" />
+      <source type="image/webp" srcset="/static/img/libera-newyears.webp" />
+      <img min-height="60px" alt="" src="/static/img/libera-newyears.gif" data-proofer-ignore>
+    </picture>
     <h1>Libera.&ZeroWidthSpace;Chat</h1>
   </div>
 

diff --git a/_includes/inline-hero-style.css b/_includes/inline-hero-style.css
@@ -31,12 +31,17 @@
   width: 50%;
 }
 
+.hero .logo picture {
+  display: flex;
+  justify-content: center;
+}
+
 .hero .logo h1 {
   margin: 0;
   font-family: Comfortaa, Ubuntu, sans-serif;
   font-weight: 400;
   font-size: 2rem;
-  margin-block-start: -1.5rem;
+  margin-block-start: 0;
   text-align: center;
   font-weight: bold;
 }
@@ -87,7 +92,7 @@
   }
   .hero .logo h1 {
     font-size: 3.25rem;
-    margin-block-start: -2.5rem;
+    margin-block-start: -0.5rem;
   }
   .hero .tagline, .hero .cta {
     justify-self: start;