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

Add Tailwind variant for screenshot layouts

Browse Source
This commit is contained in:
Matt Isenhower 2022-08-30 18:25:41 -07:00
parent 49c3708926
commit 4fac5b67cc
4 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
screenshots/index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Splatoon3.ink</title>
</head>
<body class="h-full">
<body class="h-full for-screenshots">
<div id="app"></div>
<script type="module" src="/src/screenshots.js"></script>
</body>

10
src/components/Splatoon3Countdown.vue
View File

@ -3,21 +3,21 @@
<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">is out now!</div>
<div class="text-gray-100 text-2xl ss:text-5xl">is out now!</div>
</div>
<div v-else>
<div class="text-gray-300">releases in</div>
<div class="text-gray-100 text-2xl">{{ days(remainingTime) }}!</div>
<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>
</div>
<div class="bg-blue-pattern rounded-full overflow-hidden my-4">
<div class="h-10 bg-yellow-pattern bg-animated rounded-full" :style="`width: ${percent}%`"></div>
</div>
<div class="flex justify-between text-sm font-medium">
<div class="text-splatoon-yellow -rotate-3" :title="formatDate(announceDate)">
<div class="text-splatoon-yellow ss:text-3xl -rotate-3" :title="formatDate(announceDate)">
Announced
</div>
<div class="text-right rotate-3" :class="isReleased ? 'text-splatoon-yellow' : 'text-splatoon-blue'" :title="formatDate(releaseDate)">
<div class="text-right ss:text-3xl rotate-3" :class="isReleased ? 'text-splatoon-yellow' : 'text-splatoon-blue'" :title="formatDate(releaseDate)">
Released
</div>
</div>

6
src/views/screenshots/CountdownView.vue
View File

@ -1,14 +1,14 @@
<template>
<div class="min-h-screen grow flex items-center justify-center">
<div class="min-h-screen grow flex items-center justify-center overflow-hidden">
<div class="grow flex items-center justify-center">
<div class="relative w-full max-w-2xl m-4">
<div class="relative w-full max-w-2xl m-4 scale-[1.55]">
<Splat3 class="absolute w-48 -bottom-16 left-28" fill="fill-splatoon-red" />
<Splat2 class="absolute w-64 -top-20 -left-20" fill="fill-splatoon-orange" />
<Splat4 class="absolute w-64 -top-20 -right-20" fill="fill-splatoon-blue" />
<Splat1 class="absolute hidden sm:block w-48 -bottom-36 right-20" fill="fill-splatoon-green" />
<div class="relative">
<div class="font-splatoon1 text-5xl text-center">Splatoon 3</div>
<div class="font-splatoon1 text-6xl text-center">Splatoon 3</div>
<Splatoon3Countdown />
</div>

8
tailwind.config.js
View File

@ -1,3 +1,5 @@
const plugin = require("tailwindcss/plugin");
module.exports = {
content: [
'./index.html',
@ -22,5 +24,9 @@ module.exports = {
},
},
},
plugins: [],
plugins: [
plugin(function({ addVariant }) {
addVariant('ss', 'body.for-screenshots &')
})
]
}