diff options
| author | zilcH40 <wlh233@live.com> | 2022-09-12 11:59:13 +0300 |
|---|---|---|
| committer | zilcH40 <wlh233@live.com> | 2022-09-12 11:59:13 +0300 |
| commit | 2d91340c2ba695f935e101e7ab98347c2c72747f (patch) | |
| tree | 493444ac970195d0459e5bbf8adac429eb7b7a6c | |
| parent | e847bd01935099671d15224072fb8cea353255c2 (diff) | |
feat: add option to enable hero looks like steam deck homepage
| -rw-r--r-- | README.md | 5 | ||||
| -rw-r--r-- | assets/css/hulga.scss | 5 | ||||
| -rw-r--r-- | assets/css/steamdeck.scss | 32 |
3 files changed, 41 insertions, 1 deletions
@@ -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 |