Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-11-14 16:58:11 -06:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Lay out footer link cards in an even grid with hover highlight

Browse Source
This commit is contained in:
Kalle
2026-10-25 13:14:59 +02:00
parent 77ff74bf6e
commit 2dba62549e
3 changed files with 45 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/components/layout/Footer.module.css
View File

@@ -127,17 +127,15 @@
}
.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 48rem;
display: grid;
width: 100%;
max-width: 60rem;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--s-2);
padding-inline: var(--s-4);
@container (max-width: 640px) {
display: grid;
align-self: stretch;
max-width: none;
@container (max-width: 60rem) {
max-width: 36rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@@ -149,16 +147,20 @@
.card {
display: flex;
align-items: center;
min-width: 10.5rem;
gap: var(--s-2);
padding: var(--s-2) var(--s-4);
border-radius: var(--radius-box);
background-color: var(--color-bg-higher);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
transition: background-color 0.15s;
@container (max-width: 640px) {
min-width: 0;
&:hover {
background-color: color-mix(
in oklch,
var(--color-bg-higher),
var(--color-fg-accent) 12%
);
}
}

56
app/components/layout/Footer.tsx
View File

@@ -163,10 +163,28 @@ export function Footer() {
<footer className={styles.footer}>
<div className={styles.cards}>
<FooterCard
icon={<GitHubIcon className={styles.cardIcon} />}
title="GitHub"
subtitle={t("common:footer.github.subtitle")}
href={SENDOU_INK_GITHUB_URL}
icon={<Hand className={styles.cardIcon} />}
title={t("common:pages.welcome")}
subtitle={t("common:footer.welcome.subtitle")}
to={WELCOME_PAGE}
/>
<FooterCard
icon={<CircleHelp className={styles.cardIcon} />}
title={t("common:pages.faq")}
subtitle={t("common:footer.faq.subtitle")}
to={FAQ_PAGE}
/>
<FooterCard
icon={<BookOpen className={styles.cardIcon} />}
title={t("common:pages.docs")}
subtitle={t("common:footer.docs.subtitle")}
href={DOCS_SITE_URL}
/>
<FooterCard
icon={<Braces className={styles.cardIcon} />}
title={t("common:pages.api")}
subtitle={t("common:footer.api.subtitle")}
to={API_PAGE}
/>
<FooterCard
icon={<DiscordIcon className={styles.cardIcon} />}
@@ -174,6 +192,12 @@ export function Footer() {
subtitle={t("common:footer.discord.subtitle")}
href={SENDOU_INK_DISCORD_URL}
/>
<FooterCard
icon={<GitHubIcon className={styles.cardIcon} />}
title="GitHub"
subtitle={t("common:footer.github.subtitle")}
href={SENDOU_INK_GITHUB_URL}
/>
<FooterCard
icon={<PatreonIcon className={styles.cardIcon} />}
title="Patreon"
@@ -186,30 +210,6 @@ export function Footer() {
subtitle={t("common:footer.contributors.subtitle")}
to={CONTRIBUTIONS_PAGE}
/>
<FooterCard
icon={<CircleHelp className={styles.cardIcon} />}
title={t("common:pages.faq")}
subtitle={t("common:footer.faq.subtitle")}
to={FAQ_PAGE}
/>
<FooterCard
icon={<Hand className={styles.cardIcon} />}
title={t("common:pages.welcome")}
subtitle={t("common:footer.welcome.subtitle")}
to={WELCOME_PAGE}
/>
<FooterCard
icon={<Braces className={styles.cardIcon} />}
title={t("common:pages.api")}
subtitle={t("common:footer.api.subtitle")}
to={API_PAGE}
/>
<FooterCard
icon={<BookOpen className={styles.cardIcon} />}
title={t("common:pages.docs")}
subtitle={t("common:footer.docs.subtitle")}
href={DOCS_SITE_URL}
/>
</div>
<div className={styles.thanks}>
<Image alt="" path={SENDOU_LOVE_EMOJI_PATH} width={40} height={40} />

4
changelog/2026-10-25-footer-card-grid.md Normal file
View File

@@ -0,0 +1,4 @@
---
type: feature
---
Tidier footer, the link cards are now an even grid and highlight on hover