Accords-Library-Archive
/
v3.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use fluid font size

This commit is contained in:
DrMint 2024-06-01 10:59:54 +02:00
parent 31f2306fad
commit f6c704f6d1
7 changed files with 69 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/AppLayout/components/Html.astro
View File

@ -226,7 +226,7 @@ const { currentTheme } = Astro.locals;
--color-elevation-0: var(--color-base-150); --color-elevation-0: var(--color-base-150);
--color-shadow-0: var(--color-base-500); --color-shadow-0: var(--color-base-500);
--color-shadow-1: var(--color-base-350); --color-shadow-1: var(--color-base-400);
--color-shadow-2: var(--color-base-300); --color-shadow-2: var(--color-base-300);
--color-critical-error: #940000; --color-critical-error: #940000;
@ -397,15 +397,17 @@ const { currentTheme } = Astro.locals;
} }
:root { :root {
--font-size-increase: 4px + min(0.2vw, 3px);
--font-size-xs: 0.75rem; --font-size-xs: 0.75rem;
--font-size-s: 0.875rem; --font-size-s: 0.875rem;
--font-size-m: 1rem; --font-size-m: 1rem;
--font-size-l: 1.125rem; --font-size-l: calc(1rem + var(--font-size-increase) * 1);
--font-size-xl: 1.25rem; --font-size-xl: calc(1rem + var(--font-size-increase) * 2);
--font-size-2xl: 1.5rem; --font-size-2xl: calc(1rem + var(--font-size-increase) * 3);
--font-size-3xl: 1.875rem; --font-size-3xl: calc(1rem + var(--font-size-increase) * 4);
--font-size-4xl: 2.5rem; --font-size-4xl: calc(1rem + var(--font-size-increase) * 6);
--font-size-5xl: 4rem; --font-size-5xl: calc(1rem + var(--font-size-increase) * 16);
} }
html, html,
@ -700,6 +702,10 @@ const { currentTheme } = Astro.locals;
} }
} }
@view-transition {
navigation: auto;
}
.DEV_TODO { .DEV_TODO {
display: none !important; display: none !important;
visibility: none !important; visibility: none !important;

18
src/components/Previews/GenericPreview.astro
View File

@ -78,9 +78,7 @@ const {
{pretitle} {pretitle}
</span> </span>
)} )}
<span id="title" class="font-serif font-2xl"> <span class="font-serif font-2xl">{title}</span>
{title}
</span>
{subtitle && ( {subtitle && (
<span id="subtitle" class="font-serif font-m"> <span id="subtitle" class="font-serif font-m">
{subtitle} {subtitle}
@ -168,18 +166,18 @@ const {
& > p { & > p {
transition: 150ms color; transition: 150ms color;
display: grid; line-height: 0.8;
& > #pretitle { & > #pretitle {
margin-bottom: 0.4em; margin-bottom: 0.8em;
}
& > #title {
line-height: 0.8;
} }
& > #subtitle { & > #subtitle {
margin-top: 0.4em; margin-top: 0.5em;
}
& > span {
display: block;
} }
} }

9
src/pages/[locale]/dev/design-system/_components/ColorShowcase.astro
View File

@ -10,7 +10,7 @@ const { baseColors, theme } = Astro.props;
--- ---
<div id="container" class:list={[theme, "manual-theme"]}> <div id="container" class:list={[theme, "manual-theme"]}>
<h4>Base colors</h4> <h4 class="font-xl">Base colors</h4>
<div class="colors"> <div class="colors">
{ {
baseColors.map((color) => ( baseColors.map((color) => (
@ -32,7 +32,7 @@ const { baseColors, theme } = Astro.props;
<div class="group"> <div class="group">
<div> <div>
<h4>Elevation</h4> <h4 class="font-xl">Elevation</h4>
<div class="colors"> <div class="colors">
<div style="background-color: var(--color-elevation-0);">0</div> <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-1);">1</div>
@ -41,7 +41,7 @@ const { baseColors, theme } = Astro.props;
</div> </div>
<div> <div>
<h4>Shadows</h4> <h4 class="font-xl">Shadows</h4>
<div class="colors"> <div class="colors">
<div style="background-color: var(--color-shadow-0);">0</div> <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-1);">1</div>
@ -50,7 +50,7 @@ const { baseColors, theme } = Astro.props;
</div> </div>
<div> <div>
<h4>Others</h4> <h4 class="font-xl">Others</h4>
<div class="colors"> <div class="colors">
<div style="background-color: var(--color-critical-error); color: var(--color-base-0);"> <div style="background-color: var(--color-critical-error); color: var(--color-base-0);">
Error Error
@ -97,7 +97,6 @@ const { baseColors, theme } = Astro.props;
h4 { h4 {
line-height: 2; line-height: 2;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 120%;
} }
.colors { .colors {

53
src/pages/[locale]/dev/design-system/index.astro
View File

@ -10,9 +10,9 @@ import ColorShowcase from "./_components/ColorShowcase.astro";
<AppLayoutTitle pretitle="AL3.0" title="Design System" /> <AppLayoutTitle pretitle="AL3.0" title="Design System" />
<div> <div>
<h2>Colors</h2> <h2 class="font-3xl">Colors</h2>
<h3>Light theme</h3> <h3 class="font-2xl">Light theme</h3>
<ColorShowcase <ColorShowcase
baseColors={[ baseColors={[
0, 50, 100, 125, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 0, 50, 100, 125, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850,
@ -21,7 +21,7 @@ import ColorShowcase from "./_components/ColorShowcase.astro";
theme="light-theme" theme="light-theme"
/> />
<h3>Dark theme</h3> <h3 class="font-2xl">Dark theme</h3>
<ColorShowcase <ColorShowcase
baseColors={[ baseColors={[
0, 50, 100, 150, 175, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 0, 50, 100, 150, 175, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850,
@ -30,28 +30,28 @@ import ColorShowcase from "./_components/ColorShowcase.astro";
theme="dark-theme" theme="dark-theme"
/> />
<h2>Fonts</h2> <h2 class="font-3xl">Fonts</h2>
<div> <div>
<p class="font-5xl">Lorem Ipsum 5XL</p> <p class="font-5xl">Murencho Variable 5XL</p>
<p class="font-4xl">Lorem Ipsum 4XL</p> <p class="font-4xl">Murencho Variable 4XL</p>
<p class="font-3xl">Lorem Ipsum 3XL</p> <p class="font-3xl">Murencho Variable 3XL</p>
<p class="font-2xl">Lorem Ipsum 2XL</p> <p class="font-2xl">Murencho Variable 2XL</p>
<p class="font-xl">Lorem Ipsum XL</p> <p class="font-xl">Murencho Variable XL</p>
<p class="font-l">Lorem Ipsum L</p> <p class="font-l">Murencho Variable L</p>
<p class="font-m">Lorem Ipsum M</p> <p class="font-m">Murencho Variable M</p>
<p class="font-s">Lorem Ipsum S</p> <p class="font-s">Murencho Variable S</p>
<p class="font-xs">Lorem Ipsum XS</p> <p class="font-xs">Murencho Variable XS</p>
</div> </div>
<div> <div>
<p class="font-serif font-5xl">Lorem Ipsum 5XL</p> <p class="font-serif font-5xl">Vollkorn Variable 5XL</p>
<p class="font-serif font-4xl">Lorem Ipsum 4XL</p> <p class="font-serif font-4xl">Vollkorn Variable 4XL</p>
<p class="font-serif font-3xl">Lorem Ipsum 3XL</p> <p class="font-serif font-3xl">Vollkorn Variable 3XL</p>
<p class="font-serif font-2xl">Lorem Ipsum 2XL</p> <p class="font-serif font-2xl">Vollkorn Variable 2XL</p>
<p class="font-serif font-xl">Lorem Ipsum XL</p> <p class="font-serif font-xl">Vollkorn Variable XL</p>
<p class="font-serif font-l">Lorem Ipsum L</p> <p class="font-serif font-l">Vollkorn Variable L</p>
<p class="font-serif font-m">Lorem Ipsum M</p> <p class="font-serif font-m">Vollkorn Variable M</p>
</div> </div>
</div> </div>
</AppLayout> </AppLayout>
@ -68,4 +68,17 @@ import ColorShowcase from "./_components/ColorShowcase.astro";
margin-top: 4em; margin-top: 4em;
max-width: unset; max-width: unset;
} }
h2 {
margin-top: 2em;
}
h3 {
margin-top: 2em;
margin-bottom: 0.2em;
}
h2 + h3 {
margin-top: 0.2em;
}
</style> </style>

7
src/pages/[locale]/folders/_components/FolderCard.astro
View File

@ -13,7 +13,7 @@ const { icon = "material-symbols:folder-outline", title, href } = Astro.props;
<a href={href} class="pressable"> <a href={href} class="pressable">
<Icon name={icon} /> <Icon name={icon} />
<div id="right" class="font-xl"> <div id="right" class="font-l">
{title} {title}
</div> </div>
</a> </a>
@ -22,6 +22,11 @@ const { icon = "material-symbols:folder-outline", title, href } = Astro.props;
<style> <style>
a { a {
@media (max-width: 600.5px) {
flex-grow: 1;
}
display: flex; display: flex;
place-items: center; place-items: center;
gap: 1em; gap: 1em;

4
src/pages/[locale]/folders/_components/FoldersSection.astro
View File

@ -37,8 +37,8 @@ const { getLocalizedUrl, getLocalizedMatch } = await getI18n(Astro.locals.curren
margin-bottom: 1em; margin-bottom: 1em;
} }
section { section {
display: grid; display: flex;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); flex-wrap: wrap;
gap: clamp(6px, 2vmax, 16px); gap: clamp(6px, 2vmax, 16px);
@media (max-width: 40rem) { @media (max-width: 40rem) {

7
src/pages/[locale]/index.astro
View File

@ -142,19 +142,18 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
gap: 1em; gap: 1em;
& > svg { & > svg {
width: 64px; width: calc(var(--font-size-5xl) * 1.2);
height: 64px;
} }
& > div { & > div {
& > h1 { & > h1 {
font-size: 54.5px; font-size: var(--font-size-5xl);
font-variation-settings: "wght" 800; font-variation-settings: "wght" 800;
} }
& > p { & > p {
margin-top: -0.5em; margin-top: -0.5em;
font-size: 20px; font-size: calc(var(--font-size-5xl) * 0.365);
font-variation-settings: "wght" 600; font-variation-settings: "wght" 600;
} }
} }