Update font styles to better match Analog

We've reverted to Open Sans because Didact Gothic is a bit point-
less if there's no lowercase; on the other hand Fanwood Text has
remained and is going to make its debut appearance in the print
version!
This commit is contained in:
Badri Sunderarajan 2021-12-09 18:22:48 +05:30
parent 0f34b79ec4
commit a536fbbbf9
3 changed files with 17 additions and 7 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -52,7 +52,7 @@ production stylesheet in assets/built/screen.css
*/ */
/* Fonts */ /* Fonts */
--font-sans-serif: "Didact Gothic", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; --font-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--font-serif: "Fanwood Text", "Crimson Text Regular", "Crimson Text", "Crimson Pro", Georgia, Times, serif; --font-serif: "Fanwood Text", "Crimson Text Regular", "Crimson Text", "Crimson Pro", Georgia, Times, serif;
--font-mono: Menlo, Courier, monospace; --font-mono: Menlo, Courier, monospace;
--font-heading: "Abhaya Libre Extrabold", "Georgia Bold", "Georgia", Times, serif; --font-heading: "Abhaya Libre Extrabold", "Georgia Bold", "Georgia", Times, serif;
@ -819,7 +819,8 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
.post-card-excerpt { .post-card-excerpt {
max-width: 56em; max-width: 56em;
color: color-mod(var(--color-midgrey) l(-8%)); color: black;
font-size: 1.4rem;
} }
.post-card-excerpt p { .post-card-excerpt p {
@ -829,6 +830,8 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-word; word-break: break-word;
font-variant: small-caps;
letter-spacing: 1pt;
} }
.post-card-meta { .post-card-meta {
@ -987,11 +990,11 @@ make sure this only happens on large viewports / desktop-ish devices.
@media (max-width: 500px) { @media (max-width: 500px) {
.post-card-title { .post-card-title {
font-size: 1.9rem; font-size: 3rem;
} }
.post-card-excerpt { .post-card-excerpt {
font-size: 1.6rem; font-size: 1.4rem;
} }
} }
@ -1029,13 +1032,17 @@ make sure this only happens on large viewports / desktop-ish devices.
color: color-mod(var(--color-darkgrey) l(-5%)); color: color-mod(var(--color-darkgrey) l(-5%));
font-family: var(--font-heading); font-family: var(--font-heading);
text-transform: lowercase; text-transform: lowercase;
font-size: 8rem;
line-height: 1;
margin-bottom: 0;
} }
.article-excerpt { .article-excerpt {
margin: 0 0 1rem; margin: 0 0 1rem;
font-size: 2rem; font-size: 2rem;
line-height: 1.4em; line-height: 1.4em;
opacity: 0.6; font-variant: small-caps;
letter-spacing: 1pt;
} }
.gh-canvas .article-image { .gh-canvas .article-image {
@ -1052,6 +1059,9 @@ make sure this only happens on large viewports / desktop-ish devices.
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.article-title {
font-size: 4.5rem;
}
.article-excerpt { .article-excerpt {
font-size: 1.8rem; font-size: 1.8rem;
} }