Skip to content

Commit

Permalink
[#283] Bump font-size up so the smallest font is 16px, for accessibil…
Browse files Browse the repository at this point in the history
…ity; additionally compensates for having a thin font
  • Loading branch information
Auroratide committed Aug 2, 2021
1 parent 211ac1c commit 11336ed
Show file tree
Hide file tree
Showing 11 changed files with 52 additions and 28 deletions.
19 changes: 16 additions & 3 deletions public/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,31 @@ html {
overflow-y: scroll; /* So scrollbar is always there */
}

body {
.content-typography p,
.content-typography li,
.content-typography button,
.content-typography .as-button {
font-size: var(--sizing-font-sm);
}

.content-typography p li {
font-size: 1em;
}

.content-typography p code,
.content-typography li code {
font-size: 0.875em;
}

/* Headings
========================================================================== */
h1 { font-size: var(--sizing-font-xl); }
h2, h3, h4, h5, h6 {
font-weight: var(--typography-bold);
}
h2 { font-size: var(--sizing-font-md); }
h3, h4 { font-size: var(--sizing-font-sm); }
h2 { font-size: var(--sizing-font-lg); }
h3 { font-size: var(--sizing-font-md); }
h4 { font-size: var(--sizing-font-sm); }
h5, h6 { font-size: var(--sizing-font-xs); }
h4, h5, h6 { font-style: italic; }
h1, h2, h3, h4, h5, h6 {
Expand Down
14 changes: 7 additions & 7 deletions public/styles/sizing.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,19 @@
--sizing-border-lg: 0.5rem;
--sizing-border-xl: 1rem;

--sizing-font-xs: 0.875em;
--sizing-font-sm: 1em;
--sizing-font-xs: 1em;
--sizing-font-sm: 1.125em;
--sizing-font-md: 1.25em;
--sizing-font-lg: 1.5em;
--sizing-font-xl: 2em;
}

@media screen and (min-width: 75rem) {
:root {
--sizing-font-xs: 0.875em;
--sizing-font-sm: 1.125em;
--sizing-font-md: 1.375em;
--sizing-font-lg: 1.875em;
--sizing-font-xl: 2.5em;
--sizing-font-xs: 1em;
--sizing-font-sm: 1.25em;
--sizing-font-md: 1.625em;
--sizing-font-lg: 2em;
--sizing-font-xl: 2.75em;
}
}
4 changes: 2 additions & 2 deletions src/client/ArticleCard/ArticleCard.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
}
</script>

<article aria-label={article.title} class="article-card" style="--article-color: {color.fromJson(article.color)};">
<article aria-label={article.title} class="article-card content-typography" style="--article-color: {color.fromJson(article.color)};">
<section>
<h2 class="title"><a href={link}>{article.title}</a></h2>
<small class="byline">
Expand Down Expand Up @@ -95,7 +95,7 @@
top: 0;
right: 0;
overflow: hidden;
font-size: calc(2.25 * var(--sizing-font-xs));
font-size: calc(2 * var(--sizing-font-xs));
}
.article-card .summary.long {
Expand Down
2 changes: 1 addition & 1 deletion src/client/Error/Error.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<h1>{title}</h1>
</FocusOnMe>
<h2>{subtitle}</h2>
<div class="content">
<div class="content content-typography">
<slot></slot>
</div>
</div>
Expand Down
5 changes: 4 additions & 1 deletion src/client/LinkBar/LinkBar.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,17 @@
<style>
.link-bar {
position: absolute;
top: calc(var(--header-height) - 0.75em);
top: var(--header-height);
left: 0;
right: 0;
text-align: center;
}
.link-bar a {
position: relative;
margin: 0 var(--sizing-spacing-sm);
font-size: calc(1.125 * var(--sizing-font-xs));
top: -0.75em;
}
.link-bar a vector-icon {
Expand Down
4 changes: 3 additions & 1 deletion src/client/layout/Content/Content.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<div class="content" class:has-sidebar={$$slots.sidebar}>
<slot></slot>
<div class="content-typography">
<slot></slot>
</div>
<slot name="sidebar"></slot>
<slot name="after"></slot>
</div>
Expand Down
9 changes: 5 additions & 4 deletions src/client/layout/Footer/Footer.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,15 @@
}
.socials a {
--width: 2.375em;
display: flex;
align-items: center;
justify-content: center;
color: var(--skin-color-text-secondary);
border: 0 solid var(--skin-color-bg-secondary);
width: 2.25em;
height: 2.25em;
border-radius: 1.125em;
width: var(--width);
height: var(--width);
border-radius: calc(var(--width) / 2);
transition: border-width var(--transition-quick);
}
Expand Down Expand Up @@ -94,7 +95,7 @@
.license, .source {
display: block;
font-size: 87.5%;
font-size: var(--sizing-font-xs);
font-weight: var(--typography-light);
}
Expand Down
16 changes: 10 additions & 6 deletions src/client/layout/Navigation/Navigation.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
.top-bar {
display: grid;
grid-template-columns: auto auto 1fr;
grid-template-rows: 1fr auto;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"logo title subtitle"
"logo nav nav";
Expand All @@ -64,17 +64,19 @@
.title {
grid-area: title;
align-self: center;
position: relative;
}
.title a {
font-size: var(--sizing-font-md);
line-height: var(--sizing-spacing-xl);
line-height: 1.25;
color: var(--palette-greyscale-100);
}
.subtitle {
grid-area: subtitle;
align-self: center;
font-size: var(--sizing-font-sm);
align-self: center;
font-weight: var(--typography-light);
Expand Down Expand Up @@ -113,6 +115,7 @@
.nav {
grid-area: nav;
font-size: var(--sizing-font-sm);
align-self: center;
}
.nav ul {
Expand All @@ -124,6 +127,7 @@
.nav ul li {
display: inline-block;
margin: 0;
}
.nav a {
Expand All @@ -135,17 +139,17 @@
@media screen and (min-width: 75rem) {
.top-bar {
grid-template-columns: auto 1fr 1fr;
grid-template-rows: 1fr auto;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"logo title socials"
"logo subtitle nav";
column-gap: 1.5em;
max-height: 5em;
column-gap: 1.625em;
max-height: 5.625em;
overflow: visible;
}
.logo {
font-size: 6em;
font-size: 6.75em;
align-self: start;
}
Expand Down
1 change: 1 addition & 0 deletions src/client/pages/Styleguide/Palette/Palette.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,6 @@
h2 {
margin: 0 0 var(--sizing-spacing-xs) 0;
font-size: var(--sizing-font-sm);
}
</style>
3 changes: 2 additions & 1 deletion src/client/pages/art/ArtPage/ArtPage.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
</img-popout>
</img-colorscape>
</section>
<section class="content">
<section class="content content-typography">
<div class="published"><date-display date={item.publishedAt} /></div>
{#if item.content}
<RawRenderer content={item.content} />
Expand Down Expand Up @@ -215,6 +215,7 @@
.more-title {
text-transform: capitalize;
font-size: var(--sizing-font-md);
}
.comments {
Expand Down
3 changes: 1 addition & 2 deletions src/components/ArticleImage/ArticleImage.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
.article-image {
text-align: center;
margin: 0 0 1em;
margin: 0 0 1.5em;
}
.article-image img {
Expand All @@ -57,7 +57,6 @@
.article-image figcaption {
font-weight: 300;
font-size: 87.5%;
opacity: 0.75;
}
</style>

0 comments on commit 11336ed

Please sign in to comment.