From 2d91340c2ba695f935e101e7ab98347c2c72747f Mon Sep 17 00:00:00 2001
From: zilcH40 <wlh233@live.com>
Date: Mon, 12 Sep 2022 16:59:13 +0800
Subject: feat: add option to enable hero looks like steam deck homepage

---
 README.md                 |  5 ++++-
 assets/css/hulga.scss     |  5 +++++
 assets/css/steamdeck.scss | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 assets/css/steamdeck.scss

diff --git a/README.md b/README.md
index de9120b..b04d064 100644
--- a/README.md
+++ b/README.md
@@ -92,7 +92,10 @@ theme = "hulga"
   darkMedia = true
 
   # enable hero section's is-bold effect
-  heroBold = true
+  heroBold = false
+
+  # enable hero section that looks like steam deck's home page
+  heroSteamDeck = false
 
   # enable PWA, prepare your icons and DON'T forget to modify manifest.json
   pwa = true
diff --git a/assets/css/hulga.scss b/assets/css/hulga.scss
index abed90a..7b4f00e 100644
--- a/assets/css/hulga.scss
+++ b/assets/css/hulga.scss
@@ -15,3 +15,8 @@ $primary: {{ .Site.Params.primaryColor }};
 // can define primary color in theme config
 
 @import "./common.scss";
+
+/* hero looks like steam deck */
+{{ if .Site.Params.heroSteamDeck }}
+@import "./steamdeck.scss"
+{{ end }}
\ No newline at end of file
diff --git a/assets/css/steamdeck.scss b/assets/css/steamdeck.scss
new file mode 100644
index 0000000..a3a2650
--- /dev/null
+++ b/assets/css/steamdeck.scss
@@ -0,0 +1,32 @@
+.hero.is-primary {
+  animation: bg-color 20s infinite !important;
+  -webkit-animation: bg-color 20s infinite !important;
+}
+@-webkit-keyframes bg-color {
+  0% { background-color: #1a75ff; }
+  10% { background-color: #6a5df8; }
+  20% { background-color: #c957e6; }
+  30% { background-color: #d2486b; }
+  40% { background-color: #bf44ac; }
+  50% { background-color: #ab47d0; }
+  60% { background-color: #9460f3; }
+  70% { background-color: #46aced; }
+  80% { background-color: #4ec3a3; }
+  90% { background-color: #b8ba05; }
+  // 100% { background-color: #d2486b; }
+  100% { background-color: #1a75ff; }
+}
+@keyframes bg-color {
+  0% { background-color: #1a75ff; }
+  10% { background-color: #6a5df8; }
+  20% { background-color: #c957e6; }
+  30% { background-color: #d2486b; }
+  40% { background-color: #bf44ac; }
+  50% { background-color: #ab47d0; }
+  60% { background-color: #9460f3; }
+  70% { background-color: #46aced; }
+  80% { background-color: #4ec3a3; }
+  90% { background-color: #b8ba05; }
+  // 100% { background-color: #d2486b; }
+  100% { background-color: #1a75ff; }
+}
\ No newline at end of file
-- 
cgit v1.2.3