343 lines
9.4 KiB
Plaintext
343 lines
9.4 KiB
Plaintext
---
|
||
import { Icon } from "astro-icon/components";
|
||
import AppLayout from "components/AppLayout/AppLayout.astro";
|
||
import Button from "components/Button.astro";
|
||
import LinkCard from "../_components/LinkCard.astro";
|
||
import CategoryCard from "../_components/CategoryCard.astro";
|
||
import { getI18n } from "../../../translations/translations";
|
||
|
||
const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
||
---
|
||
|
||
{
|
||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||
}
|
||
|
||
<AppLayout
|
||
title="Accord’s Library"
|
||
illustration="/img/bg-home.webp"
|
||
illustrationSize="60vw"
|
||
illustrationPosition="20%"
|
||
>
|
||
<div id="title" slot="header-title">
|
||
<Icon name="accords" />
|
||
<div>
|
||
<h1 class="font-serif">{t("global.siteName")}</h1>
|
||
<p>{t("global.siteSubtitle")}</p>
|
||
</div>
|
||
</div>
|
||
<div id="description" slot="header-description">
|
||
<p set:html={t("home.description")} />
|
||
<a href={getLocalizedUrl("/about")}>
|
||
<Button
|
||
title={t("home.aboutUsButton")}
|
||
icon="material-symbols:left-click"
|
||
/>
|
||
</a>
|
||
</div>
|
||
|
||
<Fragment slot="main">
|
||
<div id="main">
|
||
<section id="library">
|
||
<h2>{t("home.librarySection.title")}</h2>
|
||
<p set:html={t("home.librarySection.description")} />
|
||
<div class="grid">
|
||
<CategoryCard
|
||
img={{
|
||
light: "/img/categories/light/dod.png",
|
||
dark: "/img/categories/dark/dod.png",
|
||
}}
|
||
name="Drakengard"
|
||
href={getLocalizedUrl("/drakengard")}
|
||
/>
|
||
<CategoryCard
|
||
img={{
|
||
light: "/img/categories/light/dod2.png",
|
||
dark: "/img/categories/dark/dod2.png",
|
||
}}
|
||
name="Drakengard 2"
|
||
href={getLocalizedUrl("/drakengard-2")}
|
||
/>
|
||
<CategoryCard
|
||
img={{
|
||
light: "/img/categories/light/dod3.png",
|
||
dark: "/img/categories/dark/dod3.png",
|
||
}}
|
||
name="Drakengard 3"
|
||
href={getLocalizedUrl("/drakengard-3")}
|
||
/>
|
||
<CategoryCard
|
||
img={{
|
||
light: "/img/categories/light/dod1.3.png",
|
||
dark: "/img/categories/dark/dod1.3.png",
|
||
}}
|
||
name="Drakengard 1.3"
|
||
href={getLocalizedUrl("/drakengard-1-3")}
|
||
/>
|
||
<CategoryCard
|
||
img={{
|
||
light: "/img/categories/light/nier.png",
|
||
dark: "/img/categories/dark/nier.png",
|
||
}}
|
||
name="NieR"
|
||
href={getLocalizedUrl("/nier")}
|
||
/>
|
||
<CategoryCard
|
||
img={{
|
||
light: "/img/categories/light/na.png",
|
||
dark: "/img/categories/dark/na.png",
|
||
}}
|
||
name="NieR:Automata"
|
||
href={getLocalizedUrl("/nier-automata")}
|
||
/>
|
||
<CategoryCard
|
||
img={{
|
||
light: "/img/categories/light/nier-rein.png",
|
||
dark: "/img/categories/dark/nier-rein.png",
|
||
}}
|
||
name="NieR Re[in]carnation"
|
||
href={getLocalizedUrl("/nier-rein")}
|
||
/>
|
||
<CategoryCard
|
||
img={{
|
||
light: "/img/categories/light/yorha.png",
|
||
dark: "/img/categories/dark/yorha.png",
|
||
}}
|
||
name="YoRHa"
|
||
href={getLocalizedUrl("/yorha")}
|
||
/>
|
||
<CategoryCard
|
||
img={{
|
||
light: "/img/categories/light/yorha-boys.png",
|
||
dark: "/img/categories/dark/yorha-boys.png",
|
||
}}
|
||
name="YoRHa Boys"
|
||
href={getLocalizedUrl("/yorha-boys")}
|
||
/>
|
||
<CategoryCard
|
||
img={{
|
||
light: "/img/categories/light/sino.png",
|
||
dark: "/img/categories/dark/sino.png",
|
||
}}
|
||
name="SINoALICE"
|
||
href={getLocalizedUrl("/sinoalice")}
|
||
/>
|
||
<CategoryCard
|
||
img={{
|
||
light: "/img/categories/light/404gamereset.png",
|
||
dark: "/img/categories/dark/404gamereset.png",
|
||
}}
|
||
name="404 Game Re:Set"
|
||
href={getLocalizedUrl("/404-game-reset")}
|
||
/>
|
||
<CategoryCard
|
||
img={{
|
||
light: "/img/categories/light/god-app.png",
|
||
dark: "/img/categories/dark/god-app.png",
|
||
}}
|
||
name="God App"
|
||
href={getLocalizedUrl("/god-app")}
|
||
/>
|
||
<CategoryCard
|
||
img={{
|
||
light: "/img/categories/light/voc.png",
|
||
dark: "/img/categories/dark/voc.png",
|
||
}}
|
||
name="Voice of Cards"
|
||
href={getLocalizedUrl("/voice-of-cards")}
|
||
/>
|
||
<CategoryCard name="Others..." href={getLocalizedUrl("/others")} />
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>{t("home.moreSection.title")}</h2>
|
||
<p set:html={t("home.moreSection.description")} />
|
||
<div class="grid">
|
||
<LinkCard
|
||
icon="material-symbols:calendar-month-outline"
|
||
title={t("footer.links.timeline.title")}
|
||
subtitle={t("footer.links.timeline.subtitle", {
|
||
eraCount: 8,
|
||
eventCount: 358,
|
||
})}
|
||
href={getLocalizedUrl("/timeline")}
|
||
/>
|
||
<LinkCard
|
||
icon="material-symbols:perm-media-outline"
|
||
title={t("footer.links.gallery.title")}
|
||
subtitle={t("footer.links.gallery.subtitle", { count: 5750 })}
|
||
href="https://gallery.accords-library.com/posts"
|
||
/>
|
||
<LinkCard
|
||
icon="material-symbols:movie-outline"
|
||
title={t("footer.links.videos.title")}
|
||
subtitle={t("footer.links.videos.subtitle", { count: 2115 })}
|
||
href={getLocalizedUrl("/videos")}
|
||
/>
|
||
<LinkCard
|
||
icon="material-symbols:folder-zip-outline"
|
||
title={t("footer.links.webArchives.title")}
|
||
subtitle={t("footer.links.webArchives.subtitle", { count: 20 })}
|
||
href={getLocalizedUrl("/archives")}
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>{t("home.linksSection.title")}</h2>
|
||
<p set:html={t("home.linksSection.description")} />
|
||
<div class="grid">
|
||
<LinkCard
|
||
icon="discord-brands"
|
||
title={t("footer.socials.discord.title")}
|
||
subtitle={t("footer.socials.discord.subtitle")}
|
||
href="/discord"
|
||
/>
|
||
<LinkCard
|
||
icon="x-brands"
|
||
title={t("footer.socials.twitter.title")}
|
||
subtitle={t("footer.socials.twitter.subtitle")}
|
||
href="https://twitter.com/AccordsLibrary"
|
||
/>
|
||
<LinkCard
|
||
icon="github-brands"
|
||
title={t("footer.socials.github.title")}
|
||
subtitle={t("footer.socials.github.subtitle")}
|
||
href="https://github.com/Accords-Library"
|
||
/>
|
||
<LinkCard
|
||
icon="material-symbols:mail-outline"
|
||
title={t("footer.socials.contact.title")}
|
||
subtitle={t("footer.socials.contact.subtitle")}
|
||
href={getLocalizedUrl("/contact")}
|
||
/>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</Fragment>
|
||
</AppLayout>
|
||
|
||
{
|
||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||
}
|
||
|
||
<style>
|
||
#description {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
align-items: flex-start;
|
||
margin-bottom: 128px;
|
||
|
||
& > p {
|
||
line-height: 1.4;
|
||
max-width: 35em;
|
||
}
|
||
|
||
@media (max-width: 35rem) {
|
||
align-items: center;
|
||
|
||
@media (max-width: 25rem) {
|
||
align-items: stretch;
|
||
}
|
||
}
|
||
}
|
||
|
||
#title {
|
||
display: flex;
|
||
place-items: center;
|
||
gap: 1em;
|
||
|
||
& > svg {
|
||
width: 64px;
|
||
height: 64px;
|
||
}
|
||
|
||
& > div {
|
||
& > h1 {
|
||
margin: 0;
|
||
line-height: 1;
|
||
font-size: 52px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
& > p {
|
||
line-height: 1;
|
||
margin: 0;
|
||
margin-top: -0.5em;
|
||
font-size: 21px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 35rem) {
|
||
flex-direction: column;
|
||
width: 100%;
|
||
place-items: center;
|
||
--container-width: calc((100vw - 48px));
|
||
|
||
& > svg {
|
||
width: calc(var(--container-width) / 3);
|
||
height: calc(var(--container-width) / 3);
|
||
}
|
||
|
||
& > div {
|
||
& > h1 {
|
||
margin: 0;
|
||
line-height: 1;
|
||
font-size: calc(var(--container-width) / 9);
|
||
font-weight: 800;
|
||
}
|
||
|
||
& > p {
|
||
line-height: 1;
|
||
margin: 0;
|
||
margin-top: -0.5em;
|
||
font-size: calc(var(--container-width) / 21.8);
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#main {
|
||
display: grid;
|
||
gap: 64px;
|
||
margin-top: -96px;
|
||
|
||
& > section {
|
||
& > h2 {
|
||
font-family: var(--font-serif);
|
||
font-size: 30px;
|
||
}
|
||
|
||
& > p {
|
||
max-width: 35em;
|
||
line-height: 1.4;
|
||
padding-top: 8px;
|
||
padding-bottom: 24px;
|
||
}
|
||
|
||
&#library {
|
||
& > .grid {
|
||
@media (max-width: 40rem) {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
|
||
@media (max-width: 25rem) {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
}
|
||
|
||
& > .grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||
column-gap: clamp(6px, 2vmin, 16px);
|
||
row-gap: clamp(6px + 6px, 2vmin + 6px, 16px);
|
||
}
|
||
}
|
||
}
|
||
</style>
|