From 1fe290837e32b014a5fddce70b0b3a1008599888 Mon Sep 17 00:00:00 2001
From: hendr-ik <hello@niefeld.com>
Date: Tue, 16 Jan 2024 21:34:04 +0100
Subject: [PATCH] svg animation test

---
 website/theme/static/css/styles.css | 14 ++++++++++++++
 website/theme/templates/index.html  |  6 +++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/website/theme/static/css/styles.css b/website/theme/static/css/styles.css
index cd1f13a..cd413a8 100644
--- a/website/theme/static/css/styles.css
+++ b/website/theme/static/css/styles.css
@@ -116,3 +116,17 @@ IMAGES
 .imageCrop {
   object-fit: none;
 }
+
+/* ---------------------------------------------------
+ANIMATION
+----------------------------------------------------*/
+.circle-orange {
+  animation: hideshow 2s ease infinite;
+}
+@keyframes hideshow {
+  0% { opacity: 1; }
+  40% { opacity: 1; }
+  50% { opacity: 0; }
+  90% { opacity: 0; }
+  100% { opacity: 1; }
+}
diff --git a/website/theme/templates/index.html b/website/theme/templates/index.html
index 30655cb..bdb9872 100644
--- a/website/theme/templates/index.html
+++ b/website/theme/templates/index.html
@@ -79,7 +79,11 @@
 
     <div class="flex flex-wrap justify-center">
 
-      <img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-start pl5 pa0-l">
+      <div class="db self-start pl5 pa0-l">
+        <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle class="circle-orange" cx="32" cy="32" r="32" fill="#E9500A"/>
+        </svg>
+      </div>
 
       <div class="w-100 w-auto-l flex flex-column-l flex-wrap justify-center">
           <div class="wExtra32 colorSalmon ph3 pv4 pa4-l">