From 445049a89d33e56245553230d868b310dc92a298 Mon Sep 17 00:00:00 2001 From: Cinder Date: Wed, 19 Feb 2025 07:25:59 -0800 Subject: [PATCH] [Themes] Add font options (#919) --- app/javascript/src/javascripts/themes.js | 2 +- .../src/javascripts/utility/storage.js | 3 + app/javascript/src/styles/base.scss | 1 + app/javascript/src/styles/base/_fonts.scss | 161 ++++++++++++++++++ app/javascript/src/styles/base/_vars.scss | 2 +- .../src/styles/common/post_search.scss | 2 +- .../src/styles/views/posts/index/_index.scss | 2 +- app/views/layouts/_theme_include.html.erb | 1 + app/views/static/theme.html.erb | 13 ++ public/fonts/Lato/Lato-Bold.woff | Bin 0 -> 36732 bytes public/fonts/Lato/Lato-Bold.woff2 | Bin 0 -> 28596 bytes public/fonts/Lato/Lato-BoldItalic.woff | Bin 0 -> 39376 bytes public/fonts/Lato/Lato-BoldItalic.woff2 | Bin 0 -> 30560 bytes public/fonts/Lato/Lato-Italic.woff | Bin 0 -> 39104 bytes public/fonts/Lato/Lato-Italic.woff2 | Bin 0 -> 30308 bytes public/fonts/Lato/Lato-Regular.woff | Bin 0 -> 37524 bytes public/fonts/Lato/Lato-Regular.woff2 | Bin 0 -> 29256 bytes public/fonts/Lexend/Lexend-Bold.woff | Bin 0 -> 45344 bytes public/fonts/Lexend/Lexend-Bold.woff2 | Bin 0 -> 32664 bytes public/fonts/Lexend/Lexend-BoldItalic.woff | Bin 0 -> 57368 bytes public/fonts/Lexend/Lexend-BoldItalic.woff2 | Bin 0 -> 39172 bytes public/fonts/Lexend/Lexend-Italic.woff | Bin 0 -> 67816 bytes public/fonts/Lexend/Lexend-Italic.woff2 | Bin 0 -> 44496 bytes public/fonts/Lexend/Lexend-Regular.woff | Bin 0 -> 43980 bytes public/fonts/Lexend/Lexend-Regular.woff2 | Bin 0 -> 31744 bytes .../fonts/OpenDyslexic/OpenDyslexic-Bold.woff | Bin 0 -> 151148 bytes .../OpenDyslexic/OpenDyslexic-Bold.woff2 | Bin 0 -> 95724 bytes .../OpenDyslexic/OpenDyslexic-BoldItalic.woff | Bin 0 -> 154704 bytes .../OpenDyslexic-BoldItalic.woff2 | Bin 0 -> 98316 bytes .../OpenDyslexic/OpenDyslexic-Italic.woff | Bin 0 -> 153900 bytes .../OpenDyslexic/OpenDyslexic-Italic.woff2 | Bin 0 -> 97856 bytes .../OpenDyslexic/OpenDyslexic-Regular.woff | Bin 0 -> 147252 bytes .../OpenDyslexic/OpenDyslexic-Regular.woff2 | Bin 0 -> 93940 bytes public/fonts/OpenSans/OpenSans-Bold.woff | Bin 0 -> 78100 bytes public/fonts/OpenSans/OpenSans-Bold.woff2 | Bin 0 -> 58152 bytes .../fonts/OpenSans/OpenSans-BoldItalic.woff | Bin 0 -> 81320 bytes .../fonts/OpenSans/OpenSans-BoldItalic.woff2 | Bin 0 -> 60184 bytes public/fonts/OpenSans/OpenSans-Italic.woff | Bin 0 -> 83972 bytes public/fonts/OpenSans/OpenSans-Italic.woff2 | Bin 0 -> 62776 bytes public/fonts/OpenSans/OpenSans-Regular.woff | Bin 0 -> 80224 bytes public/fonts/OpenSans/OpenSans-Regular.woff2 | Bin 0 -> 60132 bytes 41 files changed, 183 insertions(+), 4 deletions(-) create mode 100644 app/javascript/src/styles/base/_fonts.scss create mode 100644 public/fonts/Lato/Lato-Bold.woff create mode 100644 public/fonts/Lato/Lato-Bold.woff2 create mode 100644 public/fonts/Lato/Lato-BoldItalic.woff create mode 100644 public/fonts/Lato/Lato-BoldItalic.woff2 create mode 100644 public/fonts/Lato/Lato-Italic.woff create mode 100644 public/fonts/Lato/Lato-Italic.woff2 create mode 100644 public/fonts/Lato/Lato-Regular.woff create mode 100644 public/fonts/Lato/Lato-Regular.woff2 create mode 100644 public/fonts/Lexend/Lexend-Bold.woff create mode 100644 public/fonts/Lexend/Lexend-Bold.woff2 create mode 100644 public/fonts/Lexend/Lexend-BoldItalic.woff create mode 100644 public/fonts/Lexend/Lexend-BoldItalic.woff2 create mode 100644 public/fonts/Lexend/Lexend-Italic.woff create mode 100644 public/fonts/Lexend/Lexend-Italic.woff2 create mode 100644 public/fonts/Lexend/Lexend-Regular.woff create mode 100644 public/fonts/Lexend/Lexend-Regular.woff2 create mode 100644 public/fonts/OpenDyslexic/OpenDyslexic-Bold.woff create mode 100644 public/fonts/OpenDyslexic/OpenDyslexic-Bold.woff2 create mode 100644 public/fonts/OpenDyslexic/OpenDyslexic-BoldItalic.woff create mode 100644 public/fonts/OpenDyslexic/OpenDyslexic-BoldItalic.woff2 create mode 100644 public/fonts/OpenDyslexic/OpenDyslexic-Italic.woff create mode 100644 public/fonts/OpenDyslexic/OpenDyslexic-Italic.woff2 create mode 100644 public/fonts/OpenDyslexic/OpenDyslexic-Regular.woff create mode 100644 public/fonts/OpenDyslexic/OpenDyslexic-Regular.woff2 create mode 100644 public/fonts/OpenSans/OpenSans-Bold.woff create mode 100644 public/fonts/OpenSans/OpenSans-Bold.woff2 create mode 100644 public/fonts/OpenSans/OpenSans-BoldItalic.woff create mode 100644 public/fonts/OpenSans/OpenSans-BoldItalic.woff2 create mode 100644 public/fonts/OpenSans/OpenSans-Italic.woff create mode 100644 public/fonts/OpenSans/OpenSans-Italic.woff2 create mode 100644 public/fonts/OpenSans/OpenSans-Regular.woff create mode 100644 public/fonts/OpenSans/OpenSans-Regular.woff2 diff --git a/app/javascript/src/javascripts/themes.js b/app/javascript/src/javascripts/themes.js index ccff3abeb..d57c28153 100644 --- a/app/javascript/src/javascripts/themes.js +++ b/app/javascript/src/javascripts/themes.js @@ -4,7 +4,7 @@ import LStorage from "./utility/storage"; const Theme = {}; Theme.Values = { - "Theme": ["Main", "Extra", "Palette", "StickyHeader", "Navbar", "Gestures", "ForumNotif"], + "Theme": ["Main", "Extra", "Palette", "Font", "StickyHeader", "Navbar", "Gestures", "ForumNotif"], "Posts": ["WikiExcerpt", "StickySearch"], }; diff --git a/app/javascript/src/javascripts/utility/storage.js b/app/javascript/src/javascripts/utility/storage.js index d02ef5170..601b98d60 100644 --- a/app/javascript/src/javascripts/utility/storage.js +++ b/app/javascript/src/javascripts/utility/storage.js @@ -57,6 +57,9 @@ LStorage.Theme = { /** @returns {string} Colorblind-friendly palette (default / deut / trit) */ Palette: ["theme-palette", "default"], + /** @returns {string} Font family (verdana / leto / lexend / dyslexic ) */ + Font: ["theme-font", "Verdana"], + /** @returns {string} Position of the navbar on the post page (top / bottom / both / none) */ Navbar: ["theme-nav", "top"], diff --git a/app/javascript/src/styles/base.scss b/app/javascript/src/styles/base.scss index 227cdab7f..2cb54aaad 100644 --- a/app/javascript/src/styles/base.scss +++ b/app/javascript/src/styles/base.scss @@ -8,6 +8,7 @@ @import "base/base"; @import "base/links"; @import "base/fontawesome"; +@import "base/fonts"; @import "common/standard_variables"; @import "common/standard_elements"; diff --git a/app/javascript/src/styles/base/_fonts.scss b/app/javascript/src/styles/base/_fonts.scss new file mode 100644 index 000000000..511b14388 --- /dev/null +++ b/app/javascript/src/styles/base/_fonts.scss @@ -0,0 +1,161 @@ +// Picker +body { + &[data-th-font="Lato"] { font-family: "Lato", $base_font_family; } + &[data-th-font="Lexend"] { font-family: "Lexend", $base_font_family; } + &[data-th-font="Monospace"] { font-family: monospace, monospace; } + &[data-th-font="OpenDyslexic"] { font-family: "OpenDyslexic", $base_font_family; } + &[data-th-font="OpenSans"] { font-family: "OpenSans", $base_font_family; } + &[data-th-font="ComicSans"] { font-family: "Comic Sans MS", "Comic Sans", cursive; } +} + +/** Font Definitions **/ +// Lato +@font-face { + font-family: "Lato"; + src: url("/public/fonts/Lato/Lato-Regular.woff2") format("woff2"), + url("/public/fonts/Lato/Lato-Regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Lato"; + src: url("/public/fonts/Lato/Lato-Bold.woff2") format("woff2"), + url("/public/fonts/Lato/Lato-Bold.woff") format("woff"); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Lato"; + src: url("/public/fonts/Lato/Lato-Italic.woff2") format("woff2"), + url("/public/fonts/Lato/Lato-Italic.woff") format("woff"); + font-weight: normal; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "Lato"; + src: url("/public/fonts/Lato/Lato-BoldItalic.woff2") format("woff2"), + url("/public/fonts/Lato/Lato-BoldItalic.woff") format("woff"); + font-weight: bold; + font-style: italic; + font-display: swap; +} + + +// Lexend +@font-face { + font-family: "Lexend"; + src: url("/public/fonts/Lexend/Lexend-Regular.woff2") format("woff2"), + url("/public/fonts/Lexend/Lexend-Regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Lexend"; + src: url("/public/fonts/Lexend/Lexend-Bold.woff2") format("woff2"), + url("/public/fonts/Lexend/Lexend-Bold.woff") format("woff"); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Lexend"; + src: url("/public/fonts/Lexend/Lexend-Italic.woff2") format("woff2"), + url("/public/fonts/Lexend/Lexend-Italic.woff") format("woff"); + font-weight: normal; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "Lexend"; + src: url("/public/fonts/Lexend/Lexend-BoldItalic.woff2") format("woff2"), + url("/public/fonts/Lexend/Lexend-BoldItalic.woff") format("woff"); + font-weight: bold; + font-style: italic; + font-display: swap; +} + + +// OpenDyslexic +@font-face { + font-family: "OpenDyslexic"; + src: url("/public/fonts/OpenDyslexic/OpenDyslexic-Regular.woff2") format("woff2"), + url("/public/fonts/OpenDyslexic/OpenDyslexic-Regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "OpenDyslexic"; + src: url("/public/fonts/OpenDyslexic/OpenDyslexic-Bold.woff2") format("woff2"), + url("/public/fonts/OpenDyslexic/OpenDyslexic-Bold.woff") format("woff"); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "OpenDyslexic"; + src: url("/public/fonts/OpenDyslexic/OpenDyslexic-Italic.woff2") format("woff2"), + url("/public/fonts/OpenDyslexic/OpenDyslexic-Italic.woff") format("woff"); + font-weight: normal; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "OpenDyslexic"; + src: url("/public/fonts/OpenDyslexic/OpenDyslexic-BoldItalic.woff2") format("woff2"), + url("/public/fonts/OpenDyslexic/OpenDyslexic-BoldItalic.woff") format("woff"); + font-weight: bold; + font-style: italic; + font-display: swap; +} + + +// OpenSans +@font-face { + font-family: "OpenSans"; + src: url("/public/fonts/OpenSans/OpenSans-Regular.woff2") format("woff2"), + url("/public/fonts/OpenSans/OpenSans-Regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "OpenSans"; + src: url("/public/fonts/OpenSans/OpenSans-Bold.woff2") format("woff2"), + url("/public/fonts/OpenSans/OpenSans-Bold.woff") format("woff"); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "OpenSans"; + src: url("/public/fonts/OpenSans/OpenSans-Italic.woff2") format("woff2"), + url("/public/fonts/OpenSans/OpenSans-Italic.woff") format("woff"); + font-weight: normal; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "OpenSans"; + src: url("/public/fonts/OpenSans/OpenSans-BoldItalic.woff2") format("woff2"), + url("/public/fonts/OpenSans/OpenSans-BoldItalic.woff") format("woff"); + font-weight: bold; + font-style: italic; + font-display: swap; +} diff --git a/app/javascript/src/styles/base/_vars.scss b/app/javascript/src/styles/base/_vars.scss index 9d48be57e..c8f7ae949 100644 --- a/app/javascript/src/styles/base/_vars.scss +++ b/app/javascript/src/styles/base/_vars.scss @@ -20,7 +20,7 @@ $dtext_h3_size: 1.6em; $dtext_h4_size: 1.4em; $dtext_h5_size: 1.2em; $dtext_h6_size: 1em; -$base_font_family: Verdana, sans-serif; +$base_font_family: Verdana, Geneva, sans-serif; $box-shadow-size: 2px 2px 5px; diff --git a/app/javascript/src/styles/common/post_search.scss b/app/javascript/src/styles/common/post_search.scss index ede222255..f9655f607 100644 --- a/app/javascript/src/styles/common/post_search.scss +++ b/app/javascript/src/styles/common/post_search.scss @@ -13,7 +13,7 @@ textarea { // Override default texarea styles - font-family: Verdana, sans-serif; + font-family: $base_font_family; font-size: 1rem; line-height: 1rem; padding: 0.5rem 0 0.5rem 0.5rem; diff --git a/app/javascript/src/styles/views/posts/index/_index.scss b/app/javascript/src/styles/views/posts/index/_index.scss index bfd376b51..0f24b040d 100644 --- a/app/javascript/src/styles/views/posts/index/_index.scss +++ b/app/javascript/src/styles/views/posts/index/_index.scss @@ -101,7 +101,7 @@ body.c-posts.a-index, body.c-favorites.a-index { // Match the searchbox padding: 0.5em; - font-family: Verdana, sans-serif; + font-family: $base_font_family; font-size: 1.05em; } } diff --git a/app/views/layouts/_theme_include.html.erb b/app/views/layouts/_theme_include.html.erb index 4add60a81..b4b9e144c 100644 --- a/app/views/layouts/_theme_include.html.erb +++ b/app/views/layouts/_theme_include.html.erb @@ -8,6 +8,7 @@ "th-sheader": localStorage.getItem("theme-sheader") || false, "th-forumnotif": localStorage.getItem("theme-forumnotif") || false, "th-palette": localStorage.getItem("theme-palette") || "default", + "th-font": localStorage.getItem("theme-font") || "Verdana", "th-nav": localStorage.getItem("theme-nav") || "top", // Settings diff --git a/app/views/static/theme.html.erb b/app/views/static/theme.html.erb index fd9087cf9..283ba896b 100644 --- a/app/views/static/theme.html.erb +++ b/app/views/static/theme.html.erb @@ -45,6 +45,18 @@ + + + +

Features

+

Navigation