Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-10-02 16:20:36 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Add "Discover all the features" to the front page

Browse Source
This commit is contained in:
Kalle
2026-03-20 17:36:30 +02:00
parent 570da9541b
commit a1d2784a9e
20 changed files with 200 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
app/styles/front.module.css
View File

@@ -165,3 +165,62 @@
gap: var(--s-2);
flex-wrap: wrap;
}
.weaponPills {
display: flex;
gap: var(--s-2);
justify-content: center;
flex-wrap: wrap;
}
.weaponPill {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-bg-higher);
border-radius: var(--radius-full);
padding: var(--s-1);
transition: background-color 0.15s ease-out;
}
.weaponPill:hover {
background-color: var(--color-bg-high);
}
.discoverGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-3);
padding: var(--s-2);
}
@media (min-width: 600px) {
.discoverGrid {
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
}
.discoverGridItem {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-1);
text-decoration: none;
color: var(--color-text);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
text-align: center;
}
.discoverGridItem:hover .discoverGridItemImage {
background-color: var(--color-bg-high);
}
.discoverGridItemImage {
width: var(--field-size-lg);
aspect-ratio: 1 / 1;
border-radius: var(--radius-field);
background-color: var(--color-bg-higher);
display: grid;
place-items: center;
}