jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 15:16:40 -04:00
Code Issues Activity

switch to Roboto web font (#22)

Browse Source 
for now, at least. tired of waiting on Chromium to fix system fonts on Catalina.... https://bugs.chromium.org/p/chromium/issues/detail?id=1005969

Roboto seems closest to San Francisco.
This commit is contained in:
Jake Jarvis
2019-12-16 10:59:52 -05:00
committed by GitHub
parent 599400c51c
commit 87ea2db92f
24 changed files with 79 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
assets/sass/abstracts/_functions.scss
View File

@ -11,3 +11,21 @@
// Return non-gradient linear-gradient():
@return linear-gradient($color-opaque, $color-opaque);
}
// Web fonts (see components/_webfonts.scss)
@mixin font-face($family, $src-local, $src-local-alt, $src,
$style: normal, $weight: normal,
$range: U+000-5FF, $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'),
url('#{$src}.woff') format('woff');
// url('#{$src}.ttf') format('truetype'),
// url('#{$src}.eot') format('embedded-opentype');
unicode-range: $range;
}
}

4
assets/sass/abstracts/_variables.scss
View File

@ -1,13 +1,15 @@
@charset "UTF-8";
// System Fonts
// System fonts and web fonts
// https://markdotto.com/2018/02/07/github-system-fonts/
$system-fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$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;
// Misc Settings
$responsive-width: 890px;

2
assets/sass/components/_footer.scss
View File

@ -72,7 +72,7 @@ footer {
&#copyright,
&#poweredby {
line-height: 1.8;
line-height: 1.9;
width: 50%;
}

2
assets/sass/components/_global.scss
View File

@ -7,7 +7,7 @@ body {
margin: 0 auto;
background-color: $color-gray-background; // really just the color of header & footer
color: $color-text;
font-family: $system-fonts;
font-family: $webfont-roboto, $system-fonts-emoji;
line-height: 1.5;
box-sizing: border-box;
}

5
assets/sass/components/_webfonts.scss Normal file
View File

@ -0,0 +1,5 @@
@charset "UTF-8";
@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);

1
assets/sass/main.scss
View File

@ -7,6 +7,7 @@
@import 'abstracts/functions';
// Global Styles
@import 'components/webfonts';
@import 'components/global';
@import 'components/header';
@import 'components/footer';

17
assets/sass/pages/_home.scss
View File

@ -2,15 +2,14 @@
// Home Styles
main#home {
font-size: 1.4em;
font-weight: 300;
font-size: 1.3em;
max-width: 980px;
padding: 1.5em 1.75em 0.5em 1.75em;
margin: 0 auto;
h2 {
margin: 0 0 0.6em 0;
font-size: 1.4em;
font-size: 1.6em;
font-weight: 500;
line-height: 1.2;
@ -25,7 +24,7 @@ main#home {
h3 {
margin: 0.6em 0;
font-size: 1.2em;
font-size: 1.3em;
font-weight: 400;
line-height: 1.4;
}
@ -98,6 +97,16 @@ main#home {
line-height: 1.6;
padding: 1.2em 1.2em 0.2em 1.2em;
h2 {
font-size: 1.3em;
line-height: 1.4;
}
h3 {
font-size: 1.1em;
line-height: 1.4;
}
img#me {
width: 85px;
height: 85px;

27
assets/sass/pages/_single.scss
View File

@ -152,12 +152,17 @@ main#single {
color: $color-medium;
font-size: 0.85em;
line-height: 1.5;
letter-spacing: 0.08em;
letter-spacing: 0.075em;
a {
color: inherit;
}
span.dot {
margin: 0 0.1em;
font-weight: 700;
}
ul#tags {
margin-top: 0.5em;
padding: 0;
@ -165,7 +170,7 @@ main#single {
li {
display: inline;
margin: 0 0.7em;
margin: 0 0.8em;
text-transform: uppercase;
letter-spacing: 0.15em;
}
@ -182,8 +187,22 @@ main#single {
padding: 0.8em 1.5em;
article {
div#meta h1 {
font-size: 1.7em;
div#meta{
h1 {
font-size: 1.8em;
}
div#byline {
// hide "Improve Post" link on mobile
span#edit {
display: none;
}
// less space between tags
ul#tags li {
margin: 0 0.5em;
}
}
}
}
}