342 lines
8.8 KiB
Plaintext
342 lines
8.8 KiB
Plaintext
---
|
|
import { Icon } from "astro-icon/components";
|
|
import AppLayout from "components/AppLayout/AppLayout.astro";
|
|
import Button from "components/Button.astro";
|
|
import LibraryGrid from "./_components/LibraryGrid.astro";
|
|
import ChronicleCard from "./_components/ChronicleCard.astro";
|
|
import LinkCard from "./_components/LinkCard.astro";
|
|
import { getI18n } from "src/i18n/i18n";
|
|
import { cache } from "src/utils/cachedPayload";
|
|
|
|
const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|
---
|
|
|
|
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
|
|
|
<AppLayout
|
|
openGraph={{ title: t("home.title") }}
|
|
backgroundImage={{
|
|
url: "/img/background-image.webp",
|
|
height: 2279,
|
|
width: 1920,
|
|
}}
|
|
hideFooterLinks
|
|
hideHomeButton>
|
|
<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")} class="high-contrast-text" />
|
|
<a href={getLocalizedUrl("/about")} class="DEV_TODO">
|
|
<Button title={t("home.aboutUsButton")} icon="material-symbols:left-click" />
|
|
</a>
|
|
</div>
|
|
|
|
<div id="main">
|
|
<section id="library" class="high-contrast-text">
|
|
<h2>{t("home.librarySection.title")}</h2>
|
|
<p set:html={t("home.librarySection.description")} />
|
|
<a href={getLocalizedUrl("/search")} class="DEV_TODO">
|
|
<Button
|
|
class="section-button"
|
|
title={t("home.librarySection.button")}
|
|
icon="material-symbols:browse"
|
|
/>
|
|
</a>
|
|
<div class="grid">
|
|
<LibraryGrid />
|
|
</div>
|
|
</section>
|
|
|
|
<section class="DEV_TODO">
|
|
<h2>{t("home.chroniclesSection.title")}</h2>
|
|
<p set:html={t("home.chroniclesSection.description")} />
|
|
<div class="flex">
|
|
<ChronicleCard
|
|
pretitle={"Preface"}
|
|
title={"The Yokoverse"}
|
|
subtitle={"Start reading the Chronicles here"}
|
|
href={getLocalizedUrl("/chronicles/preface")}
|
|
/>
|
|
<ChronicleCard
|
|
pretitle={"Chapter 1"}
|
|
title={"Drakengard 3"}
|
|
subtitle={"A cursed world, and the girl who hated it"}
|
|
href={getLocalizedUrl("/chronicles/drakengard-3")}
|
|
/>
|
|
<ChronicleCard
|
|
pretitle={"Chapter 2"}
|
|
title={"Drakengard"}
|
|
subtitle={"Humanity at its lowest"}
|
|
href={getLocalizedUrl("/chronicles/drakengard")}
|
|
/>
|
|
<ChronicleCard
|
|
pretitle={"Chapter 3"}
|
|
title={"NieR"}
|
|
subtitle={"The Glory of Mankind comes to an abrupt End"}
|
|
href={getLocalizedUrl("/chronicles/nier")}
|
|
/>
|
|
<ChronicleCard
|
|
pretitle={"Chapter 4"}
|
|
title={"NieR:Automata"}
|
|
subtitle={"Protagonists of Meaningless Stories"}
|
|
href={getLocalizedUrl("/chronicles/nier-automata")}
|
|
/>
|
|
<ChronicleCard
|
|
pretitle={"Epilogue"}
|
|
title={"Appendices"}
|
|
subtitle={"Protagonists of Meaningless Stories"}
|
|
href={getLocalizedUrl("/chronicles/nier-automata")}
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="DEV_TODO">
|
|
<h2>{t("home.changesSection.title")}</h2>
|
|
<p set:html={t("home.changesSection.description")} />
|
|
<a href={getLocalizedUrl("/changelog")}>
|
|
<Button
|
|
class="section-button"
|
|
title={t("home.changesSection.button")}
|
|
icon="material-symbols:history"
|
|
/>
|
|
</a>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>{t("home.moreSection.title")}</h2>
|
|
<p set:html={t("home.moreSection.description")} />
|
|
<div class="grid">
|
|
<div class="DEV_TODO">
|
|
<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>
|
|
|
|
<LinkCard
|
|
icon="material-symbols:calendar-month-outline"
|
|
title={t("footer.links.timeline.title")}
|
|
subtitle={t("footer.links.timeline.subtitle", {
|
|
eraCount: cache.config.timeline.eras.length,
|
|
eventCount: cache.config.timeline.eventCount,
|
|
})}
|
|
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"
|
|
/>
|
|
</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"
|
|
/>
|
|
<div class="DEV_TODO">
|
|
<LinkCard
|
|
icon="material-symbols:mail-outline"
|
|
title={t("footer.socials.contact.title")}
|
|
subtitle={t("footer.socials.contact.subtitle")}
|
|
href={getLocalizedUrl("/contact")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</AppLayout>
|
|
|
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
|
|
|
<style>
|
|
#description {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
align-items: flex-start;
|
|
|
|
margin-bottom: 128px;
|
|
|
|
> p {
|
|
backdrop-filter: blur(5px);
|
|
padding: 1em;
|
|
margin: -1em;
|
|
width: fit-content;
|
|
|
|
border-radius: 5em;
|
|
}
|
|
|
|
@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.5;
|
|
margin-top: 8px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
& > a > :global(.section-button) {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
&#library {
|
|
& > .grid {
|
|
& > :global(a) {
|
|
padding: 10%;
|
|
|
|
@media (max-width: 40rem) {
|
|
padding: 5%;
|
|
}
|
|
|
|
@media (max-width: 22rem) {
|
|
padding: 10%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 40rem) {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
@media (max-width: 22rem) {
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > .grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
}
|
|
|
|
& > .flex {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
@media (max-width: 35rem) {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
& > .grid,
|
|
& > .flex {
|
|
gap: clamp(6px, 2vmin, 16px);
|
|
|
|
@media (max-width: 22rem) {
|
|
gap: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|