Many, many changes related to fonts and spacing
This commit is contained in:
DrMint
parent
6c7edc3999
commit
701d60a0e5
|
|
@ -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
|
||||
|
||||
|
|
|
|||
6
TODO.md
6
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
|
||||
|
|
|
|||
|
|
@ -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": "."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,8 +12,14 @@ const { title, subtitle, pretitle } = Astro.props;
|
|||
|
||||
<h1 class="high-contrast-text">
|
||||
{pretitle && <span id="pretitle">{pretitle} </span>}
|
||||
<span id="title">{title} </span>
|
||||
{subtitle && <span id="subtitle">{subtitle}</span>}
|
||||
<span id="title" class="font-serif">{title} </span>
|
||||
{
|
||||
subtitle && (
|
||||
<span id="subtitle" class="font-serif">
|
||||
{subtitle}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
</h1>
|
||||
|
||||
{/* ------------------------------------------- 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,48 +29,39 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t(
|
|||
<footer>
|
||||
{
|
||||
withLinks && (
|
||||
<div id="nav" class="when-no-print">
|
||||
<p class="font-serif">{t("global.siteName")}</p>
|
||||
<div>
|
||||
<a class="pressable-label" href="/">
|
||||
<Icon name="accords" />
|
||||
<p>{t("footer.links.home.title")}</p>
|
||||
</a>
|
||||
<a class="pressable-label DEV_TODO" href="/archives">
|
||||
<Icon name="material-symbols:browse" />
|
||||
<p>{"Contents"}</p>
|
||||
</a>
|
||||
<a class="pressable-label DEV_TODO" href="/chronicles">
|
||||
<Icon name="material-symbols:book-2" />
|
||||
<p>{"Chronicles"}</p>
|
||||
</a>
|
||||
<a class="pressable-label DEV_TODO" href="/changelog">
|
||||
<Icon name="material-symbols:history" />
|
||||
<p>{"Changelog"}</p>
|
||||
</a>
|
||||
<a class="pressable-label" href="/timeline">
|
||||
<Icon name="material-symbols:calendar-month" />
|
||||
<p>{t("footer.links.timeline.title")}</p>
|
||||
</a>
|
||||
<a class="pressable-label" href="https://gallery.accords-library.com/posts">
|
||||
<Icon name="material-symbols:perm-media" />
|
||||
<p>{t("footer.links.gallery.title")}</p>
|
||||
</a>
|
||||
<a class="pressable-label DEV_TODO" href="/videos">
|
||||
<Icon name="material-symbols:movie" />
|
||||
<p>{t("footer.links.videos.title")}</p>
|
||||
</a>
|
||||
<a class="pressable-label DEV_TODO" href="/archives">
|
||||
<Icon name="material-symbols:folder-zip" />
|
||||
<p>{t("footer.links.webArchives.title")}</p>
|
||||
</a>
|
||||
</div>
|
||||
<div id="socials" class="when-no-print">
|
||||
<a href="/discord" class="pressable-label" aria-label={discordLabel} title={discordLabel}>
|
||||
<Icon name="discord-brands" />
|
||||
<p class="font-s">{t("footer.socials.discord.title")}</p>
|
||||
</a>
|
||||
<a
|
||||
href="https://twitter.com/AccordsLibrary"
|
||||
class="pressable-label"
|
||||
aria-label={twitterLabel}
|
||||
title={twitterLabel}>
|
||||
<Icon name="x-brands" />
|
||||
<p class="font-s">{t("footer.socials.twitter.title")}</p>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/Accords-Library"
|
||||
class="pressable-label"
|
||||
aria-label={githubLabel}
|
||||
title={githubLabel}>
|
||||
<Icon name="github-brands" />
|
||||
<p class="font-s">{t("footer.socials.github.title")}</p>
|
||||
</a>
|
||||
|
||||
<a href="/contact" class="pressable-label" aria-label={contactLabel} title={contactLabel}>
|
||||
<Icon name="material-symbols:mail-outline" />
|
||||
<p class="font-s">{t("footer.socials.contact.title")}</p>
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div id="license" class:list={{ "with-links": withLinks }}>
|
||||
<div id="license-section">
|
||||
<p set:html={t("footer.license.description")} />
|
||||
|
||||
<div id="copylicense" class:list={{ "with-border": withLinks }}>
|
||||
<div id="license">
|
||||
<p class="font-s" set:html={t("footer.license.description")} />
|
||||
<a
|
||||
href="https://creativecommons.org/licenses/by-sa/4.0/"
|
||||
id="common-creative"
|
||||
|
|
@ -83,39 +74,8 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t(
|
|||
</a>
|
||||
</div>
|
||||
|
||||
{
|
||||
withLinks && (
|
||||
<div id="socials" class="when-no-print">
|
||||
<a href="/discord" class="pressable-icon" aria-label={discordLabel} title={discordLabel}>
|
||||
<Icon name="discord-brands" />
|
||||
</a>
|
||||
<a
|
||||
href="https://twitter.com/AccordsLibrary"
|
||||
class="pressable-icon"
|
||||
aria-label={twitterLabel}
|
||||
title={twitterLabel}>
|
||||
<Icon name="x-brands" />
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/Accords-Library"
|
||||
class="pressable-icon"
|
||||
aria-label={githubLabel}
|
||||
title={githubLabel}>
|
||||
<Icon name="github-brands" />
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/contact"
|
||||
class="pressable-icon DEV_TODO"
|
||||
aria-label={contactLabel}
|
||||
title={contactLabel}>
|
||||
<Icon name="material-symbols:mail-outline" />
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div id="copyright" class="font-s" set:html={t("footer.disclaimer")} />
|
||||
</div>
|
||||
<div id="copyright" set:html={t("footer.disclaimer")} />
|
||||
</footer>
|
||||
|
||||
{/* ------------------------------------------- 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,17 @@ const { currentTheme } = Astro.locals;
|
|||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<link rel="stylesheet" href="/css/tippy.css" fetchpriority="low" />
|
||||
|
||||
<link
|
||||
rel="preload"
|
||||
href="/css/tippy.css"
|
||||
as="style"
|
||||
onload="this.onload=null;this.rel='stylesheet'"
|
||||
/>
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="/css/tippy.css" />
|
||||
</noscript>
|
||||
|
||||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fdebd4" />
|
||||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#27231e" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
|
|
@ -138,7 +148,61 @@ const { currentTheme } = Astro.locals;
|
|||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style is:global>
|
||||
/* RESET */
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
button,
|
||||
body,
|
||||
html {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a:has(> img) {
|
||||
display: block;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: initial;
|
||||
border: initial;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: initial;
|
||||
}
|
||||
|
||||
/* LIGHT/DARK THEME */
|
||||
|
||||
html,
|
||||
.light-theme {
|
||||
--color-base-0: #ffffff;
|
||||
--color-base-50: #fffaf3;
|
||||
--color-base-100: #fff4e6;
|
||||
|
|
@ -166,7 +230,7 @@ const { currentTheme } = Astro.locals;
|
|||
--color-elevation-1: var(--color-base-125);
|
||||
--color-elevation-0: var(--color-base-150);
|
||||
|
||||
--color-shadow: var(--color-base-500);
|
||||
--color-shadow-0: var(--color-base-500);
|
||||
--color-shadow-1: var(--color-base-350);
|
||||
--color-shadow-2: var(--color-base-300);
|
||||
|
||||
|
|
@ -175,20 +239,70 @@ const { currentTheme } = Astro.locals;
|
|||
--texture-dots: url(/img/paper-dots.webp);
|
||||
--texture-dots-blend: multiply;
|
||||
|
||||
& .when-light-theme {
|
||||
display: initial !important;
|
||||
}
|
||||
|
||||
& .when-dark-theme {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
* {
|
||||
color-scheme: only light;
|
||||
}
|
||||
|
||||
@media screen {
|
||||
&.dark-theme {
|
||||
color: var(--color-base-1000);
|
||||
}
|
||||
|
||||
@media screen {
|
||||
.light-theme {
|
||||
& .when-dark-theme {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dark-theme {
|
||||
--color-base-1000: #ebeae7;
|
||||
--color-base-950: #eae5e0;
|
||||
--color-base-900: #e8dfd8;
|
||||
--color-base-850: #e4d1c4;
|
||||
--color-base-800: #e0bfaa;
|
||||
--color-base-750: #dcb095;
|
||||
--color-base-700: #d4a07f;
|
||||
--color-base-650: #cb916c;
|
||||
--color-base-600: #bf835d;
|
||||
--color-base-550: #b07751;
|
||||
--color-base-500: #a06b48;
|
||||
--color-base-450: #8f5f40;
|
||||
--color-base-400: #7d5539;
|
||||
--color-base-350: #6b4a33;
|
||||
--color-base-300: #5c412e;
|
||||
--color-base-250: #4a3728;
|
||||
--color-base-200: #3a2d22;
|
||||
--color-base-175: #312820;
|
||||
--color-base-150: #27231e;
|
||||
--color-base-100: #1c1b16;
|
||||
--color-base-50: #11110d;
|
||||
--color-base-0: #000000;
|
||||
|
||||
--color-elevation-2: var(--color-base-200);
|
||||
--color-elevation-1: var(--color-base-175);
|
||||
--color-elevation-0: var(--color-base-150);
|
||||
|
||||
--color-shadow-0: var(--color-base-0);
|
||||
--color-shadow-1: var(--color-base-50);
|
||||
--color-shadow-2: var(--color-base-100);
|
||||
|
||||
--color-critical-error: red;
|
||||
|
||||
--texture-dots: url(/img/paper-dots-dark.webp);
|
||||
--texture-dots-blend: overlay;
|
||||
|
||||
& .when-light-theme {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
* {
|
||||
color-scheme: only dark;
|
||||
}
|
||||
|
||||
color: var(--color-base-1000);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html:not(.manual-theme) {
|
||||
--color-base-1000: #ebeae7;
|
||||
--color-base-950: #eae5e0;
|
||||
--color-base-900: #e8dfd8;
|
||||
|
|
@ -216,7 +330,7 @@ const { currentTheme } = Astro.locals;
|
|||
--color-elevation-1: var(--color-base-175);
|
||||
--color-elevation-0: var(--color-base-150);
|
||||
|
||||
--color-shadow: var(--color-base-0);
|
||||
--color-shadow-0: var(--color-base-0);
|
||||
--color-shadow-1: var(--color-base-0);
|
||||
--color-shadow-2: var(--color-base-50);
|
||||
|
||||
|
|
@ -229,66 +343,11 @@ const { currentTheme } = Astro.locals;
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
& .when-dark-theme {
|
||||
display: initial !important;
|
||||
}
|
||||
|
||||
* {
|
||||
color-scheme: only dark;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.manual-theme) {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--color-base-1000: #ebeae7;
|
||||
--color-base-950: #eae5e0;
|
||||
--color-base-900: #e8dfd8;
|
||||
--color-base-850: #e4d1c4;
|
||||
--color-base-800: #e0bfaa;
|
||||
--color-base-750: #dcb095;
|
||||
--color-base-700: #d4a07f;
|
||||
--color-base-650: #cb916c;
|
||||
--color-base-600: #bf835d;
|
||||
--color-base-550: #b07751;
|
||||
--color-base-500: #a06b48;
|
||||
--color-base-450: #8f5f40;
|
||||
--color-base-400: #7d5539;
|
||||
--color-base-350: #6b4a33;
|
||||
--color-base-300: #5c412e;
|
||||
--color-base-250: #4a3728;
|
||||
--color-base-200: #3a2d22;
|
||||
--color-base-175: #312820;
|
||||
--color-base-150: #27231e;
|
||||
--color-base-100: #1c1b16;
|
||||
--color-base-50: #11110d;
|
||||
--color-base-0: #000000;
|
||||
|
||||
--color-elevation-3: var(--color-base-150);
|
||||
--color-elevation-2: var(--color-base-200);
|
||||
--color-elevation-1: var(--color-base-175);
|
||||
--color-elevation-0: var(--color-base-150);
|
||||
|
||||
--color-shadow: var(--color-base-0);
|
||||
--color-shadow-1: var(--color-base-0);
|
||||
--color-shadow-2: var(--color-base-50);
|
||||
|
||||
--color-critical-error: red;
|
||||
|
||||
--texture-dots: url(/img/paper-dots-dark.webp);
|
||||
--texture-dots-blend: overlay;
|
||||
|
||||
& .when-light-theme {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
& .when-dark-theme {
|
||||
display: initial !important;
|
||||
}
|
||||
|
||||
* {
|
||||
color-scheme: only dark;
|
||||
}
|
||||
}
|
||||
color: var(--color-base-1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -313,26 +372,14 @@ const { currentTheme } = Astro.locals;
|
|||
font-display: swap;
|
||||
}
|
||||
|
||||
html {
|
||||
html,
|
||||
body {
|
||||
font-family: "Murecho Variable", sans-serif;
|
||||
font-variation-settings: "wght" 430;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-variation-settings: "wght" 900;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-variation-settings: "wght" 800;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
font-variation-settings: "wght" 700;
|
||||
}
|
||||
|
||||
h5,
|
||||
h6 {
|
||||
font-variation-settings: "wght" 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1;
|
||||
text-size-adjust: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
strong {
|
||||
|
|
@ -345,14 +392,118 @@ const { currentTheme } = Astro.locals;
|
|||
|
||||
.font-serif {
|
||||
font-family: "Vollkorn Variable", serif;
|
||||
letter-spacing: -0.055em;
|
||||
}
|
||||
|
||||
:root {
|
||||
--font-serif: "Vollkorn Variable", serif;
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-s: 0.875rem;
|
||||
--font-size-m: 1rem;
|
||||
--font-size-l: 1.125rem;
|
||||
--font-size-xl: 1.25rem;
|
||||
--font-size-2xl: 1.5rem;
|
||||
--font-size-3xl: 1.875rem;
|
||||
--font-size-4xl: 2.5rem;
|
||||
--font-size-5xl: 4rem;
|
||||
}
|
||||
|
||||
html,
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
.font-xs {
|
||||
font-size: var(--font-size-xs);
|
||||
font-variation-settings: "wght" 430;
|
||||
}
|
||||
|
||||
.font-s {
|
||||
font-size: var(--font-size-s);
|
||||
font-variation-settings: "wght" 400;
|
||||
}
|
||||
|
||||
.font-m {
|
||||
font-size: var(--font-size-m);
|
||||
font-variation-settings: "wght" 400;
|
||||
|
||||
&.font-serif {
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
}
|
||||
|
||||
.font-l {
|
||||
font-size: var(--font-size-l);
|
||||
font-variation-settings: "wght" 500;
|
||||
|
||||
&.font-serif {
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
}
|
||||
|
||||
.font-xl {
|
||||
font-size: var(--font-size-xl);
|
||||
font-variation-settings: "wght" 600;
|
||||
|
||||
&.font-serif {
|
||||
font-variation-settings: "wght" 700;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
}
|
||||
|
||||
.font-2xl {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-variation-settings: "wght" 700;
|
||||
&.font-serif {
|
||||
font-variation-settings: "wght" 750;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
}
|
||||
|
||||
.font-3xl {
|
||||
font-size: var(--font-size-3xl);
|
||||
font-variation-settings: "wght" 750;
|
||||
&.font-serif {
|
||||
font-variation-settings: "wght" 800;
|
||||
letter-spacing: -0.045em;
|
||||
}
|
||||
}
|
||||
|
||||
.font-4xl {
|
||||
font-size: var(--font-size-4xl);
|
||||
font-variation-settings: "wght" 800;
|
||||
|
||||
&.font-serif {
|
||||
font-variation-settings: "wght" 850;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
}
|
||||
|
||||
.font-5xl {
|
||||
font-size: var(--font-size-5xl);
|
||||
font-variation-settings: "wght" 900;
|
||||
}
|
||||
|
||||
/* THEMING */
|
||||
|
||||
a,
|
||||
button {
|
||||
&:focus-visible {
|
||||
outline: 3px solid var(--color-base-1000);
|
||||
outline-offset: unset;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-base-650) transparent;
|
||||
}
|
||||
|
||||
*::selection {
|
||||
color: var(--color-elevation-0);
|
||||
background: var(--color-base-600);
|
||||
|
|
@ -370,7 +521,6 @@ const { currentTheme } = Astro.locals;
|
|||
|
||||
html {
|
||||
position: relative;
|
||||
color: var(--color-base-1000);
|
||||
min-height: 100vb;
|
||||
display: flex;
|
||||
|
||||
|
|
@ -387,36 +537,6 @@ const { currentTheme } = Astro.locals;
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
button,
|
||||
html {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: unset;
|
||||
font-size: 1em;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
button,
|
||||
body {
|
||||
font-family: "Murecho Variable", sans-serif;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: unset;
|
||||
text-decoration: unset;
|
||||
}
|
||||
|
||||
p {
|
||||
& a {
|
||||
transition-duration: 150ms;
|
||||
|
|
@ -497,11 +617,6 @@ const { currentTheme } = Astro.locals;
|
|||
background-color: var(--color-base-250);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 3px solid var(--color-base-1000);
|
||||
outline-offset: unset;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--color-base-300);
|
||||
}
|
||||
|
|
@ -510,6 +625,7 @@ const { currentTheme } = Astro.locals;
|
|||
.pressable {
|
||||
--foreground-color: var(--color-base-650);
|
||||
color: var(--foreground-color);
|
||||
outline-color: var(--foreground-color);
|
||||
border: 0.1rem solid var(--foreground-color);
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
|
|
@ -523,11 +639,6 @@ const { currentTheme } = Astro.locals;
|
|||
background-color: var(--color-elevation-1);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 3px solid var(--foreground-color);
|
||||
outline-offset: unset;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transition-duration: 75ms;
|
||||
--foreground-color: var(--color-base-1000);
|
||||
|
|
@ -545,7 +656,6 @@ const { currentTheme } = Astro.locals;
|
|||
}
|
||||
|
||||
.prose {
|
||||
font-size: 16px;
|
||||
line-height: 1.75;
|
||||
max-width: 35rem;
|
||||
|
||||
|
|
@ -570,18 +680,6 @@ const { currentTheme } = Astro.locals;
|
|||
}
|
||||
}
|
||||
|
||||
> h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
> h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
> h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
> h2,
|
||||
> h3,
|
||||
> h4,
|
||||
|
|
@ -601,11 +699,6 @@ const { currentTheme } = Astro.locals;
|
|||
}
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-base-650) transparent;
|
||||
}
|
||||
|
||||
.DEV_TODO {
|
||||
display: none !important;
|
||||
visibility: none !important;
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ const { t } = await getI18n(Astro.locals.currentLocale);
|
|||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
gap: 0.8em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const {
|
|||
<a class="pressable-label" href={href} target={target} rel={rel}>
|
||||
<Icon name="material-symbols:keyboard-return" />
|
||||
<p>
|
||||
<span>{typeLabel}</span>
|
||||
<span class="font-xs">{typeLabel}</span>
|
||||
{label}
|
||||
</p>
|
||||
</a>
|
||||
|
|
@ -44,7 +44,6 @@ const {
|
|||
border: 1px solid var(--color-base-1000);
|
||||
border-radius: 9999px;
|
||||
padding: 0.3em 0.5em;
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const { title, description } = Astro.props;
|
|||
|
||||
<div class="error-message">
|
||||
<Icon name="material-symbols:error-outline" width={32} height={32} />
|
||||
<p id="title">{title}</p>
|
||||
<p class="font-xl">{title}</p>
|
||||
{description && <p>{description}</p>}
|
||||
</div>
|
||||
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,27 +11,27 @@ const { header, id } = Astro.props;
|
|||
|
||||
{
|
||||
header === 1 ? (
|
||||
<h1 id={id}>
|
||||
<h1 id={id} class="font-5xl">
|
||||
<slot />
|
||||
</h1>
|
||||
) : header === 2 ? (
|
||||
<h2 id={id}>
|
||||
<h2 id={id} class="font-4xl">
|
||||
<slot />
|
||||
</h2>
|
||||
) : header === 3 ? (
|
||||
<h3 id={id}>
|
||||
<h3 id={id} class="font-3xl">
|
||||
<slot />
|
||||
</h3>
|
||||
) : header === 4 ? (
|
||||
<h4 id={id}>
|
||||
<h4 id={id} class="font-2xl">
|
||||
<slot />
|
||||
</h4>
|
||||
) : header === 5 ? (
|
||||
<h5 id={id}>
|
||||
<h5 id={id} class="font-xl">
|
||||
<slot />
|
||||
</h5>
|
||||
) : (
|
||||
<h6 id={id}>
|
||||
<h6 id={id} class="font-l">
|
||||
<slot />
|
||||
</h6>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -12,30 +12,25 @@ if (values.length === 0) return;
|
|||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<div id="container">
|
||||
<Icon name={icon} />
|
||||
<p>{title}</p>
|
||||
<div>{values.map(({ name }) => name).join(", ")}</div>
|
||||
<div class="title">
|
||||
<Icon name={icon} />
|
||||
<p class="font-xs">{title}</p>
|
||||
</div>
|
||||
<div class="font-xs">{values.map(({ name }) => name).join(", ")}</div>
|
||||
</div>
|
||||
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
#container {
|
||||
font-size: 80%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.1em 0.5em;
|
||||
line-height: 1.3;
|
||||
|
||||
& > p {
|
||||
color: var(--color-base-750);
|
||||
}
|
||||
|
||||
& > div {
|
||||
line-height: 1.2;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
& > svg {
|
||||
& > .title {
|
||||
display: flex;
|
||||
gap: 0.2em;
|
||||
color: var(--color-base-750);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -133,11 +133,6 @@ const hasNavigation = previousImageHref || nextImageHref;
|
|||
}
|
||||
|
||||
& > a {
|
||||
&:focus-visible {
|
||||
outline: 3px solid var(--color-base-1000);
|
||||
outline-offset: unset;
|
||||
}
|
||||
|
||||
&.pressable {
|
||||
border-radius: 9999px;
|
||||
padding-left: 1em;
|
||||
|
|
@ -156,9 +151,8 @@ const hasNavigation = previousImageHref || nextImageHref;
|
|||
}
|
||||
|
||||
& > #image-anchor {
|
||||
display: block;
|
||||
transition: 100ms scale;
|
||||
box-shadow: 0 5px 20px -10px var(--color-shadow);
|
||||
box-shadow: 0 5px 20px -10px var(--color-shadow-0);
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
|
|
@ -166,11 +160,6 @@ const hasNavigation = previousImageHref || nextImageHref;
|
|||
}
|
||||
|
||||
max-height: 70vh;
|
||||
|
||||
& > img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -193,7 +182,6 @@ const hasNavigation = previousImageHref || nextImageHref;
|
|||
|
||||
h1 {
|
||||
max-width: 35em;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 ------------------------------------------- */}
|
||||
|
||||
<div id="container">
|
||||
<div id="title">
|
||||
<Icon name={icon} width={24} height={24} />
|
||||
<p>{title}</p>
|
||||
</div>
|
||||
<TitleIcon title={title} icon={icon} />
|
||||
<div id="values" class:list={{ "with-border": withBorder }}>
|
||||
{
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ const {
|
|||
{
|
||||
thumbnail && (
|
||||
<img
|
||||
class:list={{ "rounded-top": !disableRoundedTop }}
|
||||
src={thumbnail.url}
|
||||
srcset={sizesToSrcset(thumbnail.sizes)}
|
||||
sizes={sizesForGridLayout(250, 1.15)}
|
||||
|
|
@ -64,12 +65,22 @@ const {
|
|||
<div id="footer">
|
||||
{
|
||||
smallTitle ? (
|
||||
<p>{title}</p>
|
||||
<p class="font-l">{title}</p>
|
||||
) : (
|
||||
<p>
|
||||
{pretitle && <span id="pretitle">{pretitle} </span>}
|
||||
<span id="title">{title} </span>
|
||||
{subtitle && <span id="subtitle">{subtitle}</span>}
|
||||
{pretitle && (
|
||||
<span id="pretitle" class="font-s">
|
||||
{pretitle}
|
||||
</span>
|
||||
)}
|
||||
<span id="title" class="font-serif font-2xl">
|
||||
{title}
|
||||
</span>
|
||||
{subtitle && (
|
||||
<span id="subtitle" class="font-serif font-m">
|
||||
{subtitle}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const { t } = await getI18n(Astro.locals.currentLocale);
|
|||
<div class="button when-no-print">
|
||||
<a href={url} class="pressable-label">
|
||||
<Icon name="material-symbols:left-click" />
|
||||
<p>{t("global.openMediaPage")}</p>
|
||||
<p class="font-s">{t("global.openMediaPage")}</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,15 +20,16 @@ const {
|
|||
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<a href={href} target={target} rel={rel}><div>{typeLabel}</div><p>{label}</p></a>
|
||||
<a href={href} target={target} rel={rel}><div class="font-xs">{typeLabel}</div><p>{label}</p></a>
|
||||
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
a {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
place-items: center;
|
||||
gap: 0.5em;
|
||||
gap: 0.1em 0.3em;
|
||||
|
||||
& > p {
|
||||
text-decoration: underline dotted 0.1em;
|
||||
|
|
@ -36,11 +37,13 @@ const {
|
|||
|
||||
transition-duration: 150ms;
|
||||
transition-property: text-decoration-color, color;
|
||||
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
border-radius: 16px;
|
||||
padding: 2px 5px;
|
||||
margin: -2px -5px;
|
||||
padding: 4px 10px;
|
||||
margin: -4px -10px;
|
||||
|
||||
&:hover > p,
|
||||
&:focus-visible > p {
|
||||
|
|
@ -49,8 +52,7 @@ const {
|
|||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--color-base-1000);
|
||||
outline-offset: unset;
|
||||
outline-width: 1.5 px;
|
||||
}
|
||||
|
||||
&:active > p {
|
||||
|
|
@ -61,8 +63,9 @@ const {
|
|||
& > div {
|
||||
background-color: var(--color-base-300);
|
||||
border-radius: 9999px;
|
||||
padding: 0.5em 0.6em;
|
||||
font-size: 80%;
|
||||
padding: 0.3em 0.6em;
|
||||
flex-shrink: 0;
|
||||
margin-left: -0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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 ------------------------------------------- */}
|
||||
|
||||
<div id="container">
|
||||
<div id="title">
|
||||
<Icon name="material-symbols:list-alt-outline" width={24} height={24} />
|
||||
<p>{t("pages.tableOfContent")}</p>
|
||||
</div>
|
||||
<div>
|
||||
<TitleIcon title={t("pages.tableOfContent")} icon="material-symbols:list-alt-outline" />
|
||||
<ol>
|
||||
{toc.map((entry) => <TableOfContentItem entry={entry} />)}
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
#container {
|
||||
& > #title {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 0.75em;
|
||||
|
||||
& > p {
|
||||
font-size: 1.5em;
|
||||
font-variation-settings: "wght" 600;
|
||||
translate: 0px -0.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
---
|
||||
import { Icon } from "astro-icon/components";
|
||||
|
||||
interface Props {
|
||||
icon: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { icon, title } = Astro.props;
|
||||
---
|
||||
|
||||
<div>
|
||||
<Icon name={icon} width={24} height={24} />
|
||||
<p class="font-2xl">{title}</p>
|
||||
</div>
|
||||
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
line-height: 0.9;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -52,28 +52,27 @@ const { img, name, href } = Astro.props;
|
|||
|
||||
<style>
|
||||
a {
|
||||
font-size: 24px;
|
||||
font-variation-settings: "wght" 400;
|
||||
text-decoration: none;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
border-radius: 12px;
|
||||
|
||||
user-select: none;
|
||||
aspect-ratio: 16/9;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
& > img {
|
||||
object-fit: contain;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
aspect-ratio: 2;
|
||||
}
|
||||
|
||||
& > div {
|
||||
aspect-ratio: 2;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,56 +0,0 @@
|
|||
---
|
||||
interface Props {
|
||||
pretitle: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const { pretitle, subtitle, title, href } = Astro.props;
|
||||
---
|
||||
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<a href={href} class="pressable">
|
||||
<p class="pretitle">{pretitle}</p>
|
||||
<h3>{title}</h3>
|
||||
<p>{subtitle}</p>
|
||||
</a>
|
||||
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
a {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
gap: 1em;
|
||||
color: var(--color-base-1000);
|
||||
padding: 1.5em;
|
||||
border-radius: 0.75em;
|
||||
text-decoration: none;
|
||||
|
||||
& > svg {
|
||||
width: clamp(1.5em, 6vw + 0.8em, 3em);
|
||||
height: clamp(1.5em, 6vw + 0.8em, 3em);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.15em;
|
||||
|
||||
& > h3 {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
& > .pretitle {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
& > p {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -15,8 +15,8 @@ const { icon, subtitle, title, href } = Astro.props;
|
|||
<a href={href} class="pressable">
|
||||
<Icon name={icon} />
|
||||
<div id="right">
|
||||
<h3>{title}</h3>
|
||||
<p>{subtitle}</p>
|
||||
<p class="font-xl">{title}</p>
|
||||
<p class="font-s">{subtitle}</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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 ------------------------------------------- */}
|
||||
|
||||
<div id="container">
|
||||
<div id="title">
|
||||
<Icon name="material-symbols:shopping-cart-outline" width={24} height={24} />
|
||||
<p>{title}</p>
|
||||
</div>
|
||||
|
||||
<TitleIcon title={title} icon={"material-symbols:shopping-cart-outline"} />
|
||||
{
|
||||
urls.length > 0 && (
|
||||
<div id="values">
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 ------------------------------------------- */}
|
||||
|
||||
<div id="title">
|
||||
<Icon name="material-symbols:list-alt-outline" width={24} height={24} />
|
||||
<p>{t("collectibles.contents")}</p>
|
||||
</div>
|
||||
<div id="container">
|
||||
<TitleIcon title={t("collectibles.contents")} icon="material-symbols:list-alt-outline" />
|
||||
|
||||
<div id="contents">
|
||||
{contents.map((content) => <ContentRow content={content} />)}
|
||||
<div id="contents">
|
||||
{contents.map((content) => <ContentRow content={content} />)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
#title {
|
||||
margin-top: 6em;
|
||||
margin-bottom: 2em;
|
||||
|
||||
#container {
|
||||
margin-top: 4em;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
gap: 8px;
|
||||
flex-direction: column;
|
||||
gap: 2em;
|
||||
|
||||
& > p {
|
||||
font-size: 1.5em;
|
||||
font-variation-settings: "wght" 600;
|
||||
& > #contents {
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
#contents {
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const {
|
|||
/>
|
||||
|
||||
<div class="high-contrast-text">
|
||||
<p class="title">{title}</p>
|
||||
<p id="title" class="font-2xl">{title}</p>
|
||||
<p>{subtitle}</p>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 ------------------------------------------- */}
|
||||
|
||||
<div id="container">
|
||||
<div id="title">
|
||||
<Icon name="material-symbols:note-stack-outline" width={24} height={24} />
|
||||
<p>{t("collectibles.bookFormat")}</p>
|
||||
</div>
|
||||
<TitleIcon title={t("collectibles.bookFormat")} icon="material-symbols:note-stack-outline" />
|
||||
|
||||
<div id="values">
|
||||
<p>{t("collectibles.bookFormat.pageCount", { count: pageCount })}</p>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 ------------------------------------------- */}
|
||||
|
||||
<div id="size">
|
||||
<div id="title">
|
||||
<Icon name="material-symbols:measuring-tape-outline" width={24} height={24} />
|
||||
<p>{t("collectibles.size")}</p>
|
||||
</div>
|
||||
<TitleIcon title={t("collectibles.size")} icon="material-symbols:measuring-tape-outline" />
|
||||
|
||||
<div id="values">
|
||||
<div>
|
||||
<p>{t("collectibles.size.width")}</p>
|
||||
<p class="font-xl">{t("collectibles.size.width")}</p>
|
||||
<p>{formatMillimeters(size.width)}</p>
|
||||
<p>{formatInches(size.width)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>{t("collectibles.size.height")}</p>
|
||||
<p class="font-xl">{t("collectibles.size.height")}</p>
|
||||
<p>{formatMillimeters(size.height)}</p>
|
||||
<p>{formatInches(size.height)}</p>
|
||||
</div>
|
||||
{
|
||||
size.thickness && (
|
||||
<div>
|
||||
<p>{t("collectibles.size.thickness")}</p>
|
||||
<p class="font-xl">{t("collectibles.size.thickness")}</p>
|
||||
<p>{formatMillimeters(size.thickness)}</p>
|
||||
<p>{formatInches(size.thickness)}</p>
|
||||
</div>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 ------------------------------------------- */}
|
||||
|
||||
<div id="title">
|
||||
<Icon name="material-symbols:box-outline" width={24} height={24} />
|
||||
<p>{t("collectibles.contents")}</p>
|
||||
</div>
|
||||
<div id="container">
|
||||
<TitleIcon title={t("collectibles.contents")} icon="material-symbols:box-outline" />
|
||||
|
||||
<div id="values">
|
||||
{subitems.map((subitem) => <CollectiblePreview collectible={subitem} />)}
|
||||
<div id="values">
|
||||
{subitems.map((subitem) => <CollectiblePreview collectible={subitem} />)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
#title {
|
||||
#container {
|
||||
margin-top: 6em;
|
||||
margin-bottom: 2em;
|
||||
|
||||
display: flex;
|
||||
place-items: center;
|
||||
gap: 8px;
|
||||
flex-direction: column;
|
||||
gap: 2em;
|
||||
|
||||
& > p {
|
||||
font-size: 1.5em;
|
||||
font-variation-settings: "wght" 600;
|
||||
& > #values {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: clamp(6px, 2vmin, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
#values {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: clamp(6px, 2vmin, 16px);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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 ------------------------------------------- */}
|
||||
|
||||
<div id="container">
|
||||
<div id="title">
|
||||
<Icon name="material-symbols:scale-outline" width={24} height={24} />
|
||||
<p>{t("collectibles.weight")}</p>
|
||||
</div>
|
||||
|
||||
<TitleIcon title={t("collectibles.weight")} icon="material-symbols:scale-outline" />
|
||||
<p>{formatGrams(weight)}{" "}({formatPounds(weight)})</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
|
|||
<>
|
||||
{hasOutsideCover && (
|
||||
<section>
|
||||
<h2>{t("collectibles.scans.cover")}</h2>
|
||||
<h2 class="font-serif font-3xl">{t("collectibles.scans.cover")}</h2>
|
||||
<div>
|
||||
{cover.flapFront && (
|
||||
<ScanPreview
|
||||
|
|
@ -91,7 +91,7 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
|
|||
)}
|
||||
{hasInsideCover && (
|
||||
<section>
|
||||
<h2>{t("collectibles.scans.coverInside")}</h2>
|
||||
<h2 class="font-serif font-3xl">{t("collectibles.scans.coverInside")}</h2>
|
||||
<div>
|
||||
{cover.insideFlapFront && (
|
||||
<ScanPreview
|
||||
|
|
@ -133,7 +133,7 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
|
|||
<>
|
||||
{hasOutsideDustjacket && (
|
||||
<section>
|
||||
<h2>{t("collectibles.scans.dustjacket")}</h2>
|
||||
<h2 class="font-serif font-3xl">{t("collectibles.scans.dustjacket")}</h2>
|
||||
<p class="prose">{t("collectibles.scans.dustjacket.description")}</p>
|
||||
<div>
|
||||
{dustjacket.flapFront && (
|
||||
|
|
@ -176,7 +176,7 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
|
|||
)}
|
||||
{hasInsideDustjacket && (
|
||||
<section>
|
||||
<h2>{t("collectibles.scans.dustjacketInside")}</h2>
|
||||
<h2 class="font-serif font-3xl">{t("collectibles.scans.dustjacketInside")}</h2>
|
||||
<div>
|
||||
{dustjacket.insideFlapFront && (
|
||||
<ScanPreview
|
||||
|
|
@ -225,7 +225,7 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
|
|||
<>
|
||||
{hasOutsideObi && (
|
||||
<section>
|
||||
<h2>{t("collectibles.scans.obi")}</h2>
|
||||
<h2 class="font-serif font-3xl">{t("collectibles.scans.obi")}</h2>
|
||||
<p class="prose">{t("collectibles.scans.obi.description")}</p>
|
||||
<div>
|
||||
{obi.flapFront && (
|
||||
|
|
@ -248,7 +248,7 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
|
|||
)}
|
||||
{hasInsideObi && (
|
||||
<section>
|
||||
<h2>{t("collectibles.scans.obiInside")}</h2>
|
||||
<h2 class="font-serif font-3xl">{t("collectibles.scans.obiInside")}</h2>
|
||||
<div>
|
||||
{obi.insideFlapFront && (
|
||||
<ScanPreview
|
||||
|
|
@ -291,7 +291,7 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
|
|||
{
|
||||
pages.length > 0 && (
|
||||
<section>
|
||||
<h2>{t("collectibles.scans.pages")}</h2>
|
||||
<h2 class="font-serif font-3xl">{t("collectibles.scans.pages")}</h2>
|
||||
<div>
|
||||
{pages.map((image) => (
|
||||
<ScanPreview aspectRatio={pages[0]} collectibleSlug={slug} scan={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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,118 @@
|
|||
---
|
||||
import { Icon } from "astro-icon/components";
|
||||
|
||||
interface Props {
|
||||
baseColors: number[];
|
||||
theme: "light-theme" | "dark-theme";
|
||||
}
|
||||
|
||||
const { baseColors, theme } = Astro.props;
|
||||
---
|
||||
|
||||
<div id="container" class:list={[theme, "manual-theme"]}>
|
||||
<h4>Base colors</h4>
|
||||
<div class="colors">
|
||||
{
|
||||
baseColors.map((color) => (
|
||||
<div
|
||||
style={`
|
||||
background-color: var(--color-base-${color});
|
||||
color: var(--color-base-${color > 500 ? 0 : 1000})
|
||||
`}>
|
||||
{color}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div class="legend">
|
||||
<span><Icon name="material-symbols:chevron-left" /> Background</span><span>
|
||||
Foreground <Icon name="material-symbols:chevron-right" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div>
|
||||
<h4>Elevation</h4>
|
||||
<div class="colors">
|
||||
<div style="background-color: var(--color-elevation-0);">0</div>
|
||||
<div style="background-color: var(--color-elevation-1);">1</div>
|
||||
<div style="background-color: var(--color-elevation-2);">2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Shadows</h4>
|
||||
<div class="colors">
|
||||
<div style="background-color: var(--color-shadow-0);">0</div>
|
||||
<div style="background-color: var(--color-shadow-1);">1</div>
|
||||
<div style="background-color: var(--color-shadow-2);">2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Others</h4>
|
||||
<div class="colors">
|
||||
<div style="background-color: var(--color-critical-error); color: var(--color-base-0);">
|
||||
Error
|
||||
</div>
|
||||
<div class="texture-dots" style="background-color: var(--color-elevation-0)">Dots</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
#container {
|
||||
max-width: unset;
|
||||
background-color: var(--color-elevation-0);
|
||||
padding: 2em;
|
||||
border: 1px solid var(--color-elevation-2);
|
||||
border-radius: 24px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
place-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 0.5em;
|
||||
|
||||
& > span {
|
||||
display: flex;
|
||||
|
||||
& > svg {
|
||||
translate: 0 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group {
|
||||
display: flex;
|
||||
gap: 10em;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 2;
|
||||
margin-bottom: 4px;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.colors {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
justify-content: start;
|
||||
gap: 3px;
|
||||
|
||||
& > div {
|
||||
border-radius: 6px;
|
||||
width: 6ch;
|
||||
height: 6ch;
|
||||
display: flex;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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 ------------------------------------------- */}
|
||||
|
||||
<AppLayout>
|
||||
<AppLayoutTitle pretitle="AL3.0" title="Design System" />
|
||||
|
||||
<div>
|
||||
<h2>Colors</h2>
|
||||
|
||||
<h3>Light theme</h3>
|
||||
<ColorShowcase
|
||||
baseColors={[
|
||||
0, 50, 100, 125, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850,
|
||||
900, 950, 1000,
|
||||
]}
|
||||
theme="light-theme"
|
||||
/>
|
||||
|
||||
<h3>Dark theme</h3>
|
||||
<ColorShowcase
|
||||
baseColors={[
|
||||
0, 50, 100, 150, 175, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850,
|
||||
900, 950, 1000,
|
||||
]}
|
||||
theme="dark-theme"
|
||||
/>
|
||||
|
||||
<h2>Fonts</h2>
|
||||
|
||||
<div>
|
||||
<p class="font-5xl">Lorem Ipsum 5XL</p>
|
||||
<p class="font-4xl">Lorem Ipsum 4XL</p>
|
||||
<p class="font-3xl">Lorem Ipsum 3XL</p>
|
||||
<p class="font-2xl">Lorem Ipsum 2XL</p>
|
||||
<p class="font-xl">Lorem Ipsum XL</p>
|
||||
<p class="font-l">Lorem Ipsum L</p>
|
||||
<p class="font-m">Lorem Ipsum M</p>
|
||||
<p class="font-s">Lorem Ipsum S</p>
|
||||
<p class="font-xs">Lorem Ipsum XS</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="font-serif font-5xl">Lorem Ipsum 5XL</p>
|
||||
<p class="font-serif font-4xl">Lorem Ipsum 4XL</p>
|
||||
<p class="font-serif font-3xl">Lorem Ipsum 3XL</p>
|
||||
<p class="font-serif font-2xl">Lorem Ipsum 2XL</p>
|
||||
<p class="font-serif font-xl">Lorem Ipsum XL</p>
|
||||
<p class="font-serif font-l">Lorem Ipsum L</p>
|
||||
<p class="font-serif font-m">Lorem Ipsum M</p>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
<style>
|
||||
div {
|
||||
margin-block: 2em;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.prose {
|
||||
margin-top: 4em;
|
||||
max-width: unset;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -37,7 +37,7 @@ const meta = getLocalizedMatch(folder.translations);
|
|||
<AppLayoutTitle title={meta.name} />
|
||||
{meta.description && <AppLayoutDescription description={meta.description} />}
|
||||
|
||||
<div id="main">
|
||||
<div id="main" class:list={{ complex: folder.sections.type === "multiple" }}>
|
||||
{
|
||||
folder.sections.type === "single" && folder.sections.subfolders.length > 0 ? (
|
||||
<FoldersSection folders={folder.sections.subfolders} />
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ const { icon = "material-symbols:folder-outline", title, href } = Astro.props;
|
|||
|
||||
<a href={href} class="pressable">
|
||||
<Icon name={icon} />
|
||||
<div id="right">
|
||||
<h3>{title}</h3>
|
||||
<div id="right" class="font-xl">
|
||||
{title}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
|
@ -28,8 +28,6 @@ const { icon = "material-symbols:folder-outline", title, href } = Astro.props;
|
|||
color: var(--color-base-1000);
|
||||
padding: 12px 24px;
|
||||
border-radius: 12px;
|
||||
text-decoration: none;
|
||||
font-size: clamp(0.8em, 0.35em + 0.75vw, 1em);
|
||||
|
||||
& > svg {
|
||||
width: 24px;
|
||||
|
|
@ -41,10 +39,6 @@ const { icon = "material-symbols:folder-outline", title, href } = Astro.props;
|
|||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 2px;
|
||||
|
||||
& > h3 {
|
||||
font-size: 125%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const { getLocalizedUrl, getLocalizedMatch } = await getI18n(Astro.locals.curren
|
|||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<div>
|
||||
{title && <h3>{title}</h3>}
|
||||
{title && <h3 class="font-serif font-3xl">{title}</h3>}
|
||||
<section>
|
||||
{
|
||||
folders.map(({ slug, translations, icon }) => (
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import { Icon } from "astro-icon/components";
|
||||
import Button from "components/Button.astro";
|
||||
import LibraryGrid from "./_components/LibraryGrid.astro";
|
||||
import ChronicleCard from "./_components/ChronicleCard.astro";
|
||||
import LinkCard from "./_components/LinkCard.astro";
|
||||
import { getI18n } from "src/i18n/i18n";
|
||||
import { cache } from "src/utils/payload";
|
||||
|
|
@ -35,7 +34,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
|
||||
<div id="main">
|
||||
<section id="library" class="high-contrast-text">
|
||||
<h2>{t("home.librarySection.title")}</h2>
|
||||
<h2 class="font-serif font-3xl">{t("home.librarySection.title")}</h2>
|
||||
<p set:html={t("home.librarySection.description")} />
|
||||
<a href={getLocalizedUrl("/search")} class="DEV_TODO">
|
||||
<Button
|
||||
|
|
@ -50,50 +49,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
</section>
|
||||
|
||||
<section class="DEV_TODO">
|
||||
<h2>{t("home.chroniclesSection.title")}</h2>
|
||||
<p set:html={t("home.chroniclesSection.description")} />
|
||||
<div class="flex">
|
||||
<ChronicleCard
|
||||
pretitle={"Preface"}
|
||||
title={"The Yokoverse"}
|
||||
subtitle={"Start reading the Chronicles here"}
|
||||
href={getLocalizedUrl("/chronicles/preface")}
|
||||
/>
|
||||
<ChronicleCard
|
||||
pretitle={"Chapter 1"}
|
||||
title={"Drakengard 3"}
|
||||
subtitle={"A cursed world, and the girl who hated it"}
|
||||
href={getLocalizedUrl("/chronicles/drakengard-3")}
|
||||
/>
|
||||
<ChronicleCard
|
||||
pretitle={"Chapter 2"}
|
||||
title={"Drakengard"}
|
||||
subtitle={"Humanity at its lowest"}
|
||||
href={getLocalizedUrl("/chronicles/drakengard")}
|
||||
/>
|
||||
<ChronicleCard
|
||||
pretitle={"Chapter 3"}
|
||||
title={"NieR"}
|
||||
subtitle={"The Glory of Mankind comes to an abrupt End"}
|
||||
href={getLocalizedUrl("/chronicles/nier")}
|
||||
/>
|
||||
<ChronicleCard
|
||||
pretitle={"Chapter 4"}
|
||||
title={"NieR:Automata"}
|
||||
subtitle={"Protagonists of Meaningless Stories"}
|
||||
href={getLocalizedUrl("/chronicles/nier-automata")}
|
||||
/>
|
||||
<ChronicleCard
|
||||
pretitle={"Epilogue"}
|
||||
title={"Appendices"}
|
||||
subtitle={"Protagonists of Meaningless Stories"}
|
||||
href={getLocalizedUrl("/chronicles/nier-automata")}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="DEV_TODO">
|
||||
<h2>{t("home.changesSection.title")}</h2>
|
||||
<h2 class="font-serif font-3xl">{t("home.changesSection.title")}</h2>
|
||||
<p set:html={t("home.changesSection.description")} />
|
||||
<a href={getLocalizedUrl("/changelog")}>
|
||||
<Button
|
||||
|
|
@ -105,7 +61,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<h2>{t("home.moreSection.title")}</h2>
|
||||
<h2 class="font-serif font-3xl">{t("home.moreSection.title")}</h2>
|
||||
<p set:html={t("home.moreSection.description")} />
|
||||
<div class="grid">
|
||||
<div class="DEV_TODO">
|
||||
|
|
@ -143,7 +99,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<h2>{t("home.linksSection.title")}</h2>
|
||||
<h2 class="font-serif font-3xl">{t("home.linksSection.title")}</h2>
|
||||
<p set:html={t("home.linksSection.description")} />
|
||||
<div class="grid">
|
||||
<LinkCard
|
||||
|
|
@ -192,26 +148,21 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
|
||||
& > div {
|
||||
& > h1 {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
font-size: 52px;
|
||||
font-variation-settings: "wght" 300;
|
||||
font-size: 54.5px;
|
||||
font-variation-settings: "wght" 800;
|
||||
}
|
||||
|
||||
& > p {
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
margin-top: -0.5em;
|
||||
font-size: 21px;
|
||||
font-size: 20px;
|
||||
font-variation-settings: "wght" 600;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 35rem) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
place-items: center;
|
||||
margin-bottom: 3em;
|
||||
--container-width: calc((100vw - 48px));
|
||||
|
||||
& > svg {
|
||||
|
|
@ -222,16 +173,14 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
& > div {
|
||||
& > h1 {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
font-size: calc(var(--container-width) / 9);
|
||||
font-variation-settings: "wght" 800;
|
||||
}
|
||||
|
||||
& > p {
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
margin-top: -0.5em;
|
||||
font-size: calc(var(--container-width) / 21.8);
|
||||
font-size: calc(var(--container-width) / 25);
|
||||
font-variation-settings: "wght" 700;
|
||||
}
|
||||
}
|
||||
|
|
@ -244,11 +193,6 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
gap: 64px;
|
||||
|
||||
& > section {
|
||||
& > h2 {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
& > p {
|
||||
max-width: 35em;
|
||||
line-height: 1.5;
|
||||
|
|
|
|||
|
|
@ -85,7 +85,9 @@ if (languages.length > 0) {
|
|||
|
||||
<style>
|
||||
a {
|
||||
display: block;
|
||||
max-width: min(35rem, 100%);
|
||||
max-height: 50vh;
|
||||
overflow: hidden;
|
||||
margin-bottom: 2em;
|
||||
border-radius: 16px;
|
||||
|
||||
|
|
@ -94,24 +96,11 @@ if (languages.length > 0) {
|
|||
@media (max-width: 1280.5px) {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
scale: 102%;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 3px solid var(--color-base-1000);
|
||||
outline-offset: unset;
|
||||
}
|
||||
|
||||
max-width: min(35rem, 100%);
|
||||
max-height: 50vh;
|
||||
|
||||
& > img {
|
||||
border-radius: 16px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#info {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const { getLocalizedUrl, t, formatTimelineDate } = await getI18n(Astro.locals.cu
|
|||
<div class="card-container">
|
||||
<Card>
|
||||
<div class="card-content prose">
|
||||
<h3>{t("timeline.notes.title")}</h3>
|
||||
<h3 class="font-serif font-3xl">{t("timeline.notes.title")}</h3>
|
||||
|
||||
<p
|
||||
set:html={t("timeline.notes.content", {
|
||||
|
|
@ -38,7 +38,7 @@ const { getLocalizedUrl, t, formatTimelineDate } = await getI18n(Astro.locals.cu
|
|||
|
||||
<Card>
|
||||
<div class="card-content prose">
|
||||
<h3>{t("timeline.priorCataclysmNote.title")}</h3>
|
||||
<h3 class="font-serif font-3xl">{t("timeline.priorCataclysmNote.title")}</h3>
|
||||
|
||||
<p
|
||||
set:html={t("timeline.priorCataclysmNote.content", {
|
||||
|
|
@ -52,7 +52,7 @@ const { getLocalizedUrl, t, formatTimelineDate } = await getI18n(Astro.locals.cu
|
|||
|
||||
<Card>
|
||||
<div class="card-content prose jump-card">
|
||||
<h3>{t("timeline.jumpTo")}</h3>
|
||||
<h3 class="font-serif font-3xl">{t("timeline.jumpTo")}</h3>
|
||||
|
||||
{
|
||||
cache.config.timeline.eras.map(({ name, startingYear, endingYear }) => (
|
||||
|
|
@ -74,7 +74,7 @@ const { getLocalizedUrl, t, formatTimelineDate } = await getI18n(Astro.locals.cu
|
|||
|
||||
<style>
|
||||
.card-content {
|
||||
padding: clamp(1em, 4vw, 3em);
|
||||
padding: clamp(1.5em, 4vw, 2em) clamp(1em, 4vw, 3em);
|
||||
max-width: 35rem;
|
||||
|
||||
&.jump-card > p {
|
||||
|
|
|
|||
|
|
@ -107,8 +107,6 @@ const metaAttributes = [
|
|||
|
||||
> :global(video) {
|
||||
max-height: 60vh;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue