diff --git a/assets/sass/abstracts/_functions.scss b/assets/sass/abstracts/_functions.scss index e7fab7ee..82bd52bc 100644 --- a/assets/sass/abstracts/_functions.scss +++ b/assets/sass/abstracts/_functions.scss @@ -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; + } +} diff --git a/assets/sass/abstracts/_variables.scss b/assets/sass/abstracts/_variables.scss index bb31ee01..3742a675 100644 --- a/assets/sass/abstracts/_variables.scss +++ b/assets/sass/abstracts/_variables.scss @@ -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; diff --git a/assets/sass/components/_footer.scss b/assets/sass/components/_footer.scss index 2d868547..52670476 100644 --- a/assets/sass/components/_footer.scss +++ b/assets/sass/components/_footer.scss @@ -72,7 +72,7 @@ footer { &#copyright, &#poweredby { - line-height: 1.8; + line-height: 1.9; width: 50%; } diff --git a/assets/sass/components/_global.scss b/assets/sass/components/_global.scss index 5ec2fb0f..a0d37a96 100644 --- a/assets/sass/components/_global.scss +++ b/assets/sass/components/_global.scss @@ -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; } diff --git a/assets/sass/components/_webfonts.scss b/assets/sass/components/_webfonts.scss new file mode 100644 index 00000000..aae6194c --- /dev/null +++ b/assets/sass/components/_webfonts.scss @@ -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); diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 64429e37..5718bc91 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -7,6 +7,7 @@ @import 'abstracts/functions'; // Global Styles +@import 'components/webfonts'; @import 'components/global'; @import 'components/header'; @import 'components/footer'; diff --git a/assets/sass/pages/_home.scss b/assets/sass/pages/_home.scss index 2cd33034..5ef2caba 100644 --- a/assets/sass/pages/_home.scss +++ b/assets/sass/pages/_home.scss @@ -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; diff --git a/assets/sass/pages/_single.scss b/assets/sass/pages/_single.scss index 3cae0697..5721a432 100644 --- a/assets/sass/pages/_single.scss +++ b/assets/sass/pages/_single.scss @@ -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; + } + } } } } diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 4bda4f36..2104f361 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -4,15 +4,13 @@

{{ .Title }}

- by {{ .Site.Author.name }} - · {{ .Date.Format "January 2, 2006" }} - {{ with .Site.Params.gitRepo }}· Improve Post{{ end }} + by {{ .Site.Author.name }} + · {{ .Date.Format "January 2, 2006" }} + {{ with .Site.Params.gitRepo }}· Improve Post{{ end }}
diff --git a/layouts/index.headers b/layouts/index.headers index 10ef114d..c8cb4bc5 100644 --- a/layouts/index.headers +++ b/layouts/index.headers @@ -1,17 +1,18 @@ # Sensible default security headers # - More info: https://scotthelme.co.uk/hardening-your-http-response-headers/ # - Test website: https://securityheaders.com/ - /* Referrer-Policy: strict-origin-when-cross-origin X-Content-Type-Options: nosniff X-Frame-Options: sameorigin X-XSS-Protection: 1; mode=block +# Super long cache for web fonts (one year) +/fonts/* + Cache-Control: max-age=31536000, public, immutable, no-transform # Recommended MIME type for PWA manifests # https://github.com/w3c/manifest/issues/689 - /manifest.json Content-Type: application/manifest+json; charset=UTF-8 /*.webmanifest diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 2aaa111e..202bc21e 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -9,6 +9,9 @@ + + + {{ $style := resources.Get "sass/main.scss" | resources.ToCSS (dict "targetPath" "style.css") }} diff --git a/netlify.toml b/netlify.toml index 968f4249..e0900651 100644 --- a/netlify.toml +++ b/netlify.toml @@ -25,6 +25,9 @@ [context.deploy-preview] command = "yarn build:preview" +[context.branch-deploy] + command = "yarn build:preview" + # The most important headers and redirects are specified in the _headers and # _redirects files generated by Hugo. These are additional custom rules. diff --git a/static/fonts/roboto-latin-bold.eot b/static/fonts/roboto-latin-bold.eot new file mode 100644 index 00000000..0168f09b Binary files /dev/null and b/static/fonts/roboto-latin-bold.eot differ diff --git a/static/fonts/roboto-latin-bold.ttf b/static/fonts/roboto-latin-bold.ttf new file mode 100644 index 00000000..ea06a634 Binary files /dev/null and b/static/fonts/roboto-latin-bold.ttf differ diff --git a/static/fonts/roboto-latin-bold.woff b/static/fonts/roboto-latin-bold.woff new file mode 100644 index 00000000..0f14effb Binary files /dev/null and b/static/fonts/roboto-latin-bold.woff differ diff --git a/static/fonts/roboto-latin-bold.woff2 b/static/fonts/roboto-latin-bold.woff2 new file mode 100644 index 00000000..32b25eee Binary files /dev/null and b/static/fonts/roboto-latin-bold.woff2 differ diff --git a/static/fonts/roboto-latin-medium.eot b/static/fonts/roboto-latin-medium.eot new file mode 100644 index 00000000..2ec7bdd7 Binary files /dev/null and b/static/fonts/roboto-latin-medium.eot differ diff --git a/static/fonts/roboto-latin-medium.ttf b/static/fonts/roboto-latin-medium.ttf new file mode 100644 index 00000000..dd04ff19 Binary files /dev/null and b/static/fonts/roboto-latin-medium.ttf differ diff --git a/static/fonts/roboto-latin-medium.woff b/static/fonts/roboto-latin-medium.woff new file mode 100644 index 00000000..86992586 Binary files /dev/null and b/static/fonts/roboto-latin-medium.woff differ diff --git a/static/fonts/roboto-latin-medium.woff2 b/static/fonts/roboto-latin-medium.woff2 new file mode 100644 index 00000000..6362d7f6 Binary files /dev/null and b/static/fonts/roboto-latin-medium.woff2 differ diff --git a/static/fonts/roboto-latin-regular.eot b/static/fonts/roboto-latin-regular.eot new file mode 100644 index 00000000..4f348009 Binary files /dev/null and b/static/fonts/roboto-latin-regular.eot differ diff --git a/static/fonts/roboto-latin-regular.ttf b/static/fonts/roboto-latin-regular.ttf new file mode 100644 index 00000000..a97385df Binary files /dev/null and b/static/fonts/roboto-latin-regular.ttf differ diff --git a/static/fonts/roboto-latin-regular.woff b/static/fonts/roboto-latin-regular.woff new file mode 100644 index 00000000..69c88254 Binary files /dev/null and b/static/fonts/roboto-latin-regular.woff differ diff --git a/static/fonts/roboto-latin-regular.woff2 b/static/fonts/roboto-latin-regular.woff2 new file mode 100644 index 00000000..1a537015 Binary files /dev/null and b/static/fonts/roboto-latin-regular.woff2 differ