Make font-scaling more consistent

This commit is contained in:
Justin Edmund 2025-06-10 10:29:52 -07:00
parent 205244584f
commit 510255f1bd
18 changed files with 39 additions and 33 deletions

View file

@ -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

View file

@ -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;
}

View file

@ -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;

View file

@ -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;
}
}

View file

@ -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;

View file

@ -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;
}

View file

@ -66,7 +66,7 @@
margin: 0;
@include breakpoint('phone') {
font-size: 1.125rem;
font-size: 1rem;
}
}

View file

@ -285,7 +285,7 @@
.project-description {
margin: 0;
font-size: 1.125rem; // 18px
font-size: 1rem; // 18px
line-height: 1.3;
color: $grey-00;
}

View file

@ -94,7 +94,7 @@
.intro-text {
margin: 0;
font-size: 1.125rem; // 18px
font-size: 1rem; // 18px
line-height: 1.3;
color: $grey-00;

View file

@ -163,7 +163,7 @@
color: $grey-40;
margin: 0;
line-height: 1.5;
font-size: 1.125rem;
font-size: 1rem;
}
}

View file

@ -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;

View file

@ -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;

View file

@ -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;
}

View file

@ -107,7 +107,7 @@
}
.bio {
font-size: 1.125rem;
font-size: 1rem;
line-height: 1.5;
color: #333;
background: $grey-100;

View file

@ -164,7 +164,7 @@
margin: 0;
@include breakpoint('phone') {
font-size: 1.125rem;
font-size: 1rem;
}
}
</style>

View file

@ -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;

View file

@ -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;

View file

@ -37,7 +37,7 @@
p {
margin: 0;
font-size: 1.125rem;
font-size: 1rem;
}
}
</style>