mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-07-18 21:45:31 -04:00
switch main font to the beautiful Inter – https://rsms.me/inter/
This commit is contained in:
@@ -13,17 +13,19 @@
|
||||
}
|
||||
|
||||
// Web fonts (see components/_fonts.scss)
|
||||
@mixin font-face($family, $src-local, $src-local-alt, $src,
|
||||
@mixin font-face($family, $src,
|
||||
$style: normal, $weight: normal, $display: swap) {
|
||||
@font-face {
|
||||
font-family: $family;
|
||||
font-style: $style;
|
||||
font-weight: $weight;
|
||||
font-display: $display;
|
||||
src: local("#{$src-local}"), local("#{$src-local-alt}"),
|
||||
url("#{$src}.woff2") format("woff2"),
|
||||
src: url("#{$src}.woff2") format("woff2"),
|
||||
url("#{$src}.woff") format("woff");
|
||||
// url('#{$src}.ttf') format('truetype'),
|
||||
// url('#{$src}.eot') format('embedded-opentype');
|
||||
// src: local("#{$src-local}"), local("#{$src-local-alt}"),
|
||||
// url('#{$src}.ttf') format('truetype'),
|
||||
// url('#{$src}.eot') format('embedded-opentype');
|
||||
unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF,
|
||||
U+2190-21FF, U+2200-22FF, U+2122;
|
||||
}
|
||||
}
|
||||
|
@@ -9,7 +9,7 @@ $system-fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
$system-fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
$system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono",
|
||||
"Menlo", "Courier", monospace;
|
||||
$webfont-roboto: "Roboto", sans-serif;
|
||||
$webfont-inter: "Inter", sans-serif;
|
||||
|
||||
// Misc Settings
|
||||
$responsive-width: 890px;
|
||||
|
@@ -1,6 +1,6 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/*! Roboto Latin | Apache License 2.0 | https://fonts.google.com/specimen/Roboto */
|
||||
@include font-face("Roboto", "Roboto", "Roboto-Regular", "./fonts/roboto-latin-regular", normal, 400);
|
||||
@include font-face("Roboto", "Roboto Medium", "Roboto-Medium", "./fonts/roboto-latin-medium", normal, 500);
|
||||
@include font-face("Roboto", "Roboto Bold", "Roboto-Bold", "./fonts/roboto-latin-bold", normal, 700);
|
||||
/*! Inter UI | SIL Open Font License 1.1 | https://rsms.me/inter/ */
|
||||
@include font-face("Inter", "./fonts/inter-regular", normal, 400);
|
||||
@include font-face("Inter", "./fonts/inter-medium", normal, 500);
|
||||
@include font-face("Inter", "./fonts/inter-bold", normal, 700);
|
||||
|
@@ -3,6 +3,7 @@
|
||||
// Global Footer Styles
|
||||
footer {
|
||||
width: 100%;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.7;
|
||||
padding: 1.5em 2.5em;
|
||||
box-sizing: border-box;
|
||||
|
@@ -7,7 +7,10 @@ body {
|
||||
margin: 0 auto;
|
||||
background-color: $color-gray-background; // really just the color of header & footer
|
||||
color: $color-text;
|
||||
font-family: $webfont-roboto, $system-fonts-emoji;
|
||||
font-family: $webfont-inter;
|
||||
font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
|
||||
font-kerning: normal;
|
||||
font-variant-ligatures: normal;
|
||||
line-height: 1.5;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
@@ -23,7 +23,7 @@ header {
|
||||
margin: 0 0 0 0.8em;
|
||||
font-size: 1.5em;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.01em;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
svg {
|
||||
|
@@ -11,6 +11,7 @@ main#home {
|
||||
margin: 0 0 0.6em 0;
|
||||
font-size: 1.6em;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.015em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@@ -18,16 +19,20 @@ main#home {
|
||||
margin: 0.6em 0;
|
||||
font-size: 1.3em;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.025em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.8em 0;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
font-size: 0.5em;
|
||||
letter-spacing: -0.005em;
|
||||
line-height: 0;
|
||||
margin-right: 0.1em;
|
||||
position: relative;
|
||||
|
@@ -7,10 +7,11 @@ main#list {
|
||||
margin: 0 auto;
|
||||
|
||||
section.year {
|
||||
font-size: 1.1em;
|
||||
font-size: 1.05em;
|
||||
|
||||
h2 {
|
||||
font-size: 1.8em;
|
||||
font-size: 2.25em;
|
||||
letter-spacing: -0.025em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -22,6 +23,7 @@ main#list {
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
letter-spacing: -0.015em;
|
||||
|
||||
div.date {
|
||||
color: $color-medium;
|
||||
|
@@ -9,6 +9,7 @@ main#single {
|
||||
article div {
|
||||
&#content {
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.011em;
|
||||
line-height: 1.7;
|
||||
|
||||
h1,
|
||||
|
@@ -8,6 +8,7 @@ main#video {
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
letter-spacing: -0.005em;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
@@ -16,6 +17,7 @@ main#video {
|
||||
|
||||
p {
|
||||
font-size: 0.85em;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.5;
|
||||
color: #777777;
|
||||
margin: 1.25em;
|
||||
|
Reference in New Issue
Block a user