foster/website
1
0
Fork 0
Code Issues 8 Pull requests Activity

Overhaul font sizes

Browse source 
This aims to improve the readability of the text on desktop displays.
It mainly increases the font size and line height of the text in the
main content.
This commit is contained in:
Foster Hangdaan 2023-11-28 21:15:36 -05:00
parent f5e2412870
commit c7502688ee
Signed by: foster
GPG key ID: E48D7F49A852F112
4 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_includes/layouts/base.tsx
View file

@ -26,7 +26,7 @@ export default function({ title, description, children, comp, metas, links, auth
<body>
{ comp.navbar() }
{ comp.header({title, description, author, date}) }
<main>{children}</main>
<main class="main-content">{children}</main>
{ comp.footer() }
</body>
</html>

10
_includes/styles/base.scss
View file

@ -20,10 +20,15 @@ body {
-moz-osx-font-smoothing: grayscale;
}
main {
.main-content {
padding: 0 1rem;
margin: 0 auto;
max-width: var(--page--max-width);
@media screen and (min-width: 48rem) {
font-size: 1.125rem;
line-height: 1.875rem;
letter-spacing: -0.01em;
}
}
h1, h2, h3, h4, h5, h6 {
@ -102,9 +107,10 @@ pre {
word-wrap: break-word;
font-family: var(--font--mono);
code {
font-size: 1rem;
line-height: normal;
padding: 0;
border-radius: 0;
font-size: 1em;
background-color: transparent;
}
}

4
_includes/styles/components/header.scss
View file

@ -10,6 +10,10 @@ .page-header {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
@media screen and (min-width: 48rem) {
font-size: 2.5rem;
letter-spacing: -0.02em;
}
}
p.subheading {
font-style: italic;

3
_includes/styles/pages/blog.scss
View file

@ -1,6 +1,9 @@
.post-list {
list-style: none;
padding-left: 0;
font-size: 1rem;
line-height: 1.5rem;
letter-spacing: normal;
> li {
margin-bottom: 2rem;
&:last-child {