From 1f7ef6f7f77ab3e1f42bf917d9694439682a66ce Mon Sep 17 00:00:00 2001 From: Adam Piontek Date: Fri, 9 Apr 2021 14:08:05 -0400 Subject: [PATCH] switched to source serif pro as main font, fixed some other styling --- assets/css/_bs-custom.scss | 13 ++-- assets/css/_fonts.scss | 25 ++++---- assets/css/_nav-bar-help.scss | 59 ++++++++++--------- assets/css/app.scss | 12 ++-- assets/package-lock.json | 11 ++++ assets/package.json | 1 + .../templates/layout/root.html.leex | 4 +- 7 files changed, 73 insertions(+), 52 deletions(-) diff --git a/assets/css/_bs-custom.scss b/assets/css/_bs-custom.scss index 54e72e3..a950ad1 100644 --- a/assets/css/_bs-custom.scss +++ b/assets/css/_bs-custom.scss @@ -1,14 +1,11 @@ /* Bootstrap custom variable overrides */ // Typography -// -// Font, line-height, and color for body text, headings, and more. - $font-size-base: 1.125rem; -$font-family-sans-serif: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, - "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; -$font-family-base: $font-family-sans-serif; + +$font-family-serif: "Source Serif Pro", "Iowan Old Style", "Apple Garamond", + Baskerville, "Times New Roman", "Droid Serif", Times, serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; $font-family-brand: Righteous, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, @@ -17,6 +14,8 @@ $font-family-brand: Righteous, system-ui, -apple-system, "Segoe UI", Roboto, $font-family-monospace: "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; +$font-family-base: $font-family-serif; + // Features $enable-shadows: true; $enable-negative-margins: true; diff --git a/assets/css/_fonts.scss b/assets/css/_fonts.scss index 8429604..60962e2 100644 --- a/assets/css/_fonts.scss +++ b/assets/css/_fonts.scss @@ -11,14 +11,17 @@ @import "../node_modules/@fontsource/jetbrains-mono/700.css"; /* bold | normal */ @import "../node_modules/@fontsource/jetbrains-mono/800.css"; /* bolder | normal */ -/* Fontsource Open Sans */ -@import "../node_modules/@fontsource/open-sans/300.css"; /* light | normal */ -@import "../node_modules/@fontsource/open-sans/300-italic.css"; /* light | italic */ -@import "../node_modules/@fontsource/open-sans/400.css"; /* normal | normal */ -@import "../node_modules/@fontsource/open-sans/400-italic.css"; /* normal | italic */ -@import "../node_modules/@fontsource/open-sans/600.css"; /* heavier? | normal */ -@import "../node_modules/@fontsource/open-sans/600-italic.css"; /* heavier | italic */ -@import "../node_modules/@fontsource/open-sans/700.css"; /* bold | normal */ -@import "../node_modules/@fontsource/open-sans/700-italic.css"; /* bold | italic */ -@import "../node_modules/@fontsource/open-sans/800.css"; /* bolder? | normal */ -@import "../node_modules/@fontsource/open-sans/800-italic.css"; /* bolder? | italic */ + +/* Fontsource Source Code Pro */ +@import "../node_modules/@fontsource/source-serif-pro/200.css"; /* light | normal */ +@import "../node_modules/@fontsource/source-serif-pro/200-italic.css"; /* light | italic */ +@import "../node_modules/@fontsource/source-serif-pro/300.css"; /* light | normal */ +@import "../node_modules/@fontsource/source-serif-pro/300-italic.css"; /* light | italic */ +@import "../node_modules/@fontsource/source-serif-pro/400.css"; /* normal | normal */ +@import "../node_modules/@fontsource/source-serif-pro/400-italic.css"; /* normal | italic */ +@import "../node_modules/@fontsource/source-serif-pro/600.css"; /* heavier? | normal */ +@import "../node_modules/@fontsource/source-serif-pro/600-italic.css"; /* heavier | italic */ +@import "../node_modules/@fontsource/source-serif-pro/700.css"; /* bold | normal */ +@import "../node_modules/@fontsource/source-serif-pro/700-italic.css"; /* bold | italic */ +@import "../node_modules/@fontsource/source-serif-pro/900.css"; /* bolder? | normal */ +@import "../node_modules/@fontsource/source-serif-pro/900-italic.css"; /* bolder? | italic */ diff --git a/assets/css/_nav-bar-help.scss b/assets/css/_nav-bar-help.scss index 8343560..2955cca 100644 --- a/assets/css/_nav-bar-help.scss +++ b/assets/css/_nav-bar-help.scss @@ -1,19 +1,22 @@ .navbar-expand-lg { .nav-item { margin-left: 2px; - .nav-link { - padding: 0 0 0 6px; - margin: 8px 0 8px 0; - border-left: 6px transparent solid; - &.active { - border-left: 6px $secondary solid; - } - } - &:hover { - .nav-link { - color: $primary !important; - border-left: 6px $secondary solid; + a { + &.nav-link { + padding: 0 0 0 6px; + margin: 8px 0 8px 0; + border-left: 6px transparent solid; + &.active { + border-left: 6px $secondary solid; + border-bottom: none; + } + &:hover, &:active { + color: $primary !important; + border-left: 6px $secondary solid; + border-bottom: none; + } } + } } } @@ -22,22 +25,22 @@ .navbar-expand-lg { .nav-item { margin-left: 0; - .nav-link { - padding: 0 0 6px 0; - margin: 0 12px 0 12px; - border-left: 0; - border-top: 6px transparent solid; - border-bottom: 6px transparent solid; - &.active { - border-left: 0; - border-bottom: 6px $secondary solid; - } - } - &:hover { - .nav-link { - color: $primary !important; - border-left: 0; - border-bottom: 6px $secondary solid; + a { + &.nav-link { + padding: 0 0 6px 0; + margin: 0 12px 0 12px; + border-left: none; + border-top: 6px transparent solid; + border-bottom: 6px transparent solid; + &.active { + border-left: none; + border-bottom: 6px $secondary solid; + } + &:hover, &:active { + color: $primary !important; + border-left: none; + border-bottom: 6px $secondary solid; + } } } } diff --git a/assets/css/app.scss b/assets/css/app.scss index e2f8f35..b2669b6 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -27,6 +27,7 @@ pre, code, .font-monospace { font-family: $font-family-monospace; font-weight: 300; + font-size: 15px; } pre.chroma { padding: 0.75rem 1rem; @@ -49,9 +50,9 @@ body { height: 100%; } a { - color: white; - // border-bottom: $secondary 2px solid; - text-decoration: underline; + color: rgba($white, 0.75); + border-bottom: $gray-600 2px solid; + text-decoration: none; &.navbar-brand, &.nav-link { border-bottom: none; @@ -65,7 +66,10 @@ a { &:hover { color: $primary; text-decoration: none; - border-bottom: $secondary 2px solid; + border-bottom: $secondary 3px solid; + &.navbar-brand { + border-bottom: none; + } } } .border-gray-900 { diff --git a/assets/package-lock.json b/assets/package-lock.json index 9d4f2e3..4d7683d 100644 --- a/assets/package-lock.json +++ b/assets/package-lock.json @@ -9,6 +9,7 @@ "@fontsource/jetbrains-mono": "^4.2.2", "@fontsource/open-sans": "^4.2.2", "@fontsource/righteous": "^4.x", + "@fontsource/source-serif-pro": "^4.2.3", "@mdi/svg": "^5.x", "@popperjs/core": "^2.x", "babel-plugin-prismjs": "^2.0.1", @@ -1298,6 +1299,11 @@ "resolved": "https://registry.npmjs.org/@fontsource/righteous/-/righteous-4.2.2.tgz", "integrity": "sha512-mUjFblfCV6eWZj+lkrXFZsER8pq/3LOCoT3ezKPcerYH7StXQ8Gflcs0uMqacZP7CVLyzVUkPvSgLMQJTQvypg==" }, + "node_modules/@fontsource/source-serif-pro": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/@fontsource/source-serif-pro/-/source-serif-pro-4.2.3.tgz", + "integrity": "sha512-dIOsmjqd8LPD4DM6SddqgVVliYizgNNpKg+2vOo7Lt1trW+Pvc1Y8x7tYsRZlsetVhvJ4UcgqLRgfVl48q00Yg==" + }, "node_modules/@mdi/svg": { "version": "5.9.55", "resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-5.9.55.tgz", @@ -10974,6 +10980,11 @@ "resolved": "https://registry.npmjs.org/@fontsource/righteous/-/righteous-4.2.2.tgz", "integrity": "sha512-mUjFblfCV6eWZj+lkrXFZsER8pq/3LOCoT3ezKPcerYH7StXQ8Gflcs0uMqacZP7CVLyzVUkPvSgLMQJTQvypg==" }, + "@fontsource/source-serif-pro": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/@fontsource/source-serif-pro/-/source-serif-pro-4.2.3.tgz", + "integrity": "sha512-dIOsmjqd8LPD4DM6SddqgVVliYizgNNpKg+2vOo7Lt1trW+Pvc1Y8x7tYsRZlsetVhvJ4UcgqLRgfVl48q00Yg==" + }, "@mdi/svg": { "version": "5.9.55", "resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-5.9.55.tgz", diff --git a/assets/package.json b/assets/package.json index 2ede035..8b86515 100644 --- a/assets/package.json +++ b/assets/package.json @@ -10,6 +10,7 @@ "@fontsource/jetbrains-mono": "^4.2.2", "@fontsource/open-sans": "^4.2.2", "@fontsource/righteous": "^4.x", + "@fontsource/source-serif-pro": "^4.2.3", "@mdi/svg": "^5.x", "@popperjs/core": "^2.x", "babel-plugin-prismjs": "^2.0.1", diff --git a/lib/home73k_web/templates/layout/root.html.leex b/lib/home73k_web/templates/layout/root.html.leex index 9b869d4..542cb26 100644 --- a/lib/home73k_web/templates/layout/root.html.leex +++ b/lib/home73k_web/templates/layout/root.html.leex @@ -10,9 +10,9 @@ " as="font" type="font/woff2" crossorigin="anonymous"> - " as="font" type="font/woff2" crossorigin="anonymous"> + " as="font" type="font/woff2" crossorigin="anonymous"> " as="font" type="font/woff2" crossorigin="anonymous"> - " as="font" type="font/woff2" crossorigin="anonymous"> + " as="font" type="font/woff2" crossorigin="anonymous">