Leahnaya/splatoon3.ink
1
0
Fork 0
mirror of https://github.com/misenhower/splatoon3.ink.git synced 2026-04-24 23:07:11 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add basic layout

Browse Source
This commit is contained in:
Matt Isenhower 2022-04-23 17:20:52 -07:00
parent 3a1424ee0b
commit 309ad30751
8 changed files with 66 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -1,12 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<title>Splatoon3.ink</title>
</head>
<body>
<body class="h-full">
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>

7
src/assets/base.css
View File

@ -1,3 +1,10 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
@apply text-slate-100;
@apply bg-black;
background-image: url('@/assets/information-bg.jpg');
background-size: 50%;
}

BIN
src/assets/battle-bg-pattern-blue.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
src/assets/battle-bg-pattern-yellow.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
src/assets/information-bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

32
src/components/Splatoon3Countdown.vue
View File

@ -1,3 +1,33 @@
<template>
<div>Countdown</div>
<div>
<div>
<div class="mt-6" aria-hidden="true">
<div class="text-center">
releases in 123 days!
</div>
<div class="bg-blue-pattern rounded-full overflow-hidden my-4">
<div class="h-10 bg-yellow-pattern rounded-full" style="width: 75%"></div>
</div>
<div class="grid grid-cols-2 text-sm font-medium">
<div class="text-splatoon-yellow">Announced</div>
<div class="text-splatoon-blue text-right">Released</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.bg-blue-pattern {
@apply bg-splatoon-blue;
background-image: url("@/assets/battle-bg-pattern-blue.jpg");
background-size: 190px;
}
.bg-yellow-pattern {
@apply bg-splatoon-yellow;
background-image: url("@/assets/battle-bg-pattern-yellow.jpg");
background-size: 190px;
}
</style>

20
src/views/HomeView.vue
View File

@ -1,8 +1,22 @@
<template>
<main>
<div class="text-xl">Splatoon 3</div>
<main class="min-h-screen flex flex-col">
<div class="grow flex items-center justify-center">
<div class="w-full max-w-2xl m-4">
<div class="text-4xl text-center">Splatoon 3</div>
<Splatoon3Countdown />
<Splatoon3Countdown />
</div>
</div>
<div class="m-2 text-center text-sm text-slate-300">
<a href="https://splatoon2.ink" target="_blank">
splatoon2.ink
</a>
&ndash;
<a href="https://twitter.com/splatoon2inkbot" target="_blank">
@splatoon2inkbot
</a>
</div>
</main>
</template>

9
tailwind.config.js
View File

@ -4,7 +4,14 @@ module.exports = {
'./src/**/*.{vue,js}',
],
theme: {
extend: {},
extend: {
colors: {
splatoon: {
yellow: '#eefe65',
blue: '#5b3df5',
}
}
},
},
plugins: [],
}