Adapted margin system on all pages
This commit is contained in:
parent
979c7fbbf7
commit
84b6823a55
@ -12,6 +12,7 @@ interface Props {
|
|||||||
backgroundImage?: ComponentProps<typeof AppLayoutBackgroundImg>["img"] | undefined;
|
backgroundImage?: ComponentProps<typeof AppLayoutBackgroundImg>["img"] | undefined;
|
||||||
hideFooterLinks?: boolean;
|
hideFooterLinks?: boolean;
|
||||||
hideHomeButton?: boolean;
|
hideHomeButton?: boolean;
|
||||||
|
class?: string | undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@ -20,6 +21,7 @@ const {
|
|||||||
backgroundImage,
|
backgroundImage,
|
||||||
hideFooterLinks = false,
|
hideFooterLinks = false,
|
||||||
hideHomeButton = false,
|
hideHomeButton = false,
|
||||||
|
...otherProps
|
||||||
} = Astro.props;
|
} = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -30,7 +32,7 @@ const {
|
|||||||
<header>
|
<header>
|
||||||
<Topbar parentPages={parentPages} hideHomeButton={hideHomeButton} />
|
<Topbar parentPages={parentPages} hideHomeButton={hideHomeButton} />
|
||||||
</header>
|
</header>
|
||||||
<main><slot /></main>
|
<main {...otherProps.class ? otherProps : {}}><slot /></main>
|
||||||
<Footer withLinks={!hideFooterLinks} />
|
<Footer withLinks={!hideFooterLinks} />
|
||||||
</Html>
|
</Html>
|
||||||
|
|
||||||
|
@ -1,4 +1,6 @@
|
|||||||
---
|
---
|
||||||
|
import Card from "components/Card.astro";
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
||||||
On larger screens (>= 1280)
|
On larger screens (>= 1280)
|
||||||
@ -17,9 +19,15 @@ aside
|
|||||||
default slot
|
default slot
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
reducedAsideWidth?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { reducedAsideWidth = false } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<div id="layout">
|
<div id="layout" class:list={{ "reduced-width": reducedAsideWidth }}>
|
||||||
<div id="left">
|
<div id="left">
|
||||||
<slot name="header" />
|
<slot name="header" />
|
||||||
<div class="when-not-large">
|
<div class="when-not-large">
|
||||||
@ -32,34 +40,66 @@ default slot
|
|||||||
</div>
|
</div>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
<div id="right" class="when-large">
|
<Card class="when-large right">
|
||||||
<slot name="header-aside" />
|
<slot name="header-aside" />
|
||||||
<slot name="aside" />
|
<slot name="aside" />
|
||||||
</div>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#layout {
|
#layout {
|
||||||
container-type: inline-size;
|
|
||||||
|
|
||||||
@media (min-width: 1280.5px) {
|
@media (min-width: 1280.5px) {
|
||||||
display: grid;
|
display: grid;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
grid-template-columns: 35rem 35rem;
|
grid-template-columns: 35rem 35rem;
|
||||||
|
|
||||||
|
&.reduced-width {
|
||||||
|
grid-template-columns: 35rem 27rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
align-items: start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.when-large {
|
.when-large {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 32px;
|
||||||
|
|
||||||
@media (max-width: 1280.5px) {
|
@media (max-width: 1280.5px) {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.when-not-large {
|
.when-not-large {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 64px;
|
||||||
|
|
||||||
@media (min-width: 1280.5px) {
|
@media (min-width: 1280.5px) {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 32px;
|
||||||
|
|
||||||
|
@media (max-width: 1280.5px) {
|
||||||
|
gap: 64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 48px;
|
||||||
|
|
||||||
|
background-color: color-mix(in srgb, var(--color-elevation-0) 65%, transparent) !important;
|
||||||
|
backdrop-filter: blur(15px);
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -16,82 +16,59 @@ const {
|
|||||||
} = Astro.props;
|
} = Astro.props;
|
||||||
|
|
||||||
const uniqueId = getRandomId();
|
const uniqueId = getRandomId();
|
||||||
|
|
||||||
const style = `
|
|
||||||
@media (max-aspect-ratio: ${width}/${height * 0.85}) {
|
|
||||||
#${uniqueId} {
|
|
||||||
mask-image: linear-gradient( to bottom, rgba(0 0 0 / 30%) 0%, transparent 100% );
|
|
||||||
}
|
|
||||||
}`; // Required to be done like this because we can't insert variables in media queries with Astro.
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||||
|
|
||||||
<div inert>
|
<img
|
||||||
<img
|
id={uniqueId}
|
||||||
id={uniqueId}
|
src={url}
|
||||||
src={url}
|
srcset={sizesToSrcset(sizes)}
|
||||||
srcset={sizesToSrcset(sizes)}
|
sizes="100vw"
|
||||||
sizes="100vw"
|
width={width}
|
||||||
width={width}
|
height={height}
|
||||||
height={height}
|
loading="lazy"
|
||||||
loading="lazy"
|
class="when-no-print"
|
||||||
class="when-no-print"
|
decoding="async"
|
||||||
/>
|
alt=""
|
||||||
</div>
|
inert
|
||||||
|
/>
|
||||||
|
|
||||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||||
|
|
||||||
<style set:html={style} is:inline></style>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
div {
|
img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
overflow: hidden;
|
z-index: -9999;
|
||||||
z-index: -1;
|
|
||||||
|
|
||||||
mask-image: linear-gradient(
|
|
||||||
to right,
|
|
||||||
rgba(0 0 0 / 15%) 0%,
|
|
||||||
rgba(0 0 0 / 30%) 600px,
|
|
||||||
rgba(0 0 0 / 100%) 1200px
|
|
||||||
);
|
|
||||||
|
|
||||||
@media (max-width: 650.5px) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
|
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
object-position: 50% 0;
|
object-position: 50% 0;
|
||||||
|
|
||||||
mask-image: linear-gradient(
|
|
||||||
to bottom,
|
|
||||||
rgba(0 0 0 / 30%) 0%,
|
|
||||||
rgba(0 0 0 / 5%) 100vh,
|
|
||||||
rgba(0 0 0 / 5%) 80%,
|
|
||||||
transparent 100%
|
|
||||||
);
|
|
||||||
|
|
||||||
animation: fadeIn 3s forwards;
|
animation: fadeIn 3s forwards;
|
||||||
|
|
||||||
|
@media (max-width: 650.5px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
mask-image: linear-gradient(to bottom, rgba(0 0 0 / 100%) min(50vh, 50%), transparent),
|
||||||
|
linear-gradient(to right, rgba(0 0 0 / 10%), rgba(0 0 0 / 20%) 640px, black 1200px);
|
||||||
|
mask-composite: intersect;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
@ -1,37 +0,0 @@
|
|||||||
---
|
|
||||||
import RichText from "components/RichText/RichText.astro";
|
|
||||||
import type { RichTextContent } from "src/shared/payload/payload-sdk";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
description: RichTextContent | string;
|
|
||||||
lang?: string | undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { description, lang } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
|
||||||
|
|
||||||
<div class="high-contrast-text">
|
|
||||||
{
|
|
||||||
typeof description === "string" ? (
|
|
||||||
<p class="prose" set:html={description} />
|
|
||||||
) : (
|
|
||||||
<RichText content={description} context={{ lang }} />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
|
||||||
|
|
||||||
<style>
|
|
||||||
div {
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
padding: 1.5em;
|
|
||||||
margin: -1.5em;
|
|
||||||
margin-block: 0.5em;
|
|
||||||
border-radius: 3em;
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -23,7 +23,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||||||
<nav id="topbar" class="when-no-print">
|
<nav id="topbar" class="when-no-print">
|
||||||
{
|
{
|
||||||
(!hideHomeButton || parentPages.length > 0) && (
|
(!hideHomeButton || parentPages.length > 0) && (
|
||||||
<div id="left" class="hide-scrollbar high-contrast-text">
|
<div id="left" class="hide-scrollbar">
|
||||||
<a href={getLocalizedUrl("/")} class="pressable-label">
|
<a href={getLocalizedUrl("/")} class="pressable-label">
|
||||||
<Icon name="material-symbols:home" width={16} height={16} />
|
<Icon name="material-symbols:home" width={16} height={16} />
|
||||||
<p>{t("home.title")}</p>
|
<p>{t("home.title")}</p>
|
||||||
|
@ -37,7 +37,7 @@ const { t } = await getI18n(Astro.locals.currentLocale);
|
|||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<p class="high-contrast-text">
|
<p>
|
||||||
{
|
{
|
||||||
t("global.languageOverride.availableLanguages", {
|
t("global.languageOverride.availableLanguages", {
|
||||||
count: availableLanguages.length,
|
count: availableLanguages.length,
|
||||||
|
@ -10,10 +10,10 @@ import Credits from "./Credits.astro";
|
|||||||
import DownloadButton from "./DownloadButton.astro";
|
import DownloadButton from "./DownloadButton.astro";
|
||||||
import AppLayoutTitle from "./AppLayout/components/AppLayoutTitle.astro";
|
import AppLayoutTitle from "./AppLayout/components/AppLayoutTitle.astro";
|
||||||
import type { ComponentProps } from "astro/types";
|
import type { ComponentProps } from "astro/types";
|
||||||
import AppLayoutDescription from "./AppLayout/components/AppLayoutDescription.astro";
|
|
||||||
import Attributes from "./Attributes.astro";
|
import Attributes from "./Attributes.astro";
|
||||||
import { sizesToSrcset } from "src/utils/img";
|
import { sizesToSrcset } from "src/utils/img";
|
||||||
import { Icon } from "astro-icon/components";
|
import { Icon } from "astro-icon/components";
|
||||||
|
import RichText from "./RichText/RichText.astro";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
previousImageHref?: string | undefined;
|
previousImageHref?: string | undefined;
|
||||||
@ -105,7 +105,7 @@ const hasNavigation = previousImageHref || nextImageHref;
|
|||||||
<AppLayoutTitle pretitle={pretitle} title={title} subtitle={subtitle} lang={lang} />
|
<AppLayoutTitle pretitle={pretitle} title={title} subtitle={subtitle} lang={lang} />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
{description && <AppLayoutDescription description={description} lang={lang} />}
|
{description && <RichText content={description} context={{ lang }} />}
|
||||||
</div>
|
</div>
|
||||||
{attributes.length > 0 && <Attributes attributes={attributes} />}
|
{attributes.length > 0 && <Attributes attributes={attributes} />}
|
||||||
{credits.length > 0 && <Credits credits={credits} />}
|
{credits.length > 0 && <Credits credits={credits} />}
|
||||||
@ -181,6 +181,12 @@ const hasNavigation = previousImageHref || nextImageHref;
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 2em;
|
gap: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -17,7 +17,7 @@ if (values.length === 0) return;
|
|||||||
{
|
{
|
||||||
values.map(({ name, href, lang }) =>
|
values.map(({ name, href, lang }) =>
|
||||||
href ? (
|
href ? (
|
||||||
<a class="pressable high-contrast-text" href={href} lang={lang}>
|
<a class="pressable" href={href} lang={lang}>
|
||||||
{name}
|
{name}
|
||||||
</a>
|
</a>
|
||||||
) : (
|
) : (
|
||||||
|
62
src/pages/[locale]/_components/HomeTitle.astro
Normal file
62
src/pages/[locale]/_components/HomeTitle.astro
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
---
|
||||||
|
import { Icon } from "astro-icon/components";
|
||||||
|
import { getI18n } from "src/i18n/i18n";
|
||||||
|
|
||||||
|
const { t } = await getI18n(Astro.locals.currentLocale);
|
||||||
|
---
|
||||||
|
|
||||||
|
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||||
|
|
||||||
|
<div id="title">
|
||||||
|
<Icon name="accords" />
|
||||||
|
<div>
|
||||||
|
<h1 class="font-serif font-5xl">{t("global.siteName")}</h1>
|
||||||
|
<p>{t("global.siteSubtitle")}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#title {
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
gap: 1em;
|
||||||
|
|
||||||
|
& > svg {
|
||||||
|
width: calc(var(--font-size-5xl) * 1.2);
|
||||||
|
margin-top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
& > p {
|
||||||
|
margin-top: -0.15em;
|
||||||
|
font-size: calc(var(--font-size-5xl) * 0.39);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 35rem) {
|
||||||
|
flex-direction: column;
|
||||||
|
place-items: center;
|
||||||
|
margin-bottom: 3em;
|
||||||
|
--container-width: calc((100vw - 48px));
|
||||||
|
|
||||||
|
& > svg {
|
||||||
|
width: calc(var(--container-width) / 3);
|
||||||
|
height: calc(var(--container-width) / 3);
|
||||||
|
}
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
& > h1 {
|
||||||
|
font-size: calc(var(--container-width) / 9);
|
||||||
|
}
|
||||||
|
|
||||||
|
& > p {
|
||||||
|
margin-top: -0.1em;
|
||||||
|
font-size: calc(var(--container-width) / 23);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -8,7 +8,6 @@ import LanguageOverride from "components/LanguageOverride.astro";
|
|||||||
import Credits from "components/Credits.astro";
|
import Credits from "components/Credits.astro";
|
||||||
import { getI18n } from "src/i18n/i18n";
|
import { getI18n } from "src/i18n/i18n";
|
||||||
import AsideLayout from "components/AppLayout/AsideLayout.astro";
|
import AsideLayout from "components/AppLayout/AsideLayout.astro";
|
||||||
import AppLayoutDescription from "components/AppLayout/components/AppLayoutDescription.astro";
|
|
||||||
import Attributes from "components/Attributes.astro";
|
import Attributes from "components/Attributes.astro";
|
||||||
import type { Attribute } from "src/utils/attributes";
|
import type { Attribute } from "src/utils/attributes";
|
||||||
import { payload } from "src/utils/payload";
|
import { payload } from "src/utils/payload";
|
||||||
@ -88,30 +87,24 @@ if (updatedBy) {
|
|||||||
</Fragment>
|
</Fragment>
|
||||||
|
|
||||||
<Fragment slot="meta">
|
<Fragment slot="meta">
|
||||||
{summary && <AppLayoutDescription description={summary} lang={language} />}
|
|
||||||
{
|
{
|
||||||
attributes.length > 0 && (
|
summary && (
|
||||||
<div id="tags">
|
<div id="summary">
|
||||||
<Attributes attributes={attributes} />
|
<RichText content={summary} context={{ lang: language }} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
{attributes.length > 0 && <Attributes attributes={attributes} />}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
|
|
||||||
<div id="aside" slot="aside">
|
<Fragment slot="aside">
|
||||||
<div id="credits">
|
<div id="credits">
|
||||||
{
|
<LanguageOverride
|
||||||
translations.length > 1 && (
|
currentLanguage={language}
|
||||||
<LanguageOverride
|
currentSourceLanguage={sourceLanguage}
|
||||||
currentLanguage={language}
|
availableLanguages={translations.map(({ language }) => language)}
|
||||||
currentSourceLanguage={sourceLanguage}
|
getPartialUrl={(lang) => getLocalizedUrl(`/api/pages/partial?lang=${lang}&slug=${slug}`)}
|
||||||
availableLanguages={translations.map(({ language }) => language)}
|
/>
|
||||||
getPartialUrl={(lang) =>
|
|
||||||
getLocalizedUrl(`/api/pages/partial?lang=${lang}&slug=${slug}`)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
{credits.length > 0 && <Credits credits={credits} />}
|
{credits.length > 0 && <Credits credits={credits} />}
|
||||||
</div>
|
</div>
|
||||||
@ -119,7 +112,7 @@ if (updatedBy) {
|
|||||||
{metaAttributes.length > 0 && <Attributes attributes={metaAttributes} />}
|
{metaAttributes.length > 0 && <Attributes attributes={metaAttributes} />}
|
||||||
|
|
||||||
{toc.length > 0 && <TableOfContent toc={toc} lang={language} />}
|
{toc.length > 0 && <TableOfContent toc={toc} lang={language} />}
|
||||||
</div>
|
</Fragment>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
<div id="text">
|
<div id="text">
|
||||||
@ -134,39 +127,23 @@ if (updatedBy) {
|
|||||||
hr {
|
hr {
|
||||||
border: none;
|
border: none;
|
||||||
border-top: 3px dotted var(--color-base-500);
|
border-top: 3px dotted var(--color-base-500);
|
||||||
margin-block: 3em;
|
margin-block: 24px;
|
||||||
}
|
width: 100%;
|
||||||
|
|
||||||
#aside {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4em;
|
|
||||||
|
|
||||||
@media (max-width: 35rem) {
|
|
||||||
gap: 6em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#tags {
|
|
||||||
margin-block: 2em;
|
|
||||||
|
|
||||||
@media (max-width: 1280.5px) {
|
|
||||||
margin-bottom: 4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 35rem) {
|
|
||||||
margin-top: 4em;
|
|
||||||
margin-bottom: 6em;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#credits {
|
#credits {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1em;
|
gap: 16px;
|
||||||
|
|
||||||
@media (max-width: 35rem) {
|
@media (max-width: 35rem) {
|
||||||
gap: 2em;
|
gap: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#summary {
|
||||||
|
@media (max-width: 1280.5px) {
|
||||||
|
margin-top: -2em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -182,14 +159,6 @@ if (updatedBy) {
|
|||||||
box-shadow: 0 5px 20px -10px var(--color-shadow-0);
|
box-shadow: 0 5px 20px -10px var(--color-shadow-0);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1280.5px) {
|
|
||||||
margin-top: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1280.5px) {
|
|
||||||
margin-bottom: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
scale: 102%;
|
scale: 102%;
|
||||||
|
@ -31,6 +31,10 @@ const { t } = await getI18n(Astro.locals.currentLocale);
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 2em;
|
gap: 2em;
|
||||||
|
|
||||||
|
@media (min-width: 45rem) {
|
||||||
|
max-width: 35rem;
|
||||||
|
}
|
||||||
|
|
||||||
& > #contents {
|
& > #contents {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
|
@ -32,12 +32,12 @@ const {
|
|||||||
sizes=`
|
sizes=`
|
||||||
(max-width: 400px) 90vw,
|
(max-width: 400px) 90vw,
|
||||||
(max-width: 850px) 50vw,
|
(max-width: 850px) 50vw,
|
||||||
200px`
|
380px`
|
||||||
width={width}
|
width={width}
|
||||||
height={height}
|
height={height}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="high-contrast-text">
|
<div>
|
||||||
<p id="title" class="font-2xl">{title}</p>
|
<p id="title" class="font-2xl">{title}</p>
|
||||||
<p>{subtitle}</p>
|
<p>{subtitle}</p>
|
||||||
</div>
|
</div>
|
||||||
@ -47,15 +47,12 @@ const {
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
a {
|
a {
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
aspect-ratio: 1 / 1;
|
aspect-ratio: 1 / 1;
|
||||||
display: grid;
|
display: grid;
|
||||||
background-color: var(--color-elevation-0);
|
|
||||||
place-items: center;
|
place-items: center;
|
||||||
overflow: hidden;
|
grid-template-areas: "center";
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
box-shadow: 0 5px 20px -10px var(--color-shadow-0);
|
|
||||||
|
|
||||||
transition: 100ms scale;
|
transition: 100ms scale;
|
||||||
|
|
||||||
@ -65,20 +62,24 @@ const {
|
|||||||
}
|
}
|
||||||
|
|
||||||
& > div {
|
& > div {
|
||||||
text-align: center;
|
grid-area: center;
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
line-height: 1.3;
|
text-align: center;
|
||||||
|
background-color: color-mix(in srgb, var(--color-elevation-0) 70%, transparent);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
|
||||||
|
& > p:has(+ p) {
|
||||||
|
margin-bottom: 0.3em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > img {
|
& > img {
|
||||||
position: absolute;
|
grid-area: center;
|
||||||
inset: 0;
|
|
||||||
opacity: 0.5;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
box-shadow: 0 5px 20px -10px var(--color-shadow-0);
|
||||||
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
---
|
---
|
||||||
import AppLayout from "components/AppLayout/AppLayout.astro";
|
import AppLayout from "components/AppLayout/AppLayout.astro";
|
||||||
import AppLayoutDescription from "components/AppLayout/components/AppLayoutDescription.astro";
|
|
||||||
import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
|
import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
|
||||||
import { getI18n } from "src/i18n/i18n";
|
import { getI18n } from "src/i18n/i18n";
|
||||||
import { payload } from "src/utils/payload";
|
import { payload } from "src/utils/payload";
|
||||||
import { formatInlineTitle, formatRichTextToString } from "src/utils/format";
|
import { formatInlineTitle, formatRichTextToString } from "src/utils/format";
|
||||||
import { fetchOr404 } from "src/utils/responses";
|
import { fetchOr404 } from "src/utils/responses";
|
||||||
import { sizesToSrcset } from "src/utils/img";
|
import { sizesToSrcset } from "src/utils/img";
|
||||||
|
import RichText from "components/RichText/RichText.astro";
|
||||||
|
|
||||||
const slug = Astro.params.slug!;
|
const slug = Astro.params.slug!;
|
||||||
const { getLocalizedMatch, getLocalizedUrl, t } = await getI18n(Astro.locals.currentLocale);
|
const { getLocalizedMatch, getLocalizedUrl, t } = await getI18n(Astro.locals.currentLocale);
|
||||||
@ -28,7 +28,8 @@ const translation = getLocalizedMatch(translations);
|
|||||||
description: translation.description && formatRichTextToString(translation.description),
|
description: translation.description && formatRichTextToString(translation.description),
|
||||||
thumbnail,
|
thumbnail,
|
||||||
}}
|
}}
|
||||||
parentPages={parentPages}>
|
parentPages={parentPages}
|
||||||
|
class="app">
|
||||||
<AppLayoutTitle
|
<AppLayoutTitle
|
||||||
title={translation.title}
|
title={translation.title}
|
||||||
pretitle={translation.pretitle}
|
pretitle={translation.pretitle}
|
||||||
@ -38,7 +39,7 @@ const translation = getLocalizedMatch(translations);
|
|||||||
|
|
||||||
{
|
{
|
||||||
translation.description && (
|
translation.description && (
|
||||||
<AppLayoutDescription description={translation.description} lang={translation.language} />
|
<RichText content={translation.description} context={{ lang: translation.language }} />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -67,6 +68,12 @@ const translation = getLocalizedMatch(translations);
|
|||||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.app {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
div {
|
div {
|
||||||
margin-top: 3em;
|
margin-top: 3em;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -13,12 +13,12 @@ import SubitemSection from "./_components/SubitemSection.astro";
|
|||||||
import ContentsSection from "./_components/ContentsSection/ContentsSection.astro";
|
import ContentsSection from "./_components/ContentsSection/ContentsSection.astro";
|
||||||
import { formatInlineTitle, formatLocale, formatRichTextToString } from "src/utils/format";
|
import { formatInlineTitle, formatLocale, formatRichTextToString } from "src/utils/format";
|
||||||
import AsideLayout from "components/AppLayout/AsideLayout.astro";
|
import AsideLayout from "components/AppLayout/AsideLayout.astro";
|
||||||
import AppLayoutDescription from "components/AppLayout/components/AppLayoutDescription.astro";
|
|
||||||
import { convert } from "src/utils/currencies";
|
import { convert } from "src/utils/currencies";
|
||||||
import Attributes from "components/Attributes.astro";
|
import Attributes from "components/Attributes.astro";
|
||||||
import type { Attribute } from "src/utils/attributes";
|
import type { Attribute } from "src/utils/attributes";
|
||||||
import { payload } from "src/utils/payload";
|
import { payload } from "src/utils/payload";
|
||||||
import { sizesToSrcset } from "src/utils/img";
|
import { sizesToSrcset } from "src/utils/img";
|
||||||
|
import RichText from "components/RichText/RichText.astro";
|
||||||
|
|
||||||
const slug = Astro.params.slug!;
|
const slug = Astro.params.slug!;
|
||||||
const { getLocalizedMatch, getLocalizedUrl, t, formatDate, formatPrice } = await getI18n(
|
const { getLocalizedMatch, getLocalizedUrl, t, formatDate, formatPrice } = await getI18n(
|
||||||
@ -148,7 +148,7 @@ if (price) {
|
|||||||
}}
|
}}
|
||||||
parentPages={parentPages}
|
parentPages={parentPages}
|
||||||
backgroundImage={backgroundImage ?? thumbnail}>
|
backgroundImage={backgroundImage ?? thumbnail}>
|
||||||
<AsideLayout>
|
<AsideLayout reducedAsideWidth>
|
||||||
<Fragment slot="header">
|
<Fragment slot="header">
|
||||||
<AppLayoutTitle title={title} pretitle={pretitle} subtitle={subtitle} lang={language} />
|
<AppLayoutTitle title={title} pretitle={pretitle} subtitle={subtitle} lang={language} />
|
||||||
</Fragment>
|
</Fragment>
|
||||||
@ -203,19 +203,13 @@ if (price) {
|
|||||||
</Fragment>
|
</Fragment>
|
||||||
|
|
||||||
<Fragment slot="aside">
|
<Fragment slot="aside">
|
||||||
{
|
<Attributes attributes={metaAttributes} />
|
||||||
metaAttributes.length > 0 && (
|
|
||||||
<div id="attributes">
|
|
||||||
<Attributes attributes={metaAttributes} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</Fragment>
|
</Fragment>
|
||||||
|
|
||||||
<Fragment slot="meta">
|
<Fragment slot="meta">
|
||||||
{description && <AppLayoutDescription description={description} lang={language} />}
|
{description && <RichText content={description} context={{ lang: language }} />}
|
||||||
|
|
||||||
<div id="tags">
|
<div id="attributes">
|
||||||
<Attributes attributes={[...attributes, ...additionalAttributes]}>
|
<Attributes attributes={[...attributes, ...additionalAttributes]}>
|
||||||
<AvailabilityInfo urls={urls} price={price !== undefined} releaseDate={releaseDate} />
|
<AvailabilityInfo urls={urls} price={price !== undefined} releaseDate={releaseDate} />
|
||||||
|
|
||||||
@ -237,34 +231,17 @@ if (price) {
|
|||||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
#attributes {
|
||||||
|
margin-block: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
#images {
|
#images {
|
||||||
display: grid;
|
display: flex;
|
||||||
place-content: start;
|
flex-direction: column;
|
||||||
place-items: start;
|
gap: 24px;
|
||||||
margin-block: 2em;
|
|
||||||
gap: clamp(1em, 0.5em + 3vw, 2em);
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
|
|
||||||
@media (max-width: 23rem) {
|
|
||||||
gap: 2.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 52rem) {
|
|
||||||
grid-template-columns: auto 10rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1280.5px) {
|
|
||||||
grid-template-columns: 10rem 1fr;
|
|
||||||
margin-block: initial;
|
|
||||||
|
|
||||||
& > #gallery-scans {
|
|
||||||
order: -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > #thumbnail {
|
& > #thumbnail {
|
||||||
max-height: 80vh;
|
max-height: 80vh;
|
||||||
max-width: min(35rem, 100%);
|
|
||||||
box-shadow: 0 5px 20px -10px var(--color-shadow-0);
|
box-shadow: 0 5px 20px -10px var(--color-shadow-0);
|
||||||
transition: 100ms scale;
|
transition: 100ms scale;
|
||||||
|
|
||||||
@ -275,58 +252,28 @@ if (price) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
& > #gallery-scans {
|
& > #gallery-scans {
|
||||||
max-width: 35rem;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&:not(.with-two) {
|
&:not(.with-two) {
|
||||||
@media (max-width: 52rem) {
|
& > .collectibles_id-image_tile {
|
||||||
> .collectibles_id-image_tile {
|
aspect-ratio: 2 / 1;
|
||||||
aspect-ratio: 2 / 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.with-two {
|
&.with-two {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
gap: 24px;
|
||||||
gap: 2.5em;
|
|
||||||
|
|
||||||
@media (max-width: 23rem) {
|
@media (max-width: 400.5px) {
|
||||||
> .collectibles_id-image_tile {
|
flex-direction: column;
|
||||||
|
|
||||||
|
& > .collectibles_id-image_tile {
|
||||||
aspect-ratio: 2 / 1;
|
aspect-ratio: 2 / 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (min-width: 23rem) {
|
@media (max-width: 1280.5px) {
|
||||||
gap: clamp(1em, 0.5em + 3vw, 2em);
|
max-width: 35rem;
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
@media (min-width: 52rem) {
|
|
||||||
max-width: 15rem;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#tags {
|
|
||||||
margin-block: 2em;
|
|
||||||
|
|
||||||
@media (max-width: 1280.5px) {
|
|
||||||
margin-bottom: 4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 35rem) {
|
|
||||||
margin-top: 4em;
|
|
||||||
margin-bottom: 6em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#attributes {
|
|
||||||
@media (min-width: 1280.5px) {
|
|
||||||
margin-left: 12em;
|
|
||||||
margin-top: 3em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
@ -7,7 +7,7 @@ import { payload } from "src/utils/payload";
|
|||||||
import { fetchOr404 } from "src/utils/responses";
|
import { fetchOr404 } from "src/utils/responses";
|
||||||
import ScanPreview from "./_components/ScanPreview.astro";
|
import ScanPreview from "./_components/ScanPreview.astro";
|
||||||
import { formatInlineTitle, formatRichTextToString } from "src/utils/format";
|
import { formatInlineTitle, formatRichTextToString } from "src/utils/format";
|
||||||
import AppLayoutDescription from "components/AppLayout/components/AppLayoutDescription.astro";
|
import RichText from "components/RichText/RichText.astro";
|
||||||
|
|
||||||
const slug = Astro.params.slug!;
|
const slug = Astro.params.slug!;
|
||||||
const { getLocalizedMatch, t } = await getI18n(Astro.locals.currentLocale);
|
const { getLocalizedMatch, t } = await getI18n(Astro.locals.currentLocale);
|
||||||
@ -45,7 +45,8 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
|
|||||||
description: translation.description && formatRichTextToString(translation.description),
|
description: translation.description && formatRichTextToString(translation.description),
|
||||||
thumbnail,
|
thumbnail,
|
||||||
}}
|
}}
|
||||||
parentPages={parentPages}>
|
parentPages={parentPages}
|
||||||
|
class="app">
|
||||||
<AppLayoutTitle
|
<AppLayoutTitle
|
||||||
title={translation.title}
|
title={translation.title}
|
||||||
pretitle={translation.pretitle}
|
pretitle={translation.pretitle}
|
||||||
@ -53,15 +54,13 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
|
|||||||
lang={translation.language}
|
lang={translation.language}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div id="meta" class:list={{ "with-description": translation.description }}>
|
{
|
||||||
{
|
translation.description && (
|
||||||
translation.description && (
|
<RichText content={translation.description} context={{ lang: translation.language }} />
|
||||||
<AppLayoutDescription description={translation.description} lang={translation.language} />
|
)
|
||||||
)
|
}
|
||||||
}
|
|
||||||
|
|
||||||
{credits.length > 0 && <Credits credits={credits} />}
|
{credits.length > 0 && <Credits credits={credits} />}
|
||||||
</div>
|
|
||||||
|
|
||||||
{
|
{
|
||||||
cover && (
|
cover && (
|
||||||
@ -312,12 +311,14 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
|
|||||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#meta:not(.with-description) {
|
.app {
|
||||||
margin-block: 3em;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section {
|
section {
|
||||||
margin-block: 6em;
|
margin-block: 4em;
|
||||||
|
|
||||||
& > p {
|
& > p {
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
---
|
---
|
||||||
import AppLayout from "components/AppLayout/AppLayout.astro";
|
import AppLayout from "components/AppLayout/AppLayout.astro";
|
||||||
import AppLayoutDescription from "components/AppLayout/components/AppLayoutDescription.astro";
|
|
||||||
import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
|
import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -8,9 +7,10 @@ import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro
|
|||||||
|
|
||||||
<AppLayout>
|
<AppLayout>
|
||||||
<AppLayoutTitle pretitle="Guide to" title="Rich Text Editor" />
|
<AppLayoutTitle pretitle="Guide to" title="Rich Text Editor" />
|
||||||
<AppLayoutDescription
|
<p class="prose">
|
||||||
description="Having troubles using the Rich Text Editor? Looking for tips and advanced techniques? You've come to the right place!"
|
Having troubles using the Rich Text Editor? Looking for tips and advanced techniques? You've
|
||||||
/>
|
come to the right place!
|
||||||
|
</p>
|
||||||
|
|
||||||
<div class="prose">
|
<div class="prose">
|
||||||
<h2>Add indentation / spaces between words</h2>
|
<h2>Add indentation / spaces between words</h2>
|
||||||
|
@ -12,8 +12,8 @@ import AudioPreview from "components/Previews/AudioPreview.astro";
|
|||||||
import VideoPreview from "components/Previews/VideoPreview.astro";
|
import VideoPreview from "components/Previews/VideoPreview.astro";
|
||||||
import AppLayout from "components/AppLayout/AppLayout.astro";
|
import AppLayout from "components/AppLayout/AppLayout.astro";
|
||||||
import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
|
import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
|
||||||
import AppLayoutDescription from "components/AppLayout/components/AppLayoutDescription.astro";
|
|
||||||
import { payload } from "src/utils/payload";
|
import { payload } from "src/utils/payload";
|
||||||
|
import RichText from "components/RichText/RichText.astro";
|
||||||
|
|
||||||
const slug = Astro.params.slug!;
|
const slug = Astro.params.slug!;
|
||||||
|
|
||||||
@ -33,9 +33,10 @@ const meta = getLocalizedMatch(folder.translations);
|
|||||||
title: meta.name,
|
title: meta.name,
|
||||||
description: meta.description && formatRichTextToString(meta.description),
|
description: meta.description && formatRichTextToString(meta.description),
|
||||||
}}
|
}}
|
||||||
parentPages={folder.parentPages}>
|
parentPages={folder.parentPages}
|
||||||
|
class="app">
|
||||||
<AppLayoutTitle title={meta.name} lang={meta.language} />
|
<AppLayoutTitle title={meta.name} lang={meta.language} />
|
||||||
{meta.description && <AppLayoutDescription description={meta.description} lang={meta.language} />}
|
{meta.description && <RichText content={meta.description} context={{ lang: meta.language }} />}
|
||||||
|
|
||||||
<div id="main" class:list={{ complex: folder.sections.type === "multiple" }}>
|
<div id="main" class:list={{ complex: folder.sections.type === "multiple" }}>
|
||||||
{
|
{
|
||||||
@ -90,16 +91,24 @@ const meta = getLocalizedMatch(folder.translations);
|
|||||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.app {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
#main {
|
#main {
|
||||||
margin-top: 4.5em;
|
margin-top: 64px;
|
||||||
display: grid;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
gap: 4em;
|
gap: 4em;
|
||||||
|
|
||||||
&.complex {
|
&.complex {
|
||||||
gap: 6em;
|
gap: 6em;
|
||||||
|
|
||||||
& > #sections {
|
& > #sections {
|
||||||
display: grid;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
gap: 4em;
|
gap: 4em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,12 +1,11 @@
|
|||||||
---
|
---
|
||||||
import { Icon } from "astro-icon/components";
|
|
||||||
import Button from "components/Button.astro";
|
import Button from "components/Button.astro";
|
||||||
import LibraryGrid from "./_components/LibraryGrid.astro";
|
import LibraryGrid from "./_components/LibraryGrid.astro";
|
||||||
import LinkCard from "./_components/LinkCard.astro";
|
import LinkCard from "./_components/LinkCard.astro";
|
||||||
import { getI18n } from "src/i18n/i18n";
|
import { getI18n } from "src/i18n/i18n";
|
||||||
import { cache } from "src/utils/payload";
|
import { cache } from "src/utils/payload";
|
||||||
import AppLayout from "components/AppLayout/AppLayout.astro";
|
import AppLayout from "components/AppLayout/AppLayout.astro";
|
||||||
import AppLayoutDescription from "components/AppLayout/components/AppLayoutDescription.astro";
|
import HomeTitle from "./_components/HomeTitle.astro";
|
||||||
|
|
||||||
const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
||||||
---
|
---
|
||||||
@ -17,23 +16,17 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||||||
openGraph={{ title: t("home.title") }}
|
openGraph={{ title: t("home.title") }}
|
||||||
backgroundImage={cache.config.home.backgroundImage}
|
backgroundImage={cache.config.home.backgroundImage}
|
||||||
hideFooterLinks
|
hideFooterLinks
|
||||||
hideHomeButton>
|
hideHomeButton
|
||||||
<div id="title">
|
class="app">
|
||||||
<Icon name="accords" />
|
<HomeTitle />
|
||||||
<div>
|
<p class="prose" set:html={t("home.description")} />
|
||||||
<h1 class="font-serif font-5xl">{t("global.siteName")}</h1>
|
|
||||||
<p>{t("global.siteSubtitle")}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<AppLayoutDescription description={t("home.description")} />
|
|
||||||
|
|
||||||
<a href={getLocalizedUrl("/about")} hidden>
|
<a href={getLocalizedUrl("/about")} hidden>
|
||||||
<Button title={t("home.aboutUsButton")} icon="material-symbols:left-click" />
|
<Button title={t("home.aboutUsButton")} icon="material-symbols:left-click" />
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div id="main">
|
<div id="main">
|
||||||
<section id="library" class="high-contrast-text">
|
<section id="library">
|
||||||
<h2 class="font-serif font-3xl">{t("home.librarySection.title")}</h2>
|
<h2 class="font-serif font-3xl">{t("home.librarySection.title")}</h2>
|
||||||
<p set:html={t("home.librarySection.description")} />
|
<p set:html={t("home.librarySection.description")} />
|
||||||
<a href={getLocalizedUrl("/search")} hidden>
|
<a href={getLocalizedUrl("/search")} hidden>
|
||||||
@ -137,96 +130,46 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#title {
|
.app {
|
||||||
display: flex;
|
display: flex;
|
||||||
place-items: center;
|
flex-direction: column;
|
||||||
gap: 1em;
|
gap: 32px;
|
||||||
|
|
||||||
& > svg {
|
|
||||||
width: calc(var(--font-size-5xl) * 1.2);
|
|
||||||
margin-top: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
& > p {
|
|
||||||
margin-top: -0.15em;
|
|
||||||
font-size: calc(var(--font-size-5xl) * 0.39);
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 35rem) {
|
|
||||||
flex-direction: column;
|
|
||||||
place-items: center;
|
|
||||||
margin-bottom: 3em;
|
|
||||||
--container-width: calc((100vw - 48px));
|
|
||||||
|
|
||||||
& > svg {
|
|
||||||
width: calc(var(--container-width) / 3);
|
|
||||||
height: calc(var(--container-width) / 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
& > h1 {
|
|
||||||
font-size: calc(var(--container-width) / 9);
|
|
||||||
}
|
|
||||||
|
|
||||||
& > p {
|
|
||||||
margin-top: -0.1em;
|
|
||||||
font-size: calc(var(--container-width) / 23);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#main {
|
#main {
|
||||||
margin-top: 96px;
|
display: flex;
|
||||||
display: grid;
|
flex-direction: column;
|
||||||
gap: 64px;
|
gap: 64px;
|
||||||
|
margin-top: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
& > section {
|
section {
|
||||||
& > p {
|
& > p {
|
||||||
max-width: 35em;
|
max-width: 35em;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin-top: 8px;
|
margin-top: 12px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&#library {
|
|
||||||
& > .grid {
|
|
||||||
@media (max-width: 40rem) {
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 22rem) {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
&#library {
|
||||||
& > .grid {
|
& > .grid {
|
||||||
display: grid;
|
@media (max-width: 40rem) {
|
||||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
grid-template-columns: 1fr 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > .flex {
|
@media (max-width: 22rem) {
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
@media (max-width: 35rem) {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
& > .grid,
|
& > .grid {
|
||||||
& > .flex {
|
display: grid;
|
||||||
gap: clamp(6px, 2vmin, 16px);
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||||
|
gap: clamp(6px, 2vmin, 16px);
|
||||||
|
|
||||||
@media (max-width: 22rem) {
|
@media (max-width: 22rem) {
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -27,26 +27,33 @@ if (year === 856) {
|
|||||||
|
|
||||||
{cache.config.timeline.breaks.includes(year) && <hr id={`hr-${year}`} />}
|
{cache.config.timeline.breaks.includes(year) && <hr id={`hr-${year}`} />}
|
||||||
|
|
||||||
<h2 class="font-2xl" class:list={{ multiple }} id={year.toString()}>
|
<div>
|
||||||
{formatTimelineDate(date)}
|
<h2 class="font-2xl" class:list={{ multiple }} id={year.toString()}>
|
||||||
</h2>
|
{formatTimelineDate(date)}
|
||||||
|
</h2>
|
||||||
|
|
||||||
<div class="year-container" class:list={{ multiple }}>
|
<div class="year-container" class:list={{ multiple }}>
|
||||||
{events.map((event) => <TimelineEvent event={event} displayDate={eventsHaveDifferentDates} />)}
|
{events.map((event) => <TimelineEvent event={event} displayDate={eventsHaveDifferentDates} />)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
div {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border: none;
|
border: none;
|
||||||
border-top: 3px dashed var(--color-base-500);
|
border-top: 3px dashed var(--color-base-500);
|
||||||
margin-block: 5em;
|
margin-top: 4em;
|
||||||
|
margin-bottom: 3em;
|
||||||
scroll-margin-block: 5em;
|
scroll-margin-block: 5em;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.year-container {
|
.year-container {
|
||||||
margin-bottom: 3em;
|
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
|
||||||
&.multiple {
|
&.multiple {
|
||||||
|
@ -8,7 +8,6 @@ import Card from "components/Card.astro";
|
|||||||
import { getI18n } from "src/i18n/i18n";
|
import { getI18n } from "src/i18n/i18n";
|
||||||
import { cache } from "src/utils/payload";
|
import { cache } from "src/utils/payload";
|
||||||
import type { WordingKey } from "src/i18n/wordings-keys";
|
import type { WordingKey } from "src/i18n/wordings-keys";
|
||||||
import AppLayoutDescription from "components/AppLayout/components/AppLayoutDescription.astro";
|
|
||||||
|
|
||||||
const events = await payload.getChronologyEvents();
|
const events = await payload.getChronologyEvents();
|
||||||
const groupedEvents = groupBy(events, (event) => event.date.year);
|
const groupedEvents = groupBy(events, (event) => event.date.year);
|
||||||
@ -17,9 +16,9 @@ const { getLocalizedUrl, t, formatTimelineDate } = await getI18n(Astro.locals.cu
|
|||||||
|
|
||||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||||
|
|
||||||
<AppLayout backgroundImage={cache.config.timeline.backgroundImage}>
|
<AppLayout backgroundImage={cache.config.timeline.backgroundImage} class="app">
|
||||||
<AppLayoutTitle title={t("timeline.title")} />
|
<AppLayoutTitle title={t("timeline.title")} />
|
||||||
<AppLayoutDescription description={t("timeline.description")} />
|
<p class="prose" set:html={t("timeline.description")} />
|
||||||
|
|
||||||
<div class="card-container">
|
<div class="card-container">
|
||||||
<Card>
|
<Card>
|
||||||
@ -73,6 +72,12 @@ const { getLocalizedUrl, t, formatTimelineDate } = await getI18n(Astro.locals.cu
|
|||||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.app {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
.card-content {
|
.card-content {
|
||||||
padding: clamp(1.5em, 4vw, 2em) clamp(1em, 4vw, 3em);
|
padding: clamp(1.5em, 4vw, 2em) clamp(1em, 4vw, 3em);
|
||||||
max-width: 35rem;
|
max-width: 35rem;
|
||||||
|
@ -1,177 +1,177 @@
|
|||||||
{
|
{
|
||||||
"disclaimer": "Usage subject to terms: https://openexchangerates.org/terms",
|
"disclaimer": "Usage subject to terms: https://openexchangerates.org/terms",
|
||||||
"license": "https://openexchangerates.org/license",
|
"license": "https://openexchangerates.org/license",
|
||||||
"timestamp": 1717603200,
|
"timestamp": 1717740000,
|
||||||
"base": "USD",
|
"base": "USD",
|
||||||
"rates": {
|
"rates": {
|
||||||
"AED": 3.6729,
|
"AED": 3.673,
|
||||||
"AFN": 70.575782,
|
"AFN": 70.453638,
|
||||||
"ALL": 92.419558,
|
"ALL": 91.912021,
|
||||||
"AMD": 388.17,
|
"AMD": 387.678915,
|
||||||
"ANG": 1.803102,
|
"ANG": 1.79986,
|
||||||
"AOA": 852.223,
|
"AOA": 854.407667,
|
||||||
"ARS": 897.74795,
|
"ARS": 898.5413,
|
||||||
"AUD": 1.505592,
|
"AUD": 1.498617,
|
||||||
"AWG": 1.8,
|
"AWG": 1.8,
|
||||||
"AZN": 1.7,
|
"AZN": 1.7,
|
||||||
"BAM": 1.800307,
|
"BAM": 1.795869,
|
||||||
"BBD": 2,
|
"BBD": 2,
|
||||||
"BDT": 117.501398,
|
"BDT": 117.294372,
|
||||||
"BGN": 1.800267,
|
"BGN": 1.79491,
|
||||||
"BHD": 0.376829,
|
"BHD": 0.376872,
|
||||||
"BIF": 2874.054434,
|
"BIF": 2869.308172,
|
||||||
"BMD": 1,
|
"BMD": 1,
|
||||||
"BND": 1.348645,
|
"BND": 1.345362,
|
||||||
"BOB": 6.913057,
|
"BOB": 6.901365,
|
||||||
"BRL": 5.2824,
|
"BRL": 5.258701,
|
||||||
"BSD": 1,
|
"BSD": 1,
|
||||||
"BTC": 0.000013964521,
|
"BTC": 0.000014026029,
|
||||||
"BTN": 83.382155,
|
"BTN": 83.367902,
|
||||||
"BWP": 13.742348,
|
"BWP": 13.755584,
|
||||||
"BYN": 3.274175,
|
"BYN": 3.268278,
|
||||||
"BZD": 2.016661,
|
"BZD": 2.013085,
|
||||||
"CAD": 1.370535,
|
"CAD": 1.366955,
|
||||||
"CDF": 2798.801364,
|
"CDF": 2822.733026,
|
||||||
"CHF": 0.894049,
|
"CHF": 0.89004,
|
||||||
"CLF": 0.032857,
|
"CLF": 0.032927,
|
||||||
"CLP": 906.43,
|
"CLP": 908.55,
|
||||||
"CNH": 7.259305,
|
"CNH": 7.255147,
|
||||||
"CNY": 7.2476,
|
"CNY": 7.2447,
|
||||||
"COP": 3923.74,
|
"COP": 3927.880338,
|
||||||
"CRC": 530.215755,
|
"CRC": 527.874933,
|
||||||
"CUC": 1,
|
"CUC": 1,
|
||||||
"CUP": 25.75,
|
"CUP": 25.75,
|
||||||
"CVE": 101.513983,
|
"CVE": 101.249236,
|
||||||
"CZK": 22.66718,
|
"CZK": 22.552099,
|
||||||
"DJF": 178.134558,
|
"DJF": 177.811501,
|
||||||
"DKK": 6.865334,
|
"DKK": 6.849959,
|
||||||
"DOP": 59.25346,
|
"DOP": 59.242392,
|
||||||
"DZD": 134.467238,
|
"DZD": 134.471532,
|
||||||
"EGP": 47.59617,
|
"EGP": 47.5129,
|
||||||
"ERN": 15,
|
"ERN": 15,
|
||||||
"ETB": 57.520327,
|
"ETB": 57.42215,
|
||||||
"EUR": 0.920423,
|
"EUR": 0.918217,
|
||||||
"FJD": 2.2549,
|
"FJD": 2.25895,
|
||||||
"FKP": 0.783116,
|
"FKP": 0.782189,
|
||||||
"GBP": 0.783116,
|
"GBP": 0.782189,
|
||||||
"GEL": 2.785,
|
"GEL": 2.785,
|
||||||
"GGP": 0.783116,
|
"GGP": 0.782189,
|
||||||
"GHS": 14.906798,
|
"GHS": 14.880927,
|
||||||
"GIP": 0.783116,
|
"GIP": 0.782189,
|
||||||
"GMD": 67.775,
|
"GMD": 67.775,
|
||||||
"GNF": 8615.050401,
|
"GNF": 8600.013522,
|
||||||
"GTQ": 7.768215,
|
"GTQ": 7.76001,
|
||||||
"GYD": 209.311753,
|
"GYD": 209.061081,
|
||||||
"HKD": 7.811219,
|
"HKD": 7.809645,
|
||||||
"HNL": 24.718097,
|
"HNL": 24.673005,
|
||||||
"HRK": 6.934061,
|
"HRK": 6.918151,
|
||||||
"HTG": 132.664459,
|
"HTG": 132.552876,
|
||||||
"HUF": 359.434937,
|
"HUF": 358.085123,
|
||||||
"IDR": 16316.416148,
|
"IDR": 16216.760923,
|
||||||
"ILS": 3.71465,
|
"ILS": 3.720825,
|
||||||
"IMP": 0.783116,
|
"IMP": 0.782189,
|
||||||
"INR": 83.392852,
|
"INR": 83.458757,
|
||||||
"IQD": 1309.617393,
|
"IQD": 1308.290714,
|
||||||
"IRR": 42100,
|
"IRR": 42100,
|
||||||
"ISK": 137.6,
|
"ISK": 137.46,
|
||||||
"JEP": 0.783116,
|
"JEP": 0.782189,
|
||||||
"JMD": 155.665152,
|
"JMD": 155.295453,
|
||||||
"JOD": 0.7088,
|
"JOD": 0.7088,
|
||||||
"JPY": 156.214,
|
"JPY": 155.5174,
|
||||||
"KES": 130.56,
|
"KES": 130,
|
||||||
"KGS": 87.5483,
|
"KGS": 87.3013,
|
||||||
"KHR": 4107.289342,
|
"KHR": 4101.618815,
|
||||||
"KMF": 452.624586,
|
"KMF": 452.450119,
|
||||||
"KPW": 900,
|
"KPW": 900,
|
||||||
"KRW": 1371.060206,
|
"KRW": 1367.937913,
|
||||||
"KWD": 0.30645,
|
"KWD": 0.306384,
|
||||||
"KYD": 0.833709,
|
"KYD": 0.832281,
|
||||||
"KZT": 449.146281,
|
"KZT": 446.221602,
|
||||||
"LAK": 21527.892501,
|
"LAK": 21498.895118,
|
||||||
"LBP": 89578.918635,
|
"LBP": 89418.618549,
|
||||||
"LKR": 302.438336,
|
"LKR": 302.314319,
|
||||||
"LRD": 193.874956,
|
"LRD": 193.950039,
|
||||||
"LSL": 18.880638,
|
"LSL": 18.953322,
|
||||||
"LYD": 4.833528,
|
"LYD": 4.829787,
|
||||||
"MAD": 9.926728,
|
"MAD": 9.877784,
|
||||||
"MDL": 17.678464,
|
"MDL": 17.619678,
|
||||||
"MGA": 4462.660208,
|
"MGA": 4467.052458,
|
||||||
"MKD": 56.658308,
|
"MKD": 56.57657,
|
||||||
"MMK": 2101.212378,
|
"MMK": 2101.212378,
|
||||||
"MNT": 3450,
|
"MNT": 3450,
|
||||||
"MOP": 8.048455,
|
"MOP": 8.033479,
|
||||||
"MRU": 39.233411,
|
"MRU": 39.126423,
|
||||||
"MUR": 46.33,
|
"MUR": 46.32,
|
||||||
"MVR": 15.41,
|
"MVR": 15.4,
|
||||||
"MWK": 1734.674663,
|
"MWK": 1731.539932,
|
||||||
"MXN": 17.527934,
|
"MXN": 17.987572,
|
||||||
"MYR": 4.698,
|
"MYR": 4.6955,
|
||||||
"MZN": 63.875003,
|
"MZN": 63.92499,
|
||||||
"NAD": 18.880593,
|
"NAD": 18.953497,
|
||||||
"NGN": 1497.53,
|
"NGN": 1485.31,
|
||||||
"NIO": 36.829072,
|
"NIO": 36.764809,
|
||||||
"NOK": 10.591985,
|
"NOK": 10.558218,
|
||||||
"NPR": 133.41189,
|
"NPR": 133.383523,
|
||||||
"NZD": 1.617194,
|
"NZD": 1.613954,
|
||||||
"OMR": 0.384955,
|
"OMR": 0.384963,
|
||||||
"PAB": 1,
|
"PAB": 1,
|
||||||
"PEN": 3.736112,
|
"PEN": 3.738103,
|
||||||
"PGK": 3.894622,
|
"PGK": 3.887667,
|
||||||
"PHP": 58.732501,
|
"PHP": 58.519502,
|
||||||
"PKR": 278.426033,
|
"PKR": 278.529362,
|
||||||
"PLN": 3.949797,
|
"PLN": 3.932408,
|
||||||
"PYG": 7539.734899,
|
"PYG": 7514.698541,
|
||||||
"QAR": 3.649678,
|
"QAR": 3.642917,
|
||||||
"RON": 4.5799,
|
"RON": 4.569,
|
||||||
"RSD": 107.767,
|
"RSD": 107.495,
|
||||||
"RUB": 89.050371,
|
"RUB": 89.173363,
|
||||||
"RWF": 1300.409751,
|
"RWF": 1298.427641,
|
||||||
"SAR": 3.750477,
|
"SAR": 3.750551,
|
||||||
"SBD": 8.478719,
|
"SBD": 8.482503,
|
||||||
"SCR": 13.797069,
|
"SCR": 13.845723,
|
||||||
"SDG": 586,
|
"SDG": 586,
|
||||||
"SEK": 10.4217,
|
"SEK": 10.38479,
|
||||||
"SGD": 1.3487,
|
"SGD": 1.34481,
|
||||||
"SHP": 0.783116,
|
"SHP": 0.782189,
|
||||||
"SLL": 20969.5,
|
"SLL": 20969.5,
|
||||||
"SOS": 571.730706,
|
"SOS": 570.753969,
|
||||||
"SRD": 31.8395,
|
"SRD": 31.7645,
|
||||||
"SSP": 130.26,
|
"SSP": 130.26,
|
||||||
"STD": 22281.8,
|
"STD": 22281.8,
|
||||||
"STN": 22.552584,
|
"STN": 22.496155,
|
||||||
"SVC": 8.753924,
|
"SVC": 8.738769,
|
||||||
"SYP": 2512.53,
|
"SYP": 2512.53,
|
||||||
"SZL": 18.874211,
|
"SZL": 18.948934,
|
||||||
"THB": 36.595,
|
"THB": 36.351667,
|
||||||
"TJS": 10.700051,
|
"TJS": 10.696062,
|
||||||
"TMT": 3.5,
|
"TMT": 3.51,
|
||||||
"TND": 3.109,
|
"TND": 3.10175,
|
||||||
"TOP": 2.355339,
|
"TOP": 2.352606,
|
||||||
"TRY": 32.314401,
|
"TRY": 32.310647,
|
||||||
"TTD": 6.769457,
|
"TTD": 6.757172,
|
||||||
"TWD": 32.335001,
|
"TWD": 32.282,
|
||||||
"TZS": 2616.146822,
|
"TZS": 2615,
|
||||||
"UAH": 40.145276,
|
"UAH": 40.094667,
|
||||||
"UGX": 3811.854072,
|
"UGX": 3788.628608,
|
||||||
"USD": 1,
|
"USD": 1,
|
||||||
"UYU": 38.947242,
|
"UYU": 38.896466,
|
||||||
"UZS": 12670.888889,
|
"UZS": 12659.755435,
|
||||||
"VES": 36.498131,
|
"VES": 36.442787,
|
||||||
"VND": 25422.65528,
|
"VND": 25422.651993,
|
||||||
"VUV": 118.722,
|
"VUV": 118.722,
|
||||||
"WST": 2.8,
|
"WST": 2.8,
|
||||||
"XAF": 603.757729,
|
"XAF": 602.310759,
|
||||||
"XAG": 0.03345097,
|
"XAG": 0.03205488,
|
||||||
"XAU": 0.00042489,
|
"XAU": 0.0004209,
|
||||||
"XCD": 2.70255,
|
"XCD": 2.70255,
|
||||||
"XDR": 0.756018,
|
"XDR": 0.75467,
|
||||||
"XOF": 603.757729,
|
"XOF": 602.310759,
|
||||||
"XPD": 0.0010788,
|
"XPD": 0.00108737,
|
||||||
"XPF": 109.835647,
|
"XPF": 109.572414,
|
||||||
"XPT": 0.00100458,
|
"XPT": 0.00099467,
|
||||||
"YER": 250.350066,
|
"YER": 250.425029,
|
||||||
"ZAR": 18.9541,
|
"ZAR": 18.932716,
|
||||||
"ZMW": 26.287109,
|
"ZMW": 26.240618,
|
||||||
"ZWL": 322
|
"ZWL": 322
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
x
Reference in New Issue
Block a user