From 701d60a0e574243ef9e9b78e231c2dd63184c2f9 Mon Sep 17 00:00:00 2001 From: DrMint <29893320+DrMint@users.noreply.github.com> Date: Mon, 27 May 2024 15:08:07 +0200 Subject: [PATCH] Many, many changes related to fonts and spacing --- README.md | 1 - TODO.md | 6 + public/site.webmanifest | 35 +- .../AppLayout/components/AppLayoutTitle.astro | 15 +- .../AppLayout/components/Footer.astro | 276 ++++--------- .../AppLayout/components/Html.astro | 389 +++++++++++------- .../Topbar/components/ParentPagesButton.astro | 2 +- .../Topbar/components/ReturnToButton.astro | 3 +- src/components/AudioPlayer.astro | 2 +- src/components/Button.astro | 1 - src/components/Card.astro | 7 +- src/components/ErrorMessage.astro | 7 +- src/components/HeaderTitle.astro | 12 +- src/components/InlineMetadata.astro | 23 +- src/components/Lightbox.astro | 14 +- src/components/Metadata.astro | 26 +- src/components/Previews/GenericPreview.astro | 38 +- .../RTBlock/components/RTBreak.astro | 2 +- .../RTBlock/components/RTSection.astro | 3 +- .../components/OpenMediaPageButton.astro | 3 +- .../RTUpload/components/RTImage.astro | 18 +- src/components/SourceRow.astro | 19 +- .../TableOfContent/TableOfContent.astro | 28 +- src/components/TitleIcon.astro | 25 ++ src/components/VideoPlayer.astro | 2 +- .../[locale]/_components/CategoryCard.astro | 11 +- .../[locale]/_components/ChronicleCard.astro | 56 --- src/pages/[locale]/_components/LinkCard.astro | 14 +- src/pages/[locale]/api/pages/partial.astro | 13 +- .../[slug]/_components/AvailabilityInfo.astro | 19 +- .../ContentsSection/ContentsSection.astro | 34 +- .../[slug]/_components/ImageTile.astro | 16 +- .../[slug]/_components/PageInfo.astro | 18 +- .../[slug]/_components/SizeInfo.astro | 27 +- .../[slug]/_components/SubitemSection.astro | 34 +- .../[slug]/_components/WeightInfo.astro | 19 +- .../collectibles/[slug]/gallery/index.astro | 14 +- .../[locale]/collectibles/[slug]/index.astro | 19 +- .../scans/_components/ScanPreview.astro | 15 +- .../collectibles/[slug]/scans/index.astro | 29 +- .../_components/ColorShowcase.astro | 118 ++++++ .../[locale]/dev/design-system/index.astro | 71 ++++ src/pages/[locale]/folders/[slug].astro | 12 +- .../folders/_components/FolderCard.astro | 10 +- .../folders/_components/FoldersSection.astro | 2 +- src/pages/[locale]/index.astro | 72 +--- src/pages/[locale]/recorders/[id].astro | 19 +- src/pages/[locale]/timeline/index.astro | 8 +- src/pages/[locale]/videos/[id].astro | 2 - 49 files changed, 735 insertions(+), 874 deletions(-) create mode 100644 src/components/TitleIcon.astro delete mode 100644 src/pages/[locale]/_components/ChronicleCard.astro create mode 100644 src/pages/[locale]/dev/design-system/_components/ColorShowcase.astro create mode 100644 src/pages/[locale]/dev/design-system/index.astro diff --git a/README.md b/README.md index 105655f..18d37e8 100644 --- a/README.md +++ b/README.md @@ -156,7 +156,6 @@ A parallax effect is applied on the webpages' background image. This effect can ## CSS Global Variables - `--color-base-X`: the current theme colors. X can be between 0 and 1000, available in increments of 50. -- `--font-serif`: by default, everything use sans-serif. Use this variable to make the font serif. ## Translations diff --git a/TODO.md b/TODO.md index d3623f5..7f2177c 100644 --- a/TODO.md +++ b/TODO.md @@ -3,13 +3,17 @@ ## Ongoing - [Analytics] Add analytics +- [Tooltips] Tooltip in under next element (example in timeline) +- [Language override] Maso actor is not focusable with keyboard nav ## Short term +- [Timeline] Improve layout/spacing on mobile - Display if a content has a source language - [JSLess] Display if a content is available in more than one language - Number of audio players seems limited (on Chrome and Firefox) - [RichTextContent] Handle relationship +- [Component] Make a metadata title component (combine with collectible custom info and table of content) - [RichTextContent] Add autolink block support ## Mid term @@ -25,6 +29,8 @@ ## Long term +- [WebManifest] Add shortcuts https://web.dev/patterns/web-apps/shortcuts +- [PWA] Rich install UI https://web.dev/patterns/web-apps/richer-install-ui/ - Try using CSS instead of JS for parallax effect - More data caching between the CMS and Astro - [Folders] Support for nameless section diff --git a/public/site.webmanifest b/public/site.webmanifest index 8e572d6..5f147c8 100644 --- a/public/site.webmanifest +++ b/public/site.webmanifest @@ -27,38 +27,5 @@ "name": "Accord's Library", "short_name": "Accord's Lib", - "start_url": ".", - - "shortcuts": [ - { - "name": "Library", - "url": "/library", - "description": "Browse all physical and digital media" - }, - { - "name": "Contents", - "url": "/contents", - "description": "Explore all content and filter by type or category" - }, - { - "name": "Wiki", - "url": "/wiki", - "description": "An encyclopedia for everything related to DrakeNieR" - }, - { - "name": "Chronicles", - "url": "/chronicles", - "description": "Experience all events and content in chronological order" - }, - { - "name": "News", - "url": "/news", - "description": "All the latest info" - }, - { - "name": "Gallery", - "url": "/gallery", - "description": "Thousands of offcial artworks" - } - ] + "start_url": "." } diff --git a/src/components/AppLayout/components/AppLayoutTitle.astro b/src/components/AppLayout/components/AppLayoutTitle.astro index 8c53e1a..1faf1d6 100644 --- a/src/components/AppLayout/components/AppLayoutTitle.astro +++ b/src/components/AppLayout/components/AppLayoutTitle.astro @@ -12,8 +12,14 @@ const { title, subtitle, pretitle } = Astro.props;

{pretitle && {pretitle} } - {title}  - {subtitle && {subtitle}} + {title}  + { + subtitle && ( + + {subtitle} + + ) + }

{/* ------------------------------------------- CSS -------------------------------------------- */} @@ -22,22 +28,19 @@ const { title, subtitle, pretitle } = Astro.props; h1 { line-height: 0.8; display: grid; - overflow-wrap: anywhere; font-size: clamp(1em, 0.7em + 1.5vw, 2em); & > #pretitle { - font-family: var(--font-sans-serifs); font-variation-settings: "wght" 430; margin-bottom: 0.8em; } & > #title { - font-family: var(--font-serif); + font-variation-settings: "wght" 900; font-size: 200%; } & > #subtitle { - font-family: var(--font-serif); font-variation-settings: "wght" 700; margin-top: 0.5em; } diff --git a/src/components/AppLayout/components/Footer.astro b/src/components/AppLayout/components/Footer.astro index 73011b3..b5259e2 100644 --- a/src/components/AppLayout/components/Footer.astro +++ b/src/components/AppLayout/components/Footer.astro @@ -29,48 +29,39 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t( {/* ------------------------------------------- CSS -------------------------------------------- */} @@ -124,158 +84,96 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t( footer { border-top: 0.1em solid var(--color-base-1000); padding-block: 2em; + display: flex; place-content: center; + place-items: center; gap: clamp(1.5em, 1.25em + 2vw, 4em); - font-size: 0.85em; - & > div { - max-width: 20em; - flex: 1; - - @media (max-width: 35rem) { - max-width: unset; - } + @media (max-width: 720.5px) { + flex-direction: column; + place-items: center; } - & > #nav { + & > #socials { + flex-shrink: 0; display: grid; + grid-template-columns: auto auto; + gap: 0.2em 1em; place-content: start; - flex: 1.5; + flex-grow: 1; + + @media (min-width: 720.5px) { + max-width: 16rem; + } + + @media (max-width: 720.5px) { + grid-template-columns: auto auto auto auto; + } @media (max-width: 35rem) { - place-items: center; + grid-template-columns: auto auto; } - & > p { - font-variation-settings: "wght" 700; - font-size: 1.2em; - white-space: pre; + & > a { + display: flex; - @media (max-width: 35rem) { - font-size: clamp(1em, 8vw, 2.5em); - } - } - - & > div { - display: grid; - flex-direction: column; - place-items: start; - margin-top: 0.8em; - gap: 0.3em; - grid-template-columns: 1fr 1fr; - margin-left: -0.6em; - - @media (max-width: 35rem) { - gap: 0.25em 0.5em; - grid-template-columns: 1fr 1fr; - margin-top: 0.8em; - margin-left: unset; - font-size: 1.2em; - } - - @media (max-width: 22rem) { - grid-template-columns: 1fr; - margin-top: 0.8em; - margin-left: unset; - font-size: 1.2em; + & > p { + font-variation-settings: "wght" 500; } } } - & > #license { - display: grid; - grid-template-areas: "license"; - padding-left: 1em; + & > #copylicense { + display: flex; + place-content: center; + gap: clamp(1.5em, 1.25em + 2vw, 4em); + line-height: 1.2; - @media (max-width: 35rem) { - gap: 3em; - } - - @media screen { - &.with-links { + &.with-border { + @media (min-width: 720.5px) { border-left: 0.1em solid var(--color-base-1000); - grid-template-areas: "license" "socials"; - - @media (max-width: 35rem) { - grid-template-areas: "socials" "license"; - border-left: unset; - padding-left: unset; - } + padding-left: 1em; } } - & > #license-section { - grid-area: license; - line-height: 1.2; + @media (max-width: 35rem) { + flex-direction: column; + place-items: center; + text-align: center; + } + + & > #license { + justify-self: end; + max-width: 18rem; + + display: flex; + flex-direction: column; + + @media (max-width: 35rem) { + align-items: center; + } & > #common-creative { display: flex; justify-content: flex-start; - gap: 0.2em; - margin-top: 0.5em; + gap: 0.25em; + margin-top: 0.8em; width: fit-content; - - & > svg { - width: 1em; - height: 1em; - } - - @media (max-width: 35rem) { - place-content: center; - gap: clamp(4px, 2vw, 8px); - - & > svg { - width: clamp(1em, 6vw, 24px); - height: clamp(1em, 6vw, 24px); - } - } } } - & > #socials { - grid-area: socials; - display: flex; - gap: 1.5em; - margin-top: 24px; - - & > a > svg { - width: 1.5em; - height: 1.5em; - } + & > #copyright { + max-width: 22rem; + border-left: 0.1em solid var(--color-base-1000); + padding-left: 1em; + flex-shrink: 1.1; @media (max-width: 35rem) { - place-content: center; - flex-wrap: wrap; - gap: clamp(24px, 8vw, 48px); - - & > a > svg { - width: clamp(24px, 8vw, 48px); - height: clamp(24px, 8vw, 48px); - } + border: none; + padding-left: unset; } } } - - & > #copyright { - border-left: 0.1em solid var(--color-base-1000); - padding-left: 1em; - line-height: 1.2; - - @media (max-width: 35rem) { - border: none; - padding-left: unset; - } - } - - @media (max-width: 35rem) { - flex-direction: column; - text-align: center; - align-items: center; - - & > div { - max-width: unset; - } - } } diff --git a/src/components/AppLayout/components/Html.astro b/src/components/AppLayout/components/Html.astro index 72ff8e1..c0118d2 100644 --- a/src/components/AppLayout/components/Html.astro +++ b/src/components/AppLayout/components/Html.astro @@ -58,7 +58,17 @@ const { currentTheme } = Astro.locals; - + + + + @@ -138,7 +148,61 @@ const { currentTheme } = Astro.locals; {/* ------------------------------------------- CSS -------------------------------------------- */} diff --git a/src/components/AppLayout/components/Topbar/components/ReturnToButton.astro b/src/components/AppLayout/components/Topbar/components/ReturnToButton.astro index 454a03f..babc284 100644 --- a/src/components/AppLayout/components/Topbar/components/ReturnToButton.astro +++ b/src/components/AppLayout/components/Topbar/components/ReturnToButton.astro @@ -24,7 +24,7 @@ const {

- {typeLabel} + {typeLabel} {label}

@@ -44,7 +44,6 @@ const { border: 1px solid var(--color-base-1000); border-radius: 9999px; padding: 0.3em 0.5em; - font-size: 80%; } } } diff --git a/src/components/AudioPlayer.astro b/src/components/AudioPlayer.astro index 3e1bc00..1dbd55f 100644 --- a/src/components/AudioPlayer.astro +++ b/src/components/AudioPlayer.astro @@ -22,6 +22,6 @@ const { audio { width: 100%; border-radius: 16px; - box-shadow: 0 5px 20px -10px var(--color-shadow); + box-shadow: 0 5px 20px -10px var(--color-shadow-0); } diff --git a/src/components/Button.astro b/src/components/Button.astro index debaa22..2ecfee8 100644 --- a/src/components/Button.astro +++ b/src/components/Button.astro @@ -40,7 +40,6 @@ const { title, icon, class: className, ariaLabel, id } = Astro.props; gap: 1em; font-variation-settings: "wght" 700; - font-size: 1em; cursor: pointer; transition-duration: 250ms; diff --git a/src/components/Card.astro b/src/components/Card.astro index 95d2b97..e17f241 100644 --- a/src/components/Card.astro +++ b/src/components/Card.astro @@ -32,7 +32,6 @@ const { href, disableRoundedTop = false } = Astro.props; &.rounded-top { border-radius: 1em; - overflow: hidden; } border: 1px solid var(--color-base-300); @@ -47,15 +46,11 @@ const { href, disableRoundedTop = false } = Astro.props; &:hover, &:focus-visible { border-color: var(--color-base-650); + outline-color: var(--color-base-650); box-shadow: 0 2px 2px var(--color-shadow-2); background-color: color-mix(in srgb, var(--color-elevation-2) 80%, transparent); } - &:focus-visible { - outline: 3px solid var(--color-base-650); - outline-offset: unset; - } - &:active { border-color: var(--color-base-1000); box-shadow: 0 6px 12px 2px var(--color-shadow-2); diff --git a/src/components/ErrorMessage.astro b/src/components/ErrorMessage.astro index 4d46a35..47a611a 100644 --- a/src/components/ErrorMessage.astro +++ b/src/components/ErrorMessage.astro @@ -13,7 +13,7 @@ const { title, description } = Astro.props;
-

{title}

+

{title}

{description &&

{description}

}
@@ -27,10 +27,5 @@ const { title, description } = Astro.props; border-radius: 1em; display: grid; place-items: center; - - & > #title { - font-variation-settings: "wght" 600; - font-size: 120%; - } } diff --git a/src/components/HeaderTitle.astro b/src/components/HeaderTitle.astro index 5f7aad6..2e7cc05 100644 --- a/src/components/HeaderTitle.astro +++ b/src/components/HeaderTitle.astro @@ -11,27 +11,27 @@ const { header, id } = Astro.props; { header === 1 ? ( -

+

) : header === 2 ? ( -

+

) : header === 3 ? ( -

+

) : header === 4 ? ( -

+

) : header === 5 ? ( -
+
) : ( -
+
) diff --git a/src/components/InlineMetadata.astro b/src/components/InlineMetadata.astro index 5955b7d..ff3a61e 100644 --- a/src/components/InlineMetadata.astro +++ b/src/components/InlineMetadata.astro @@ -12,30 +12,25 @@ if (values.length === 0) return; {/* ------------------------------------------- HTML ------------------------------------------- */}
- -

{title}

-
{values.map(({ name }) => name).join(", ")}
+
+ +

{title}

+
+
{values.map(({ name }) => name).join(", ")}
{/* ------------------------------------------- CSS -------------------------------------------- */} diff --git a/src/components/Metadata.astro b/src/components/Metadata.astro index f592833..6456602 100644 --- a/src/components/Metadata.astro +++ b/src/components/Metadata.astro @@ -1,6 +1,6 @@ --- -import { Icon } from "astro-icon/components"; import type { Attribute } from "src/utils/attributes"; +import TitleIcon from "./TitleIcon.astro"; interface Props extends Attribute {} @@ -12,10 +12,7 @@ if (values.length === 0) return; {/* ------------------------------------------- HTML ------------------------------------------- */}
-
- -

{title}

-
+
{ values.map(({ name, href }) => @@ -43,24 +40,19 @@ if (values.length === 0) return; grid-template-columns: 1fr; } - & > #title { - display: flex; - gap: 8px; - - & > p { - font-size: 1.5em; - font-variation-settings: "wght" 600; - translate: 0px -0.1em; - } - } - & > #values { display: flex; flex-wrap: wrap; gap: 6px; + &:not(.with-border) { + translate: 0px 5px; + line-height: 1.2; + } + &.with-border { - & > * { + & > div, + & > a { border-radius: 9999px; padding-bottom: 0.25em; padding-top: 0.15em; diff --git a/src/components/Previews/GenericPreview.astro b/src/components/Previews/GenericPreview.astro index 9bd6d76..84bb756 100644 --- a/src/components/Previews/GenericPreview.astro +++ b/src/components/Previews/GenericPreview.astro @@ -47,6 +47,7 @@ const { { thumbnail && ( { smallTitle ? ( -

{title}

+

{title}

) : (

- {pretitle && {pretitle} } - {title}  - {subtitle && {subtitle}} + {pretitle && ( + + {pretitle} + + )} + + {title} + + {subtitle && ( + + {subtitle} + + )}

) } @@ -112,6 +123,11 @@ const { & > img { width: 100%; height: auto; + + &.rounded-top { + border-top-left-radius: 1em; + border-top-right-radius: 1em; + } } & > #icon-container { @@ -149,28 +165,18 @@ const { gap: 1.2em; & > p { - line-height: 1; display: grid; - overflow-wrap: anywhere; - font-size: clamp(0.8em, 0.35em + 0.75vw, 1em); - font-variation-settings: "wght" 800; & > #pretitle { - font-family: var(--font-sans-serifs); - font-variation-settings: "wght" 400; - margin-bottom: 0.5em; + margin-bottom: 0.4em; } & > #title { line-height: 0.8; - font-family: var(--font-serif); - font-size: 150%; } & > #subtitle { - font-family: var(--font-serif); - font-variation-settings: "wght" 600; - margin-top: 0.5em; + margin-top: 0.4em; } } diff --git a/src/components/RichText/components/RTBlock/components/RTBreak.astro b/src/components/RichText/components/RTBlock/components/RTBreak.astro index 3d9ff48..420c977 100644 --- a/src/components/RichText/components/RTBlock/components/RTBreak.astro +++ b/src/components/RichText/components/RTBlock/components/RTBreak.astro @@ -42,7 +42,7 @@ const { node } = Astro.props; p { margin-block: 4rem; text-align: center; - font-size: 2em; + font-size: 200%; /* Using % on purpose */ color: var(--color-base-600); letter-spacing: 1em; scroll-margin-block: 4rem; diff --git a/src/components/RichText/components/RTBlock/components/RTSection.astro b/src/components/RichText/components/RTBlock/components/RTSection.astro index e6f6676..127c45a 100644 --- a/src/components/RichText/components/RTBlock/components/RTSection.astro +++ b/src/components/RichText/components/RTBlock/components/RTSection.astro @@ -27,8 +27,9 @@ const { node, context } = Astro.props; span { color: var(--color-base-650); font-variation-settings: "wght" 500; - font-size: 70%; + font-size: 75%; /* Using % on purpose */ place-self: start; margin-top: 0.33em; + flex-shrink: 0; } diff --git a/src/components/RichText/components/RTUpload/components/OpenMediaPageButton.astro b/src/components/RichText/components/RTUpload/components/OpenMediaPageButton.astro index 1cd8a8f..a17c85a 100644 --- a/src/components/RichText/components/RTUpload/components/OpenMediaPageButton.astro +++ b/src/components/RichText/components/RTUpload/components/OpenMediaPageButton.astro @@ -15,7 +15,7 @@ const { t } = await getI18n(Astro.locals.currentLocale);
-

{t("global.openMediaPage")}

+

{t("global.openMediaPage")}
@@ -26,7 +26,6 @@ const { t } = await getI18n(Astro.locals.currentLocale); display: flex; place-items: start; gap: 0.3em; - font-size: 85%; & > a { padding: 0.3em 0.6em; diff --git a/src/components/RichText/components/RTUpload/components/RTImage.astro b/src/components/RichText/components/RTUpload/components/RTImage.astro index 3c0c9c9..1617b1f 100644 --- a/src/components/RichText/components/RTUpload/components/RTImage.astro +++ b/src/components/RichText/components/RTUpload/components/RTImage.astro @@ -58,9 +58,12 @@ const mediaPage = getLocalizedUrl(`/images/${id}`); } a { - display: block; line-height: 0; margin-bottom: 0.5em; + border-radius: 16px; + box-shadow: 0 5px 20px -10px var(--color-shadow-0); + border-radius: 16px; + overflow: hidden; transition-property: scale, margin-bottom; transition-duration: 100ms; @@ -71,19 +74,6 @@ const mediaPage = getLocalizedUrl(`/images/${id}`); margin-bottom: 1em; } - &:focus-visible { - outline: 3px solid var(--color-base-1000); - outline-offset: unset; - } - max-height: 70vh; - - & > img { - box-shadow: 0 5px 20px -10px var(--color-shadow); - border-radius: 16px; - - max-width: 100%; - height: auto; - } } diff --git a/src/components/SourceRow.astro b/src/components/SourceRow.astro index a454b77..f52c15a 100644 --- a/src/components/SourceRow.astro +++ b/src/components/SourceRow.astro @@ -20,15 +20,16 @@ const { {/* ------------------------------------------- HTML ------------------------------------------- */} -
{typeLabel}

{label}

 +
{typeLabel}

{label}

 {/* ------------------------------------------- CSS -------------------------------------------- */} diff --git a/src/components/TableOfContent/TableOfContent.astro b/src/components/TableOfContent/TableOfContent.astro index b6bee6a..425d65e 100644 --- a/src/components/TableOfContent/TableOfContent.astro +++ b/src/components/TableOfContent/TableOfContent.astro @@ -1,8 +1,8 @@ --- import type { TableOfContentEntry } from "src/shared/payload/payload-sdk"; import TableOfContentItem from "./components/TableOfContentItem.astro"; -import { Icon } from "astro-icon/components"; import { getI18n } from "src/i18n/i18n"; +import TitleIcon from "components/TitleIcon.astro"; interface Props { toc: TableOfContentEntry[]; @@ -14,31 +14,9 @@ const { t } = await getI18n(Astro.locals.currentLocale); {/* ------------------------------------------- HTML ------------------------------------------- */} -
-
- -

{t("pages.tableOfContent")}

-
+
+
    {toc.map((entry) => )}
- -{/* ------------------------------------------- CSS -------------------------------------------- */} - - diff --git a/src/components/TitleIcon.astro b/src/components/TitleIcon.astro new file mode 100644 index 0000000..bc0b9b7 --- /dev/null +++ b/src/components/TitleIcon.astro @@ -0,0 +1,25 @@ +--- +import { Icon } from "astro-icon/components"; + +interface Props { + icon: string; + title: string; +} + +const { icon, title } = Astro.props; +--- + +
+ +

{title}

+
+ +{/* ------------------------------------------- CSS -------------------------------------------- */} + + diff --git a/src/components/VideoPlayer.astro b/src/components/VideoPlayer.astro index 30a4cdd..a266915 100644 --- a/src/components/VideoPlayer.astro +++ b/src/components/VideoPlayer.astro @@ -28,6 +28,6 @@ const { video { width: 100%; border-radius: 16px; - box-shadow: 0 5px 20px -10px var(--color-shadow); + box-shadow: 0 5px 20px -10px var(--color-shadow-0); } diff --git a/src/pages/[locale]/_components/CategoryCard.astro b/src/pages/[locale]/_components/CategoryCard.astro index 8ed120c..daacaaf 100644 --- a/src/pages/[locale]/_components/CategoryCard.astro +++ b/src/pages/[locale]/_components/CategoryCard.astro @@ -52,28 +52,27 @@ const { img, name, href } = Astro.props; diff --git a/src/pages/[locale]/_components/ChronicleCard.astro b/src/pages/[locale]/_components/ChronicleCard.astro deleted file mode 100644 index f84e5aa..0000000 --- a/src/pages/[locale]/_components/ChronicleCard.astro +++ /dev/null @@ -1,56 +0,0 @@ ---- -interface Props { - pretitle: string; - title: string; - subtitle: string; - href: string; -} - -const { pretitle, subtitle, title, href } = Astro.props; ---- - -{/* ------------------------------------------- HTML ------------------------------------------- */} - - -

{pretitle}

-

{title}

-

{subtitle}

- - -{/* ------------------------------------------- CSS -------------------------------------------- */} - - diff --git a/src/pages/[locale]/_components/LinkCard.astro b/src/pages/[locale]/_components/LinkCard.astro index a14c0e8..d023185 100644 --- a/src/pages/[locale]/_components/LinkCard.astro +++ b/src/pages/[locale]/_components/LinkCard.astro @@ -15,8 +15,8 @@ const { icon, subtitle, title, href } = Astro.props; @@ -30,7 +30,6 @@ const { icon, subtitle, title, href } = Astro.props; color: var(--color-base-1000); padding: 1.5em; border-radius: 0.75em; - text-decoration: none; & > svg { width: clamp(1.5em, 6vw + 0.8em, 3em); @@ -43,15 +42,6 @@ const { icon, subtitle, title, href } = Astro.props; flex-direction: column; align-items: flex-start; gap: 0.15em; - - & > h3 { - font-size: 1.25em; - } - - & > p { - font-size: 0.8em; - margin-left: 2px; - } } } diff --git a/src/pages/[locale]/api/pages/partial.astro b/src/pages/[locale]/api/pages/partial.astro index d6d5b4f..a043016 100644 --- a/src/pages/[locale]/api/pages/partial.astro +++ b/src/pages/[locale]/api/pages/partial.astro @@ -39,11 +39,13 @@ const metaAttributes: Attribute[] = [ title: t("global.media.attributes.createdAt"), icon: "material-symbols:calendar-add-on-outline", values: [{ name: formatDate(new Date(createdAt)) }], + withBorder: false, }, { title: t("global.media.attributes.updatedAt"), icon: "material-symbols:edit-calendar", values: [{ name: formatDate(new Date(updatedAt)) }], + withBorder: false, }, ]; @@ -170,17 +172,13 @@ if (updatedBy) { #thumbnail { border-radius: 16px; transition: 100ms scale; - display: block; max-height: 80vh; max-width: min(35rem, 100%); & > img { - max-width: 100%; - height: auto; - border-radius: 16px; - box-shadow: 0 5px 20px -10px var(--color-shadow); + box-shadow: 0 5px 20px -10px var(--color-shadow-0); } @media (max-width: 1280.5px) { @@ -195,10 +193,5 @@ if (updatedBy) { &:focus-visible { scale: 102%; } - - &:focus-visible { - outline: 3px solid var(--color-base-1000); - outline-offset: unset; - } } diff --git a/src/pages/[locale]/collectibles/[slug]/_components/AvailabilityInfo.astro b/src/pages/[locale]/collectibles/[slug]/_components/AvailabilityInfo.astro index ef77e5f..02afe37 100644 --- a/src/pages/[locale]/collectibles/[slug]/_components/AvailabilityInfo.astro +++ b/src/pages/[locale]/collectibles/[slug]/_components/AvailabilityInfo.astro @@ -1,5 +1,5 @@ --- -import { Icon } from "astro-icon/components"; +import TitleIcon from "components/TitleIcon.astro"; import { getI18n } from "src/i18n/i18n"; import type { EndpointCollectible } from "src/shared/payload/payload-sdk"; @@ -32,11 +32,7 @@ const title = (() => { {/* ------------------------------------------- HTML ------------------------------------------- */}
-
- -

{title}

-
- + { urls.length > 0 && (
@@ -63,17 +59,6 @@ const title = (() => { grid-template-columns: 1fr; } - & > #title { - display: flex; - place-items: center; - gap: 8px; - - & > p { - font-size: 1.5em; - font-variation-settings: "wght" 600; - } - } - & > #values { display: flex; flex-wrap: wrap; diff --git a/src/pages/[locale]/collectibles/[slug]/_components/ContentsSection/ContentsSection.astro b/src/pages/[locale]/collectibles/[slug]/_components/ContentsSection/ContentsSection.astro index 25afd6c..7264524 100644 --- a/src/pages/[locale]/collectibles/[slug]/_components/ContentsSection/ContentsSection.astro +++ b/src/pages/[locale]/collectibles/[slug]/_components/ContentsSection/ContentsSection.astro @@ -1,8 +1,8 @@ --- -import { Icon } from "astro-icon/components"; import type { EndpointCollectible } from "src/shared/payload/payload-sdk"; import ContentRow from "./ContentRow.astro"; import { getI18n } from "src/i18n/i18n"; +import TitleIcon from "components/TitleIcon.astro"; interface Props { contents: EndpointCollectible["contents"]; @@ -14,34 +14,26 @@ const { t } = await getI18n(Astro.locals.currentLocale); {/* ------------------------------------------- HTML ------------------------------------------- */} -
- -

{t("collectibles.contents")}

-
+
+ -
- {contents.map((content) => )} +
+ {contents.map((content) => )} +
{/* ------------------------------------------- CSS -------------------------------------------- */} diff --git a/src/pages/[locale]/collectibles/[slug]/_components/ImageTile.astro b/src/pages/[locale]/collectibles/[slug]/_components/ImageTile.astro index 75b3649..5f8a69b 100644 --- a/src/pages/[locale]/collectibles/[slug]/_components/ImageTile.astro +++ b/src/pages/[locale]/collectibles/[slug]/_components/ImageTile.astro @@ -36,7 +36,7 @@ const { />
-

{title}

+

{title}

{subtitle}

@@ -53,7 +53,7 @@ const { place-items: center; overflow: hidden; border-radius: 12px; - box-shadow: 0 5px 20px -10px var(--color-shadow); + box-shadow: 0 5px 20px -10px var(--color-shadow-0); transition: 100ms scale; @@ -62,22 +62,12 @@ const { scale: 105%; } - &:focus-visible { - outline: 3px solid var(--color-base-1000); - outline-offset: unset; - } - & > div { text-align: center; backdrop-filter: blur(5px); padding: 1em; border-radius: 1em; - - & > .title { - font-size: 130%; - font-variation-settings: "wght" 500; - margin-bottom: 0.2em; - } + line-height: 1.3; } & > img { diff --git a/src/pages/[locale]/collectibles/[slug]/_components/PageInfo.astro b/src/pages/[locale]/collectibles/[slug]/_components/PageInfo.astro index a0b778b..1d416b9 100644 --- a/src/pages/[locale]/collectibles/[slug]/_components/PageInfo.astro +++ b/src/pages/[locale]/collectibles/[slug]/_components/PageInfo.astro @@ -1,5 +1,5 @@ --- -import { Icon } from "astro-icon/components"; +import TitleIcon from "components/TitleIcon.astro"; import { getI18n } from "src/i18n/i18n"; import { CollectibleBindingTypes, @@ -21,10 +21,7 @@ const { t } = await getI18n(Astro.locals.currentLocale); {/* ------------------------------------------- HTML ------------------------------------------- */}
-
- -

{t("collectibles.bookFormat")}

-
+

{t("collectibles.bookFormat.pageCount", { count: pageCount })}

@@ -66,17 +63,6 @@ const { t } = await getI18n(Astro.locals.currentLocale); grid-template-columns: 1fr; } - & > #title { - display: flex; - place-items: center; - gap: 8px; - - & > p { - font-size: 1.5em; - font-variation-settings: "wght" 600; - } - } - & > #values { display: flex; flex-direction: column; diff --git a/src/pages/[locale]/collectibles/[slug]/_components/SizeInfo.astro b/src/pages/[locale]/collectibles/[slug]/_components/SizeInfo.astro index 17a8492..f484322 100644 --- a/src/pages/[locale]/collectibles/[slug]/_components/SizeInfo.astro +++ b/src/pages/[locale]/collectibles/[slug]/_components/SizeInfo.astro @@ -1,5 +1,5 @@ --- -import { Icon } from "astro-icon/components"; +import TitleIcon from "components/TitleIcon.astro"; import { getI18n } from "src/i18n/i18n"; interface Props { @@ -18,26 +18,23 @@ const { formatInches, formatMillimeters, t } = await getI18n(Astro.locals.curren {/* ------------------------------------------- HTML ------------------------------------------- */}
-
- -

{t("collectibles.size")}

-
+
-

{t("collectibles.size.width")}

+

{t("collectibles.size.width")}

{formatMillimeters(size.width)}

{formatInches(size.width)}

-

{t("collectibles.size.height")}

+

{t("collectibles.size.height")}

{formatMillimeters(size.height)}

{formatInches(size.height)}

{ size.thickness && (
-

{t("collectibles.size.thickness")}

+

{t("collectibles.size.thickness")}

{formatMillimeters(size.thickness)}

{formatInches(size.thickness)}

@@ -59,18 +56,6 @@ const { formatInches, formatMillimeters, t } = await getI18n(Astro.locals.curren grid-template-columns: 1fr; } - & > #title { - display: flex; - place-items: center; - gap: 8px; - - & > p { - font-size: 1.5em; - font-variation-settings: "wght" 600; - translate: 0px -0.1em; - } - } - & > #values { display: flex; gap: 1em 1.5em; @@ -81,8 +66,6 @@ const { formatInches, formatMillimeters, t } = await getI18n(Astro.locals.curren gap: 0.6em; & > p:first-child { - font-size: 120%; - font-variation-settings: "wght" 500; margin-top: 3px; } } diff --git a/src/pages/[locale]/collectibles/[slug]/_components/SubitemSection.astro b/src/pages/[locale]/collectibles/[slug]/_components/SubitemSection.astro index 64a0cdf..6c162fe 100644 --- a/src/pages/[locale]/collectibles/[slug]/_components/SubitemSection.astro +++ b/src/pages/[locale]/collectibles/[slug]/_components/SubitemSection.astro @@ -1,6 +1,6 @@ --- -import { Icon } from "astro-icon/components"; import CollectiblePreview from "components/Previews/CollectiblePreview.astro"; +import TitleIcon from "components/TitleIcon.astro"; import { getI18n } from "src/i18n/i18n"; import type { EndpointCollectible } from "src/shared/payload/payload-sdk"; @@ -14,35 +14,27 @@ const { t } = await getI18n(Astro.locals.currentLocale); {/* ------------------------------------------- HTML ------------------------------------------- */} -
- -

{t("collectibles.contents")}

-
+
+ -
- {subitems.map((subitem) => )} +
+ {subitems.map((subitem) => )} +
{/* ------------------------------------------- CSS -------------------------------------------- */} diff --git a/src/pages/[locale]/collectibles/[slug]/_components/WeightInfo.astro b/src/pages/[locale]/collectibles/[slug]/_components/WeightInfo.astro index f4f3c8d..7c5c3b0 100644 --- a/src/pages/[locale]/collectibles/[slug]/_components/WeightInfo.astro +++ b/src/pages/[locale]/collectibles/[slug]/_components/WeightInfo.astro @@ -1,5 +1,5 @@ --- -import { Icon } from "astro-icon/components"; +import TitleIcon from "components/TitleIcon.astro"; import { getI18n } from "src/i18n/i18n"; interface Props { @@ -13,11 +13,7 @@ const { formatPounds, formatGrams, t } = await getI18n(Astro.locals.currentLocal {/* ------------------------------------------- HTML ------------------------------------------- */}
-
- -

{t("collectibles.weight")}

-
- +

{formatGrams(weight)}{" "}({formatPounds(weight)})

@@ -34,17 +30,6 @@ const { formatPounds, formatGrams, t } = await getI18n(Astro.locals.currentLocal grid-template-columns: 1fr; } - & > #title { - display: flex; - place-items: center; - gap: 8px; - - & > p { - font-size: 1.5em; - font-variation-settings: "wght" 600; - } - } - & > p { margin-top: 0.5em; } diff --git a/src/pages/[locale]/collectibles/[slug]/gallery/index.astro b/src/pages/[locale]/collectibles/[slug]/gallery/index.astro index 0f20c7d..58bd782 100644 --- a/src/pages/[locale]/collectibles/[slug]/gallery/index.astro +++ b/src/pages/[locale]/collectibles/[slug]/gallery/index.astro @@ -74,7 +74,9 @@ const translation = getLocalizedMatch(translations); gap: 1em; text-align: center; place-items: center; + box-shadow: 0 5px 20px -10px var(--color-shadow-0); border-radius: 16px; + overflow: hidden; transition: 100ms scale; @@ -83,19 +85,7 @@ const translation = getLocalizedMatch(translations); scale: 104%; } - &:focus-visible { - outline: 3px solid var(--color-base-1000); - outline-offset: unset; - } - max-height: 320px; - - & > img { - max-width: 100%; - height: auto; - box-shadow: 0 5px 20px -10px var(--color-shadow); - border-radius: 16px; - } } } diff --git a/src/pages/[locale]/collectibles/[slug]/index.astro b/src/pages/[locale]/collectibles/[slug]/index.astro index 8bc87fb..e4ac5c8 100644 --- a/src/pages/[locale]/collectibles/[slug]/index.astro +++ b/src/pages/[locale]/collectibles/[slug]/index.astro @@ -61,11 +61,13 @@ const metaAttributes: Attribute[] = [ title: t("global.media.attributes.createdAt"), icon: "material-symbols:calendar-add-on-outline", values: [{ name: formatDate(new Date(createdAt)) }], + withBorder: false, }, { title: t("global.media.attributes.updatedAt"), icon: "material-symbols:edit-calendar", values: [{ name: formatDate(new Date(updatedAt)) }], + withBorder: false, }, ]; @@ -257,26 +259,15 @@ if (price) { } & > #thumbnail { + max-height: 80vh; + max-width: min(35rem, 100%); + box-shadow: 0 5px 20px -10px var(--color-shadow-0); transition: 100ms scale; &:hover, &:focus-visible { scale: 102%; } - - &:focus-visible { - outline: 3px solid var(--color-base-1000); - outline-offset: unset; - } - - max-height: 80vh; - max-width: min(35rem, 100%); - - & > img { - box-shadow: 0 5px 20px -10px var(--color-shadow); - max-width: 100%; - height: auto; - } } & > #gallery-scans { diff --git a/src/pages/[locale]/collectibles/[slug]/scans/_components/ScanPreview.astro b/src/pages/[locale]/collectibles/[slug]/scans/_components/ScanPreview.astro index 3992ca1..1ebe706 100644 --- a/src/pages/[locale]/collectibles/[slug]/scans/_components/ScanPreview.astro +++ b/src/pages/[locale]/collectibles/[slug]/scans/_components/ScanPreview.astro @@ -48,24 +48,13 @@ const { getLocalizedUrl, formatScanIndexShort } = await getI18n(Astro.locals.cur } a { + max-height: 100%; + box-shadow: 0 5px 20px -10px var(--color-shadow-0); transition: 100ms scale; &:hover, &:focus-visible { scale: 104%; } - - &:focus-visible { - outline: 3px solid var(--color-base-1000); - outline-offset: unset; - } - - max-height: 100%; - - & > img { - max-width: 100%; - height: auto; - box-shadow: 0 5px 20px -10px var(--color-shadow); - } } diff --git a/src/pages/[locale]/collectibles/[slug]/scans/index.astro b/src/pages/[locale]/collectibles/[slug]/scans/index.astro index 308b954..2c4a9ac 100644 --- a/src/pages/[locale]/collectibles/[slug]/scans/index.astro +++ b/src/pages/[locale]/collectibles/[slug]/scans/index.astro @@ -61,7 +61,7 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in <> {hasOutsideCover && (
-

{t("collectibles.scans.cover")}

+

{t("collectibles.scans.cover")}

{cover.flapFront && ( !value.includes("in )} {hasInsideCover && (
-

{t("collectibles.scans.coverInside")}

+

{t("collectibles.scans.coverInside")}

{cover.insideFlapFront && ( !value.includes("in <> {hasOutsideDustjacket && (
-

{t("collectibles.scans.dustjacket")}

+

{t("collectibles.scans.dustjacket")}

{t("collectibles.scans.dustjacket.description")}

{dustjacket.flapFront && ( @@ -176,7 +176,7 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in )} {hasInsideDustjacket && (
-

{t("collectibles.scans.dustjacketInside")}

+

{t("collectibles.scans.dustjacketInside")}

{dustjacket.insideFlapFront && ( !value.includes("in <> {hasOutsideObi && (
-

{t("collectibles.scans.obi")}

+

{t("collectibles.scans.obi")}

{t("collectibles.scans.obi.description")}

{obi.flapFront && ( @@ -248,7 +248,7 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in )} {hasInsideObi && (
-

{t("collectibles.scans.obiInside")}

+

{t("collectibles.scans.obiInside")}

{obi.insideFlapFront && ( !value.includes("in { pages.length > 0 && (
-

{t("collectibles.scans.pages")}

+

{t("collectibles.scans.pages")}

{pages.map((image) => ( @@ -308,22 +308,25 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in section { margin-block: 6em; - & > h2 { - font-family: var(--font-serif); - font-size: 30px; - } - & > p { margin-top: 0.5em; margin-bottom: 2em; } & > div { - margin-top: 1em; + margin-top: 2em; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 32px 16px; align-items: end; + + @media (max-width: 600px) { + grid-template-columns: 1fr 1fr; + } + + @media (max-width: 320px) { + grid-template-columns: 1fr; + } } } diff --git a/src/pages/[locale]/dev/design-system/_components/ColorShowcase.astro b/src/pages/[locale]/dev/design-system/_components/ColorShowcase.astro new file mode 100644 index 0000000..50c905f --- /dev/null +++ b/src/pages/[locale]/dev/design-system/_components/ColorShowcase.astro @@ -0,0 +1,118 @@ +--- +import { Icon } from "astro-icon/components"; + +interface Props { + baseColors: number[]; + theme: "light-theme" | "dark-theme"; +} + +const { baseColors, theme } = Astro.props; +--- + +
+

Base colors

+
+ { + baseColors.map((color) => ( +
500 ? 0 : 1000}) + `}> + {color} +
+ )) + } +
+
+ Background + Foreground + +
+ +
+
+

Elevation

+
+
0
+
1
+
2
+
+
+ +
+

Shadows

+
+
0
+
1
+
2
+
+
+ +
+

Others

+
+
+ Error +
+
Dots
+
+
+
+
+ +{/* ------------------------------------------- CSS -------------------------------------------- */} + + diff --git a/src/pages/[locale]/dev/design-system/index.astro b/src/pages/[locale]/dev/design-system/index.astro new file mode 100644 index 0000000..2e7526c --- /dev/null +++ b/src/pages/[locale]/dev/design-system/index.astro @@ -0,0 +1,71 @@ +--- +import AppLayout from "components/AppLayout/AppLayout.astro"; +import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro"; +import ColorShowcase from "./_components/ColorShowcase.astro"; +--- + +{/* ------------------------------------------- HTML ------------------------------------------- */} + + + + +
+

Colors

+ +

Light theme

+ + +

Dark theme

+ + +

Fonts

+ +
+

Lorem Ipsum 5XL

+

Lorem Ipsum 4XL

+

Lorem Ipsum 3XL

+

Lorem Ipsum 2XL

+

Lorem Ipsum XL

+

Lorem Ipsum L

+

Lorem Ipsum M

+

Lorem Ipsum S

+

Lorem Ipsum XS

+
+ +
+

Lorem Ipsum 5XL

+

Lorem Ipsum 4XL

+

Lorem Ipsum 3XL

+

Lorem Ipsum 2XL

+

Lorem Ipsum XL

+

Lorem Ipsum L

+

Lorem Ipsum M

+
+
+ + +{/* ------------------------------------------- CSS -------------------------------------------- */} + diff --git a/src/pages/[locale]/folders/[slug].astro b/src/pages/[locale]/folders/[slug].astro index c8d6c47..4e395de 100644 --- a/src/pages/[locale]/folders/[slug].astro +++ b/src/pages/[locale]/folders/[slug].astro @@ -37,7 +37,7 @@ const meta = getLocalizedMatch(folder.translations); {meta.description && } -
+
{ folder.sections.type === "single" && folder.sections.subfolders.length > 0 ? ( @@ -102,9 +102,13 @@ const meta = getLocalizedMatch(folder.translations); display: grid; gap: 4em; - & > #sections { - display: grid; - gap: 2.5em; + &.complex { + gap: 6em; + + & > #sections { + display: grid; + gap: 4em; + } } & > #files { diff --git a/src/pages/[locale]/folders/_components/FolderCard.astro b/src/pages/[locale]/folders/_components/FolderCard.astro index 97d3754..4dde383 100644 --- a/src/pages/[locale]/folders/_components/FolderCard.astro +++ b/src/pages/[locale]/folders/_components/FolderCard.astro @@ -13,8 +13,8 @@ const { icon = "material-symbols:folder-outline", title, href } = Astro.props; -