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

💄 update index styling

Browse source 
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
Sindre Kjelsrud 2024-04-24 17:05:53 +02:00
parent 7a50715038
commit 942c9232c1
Signed by untrusted user who does not match committer: sidski
GPG key ID: D2BBDF3EDE6BA9A6
1 changed files with 19 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
pages/index.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<NuxtLayout name="default"> <NuxtLayout name="default">
<div class="flex flex-col md:gap-4 gap-2 pt-4 pb-10"> <div class="flex flex-col md:gap-4 gap-2 pt-4 pb-2 sm:px-6 xl:px-18 px-4">
<h1 class="pb-2 text-center md:text-6xl text-4xl font-bold text-white">the grand line webring</h1> <h1 class="pb-2 text-center md:text-6xl text-4xl font-bold text-white">the grand line webring</h1>
<!-- INTRO --> <!-- INTRO -->
<div> <div>
@ -13,7 +13,7 @@
<div> <div>
<h2 class="md:text-3xl text-xl font-semibold text-white">How to Join</h2> <h2 class="md:text-3xl text-xl font-semibold text-white">How to Join</h2>
<p class="text-l font-medium text-white"> <p class="text-l font-medium text-white">
To join the Grand Line Webring, <a href="https://github.com/SindreKjelsrud/onepiece-webring" class="px-1 font-bold bg-red-500">submit a pull request</a> to our GitHub repository. Be sure to read the <a href="https://github.com/SindreKjelsrud/onepiece-webring/blob/main/README.md" class="px-1 font-bold bg-red-500">README.md</a> to make sure you've covered all the criterias to join! To join the Grand Line Webring, <a href="https://github.com/SindreKjelsrud/onepiece-webring" class="px-1 font-bold bg-red-600">submit a pull request</a> to our GitHub repository. Be sure to read the <a href="https://github.com/SindreKjelsrud/onepiece-webring/blob/main/README.md" class="px-1 font-bold bg-red-600">README.md</a> to make sure you've covered all the criterias to join!
We'll review your submission as fast as we can, and remember to include the widget on your site for all to see. We'll review your submission as fast as we can, and remember to include the widget on your site for all to see.
</p> </p>
</div> </div>
@ -21,7 +21,7 @@
<div> <div>
<h2 class="md:text-3xl text-xl font-semibold text-white">Webring Widgets</h2> <h2 class="md:text-3xl text-xl font-semibold text-white">Webring Widgets</h2>
<p class="text-l font-medium text-white"> <p class="text-l font-medium text-white">
You could either use the white or black SVG below (click them to download), or <a href="https://github.com/SindreKjelsrud/onepiece-webring/tree/main/public" class="px-1 font-bold bg-red-500">download it from here</a> and change the color yourself! You could either use the white or black SVG below (click them to download), or <a href="https://github.com/SindreKjelsrud/onepiece-webring/tree/main/public" class="px-1 font-bold bg-red-600">download it from here</a> and change the color yourself!
</p> </p>
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
@ -46,32 +46,32 @@
</template> </template>
<style scoped> <style scoped>
.grid-cols { .grid-cols {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 5rem; gap: 3rem;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.grid-cols { .grid-cols {
display: grid; display: grid;
grid-template-columns: repeat(3, 2fr); grid-template-columns: repeat(3, 1fr);
gap: 1rem; gap: 1rem;
} }
} }
ul, li a{ ul, li a{
color: white; color: white;
font-weight: 600 font-weight: 600
} }
li :hover { li :hover {
background-color: #ef4444; background-color: #ef4444;
} }
#crew-list { #crew-list {
counter-reset: crew-index; counter-reset: crew-index;
} }
#crew-list > li { #crew-list > li {
counter-increment: crew-index; counter-increment: crew-index;
} }
#crew-list > li::before { #crew-list > li::before {
content: counter(crew-index) ". "; content: counter(crew-index) ". ";
} }
</style> </style>