mirror of
https://github.com/BlossomiShymae/clean-cuts.git
synced 2025-12-06 10:10:47 +01:00
Update theme
This commit is contained in:
BlossomiShymae
132
app.vue
132
app.vue
@@ -32,4 +32,136 @@ AOS.init();
|
||||
.layout-leave-to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
* {
|
||||
color: white;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 14px;
|
||||
|
||||
background-image: none;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
min-height: 100%;
|
||||
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
html::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn:focus,
|
||||
.btn:active:focus,
|
||||
.btn-link.nav-link:focus,
|
||||
.form-control:focus,
|
||||
.form-check-input:focus,
|
||||
a:focus-visible {
|
||||
box-shadow: 0.05rem 0.05rem 0.375rem 0.1rem rgba(255, 255, 255, 0.744) !important;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
table {
|
||||
background-color: #0004 !important;
|
||||
}
|
||||
|
||||
thead, tbody, th, td {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
table > tbody > tr:nth-of-type(2n+1) > * {
|
||||
background-color: #0004 !important;
|
||||
}
|
||||
|
||||
table > tbody > tr:hover > * {
|
||||
background-color: #0008 !important;
|
||||
}
|
||||
|
||||
ul.dropdown-menu {
|
||||
background: transparent;
|
||||
backdrop-filter: blur(0.4rem);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.background {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.background-screen {
|
||||
background-color: #0008;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.bg-screen {
|
||||
background-color: #0004 !important;
|
||||
}
|
||||
|
||||
.background-transparent {
|
||||
background-color: transparent;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.background-blur {
|
||||
backdrop-filter: blur(0.2rem);
|
||||
}
|
||||
|
||||
.bg-blur {
|
||||
backdrop-filter: blur(0.2rem);
|
||||
}
|
||||
|
||||
.background-blur-2 {
|
||||
backdrop-filter: blur(0.4rem);
|
||||
}
|
||||
|
||||
.bg-blur-2 {
|
||||
backdrop-filter: blur(0.4rem);
|
||||
}
|
||||
|
||||
.bg-blur-3 {
|
||||
backdrop-filter: blur(0.6rem);
|
||||
}
|
||||
|
||||
.bg-blur-4 {
|
||||
backdrop-filter: blur(0.8rem);
|
||||
}
|
||||
|
||||
.z-index--10 {
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
.z-index-10 {
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
|
||||
5
components/Card.vue
Normal file
5
components/Card.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="rounded py-2 px-4 border border-1 border-light border-opacity-25" style="background: rgba(41, 31, 68, 0.8)">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,10 +1,9 @@
|
||||
|
||||
<template>
|
||||
<div class="h-100">
|
||||
<header>
|
||||
<div class="background background-transparent background-blur-2"></div>
|
||||
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light border-bottom border-light border-opacity-25 border-2 box-shadow">
|
||||
<div class="container">
|
||||
<header class="container">
|
||||
<Card>
|
||||
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light m-0 p-0">
|
||||
<NuxtLink class="navbar-brand fw-light" to="/" >
|
||||
<img class="me-1" src="/favicon.png" width="24" height="24"/>
|
||||
<TheTitle />
|
||||
@@ -109,8 +108,8 @@
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</Card>
|
||||
</header>
|
||||
<div class="container">
|
||||
<main role="main" class="pt-3 pb-3">
|
||||
@@ -118,7 +117,8 @@
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer class="container border border-light border-opacity-25 rounded p-4 pb-2 mt-2 mb-4 bg-blur-4">
|
||||
<footer class="container">
|
||||
<Card>
|
||||
<div class="d-flex justify-content-around align-items-center gap-2 mb-3 flex-wrap">
|
||||
<NuxtLink class="text-decoration-none text-light" to="/about">About</NuxtLink>
|
||||
<a class="text-decoration-none text-light" href="https://challenges.darkintaqt.com" referrerpolicy="no-referrer">Challenge Tracker</a>
|
||||
@@ -130,39 +130,15 @@
|
||||
<!-- <a class="text-decoration-none text-light" href="https://discord.com/invite/riotgamesdevrel" referrerpolicy="no-referrer">DevRel Discord</a> -->
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-center align-items-center pt-2 border-top border-light border-opacity-25">
|
||||
<p class="text-muted fw-light" style="font-size: 0.8rem;"><TheTitle/> was created under Riot Games' "Legal Jibber Jabber" policy using assets owned by Riot Games. Riot Games does not endorse or sponsor this project. </p>
|
||||
<div class="d-flex flex-column justify-content-center align-items-center pt-2 border-top border-light border-opacity-25">
|
||||
<p class="text-muted fw-light mb-1" style="font-size: 0.8rem;"><TheTitle/> was created under Riot Games' "Legal Jibber Jabber" policy using assets owned by Riot Games. Riot Games does not endorse or sponsor this project. </p>
|
||||
<a class="text-decoration-none text-light" href="https://www.artstation.com/sundownpink"><p class="fw-light mb-1" style="font-size: 0.8rem;">Artwork by Chao Liu.</p></a>
|
||||
</div>
|
||||
</Card>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MaterialIcon from '~/components/MaterialIcon.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>
|
||||
|
||||
<style lang="scss">
|
||||
a.navbar-brand {
|
||||
white-space: normal;
|
||||
|
||||
@@ -15,7 +15,7 @@ export default defineNuxtConfig({
|
||||
head: {
|
||||
htmlAttrs: {
|
||||
"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/498000.jpg');"
|
||||
"style": "background-image: url('/clean-cuts/img/background.jpg');"
|
||||
},
|
||||
bodyAttrs: {
|
||||
class: "h-100"
|
||||
@@ -36,10 +36,6 @@ export default defineNuxtConfig({
|
||||
"sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM",
|
||||
crossorigin: "anonymous",
|
||||
},
|
||||
{
|
||||
rel: "stylesheet",
|
||||
href: "/clean-cuts/css/app.css",
|
||||
},
|
||||
{
|
||||
rel: "icon",
|
||||
type: "image/png",
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
<div>
|
||||
<div class="d-flex flex-column justify-content-center align-items-center gap-2" style="margin-top: 25%;"
|
||||
data-aos="fade-down" data-aos-duration="1000">
|
||||
<div class="d-flex flex-column justify-content-center align-items-center">
|
||||
<Card class="d-flex flex-column justify-content-center align-items-center">
|
||||
<h1 class="display-4">
|
||||
<img class="me-4" src="/favicon.png"/>
|
||||
<TheTitle />
|
||||
</h1>
|
||||
<p>Your local League of Legends companion index.</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,143 +0,0 @@
|
||||
* {
|
||||
color: white;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 14px;
|
||||
|
||||
background-image: none;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
min-height: 100%;
|
||||
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
html::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #000B;
|
||||
z-index: 1;
|
||||
|
||||
backdrop-filter: blur(0.2rem);
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn:focus,
|
||||
.btn:active:focus,
|
||||
.btn-link.nav-link:focus,
|
||||
.form-control:focus,
|
||||
.form-check-input:focus,
|
||||
a:focus-visible {
|
||||
box-shadow: 0.05rem 0.05rem 0.375rem 0.1rem rgba(255, 255, 255, 0.744) !important;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
header {
|
||||
top: 0;
|
||||
position: sticky;
|
||||
z-index: 1000;
|
||||
background-color: #0004;
|
||||
|
||||
}
|
||||
|
||||
svg {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
table {
|
||||
background-color: #0004 !important;
|
||||
}
|
||||
|
||||
thead, tbody, th, td {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
table > tbody > tr:nth-of-type(2n+1) > * {
|
||||
background-color: #0004 !important;
|
||||
}
|
||||
|
||||
table > tbody > tr:hover > * {
|
||||
background-color: #0008 !important;
|
||||
}
|
||||
|
||||
ul.dropdown-menu {
|
||||
background: transparent;
|
||||
backdrop-filter: blur(0.4rem);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.background {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.background-screen {
|
||||
background-color: #0008;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.bg-screen {
|
||||
background-color: #0004 !important;
|
||||
}
|
||||
|
||||
.background-transparent {
|
||||
background-color: transparent;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.background-blur {
|
||||
backdrop-filter: blur(0.2rem);
|
||||
}
|
||||
|
||||
.bg-blur {
|
||||
backdrop-filter: blur(0.2rem);
|
||||
}
|
||||
|
||||
.background-blur-2 {
|
||||
backdrop-filter: blur(0.4rem);
|
||||
}
|
||||
|
||||
.bg-blur-2 {
|
||||
backdrop-filter: blur(0.4rem);
|
||||
}
|
||||
|
||||
.bg-blur-3 {
|
||||
backdrop-filter: blur(0.6rem);
|
||||
}
|
||||
|
||||
.bg-blur-4 {
|
||||
backdrop-filter: blur(0.8rem);
|
||||
}
|
||||
|
||||
.z-index--10 {
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
.z-index-10 {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
BIN
public/img/background.jpg
Normal file
BIN
public/img/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 357 KiB |
Reference in New Issue
Block a user