sidski/onepiece-webring
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

✨ add crewmates page

Browse source 
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
Sindre Kjelsrud 2024-04-24 15:28:32 +02:00
parent 85a97d3cc7
commit bc30322593
Signed by: sidski
GPG key ID: D2BBDF3EDE6BA9A6
1 changed files with 50 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

50
pages/crewmates.vue Normal file
View file

@ -0,0 +1,50 @@
<template>
<NuxtLayout name="default">
<div class="flex flex-col">
<div class="flex flex-col pt-4 gap-3">
<h1 class="pb-2 text-center md:text-6xl text-4xl font-bold text-white">the crewmates</h1>
<p class="text-l font-medium text-white px-4 md:px-10">
Here you can find all the crewmates of the Grand Line Webring. Want to go back to the frontpage? <a href="/" class="px-1 font-bold bg-red-500">Click here</a>
</p>
<div class="flex justify-center">
<ul class="grid-cols" id="crew-list">
<li data-lang="en" id="sid">
<a href="https://kjelsrud.dev">kjelsrud.dev</a>
</li>
</ul>
</div>
</div>
</div>
</NuxtLayout>
</template>
<style scoped>
.grid-cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5rem;
}
@media only screen and (max-width: 600px) {
.grid-cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
}
ul, li a{
color: white;
font-weight: 600
}
li :hover {
background-color: #ef4444;
}
#crew-list {
counter-reset: crew-index;
}
#crew-list > li {
counter-increment: crew-index;
}
#crew-list > li::before {
content: counter(crew-index) ". ";
}
</style>