diff options
author | Leonardo Faria <leonardofaria@gmail.com> | 2020-10-28 05:45:53 +0300 |
---|---|---|
committer | Leonardo Faria <leonardofaria@gmail.com> | 2020-10-28 05:45:53 +0300 |
commit | fe57713d280a249b56d35324e93b249b9c37fc46 (patch) | |
tree | 623b0ef6540adecf24b9749819dd1a5aa11a95db | |
parent | 8bebb1653e121a7337d70e6189b78a31868514d6 (diff) |
Improve typography
-rw-r--r-- | assets/css/site.css | 7 | ||||
-rw-r--r-- | assets/css/tailwind.config.js | 39 | ||||
-rw-r--r-- | layouts/_default/single.html | 2 | ||||
-rw-r--r-- | layouts/partials/head.html | 3 | ||||
-rw-r--r-- | layouts/partials/header.html | 4 |
5 files changed, 49 insertions, 6 deletions
diff --git a/assets/css/site.css b/assets/css/site.css index 084fe8f..d5c0c53 100644 --- a/assets/css/site.css +++ b/assets/css/site.css @@ -52,7 +52,7 @@ html { .article { @apply px-5; @apply pb-5; - @apply text-gray-500; + @apply text-gray-600; } .article__header { @@ -65,6 +65,10 @@ html { @apply mb-4; } +.article__content > p:first-of-type { + @apply text-2xl; +} + .article a { @apply underline; @apply text-gray-700; @@ -85,6 +89,7 @@ html { .article h1 { @apply text-5xl; @apply font-semibold; + @apply tracking-tighter; @apply text-gray-700; } diff --git a/assets/css/tailwind.config.js b/assets/css/tailwind.config.js index 6e75cf0..ac6d7f2 100644 --- a/assets/css/tailwind.config.js +++ b/assets/css/tailwind.config.js @@ -1,9 +1,44 @@ module.exports = { theme: { - extend: {} + fontFamily: { + sans: [ + 'Inter', + 'system-ui', + '-apple-system', + 'BlinkMacSystemFont', + 'Segoe UI', + 'Roboto', + 'Helvetica Neue', + 'Arial', + 'Noto Sans', + 'sans-serif', + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji', + ], + serif: [ + 'Georgia', + 'Cambria', + 'Times New Roman', + 'Times', + 'serif', + ], + mono: [ + 'Menlo', + 'Monaco', + 'Consolas', + 'Liberation Mono', + 'Courier New', + 'monospace' + ] + }, }, variants: {}, plugins: [ require('@tailwindcss/ui'), - ] + ], + future: { + removeDeprecatedGapUtilities: true, + }, } diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 60bc230..0409b26 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -16,7 +16,7 @@ </header> {{ end }} - <div class="py-5"> + <div class="article__content py-5"> {{ .Content }} </div> diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 79a4489..0eada8b 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -83,6 +83,9 @@ {{ hugo.Generator }} + <link rel="dns-prefetch" href="//fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"> {{ if .Site.IsServer }} {{ $style := resources.Get "css/styles.css" | postCSS (dict "config" "./assets/css/dev/postcss.config.js") }} <link rel="stylesheet" href="{{ $style.RelPermalink }}"> diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 9a913f4..472daa8 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -23,7 +23,7 @@ <img alt="{{ .Site.Title }}" class="w-24 h-24 lg:w-32 lg:h-32 rounded-full mb-3" src="{{.Site.Params.avatar | absURL}}"> {{ end }} {{ end }} - <a href="{{ .Site.Home.Permalink }}" class="text-4xl font-normal flex flex-shrink-0 text-center text-white focus:text-gray-300 opacity-75 hover:opacity-100 transition duration-300 ease-in-out"> + <a href="{{ .Site.Home.Permalink }}" class="tracking-tighter text-4xl font-semibold flex flex-shrink-0 text-center text-white focus:text-gray-300 opacity-75 hover:opacity-100 transition duration-300 ease-in-out"> {{ .Site.Title }} </a> @@ -36,7 +36,7 @@ {{else}} <header id="header" class="w-full m-0 fixed z-10 transition-all duration-300 ease-in-out border-t-4 border-gray-300 py-4 backdrop-filter-blur"> <div id="header-container" class="max-w-7xl mx-auto p-6 flex items-center flex-wrap lg:flex-no-wrap relative justify-between"> - <a href="{{ .Site.Home.Permalink }}" class="leading-10 text-3xl font-normal text-gray-600 flex flex-shrink-0"> + <a href="{{ .Site.Home.Permalink }}" class="tracking-tighter leading-10 text-3xl font-semibold text-gray-600 flex flex-shrink-0"> {{ .Site.Title }} </a> |