diff --git a/public/assets/background.png b/public/assets/background.png new file mode 100644 index 0000000..9bd9c61 Binary files /dev/null and b/public/assets/background.png differ diff --git a/public/assets/ss-bulma.css b/public/assets/ss-bulma.css index 6c457b6..7eb798c 100644 --- a/public/assets/ss-bulma.css +++ b/public/assets/ss-bulma.css @@ -7,6 +7,16 @@ transform: rotate(359deg); } } + +.main-background { + display: none; + height: 100vh; + width: 100vw; + z-index: 0; + left: 0; + top: 0; +} + .tabs, .pagination-previous, .pagination-next, diff --git a/public/assets/ssr.css b/public/assets/ssr.css index e42f876..67aa7e6 100644 --- a/public/assets/ssr.css +++ b/public/assets/ssr.css @@ -1,6 +1,6 @@ :root { --background: #222; - --foreground: #252525; + --foreground: #2e2e2e; --textColor: #eee; --ppColour: #8992e8; --alternate: #72a8ff; @@ -15,6 +15,8 @@ --color-behind: rgb(128, 0, 0); --color-highlight: darkgreen; --error: red; + + --transparency: 0.95; } html { @@ -23,7 +25,6 @@ html { body { color: var(--textColor); - background-color: var(--background) !important; margin: 0 auto; padding: 0 1rem; min-height: 100vh; @@ -36,10 +37,22 @@ select { outline: none; } +.main-background { + position: fixed; + display: block; + background: var(--background-image) !important; + filter: blur(4px) brightness(0.8); + + background-size: cover !important; +} + .ssr-page-container { width: 100%; max-width: 1200px; margin: 0 auto; + + position: relative; + opacity: var(--transparency); } .box { diff --git a/src/App.svelte b/src/App.svelte index c13151f..8f386f4 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -14,7 +14,9 @@ import RankingPage from './pages/Ranking.svelte'; import SearchPage from './pages/Search.svelte'; import TwitchPage from './pages/Twitch.svelte'; + import { configStore } from './stores/config'; import createContainerStore from './stores/container'; + import { setGlobalCSSValue } from './utils/css'; // When SSR was built (eg: 1 hour ago) export const buildDateAgo = moment(buildInfo.buildDate, "MMMM Do YYYY, h:mm:ss a").fromNow(); @@ -27,12 +29,16 @@ setContext('pageContainer', containerStore); $: if (mainEl) containerStore.observe(mainEl) + + setGlobalCSSValue("background-image", "url(" + $configStore.preferences.backgroundImage + ")") +
+