Make font-scaling more consistent
This commit is contained in:
parent
205244584f
commit
510255f1bd
18 changed files with 39 additions and 33 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
margin: 0;
|
||||
|
||||
@include breakpoint('phone') {
|
||||
font-size: 1.125rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -285,7 +285,7 @@
|
|||
|
||||
.project-description {
|
||||
margin: 0;
|
||||
font-size: 1.125rem; // 18px
|
||||
font-size: 1rem; // 18px
|
||||
line-height: 1.3;
|
||||
color: $grey-00;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@
|
|||
|
||||
.intro-text {
|
||||
margin: 0;
|
||||
font-size: 1.125rem; // 18px
|
||||
font-size: 1rem; // 18px
|
||||
line-height: 1.3;
|
||||
color: $grey-00;
|
||||
|
||||
|
|
|
|||
|
|
@ -163,7 +163,7 @@
|
|||
color: $grey-40;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
font-size: 1.125rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
}
|
||||
|
||||
.bio {
|
||||
font-size: 1.125rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
background: $grey-100;
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@
|
|||
margin: 0;
|
||||
|
||||
@include breakpoint('phone') {
|
||||
font-size: 1.125rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue