Adapted margin system on all pages

This commit is contained in:
DrMint 2024-06-07 09:22:44 +02:00
parent 979c7fbbf7
commit 84b6823a55
21 changed files with 448 additions and 505 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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,

View File

@ -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;
}
} }
} }

View File

@ -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>
) : ( ) : (

View 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>

View File

@ -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%;

View File

@ -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;

View File

@ -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>

View File

@ -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;

View File

@ -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>

View File

@ -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;

View File

@ -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>

View File

@ -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;
} }
} }

View File

@ -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;
}
} }
} }
} }

View File

@ -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 {

View File

@ -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;

View File

@ -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
} }
} }