Leahnaya/splatoon3.ink
1
0
Fork 0
mirror of https://github.com/misenhower/splatoon3.ink.git synced 2026-03-21 17:54:13 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Migrate Tailwind CSS from v3 to v4

Browse Source 
- Replace JS config (tailwind.config.js) with CSS @theme block in base.css
- Switch from PostCSS to @tailwindcss/vite plugin
- Convert all bg-opacity-*/border-opacity-* to slash syntax (e.g. bg-zinc-900/70)
- Add @custom-variant for mobile and ss variants
- Add @reference to Vue scoped styles using @apply
- Rename v3 utilities: rounded→rounded-sm, backdrop-blur-sm→backdrop-blur-xs,
  drop-shadow→drop-shadow-sm, rotate-[25deg]→rotate-25
- Delete obsolete tailwind.config.js and postcss.config.js
- Rename vite.config.js to .mjs for ESM compatibility

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matt Isenhower 2026-02-15 13:52:27 -08:00
parent 7adb9c313e
commit 29482689f4
37 changed files with 745 additions and 972 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1474
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -56,14 +56,13 @@
"devDependencies": {
"@dword-design/eslint-plugin-import-alias": "^8.1.3",
"@eslint/js": "^9.39.2",
"@tailwindcss/vite": "^4.1.18",
"@vitejs/plugin-vue": "^5.2.4",
"autoprefixer": "^10.4.12",
"eslint": "^9.39.2",
"eslint-plugin-jsdoc": "^62.5.5",
"eslint-plugin-vue": "^10.8.0",
"globals": "^17.3.0",
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8",
"tailwindcss": "^4.1.18",
"typescript": "^5.9.3",
"vite": "^6.4.1",
"vue-eslint-parser": "^10.4.0"

6
postcss.config.js
View File

@ -1,6 +0,0 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

51
src/assets/css/base.css
View File

@ -1,8 +1,51 @@
@import url('./fonts.css');
@import url('@/assets/css/fonts.css');
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';
@custom-variant mobile (&:is(body.is-mobile *));
@custom-variant ss (&:is(body.for-screenshots *));
@theme {
--color-splatoon-blue: #603bff;
--color-splatoon-purple: #af50ff;
--color-splatoon-yellow: #eaff3d;
--color-splatoon-green: #6af7ce;
--color-splatoon-orange: #ff9750;
--color-splatoon-red: #ff505e;
--color-splatoon-brown: #7f413f;
--color-splatoon-battle-regular: #19d719;
--color-splatoon-battle-ranked: #f54910;
--color-splatoon-battle-xmatch: #0fdb9b;
--color-splatoon-battle-league: #f02d7d;
--color-splatoon-salmonRun: #ff5600;
--color-splatoon-bigRun: #b322ff;
--color-splatoon-eggstraWork: #be8800;
--font-splatoon1: var(--font-family-s1);
--font-splatoon2: var(--font-family-s2);
--drop-shadow-ruleIcon: 1px 1px 0 rgb(0, 0, 0);
}
/*
The default border color has changed to `currentcolor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentcolor);
}
}
body {
@apply text-zinc-100;

4
src/components/Debug/TimeOffsetSelector.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="flex justify-center text-xs">
<div class="flex space-x-2 bg-zinc-700 p-1 rounded">
<div class="bg-zinc-500 rounded font-semibold px-1">
<div class="flex space-x-2 bg-zinc-700 p-1 rounded-sm">
<div class="bg-zinc-500 rounded-sm font-semibold px-1">
Time Offset
</div>

2
src/components/ModalDialog.vue
View File

@ -10,7 +10,7 @@
leave-from="opacity-100"
leave-to="opacity-0"
>
<div class="fixed inset-0 bg-zinc-900/80 transition-opacity backdrop-blur-sm" />
<div class="fixed inset-0 bg-zinc-900/80 transition-opacity backdrop-blur-xs" />
</TransitionChild>
<div class="fixed inset-0 z-20" :class="noScroll ? 'overflow-hidden' : 'overflow-y-auto'">

10
src/components/NavButtons.vue
View File

@ -19,18 +19,20 @@
</template>
<style scoped>
@reference "@/assets/css/base.css";
.router-link {
@apply text-zinc-300 px-4 py-1 bg-zinc-300 bg-opacity-20 rounded-full;
@apply text-zinc-300 px-4 py-1 bg-zinc-300/20 rounded-full;
}
.router-link:hover {
@apply text-zinc-50 bg-opacity-30;
@apply text-zinc-50 bg-zinc-300/30;
}
.router-link-active {
@apply text-zinc-100 bg-splatoon-blue bg-opacity-100;
@apply text-zinc-100 bg-splatoon-blue;
}
.router-link-active:hover {
@apply text-white bg-opacity-100;
@apply text-white;
}
</style>

14
src/components/ScheduleBox.vue
View File

@ -6,12 +6,12 @@
<div class="font-splatoon1 lg:text-2xl xl:text-3xl text-shadow">
{{ $t(type.name) }}
</div>
<div v-if="type.badge" class="font-splatoon2 text-xs lg:text-sm xl:text-base bg-splatoon-blue rounded px-1 drop-shadow">
<div v-if="type.badge" class="font-splatoon2 text-xs lg:text-sm xl:text-base bg-splatoon-blue rounded-sm px-1 drop-shadow-sm">
{{ $t(type.badge) }}
</div>
</div>
<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="bg-zinc-900/70 backdrop-blur-xs 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 && store.activeSchedule.settings">
@ -24,13 +24,13 @@
</template>
<template v-else>
<div class="w-32 bg-zinc-600 rounded animate-pulse">
<div class="w-32 bg-zinc-600 rounded-sm animate-pulse">
&nbsp;
</div>
</template>
</div>
<div v-if="store.activeSchedule" class="justify-end text-xs lg:text-sm bg-zinc-100 bg-opacity-80 rounded text-black px-2">
<div v-if="store.activeSchedule" class="justify-end text-xs lg:text-sm bg-zinc-100/80 rounded-sm text-black px-2">
{{ $d(store.activeSchedule.startTime, 'time') }}
&ndash;
{{ $d(store.activeSchedule.endTime, 'time') }}
@ -52,7 +52,7 @@
</div>
<div v-if="nextSchedule && nextSchedule.settings" class="mx-2 space-y-2">
<SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2">
<SquidTape class="font-splatoon2 text-sm drop-shadow-sm -rotate-6 -mx-2">
<div class="px-2">
{{ $t('times.next') }}
</div>
@ -62,8 +62,8 @@
</div>
<div class="text-center pt-2">
<button class="bg-zinc-300 bg-opacity-50 hover:bg-opacity-70 px-2 py-1 rounded-full font-splatoon2 text-shadow" @click="open = true">
<span class="inline-block rotate-[25deg] text-red">&#57445;</span>
<button class="bg-zinc-300/50 hover:bg-zinc-300/70 px-2 py-1 rounded-full font-splatoon2 text-shadow" @click="open = true">
<span class="inline-block rotate-25 text-red">&#57445;</span>
{{ $t('schedule.all-upcoming') }}
</button>
</div>

4
src/components/ScheduleDialog.vue
View File

@ -8,7 +8,7 @@
<div class="font-splatoon1 lg:text-2xl xl:text-3xl text-shadow">
{{ $t(type.name) }}
</div>
<div v-if="type.badge" class="font-splatoon2 text-xs lg:text-sm xl:text-base bg-splatoon-blue rounded px-1 drop-shadow">
<div v-if="type.badge" class="font-splatoon2 text-xs lg:text-sm xl:text-base bg-splatoon-blue rounded-sm px-1 drop-shadow-sm">
{{ $t(type.badge) }}
</div>
</div>
@ -22,7 +22,7 @@
<div class="h-full overflow-y-auto pt-24 pb-8">
<template v-for="{ title, schedules } in sections" :key="title">
<div class="mt-6 mx-2 space-y-2 text-left">
<SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2">
<SquidTape class="font-splatoon2 text-sm drop-shadow-sm -rotate-6 -mx-2">
<div class="px-2">
{{ $t(title) }}
</div>

8
src/components/ScheduleRow.vue
View File

@ -21,7 +21,7 @@
</div>
</div>
</div>
<div v-else class="sm:hidden bg-zinc-500 rounded animate-pulse w-32">
<div v-else class="sm:hidden bg-zinc-500 rounded-sm animate-pulse w-32">
&nbsp;
</div>
@ -55,13 +55,13 @@
</template>
<template v-else>
<div class="text-xs lg:text-lg bg-zinc-500 rounded animate-pulse">
<div class="text-xs lg:text-lg bg-zinc-500 rounded-sm animate-pulse">
&nbsp;
</div>
<div class="text-sm mx-8 bg-zinc-500 rounded animate-pulse">
<div class="text-sm mx-8 bg-zinc-500 rounded-sm animate-pulse">
&nbsp;
</div>
<div class="text-sm mx-4 bg-zinc-500 rounded animate-pulse">
<div class="text-sm mx-4 bg-zinc-500 rounded-sm animate-pulse">
&nbsp;
</div>
</template>

2
src/components/SplatfestBox.vue
View File

@ -7,7 +7,7 @@
</div>
<div class="flex justify-center mx-2">
<div class="font-splatoon2 text-zinc-200 text-center text-shadow text-sm lg:text-lg bg-zinc-700 px-4 py-1 rounded-full bg-opacity-50 backdrop-blur-sm">
<div class="font-splatoon2 text-zinc-200 text-center text-shadow text-sm lg:text-lg bg-zinc-700/50 px-4 py-1 rounded-full backdrop-blur-xs">
{{ $t(`splatnet.festivals.${festival.__splatoon3ink_id}.title`, festival.title) }}
</div>
</div>

2
src/components/SplatfestMultiBox.vue
View File

@ -6,7 +6,7 @@
</div>
<template v-for="festival in festivals" :key="festival.id">
<div class="flex justify-center mx-2">
<div class="font-splatoon2 text-zinc-200 text-center text-shadow text-sm lg:text-lg bg-zinc-700 px-4 py-1 rounded-full bg-opacity-50 backdrop-blur-sm">
<div class="font-splatoon2 text-zinc-200 text-center text-shadow text-sm lg:text-lg bg-zinc-700/50 px-4 py-1 rounded-full backdrop-blur-xs">
{{ $t(`splatnet.festivals.${festival.__splatoon3ink_id}.title`, festival.title) }}
</div>
</div>

6
src/components/SplatfestResultsBox.vue
View File

@ -5,11 +5,11 @@
{{ $t('festival.results.title') }}
</div>
<div class="mx-2 px-1 bg-zinc-700 bg-opacity-50 backdrop-blur-sm rounded-lg">
<div class="mx-2 px-1 bg-zinc-700/50 backdrop-blur-xs rounded-lg">
<div class="flex justify-center md:justify-center py-2">
<div class="w-36 sm:mx-4 lg:-mx-1" />
<template v-for="team in festival.teams" :key="team.id">
<div class="w-12 mx-2 sm:w-20 flex justify-center py-1 rounded" :style="`background-color: ${toRgba(team.color)};`">
<div class="w-12 mx-2 sm:w-20 flex justify-center py-1 rounded-sm" :style="`background-color: ${toRgba(team.color)};`">
<img :src="team.image.url" class="w-6 h-6" />
</div>
</template>
@ -21,7 +21,7 @@
{{ $t(row.title) }}
</div>
<div class="flex bg-zinc-700 bg-opacity-70 rounded-full py-1">
<div class="flex bg-zinc-700/70 rounded-full py-1">
<div v-for="(result, i) in row.results" :key="i" class="w-16 lg:w-20 sm:mx-2">
<div :class="result.isTop ? 'text-splatoon-yellow' : 'text-zinc-300'">
{{ (result.ratio * 100).toFixed(2) }}%

2
src/components/Splatoon3Countdown.vue
View File

@ -67,6 +67,8 @@ function formatDate(date) {
</script>
<style scoped>
@reference "@/assets/css/base.css";
.bg-blue-pattern {
@apply bg-splatoon-blue;
background-image: url("@/assets/img/battle-bg-pattern-blue.jpg");

4
src/components/StageImage.vue
View File

@ -1,6 +1,6 @@
<template>
<button class="block relative" @click.prevent="open = true">
<div class="bg-zinc-700 aspect-[2/1] overflow-hidden" :class="imgClass">
<div class="bg-zinc-700 aspect-2/1 overflow-hidden" :class="imgClass">
<img v-if="lowRes" :src="lowRes" />
<div v-else class="bg-zinc-500 animate-pulse h-full" :class="imgClass">
&nbsp;
@ -17,7 +17,7 @@
left-1/2
-translate-x-1/2
translate-y-1/2
overflow-ellipsis
text-ellipsis
overflow-hidden
max-w-[85%]
whitespace-nowrap

6
src/components/TricolorBox.vue
View File

@ -6,12 +6,12 @@
<div class="font-splatoon1 lg:text-2xl xl:text-3xl text-shadow">
{{ $t(type.name) }}
</div>
<div v-if="type.badge" class="font-splatoon2 text-xs lg:text-sm xl:text-base bg-splatoon-blue rounded px-1 drop-shadow">
<div v-if="type.badge" class="font-splatoon2 text-xs lg:text-sm xl:text-base bg-splatoon-blue rounded-sm px-1 drop-shadow-sm">
{{ $t(type.badge) }}
</div>
</div>
<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="bg-zinc-900/70 backdrop-blur-xs 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">
<div>
@ -27,7 +27,7 @@
</div>
</div>
<div v-if="tricolor.startTime && tricolor.endTime" class="justify-end text-xs lg:text-sm bg-zinc-100 bg-opacity-80 rounded text-black px-2">
<div v-if="tricolor.startTime && tricolor.endTime" class="justify-end text-xs lg:text-sm bg-zinc-100/80 rounded-sm text-black px-2">
{{ $d(tricolor.startTime, 'dateTimeShort') }}
&ndash;
{{ $d(tricolor.endTime, 'dateTimeShort') }}

10
src/components/challenge/ChallengeScheduleBox.vue
View File

@ -13,7 +13,7 @@
</div>
</div>
<div class="bg-zinc-900 bg-opacity-70 backdrop-blur-sm pt-2 pb-1 px-2 mx-2 rounded-lg space-y-2">
<div class="bg-zinc-900/70 backdrop-blur-xs pt-2 pb-1 px-2 mx-2 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="event">
@ -26,14 +26,14 @@
</template>
<template v-else>
<div class="w-32 bg-zinc-600 rounded animate-pulse">
<div class="w-32 bg-zinc-600 rounded-sm animate-pulse">
&nbsp;
</div>
</template>
</div>
<div v-if="event.activeTimePeriod">
<SquidTape class="font-splatoon2 text-sm drop-shadow rotate-6">
<SquidTape class="font-splatoon2 text-sm drop-shadow-sm rotate-6">
<div class="px-2">
{{ $t('events.now_open') }}
</div>
@ -66,7 +66,7 @@
<!-- Current/future time periods -->
<template v-if="event.currentTimePeriods?.length">
<SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2 mt-4">
<SquidTape class="font-splatoon2 text-sm drop-shadow-sm -rotate-6 -mx-2 mt-4">
<div class="px-2">
{{ event.activeTimePeriod ? $t('events.now') : $t('events.available') }}
</div>
@ -81,7 +81,7 @@
</div>
</div>
<div class="font-splatoon2 mx-2 p-2 text-zinc-200 bg-zinc-900 bg-opacity-50 backdrop-blur-sm rounded-lg whitespace-pre-line">
<div class="font-splatoon2 mx-2 p-2 text-zinc-200 bg-zinc-900/50 backdrop-blur-xs rounded-lg whitespace-pre-line">
{{ br2nl($t(`splatnet.events.${event.settings.leagueMatchEvent.id}.regulation`, event.settings.leagueMatchEvent.regulation)) }}
</div>
</div>

2
src/components/challenge/ChallengeScheduleRow.vue
View File

@ -9,7 +9,7 @@
</div>
<div v-if="isCurrent" class="flex justify-end w-full">
<div class="hidden sm:block text-xs bg-zinc-100 bg-opacity-80 rounded text-black px-2">
<div class="hidden sm:block text-xs bg-zinc-100/80 rounded-sm text-black px-2">
<template v-if="isActive">
{{ $t('time.remaining', { time: formatDurationFromNow(event.activeTimePeriod.endTime) }) }}
</template>

4
src/components/gear/DailyDropGear.vue
View File

@ -7,7 +7,7 @@
</div>
<div class="flex flex-col items-center -space-y-2">
<SquidTape
class="font-splatoon2 text-sm text-black rounded-sm -rotate-2 z-10"
class="font-splatoon2 text-sm text-black rounded-xs -rotate-2 z-10"
bg="bg-splatoon-green"
squid-bg="bg-black"
border="border border-black"
@ -36,7 +36,7 @@
<GearCardHorizontal
v-for="gear in gears"
:key="gear.id"
class="bg-zinc-100 bg-opacity-20 backdrop-blur-sm border border-zinc-50 border-opacity-20 rounded-lg"
class="bg-zinc-100/20 backdrop-blur-xs border border-zinc-50/20 rounded-lg"
:gear="gear"
/>
</div>

2
src/components/gear/GearCard.vue
View File

@ -56,7 +56,7 @@
<!-- Time left -->
<div class="absolute top-1 left-6">
<div class="inline-block text-xs bg-zinc-200 bg-opacity-30 rounded px-1 py-px font-semibold">
<div class="inline-block text-xs bg-zinc-200/30 rounded-sm px-1 py-px font-semibold">
{{ $t('time.left', { time: formatDurationHoursFromNow(props.gear.saleEndTime) }) }}
</div>
</div>

10
src/components/gear/GearCardHorizontal.vue
View File

@ -8,17 +8,17 @@
<!-- Details -->
<div class="grow min-w-0 flex flex-col justify-evenly space-y-2">
<div class="flex">
<div class="inline-block text-xs bg-zinc-200 bg-opacity-30 rounded px-1 py-px font-semibold">
<div class="inline-block text-xs bg-zinc-200/30 rounded-sm px-1 py-px font-semibold">
{{ $t('time.left', { time: formatDurationHoursFromNow(props.gear.saleEndTime) }) }}
</div>
</div>
<div class="flex items-center space-x-2">
<div class="bg-white h-6 aspect-square rounded">
<div class="bg-white h-6 aspect-square rounded-sm">
<img :src="gear.brand.image.url" :title="$t(`splatnet.brands.${gear.brand.id}.name`, gear.brand.name)" />
</div>
<div class="flex-1 font-splatoon2 text-shadow overflow-hidden overflow-ellipsis whitespace-nowrap">
<div class="flex-1 font-splatoon2 text-shadow overflow-hidden text-ellipsis whitespace-nowrap">
{{ $t(`splatnet.gear.${gear.__splatoon3ink_id}.name`, gear.name) }}
</div>
</div>
@ -49,7 +49,7 @@
<div v-if="false" class="absolute top-0 right-0 hidden mobile:block">
<a :href="shopUrl">
<SquidTape
class="font-splatoon2 text-sm text-black rounded-sm -rotate-2"
class="font-splatoon2 text-sm text-black rounded-xs -rotate-2"
bg="bg-splatoon-yellow"
squid-bg="bg-black"
border="border border-black"
@ -67,7 +67,7 @@
<div v-if="false" class="hidden mobile:block">
<a :href="shopUrl">
<SquidTape
class="font-splatoon2 text-sm text-black rounded-sm -rotate-2"
class="font-splatoon2 text-sm text-black rounded-xs -rotate-2"
bg="bg-splatoon-yellow"
squid-bg="bg-black"
border="border border-black"

2
src/components/gear/RegularGear.vue
View File

@ -15,7 +15,7 @@
<div class="pb-24 lg:pb-36">
<div class="text-center py-4">
<SquidTape
class="font-splatoon1 text-2xl text-black rounded-sm -rotate-2 z-10"
class="font-splatoon1 text-2xl text-black rounded-xs -rotate-2 z-10"
bg="bg-splatoon-orange"
squid-bg="bg-black"
border="border border-black"

4
src/components/salmonrun/ExpandedSalmonRunRow.vue
View File

@ -23,7 +23,7 @@
<div
v-if="schedule.isBigRun"
class="bg-zinc-800 bg-opacity-80 text-sm text-white rounded-lg px-2 border-2 border-splatoon-bigRun"
class="bg-zinc-800/80 text-sm text-white rounded-lg px-2 border-2 border-splatoon-bigRun"
>
<img src="@/assets/img/modes/coop.bigrun.svg" :title="$t('salmonrun.bigrun')" class="w-4 inline-block" />
{{ $t('salmonrun.bigrun') }}
@ -44,7 +44,7 @@
{{ $t('salmonrun.weapons') }}
</div>
<div class="bg-zinc-900 bg-opacity-30 rounded-full backdrop-blur-sm px-2">
<div class="bg-zinc-900/30 rounded-full backdrop-blur-xs px-2">
<SalmonRunWeapons :weapons="schedule.settings.weapons" weapon-class="w-10 sm:w-14" />
</div>
</div>

6
src/components/salmonrun/SalmonRunBox.vue
View File

@ -16,7 +16,7 @@
<!-- Main content -->
<div class="md:w-2/3 mx-2 pb-2">
<div v-if="activeSchedule" class="mb-6 space-y-2">
<SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2">
<SquidTape class="font-splatoon2 text-sm drop-shadow-sm -rotate-6 -mx-2">
<div class="px-2">
{{ $t('times.now') }}
</div>
@ -25,8 +25,8 @@
<ExpandedSalmonRunRow :schedule="activeSchedule" :eggstra="eggstra" />
</div>
<div v-if="upcomingSchedules.length" class="py-1 bg-zinc-900 bg-opacity-70 rounded-lg backdrop-blur-sm">
<SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2">
<div v-if="upcomingSchedules.length" class="py-1 bg-zinc-900/70 rounded-lg backdrop-blur-xs">
<SquidTape class="font-splatoon2 text-sm drop-shadow-sm -rotate-6 -mx-2">
<div class="px-2">
{{ $t('times.future') }}
</div>

6
src/components/salmonrun/SalmonRunRow.vue
View File

@ -12,20 +12,20 @@
{{ $d(schedule.endTime, 'dateTimeShort') }}
</div>
<div class="hidden sm:block text-xs bg-zinc-100 bg-opacity-80 rounded text-black px-2">
<div class="hidden sm:block text-xs bg-zinc-100/80 rounded-sm text-black px-2">
{{ $t('time.in', { time: formatDurationFromNow(schedule.startTime, true) }) }}
</div>
</div>
<div class="flex items-center space-x-2">
<StageImage class="w-1/5" img-class="rounded" :stage="schedule.settings.coopStage" hide-label />
<StageImage class="w-1/5" img-class="rounded-sm" :stage="schedule.settings.coopStage" hide-label />
<div class="flex-1 text-sm text-zinc-300 text-shadow">
<KingSalmonid :schedule="schedule" class="inline-block align-middle drop-shadow-ruleIcon" size="w-5" />
{{ $t(`splatnet.stages.${schedule.settings.coopStage.id}.name`, schedule.settings.coopStage.name) }}
<span v-if="schedule.isBigRun" class="text-xs inline-block bg-splatoon-bigRun bg-opacity-80 text-white rounded px-2">
<span v-if="schedule.isBigRun" class="text-xs inline-block bg-splatoon-bigRun/80 text-white rounded-sm px-2">
{{ $t('salmonrun.bigrun') }}
</span>
</div>

2
src/components/screenshots/DailyDropGear.vue
View File

@ -4,7 +4,7 @@
<div>
<div class="flex flex-col items-center -mt-10 -space-y-2">
<SquidTape
class="font-splatoon2 text-2xl text-black rounded-sm -rotate-2 z-10"
class="font-splatoon2 text-2xl text-black rounded-xs -rotate-2 z-10"
bg="bg-splatoon-green"
squid-bg="bg-black"
border="border-2 border-black"

2
src/components/screenshots/RegularGear.vue
View File

@ -15,7 +15,7 @@
<div class="pb-24 lg:pb-36">
<div class="text-center pt-4">
<SquidTape
class="font-splatoon1 text-4xl text-black rounded-sm -rotate-2 z-10"
class="font-splatoon1 text-4xl text-black rounded-xs -rotate-2 z-10"
bg="bg-splatoon-orange"
squid-bg="bg-black"
border="border-2 border-black"

2
src/components/screenshots/ScreenshotScheduleBox.vue
View File

@ -21,7 +21,7 @@
<div>
<div v-if="type.badge" class="flex items-center">
<img :src="type.img" class="h-8" />
<div v-if="type.badge" class="font-splatoon2 text-xl bg-splatoon-blue px-2 drop-shadow rounded">
<div v-if="type.badge" class="font-splatoon2 text-xl bg-splatoon-blue px-2 drop-shadow-sm rounded-sm">
{{ $t(type.badge) }}
</div>
</div>

2
src/components/screenshots/ScreenshotTricolorBox.vue
View File

@ -26,7 +26,7 @@
<div>
<div v-if="type.badge" class="flex items-center">
<img :src="type.img" class="h-8" />
<div v-if="type.badge" class="font-splatoon2 text-xl bg-splatoon-blue px-2 drop-shadow rounded">
<div v-if="type.badge" class="font-splatoon2 text-xl bg-splatoon-blue px-2 drop-shadow-sm rounded-sm">
{{ $t(type.badge) }}
</div>
</div>

2
src/layouts/MainLayout.vue
View File

@ -67,6 +67,8 @@ const isDev = import.meta.env.DEV;
</script>
<style scoped>
@reference "@/assets/css/base.css";
.footer-links a span {
@apply text-zinc-300;
}

4
src/layouts/ScreenshotLayout.vue
View File

@ -4,7 +4,7 @@
<div class="h-16" />
<div class="h-12 m-4 bg-black bg-opacity-50 backdrop-blur-sm rounded-full absolute bottom-0 inset-x-0">
<div class="h-12 m-4 bg-black/50 backdrop-blur-xs rounded-full absolute bottom-0 inset-x-0">
<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>
@ -74,6 +74,8 @@ const isDev = import.meta.env.DEV;
</script>
<style scoped>
@reference "@/assets/css/base.css";
.footer-links a span {
@apply text-zinc-300;
}

2
src/views/AboutView.vue
View File

@ -98,6 +98,8 @@ import ProductContainer from '@/components/ProductContainer.vue';
</script>
<style scoped>
@reference "@/assets/css/base.css";
.bg-octoarrow {
background-image: url('@/assets/img/octoarrow-transparent.png');
background-size: 200px;

2
src/views/ChallengesView.vue
View File

@ -1,7 +1,7 @@
<template>
<MainLayout :title="$t('events.title')">
<div class="grow flex items-center justify-center">
<div class="mx-4 md:mx-12 max-w-screen-2xl w-full my-6">
<div class="mx-4 md:mx-12 max-w-(--breakpoint-2xl) w-full my-6">
<div v-if="store.currentSchedules?.length" class="flex flex-col lg:flex-row items-center justify-center gap-10">
<div v-for="(event, i) in store.currentSchedules" :key="i" class="max-w-xl">
<ChallengeScheduleBox

2
src/views/SocialsView.vue
View File

@ -96,6 +96,8 @@ const displaySocials = computed(() => {
</script>
<style scoped>
@reference "@/assets/css/base.css";
.bg-octoarrow {
background-image: url('@/assets/img/camo-transparent-bg.png');
background-size: 800px;

2
src/views/screenshots/ScreenshotsHomeView.vue
View File

@ -55,6 +55,8 @@
</template>
<style scoped>
@reference "@/assets/css/base.css";
a {
@apply underline;
}

47
tailwind.config.js
View File

@ -1,47 +0,0 @@
const plugin = require('tailwindcss/plugin');
module.exports = {
content: [
'./index.html',
'./src/**/*.{vue,js,mjs}',
],
theme: {
extend: {
colors: {
splatoon: {
blue: '#603bff',
purple: '#af50ff',
yellow: '#eaff3d',
green: '#6af7ce',
orange: '#ff9750',
red: '#ff505e',
brown: '#7f413f',
battle: {
regular: '#19d719',
ranked: '#f54910',
xmatch: '#0fdb9b',
league: '#f02d7d',
},
salmonRun: '#ff5600',
bigRun: '#b322ff',
eggstraWork: '#be8800',
},
},
fontFamily: {
splatoon1: 'var(--font-family-s1)',
splatoon2: 'var(--font-family-s2)',
},
dropShadow: {
'ruleIcon': '1px 1px 0 rgb(0,0,0)',
},
},
},
plugins: [
plugin(function({ addVariant }) {
addVariant('mobile', 'body.is-mobile &');
addVariant('ss', 'body.for-screenshots &');
}),
],
};

2
vite.config.js → vite.config.mjs
View File

@ -3,6 +3,7 @@ import { fileURLToPath, URL } from 'url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import tailwindcss from '@tailwindcss/vite';
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
const redirectToDist = [
@ -14,6 +15,7 @@ const redirectToDist = [
export default defineConfig({
plugins: [
vue(),
tailwindcss(),
VueI18nPlugin({
include: resolve(__dirname, './src/assets/i18n/*.json'),
}),