Archive/clean-cuts
1
0
Fork 0
mirror of https://github.com/BlossomiShymae/clean-cuts.git synced 2025-12-06 10:10:47 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use dynamic background based on day

Browse Source
This commit is contained in:
BlossomiShymae
2024-06-12 19:06:25 -05:00
parent 76d02522ad
commit 610f0c7304
4 changed files with 24 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app.vue
View File

@@ -1,4 +1,5 @@
<template> <template>
<NuxtLoadingIndicator />
<NuxtLayout> <NuxtLayout>
<NuxtPage keepalive /> <NuxtPage keepalive />
</NuxtLayout> </NuxtLayout>

21
layouts/default.vue
View File

@@ -88,6 +88,27 @@
<script> <script>
import MaterialIcon from '~/components/MaterialIcon.vue'; import MaterialIcon from '~/components/MaterialIcon.vue';
import TheTitle from '~/components/TheTitle.vue'; import TheTitle from '~/components/TheTitle.vue';
// Hardcode splash art links for performance reasons. This is the layout after all.
const splashes = [
"https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498000.jpg", // Xayah - Sunday
"https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498001.jpg", // Cosmic Dusk - Monday
"https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498002.jpg", // Sweetheart - Tuesday
"https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498004.jpg", // Star Guardian - Wednesday
"https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498028.jpg", // Arcana - Thursday
"https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498037.jpg", // Broken Convenant - Friday
"https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498038.jpg", // Redeemed Star Guardian - Saturday
];
const date = new Date();
const day = date.getDay();
useHead({
htmlAttrs: {
"data-bs-theme": "dark",
"style": `background-image: url('${splashes[day]}')` // Use splash of corresponding day
}
});
</script> </script>
<style lang="scss"> <style lang="scss">

2
nuxt.config.ts
View File

@@ -15,7 +15,7 @@ export default defineNuxtConfig({
head: { head: {
htmlAttrs: { htmlAttrs: {
"data-bs-theme": "dark", "data-bs-theme": "dark",
"style": "background-image: url('https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498004.jpg');" "style": "background-image: url('https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498000.jpg');"
}, },
bodyAttrs: { bodyAttrs: {
class: "h-100" class: "h-100"

1
public/css/app.css
View File

@@ -5,6 +5,7 @@
html { html {
font-size: 14px; font-size: 14px;
background-image: none;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-attachment: fixed; background-attachment: fixed;