From 510255f1bd1dfebc5151d88e77235429e0b86f88 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Tue, 10 Jun 2025 10:29:52 -0700 Subject: [PATCH] Make font-scaling more consistent --- src/assets/styles/globals.scss | 6 ++++++ src/lib/components/DynamicPostContent.svelte | 12 ++++++------ src/lib/components/LabCard.svelte | 12 ++++++------ src/lib/components/PostContent.svelte | 8 ++++---- src/lib/components/PostItem.svelte | 4 ++-- src/lib/components/ProjectContent.svelte | 4 ++-- src/lib/components/ProjectHeaderContent.svelte | 2 +- src/lib/components/ProjectItem.svelte | 2 +- src/lib/components/ProjectList.svelte | 2 +- src/lib/components/ProjectPasswordProtection.svelte | 2 +- src/lib/components/UniverseAlbumCard.svelte | 2 +- src/lib/components/UniversePostCard.svelte | 2 +- src/lib/components/edra/editor.css | 4 ++-- src/routes/about/+page.svelte | 2 +- src/routes/labs/[slug]/+page.svelte | 2 +- src/routes/photos/[albumSlug]/[photoId]/+page.svelte | 2 +- src/routes/photos/[slug]/+page.svelte | 2 +- src/routes/universe/+page.svelte | 2 +- 18 files changed, 39 insertions(+), 33 deletions(-) diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss index 8f0ace0..8155a89 100644 --- a/src/assets/styles/globals.scss +++ b/src/assets/styles/globals.scss @@ -17,6 +17,12 @@ body { html { overflow-x: hidden; width: 100%; + font-size: 18px; + + // Set rem to 16px on mobile devices + @include breakpoint('phone') { + font-size: 16px; + } } // Heading font weights diff --git a/src/lib/components/DynamicPostContent.svelte b/src/lib/components/DynamicPostContent.svelte index 91a779e..8599805 100644 --- a/src/lib/components/DynamicPostContent.svelte +++ b/src/lib/components/DynamicPostContent.svelte @@ -105,14 +105,14 @@ // Post type styles &.post { .post-body { - font-size: 1.125rem; + font-size: 1rem; } } &.essay { .post-body { - font-size: 1.125rem; - line-height: 1.7; + font-size: 1rem; + line-height: 1.4; } } } @@ -169,7 +169,7 @@ margin-bottom: $unit-4x; h3 { - font-size: 1.125rem; + font-size: 1rem; font-weight: 600; margin: 0 0 $unit-2x; color: $grey-20; @@ -185,7 +185,7 @@ .album-description { margin: 0; - font-size: 1.125rem; + font-size: 1rem; color: $grey-10; line-height: 1.5; } @@ -218,7 +218,7 @@ :global(h4) { margin: $unit-3x 0 $unit-2x; - font-size: 1.125rem; + font-size: 1rem; font-weight: 600; color: $grey-10; } diff --git a/src/lib/components/LabCard.svelte b/src/lib/components/LabCard.svelte index df43118..a29863c 100644 --- a/src/lib/components/LabCard.svelte +++ b/src/lib/components/LabCard.svelte @@ -46,7 +46,7 @@ on:mousemove={handleMouseMove} on:mouseenter={handleMouseEnter} on:mouseleave={handleMouseLeave} - on:click={() => window.location.href = projectUrl} + on:click={() => (window.location.href = projectUrl)} on:keydown={(e) => e.key === 'Enter' && (window.location.href = projectUrl)} role="button" tabindex="0" @@ -204,12 +204,12 @@ &.clickable { cursor: pointer; - + &:focus { outline: 2px solid $red-60; outline-offset: 2px; } - + &:focus:not(:focus-visible) { outline: none; } @@ -245,13 +245,13 @@ .project-title { margin: 0; - font-size: 1.125rem; + font-size: 1rem; font-weight: 400; color: $grey-00; line-height: 1.3; @include breakpoint('phone') { - font-size: 1.125rem; + font-size: 1rem; } } @@ -264,7 +264,7 @@ .project-description { margin: 0 0 $unit-3x 0; - font-size: 1.125rem; + font-size: 1rem; line-height: 1.5; color: $grey-20; diff --git a/src/lib/components/PostContent.svelte b/src/lib/components/PostContent.svelte index 9056316..ed8846e 100644 --- a/src/lib/components/PostContent.svelte +++ b/src/lib/components/PostContent.svelte @@ -54,13 +54,13 @@ // Post type styles for simplified post types &.post { .post-body { - font-size: 1.125rem; + font-size: 1rem; } } &.essay { .post-body { - font-size: 1.125rem; + font-size: 1rem; line-height: 1.5; } } @@ -69,13 +69,13 @@ &.note, &.microblog { .post-body { - font-size: 1.125rem; + font-size: 1rem; } } &.blog { .post-body { - font-size: 1.125rem; + font-size: 1rem; line-height: 1.5; } } diff --git a/src/lib/components/PostItem.svelte b/src/lib/components/PostItem.svelte index 62e5ade..9ac7d18 100644 --- a/src/lib/components/PostItem.svelte +++ b/src/lib/components/PostItem.svelte @@ -57,7 +57,7 @@ &.note { .post-excerpt { - font-size: 1.125rem; + font-size: 1rem; } } @@ -107,7 +107,7 @@ .post-excerpt { margin: 0; color: $grey-00; - font-size: 1.125rem; + font-size: 1rem; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; diff --git a/src/lib/components/ProjectContent.svelte b/src/lib/components/ProjectContent.svelte index 5ae021d..fd91111 100644 --- a/src/lib/components/ProjectContent.svelte +++ b/src/lib/components/ProjectContent.svelte @@ -118,12 +118,12 @@ } :global(h3) { - font-size: 1.125rem; + font-size: 1rem; } :global(p) { margin: $unit-2x 0; - font-size: 1.125rem; + font-size: 1rem; line-height: 1.5; color: $grey-20; } diff --git a/src/lib/components/ProjectHeaderContent.svelte b/src/lib/components/ProjectHeaderContent.svelte index 5a99250..2f20abd 100644 --- a/src/lib/components/ProjectHeaderContent.svelte +++ b/src/lib/components/ProjectHeaderContent.svelte @@ -66,7 +66,7 @@ margin: 0; @include breakpoint('phone') { - font-size: 1.125rem; + font-size: 1rem; } } diff --git a/src/lib/components/ProjectItem.svelte b/src/lib/components/ProjectItem.svelte index c300dd4..12dd7d0 100644 --- a/src/lib/components/ProjectItem.svelte +++ b/src/lib/components/ProjectItem.svelte @@ -285,7 +285,7 @@ .project-description { margin: 0; - font-size: 1.125rem; // 18px + font-size: 1rem; // 18px line-height: 1.3; color: $grey-00; } diff --git a/src/lib/components/ProjectList.svelte b/src/lib/components/ProjectList.svelte index cb0872d..5e04c7c 100644 --- a/src/lib/components/ProjectList.svelte +++ b/src/lib/components/ProjectList.svelte @@ -94,7 +94,7 @@ .intro-text { margin: 0; - font-size: 1.125rem; // 18px + font-size: 1rem; // 18px line-height: 1.3; color: $grey-00; diff --git a/src/lib/components/ProjectPasswordProtection.svelte b/src/lib/components/ProjectPasswordProtection.svelte index f48cd68..8013239 100644 --- a/src/lib/components/ProjectPasswordProtection.svelte +++ b/src/lib/components/ProjectPasswordProtection.svelte @@ -163,7 +163,7 @@ color: $grey-40; margin: 0; line-height: 1.5; - font-size: 1.125rem; + font-size: 1rem; } } diff --git a/src/lib/components/UniverseAlbumCard.svelte b/src/lib/components/UniverseAlbumCard.svelte index 1b2730e..9e0357f 100644 --- a/src/lib/components/UniverseAlbumCard.svelte +++ b/src/lib/components/UniverseAlbumCard.svelte @@ -84,7 +84,7 @@ .album-description { margin: 0; color: $grey-10; - font-size: 1.125rem; + font-size: 1rem; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; diff --git a/src/lib/components/UniversePostCard.svelte b/src/lib/components/UniversePostCard.svelte index 1ec37cf..06c527a 100644 --- a/src/lib/components/UniversePostCard.svelte +++ b/src/lib/components/UniversePostCard.svelte @@ -101,7 +101,7 @@ p { margin: 0; color: $grey-10; - font-size: 1.125rem; + font-size: 1rem; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; diff --git a/src/lib/components/edra/editor.css b/src/lib/components/edra/editor.css index d3dda51..b249457 100644 --- a/src/lib/components/edra/editor.css +++ b/src/lib/components/edra/editor.css @@ -131,8 +131,8 @@ input[type='checkbox'] { display: grid; place-content: center; cursor: pointer; - width: 1.125rem; - height: 1.125rem; + width: 1rem; + height: 1rem; border-radius: 0.25rem; } diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index 7ca11a5..a6951aa 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -107,7 +107,7 @@ } .bio { - font-size: 1.125rem; + font-size: 1rem; line-height: 1.5; color: #333; background: $grey-100; diff --git a/src/routes/labs/[slug]/+page.svelte b/src/routes/labs/[slug]/+page.svelte index b66029e..a5813b0 100644 --- a/src/routes/labs/[slug]/+page.svelte +++ b/src/routes/labs/[slug]/+page.svelte @@ -164,7 +164,7 @@ margin: 0; @include breakpoint('phone') { - font-size: 1.125rem; + font-size: 1rem; } } diff --git a/src/routes/photos/[albumSlug]/[photoId]/+page.svelte b/src/routes/photos/[albumSlug]/[photoId]/+page.svelte index ad0d194..f4e334b 100644 --- a/src/routes/photos/[albumSlug]/[photoId]/+page.svelte +++ b/src/routes/photos/[albumSlug]/[photoId]/+page.svelte @@ -445,7 +445,7 @@ } .photo-caption { - font-size: 1.125rem; + font-size: 1rem; color: $grey-20; margin: 0 0 $unit-3x; line-height: 1.5; diff --git a/src/routes/photos/[slug]/+page.svelte b/src/routes/photos/[slug]/+page.svelte index 4f5b75b..854bb6e 100644 --- a/src/routes/photos/[slug]/+page.svelte +++ b/src/routes/photos/[slug]/+page.svelte @@ -158,7 +158,7 @@ } .album-description { - font-size: 1.125rem; + font-size: 1rem; color: $grey-30; margin: 0 0 $unit-4x; line-height: 1.5; diff --git a/src/routes/universe/+page.svelte b/src/routes/universe/+page.svelte index 08aaae2..1f4c44c 100644 --- a/src/routes/universe/+page.svelte +++ b/src/routes/universe/+page.svelte @@ -37,7 +37,7 @@ p { margin: 0; - font-size: 1.125rem; + font-size: 1rem; } }