Replace gray with zinc

This commit is contained in:
Matt Isenhower
2022-09-19 15:10:12 -07:00
parent 9610c31ae4
commit 7fe6f43f30
9 changed files with 26 additions and 26 deletions

View File

@@ -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;

View File

@@ -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">&nbsp;</div>
<div class="w-32 bg-zinc-600 rounded animate-pulse">&nbsp;</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) }}
&ndash;
{{ formatTime(store.activeSchedule.endTime) }}

View File

@@ -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>
&nbsp;
</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) }}
&ndash;
{{ 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">&nbsp;</div>
<div class="text-sm mx-8 bg-gray-500 rounded animate-pulse">&nbsp;</div>
<div class="text-sm mx-4 bg-gray-500 rounded animate-pulse">&nbsp;</div>
<div class="text-xs lg:text-lg bg-zinc-500 rounded animate-pulse">&nbsp;</div>
<div class="text-sm mx-8 bg-zinc-500 rounded animate-pulse">&nbsp;</div>
<div class="text-sm mx-4 bg-zinc-500 rounded animate-pulse">&nbsp;</div>
</template>
</div>
</div>

View File

@@ -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">

View File

@@ -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>&nbsp;</div>
<div class="bg-zinc-500 animate-pulse h-full" :class="imgClass" v-else>&nbsp;</div>
</div>
<div class="
absolute
bg-gray-900
bg-zinc-900
rounded
bottom-0
left-1/2

View File

@@ -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"

View File

@@ -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 {

View File

@@ -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 {

View File

@@ -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 {