mirror of
https://github.com/misenhower/splatoon3.ink.git
synced 2026-08-24 01:24:16 -05:00
Replace gray with zinc
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
@apply text-gray-100;
|
||||
@apply text-zinc-100;
|
||||
@apply bg-black;
|
||||
background-image: url('@/assets/img/information-bg.jpg');
|
||||
background-size: 400px;
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-900 bg-opacity-70 backdrop-blur-sm pt-2 pb-6 px-2 mx-1 rounded-lg space-y-2">
|
||||
<div class="bg-zinc-900 bg-opacity-70 backdrop-blur-sm pt-2 pb-6 px-2 mx-1 rounded-lg space-y-2">
|
||||
<div class="flex items-center justify-between font-splatoon2">
|
||||
<div class="flex items-center space-x-2 text-sm lg:text-lg">
|
||||
<template v-if="store.activeSchedule">
|
||||
@@ -22,11 +22,11 @@
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="w-32 bg-gray-600 rounded animate-pulse"> </div>
|
||||
<div class="w-32 bg-zinc-600 rounded animate-pulse"> </div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="justify-end text-xs lg:text-sm bg-gray-100 bg-opacity-80 rounded text-black px-2" v-if="store.activeSchedule">
|
||||
<div class="justify-end text-xs lg:text-sm bg-zinc-100 bg-opacity-80 rounded text-black px-2" v-if="store.activeSchedule">
|
||||
{{ formatTime(store.activeSchedule.startTime) }}
|
||||
–
|
||||
{{ formatTime(store.activeSchedule.endTime) }}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:hidden bg-gray-500 rounded animate-pulse w-32" v-else>
|
||||
<div class="sm:hidden bg-zinc-500 rounded animate-pulse w-32" v-else>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -27,11 +27,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-sm text-gray-300 text-shadow">
|
||||
<div class="text-sm text-zinc-300 text-shadow">
|
||||
in {{ formatDurationFromNow(props.schedule.startTime) }}
|
||||
</div>
|
||||
|
||||
<div class="text-sm text-gray-300 text-shadow">
|
||||
<div class="text-sm text-zinc-300 text-shadow">
|
||||
{{ formatTime(props.schedule.startTime) }}
|
||||
–
|
||||
{{ formatTime(props.schedule.endTime) }}
|
||||
@@ -39,9 +39,9 @@
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="text-xs lg:text-lg bg-gray-500 rounded animate-pulse"> </div>
|
||||
<div class="text-sm mx-8 bg-gray-500 rounded animate-pulse"> </div>
|
||||
<div class="text-sm mx-4 bg-gray-500 rounded animate-pulse"> </div>
|
||||
<div class="text-xs lg:text-lg bg-zinc-500 rounded animate-pulse"> </div>
|
||||
<div class="text-sm mx-8 bg-zinc-500 rounded animate-pulse"> </div>
|
||||
<div class="text-sm mx-4 bg-zinc-500 rounded animate-pulse"> </div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,11 +3,11 @@
|
||||
<div class="mt-6 font-splatoon2" aria-hidden="true">
|
||||
<div class="font-splatoon2 text-center space-y-2">
|
||||
<div v-if="isReleased">
|
||||
<div class="text-gray-100 text-2xl ss:text-5xl">is out now!</div>
|
||||
<div class="text-zinc-100 text-2xl ss:text-5xl">is out now!</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="text-gray-300 ss:text-3xl ss:mb-2">releases in</div>
|
||||
<div class="text-gray-100 text-2xl ss:text-5xl">{{ days(remainingTime) }}!</div>
|
||||
<div class="text-zinc-300 ss:text-3xl ss:mb-2">releases in</div>
|
||||
<div class="text-zinc-100 text-2xl ss:text-5xl">{{ days(remainingTime) }}!</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-blue-pattern rounded-full overflow-hidden my-4">
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="relative">
|
||||
<div class="bg-gray-700 aspect-[2/1] overflow-hidden" :class="imgClass">
|
||||
<div class="bg-zinc-700 aspect-[2/1] overflow-hidden" :class="imgClass">
|
||||
<img :src="lowRes" v-if="lowRes" />
|
||||
<div class="bg-gray-500 animate-pulse h-full" :class="imgClass" v-else> </div>
|
||||
<div class="bg-zinc-500 animate-pulse h-full" :class="imgClass" v-else> </div>
|
||||
</div>
|
||||
|
||||
<div class="
|
||||
absolute
|
||||
bg-gray-900
|
||||
bg-zinc-900
|
||||
rounded
|
||||
bottom-0
|
||||
left-1/2
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
</div>
|
||||
<div class="space-y-4 px-4">
|
||||
<GearCardHorizontal
|
||||
class="bg-gray-100 bg-opacity-20 backdrop-blur-sm border border-gray-50 border-opacity-20 rounded-lg"
|
||||
class="bg-zinc-100 bg-opacity-20 backdrop-blur-sm border border-zinc-50 border-opacity-20 rounded-lg"
|
||||
v-for="gear in gears"
|
||||
:key="gear.id"
|
||||
:gear="gear"
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<router-link to="/">Splatoon 3</router-link>
|
||||
</div>
|
||||
|
||||
<div class="justify-end font-splatoon2 text-3xl text-gray-200" v-if="props.title">
|
||||
<div class="justify-end font-splatoon2 text-3xl text-zinc-200" v-if="props.title">
|
||||
{{ props.title }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -16,7 +16,7 @@
|
||||
|
||||
<slot />
|
||||
|
||||
<div class="m-2 text-center text-xs text-gray-500">
|
||||
<div class="m-2 text-center text-xs text-zinc-500">
|
||||
<div>
|
||||
<img src="@/assets/img/little-buddy.png" class="mx-auto mb-4" width="50" />
|
||||
</div>
|
||||
@@ -67,7 +67,7 @@ onUnmounted(() => time.stopUpdatingNow());
|
||||
|
||||
<style scoped>
|
||||
.footer-links a span {
|
||||
@apply text-gray-300;
|
||||
@apply text-zinc-300;
|
||||
}
|
||||
|
||||
.footer-links a:hover span {
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
<slot />
|
||||
|
||||
<div class="h-12 m-4 bg-black bg-opacity-50 rounded-full">
|
||||
<div class="flex justify-between h-full font-splatoon2 text-sm text-gray-300">
|
||||
<div class="flex justify-between h-full font-splatoon2 text-sm text-zinc-300">
|
||||
<div class="flex justify-start items-center space-x-6 ml-4">
|
||||
<div>
|
||||
<img src="@/assets/img/favicon.svg" class="h-16 -my-8" />
|
||||
</div>
|
||||
<div class="flex items-center space-x-8">
|
||||
<div class="text-3xl text-gray-50">
|
||||
<div class="text-3xl text-zinc-50">
|
||||
{{ header }}
|
||||
</div>
|
||||
<div>
|
||||
@@ -59,7 +59,7 @@ function formatDateTime(date) {
|
||||
|
||||
<style scoped>
|
||||
.footer-links a span {
|
||||
@apply text-gray-300;
|
||||
@apply text-zinc-300;
|
||||
}
|
||||
|
||||
.footer-links a:hover span {
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
<div class="relative md:rotate-1">
|
||||
<ProductContainer class="py-12 bg-octoarrow">
|
||||
<div class="faq text-gray-300 px-10">
|
||||
<div class="faq text-zinc-300 px-10">
|
||||
<div class="space-y-6">
|
||||
<h1 class="font-splatoon2">About!</h1>
|
||||
|
||||
@@ -115,11 +115,11 @@ import Splat5 from '../components/splats/Splat5.vue';
|
||||
}
|
||||
|
||||
.faq h1 {
|
||||
@apply text-gray-50 text-3xl font-bold mb-2;
|
||||
@apply text-zinc-50 text-3xl font-bold mb-2;
|
||||
}
|
||||
|
||||
.faq h2 {
|
||||
@apply text-gray-100 text-xl font-semibold mb-1;
|
||||
@apply text-zinc-100 text-xl font-semibold mb-1;
|
||||
}
|
||||
|
||||
.faq p {
|
||||
|
||||
Reference in New Issue
Block a user