From 299ab5dd14032c21c7ef657f73b4d1e1b1192423 Mon Sep 17 00:00:00 2001 From: Adam Piontek Date: Thu, 25 Feb 2021 17:20:50 -0500 Subject: [PATCH] implemented lato font, reorganized CSS, link-ified navbar-brand --- assets/css/_bs-custom.scss | 12 +++ assets/css/_fonts.scss | 11 +++ assets/css/_phx-liveview.scss | 52 ++++++++++ assets/css/_svg-icons.scss | 21 ++++ assets/css/app.scss | 89 ++--------------- assets/package-lock.json | 98 +++++++++++++++++++ assets/package.json | 2 + assets/webpack.config.js | 13 +++ .../templates/layout/_navbar.html.eex | 4 +- 9 files changed, 221 insertions(+), 81 deletions(-) create mode 100644 assets/css/_bs-custom.scss create mode 100644 assets/css/_fonts.scss create mode 100644 assets/css/_phx-liveview.scss create mode 100644 assets/css/_svg-icons.scss diff --git a/assets/css/_bs-custom.scss b/assets/css/_bs-custom.scss new file mode 100644 index 00000000..53335e0e --- /dev/null +++ b/assets/css/_bs-custom.scss @@ -0,0 +1,12 @@ +/* Bootstrap custom variable overrides */ + +// Typography +// +// Font, line-height, and color for body text, headings, and more. + +// stylelint-disable value-keyword-case +$font-family-sans-serif: Lato, 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-monospace: SFMono-Regular, Menlo, Monaco, Consolas, +// "Liberation Mono", "Courier New", monospace !important; diff --git a/assets/css/_fonts.scss b/assets/css/_fonts.scss new file mode 100644 index 00000000..1f401deb --- /dev/null +++ b/assets/css/_fonts.scss @@ -0,0 +1,11 @@ +/* Fontsource Lato */ +// @import "../node_modules/@fontsource/lato/100.css"; /* thin | normal */ +// @import "../node_modules/@fontsource/lato/100-italic.css"; /* thin | italic */ +// @import "../node_modules/@fontsource/lato/300.css"; /* light | normal */ +// @import "../node_modules/@fontsource/lato/300-italic.css"; /* light | italic */ +@import "../node_modules/@fontsource/lato/400.css"; /* normal | normal */ +// @import "../node_modules/@fontsource/lato/400-italic.css"; /* normal | italic */ +// @import "../node_modules/@fontsource/lato/700.css"; /* bold | normal */ +// @import "../node_modules/@fontsource/lato/700-italic.css"; /* bold | italic */ +// @import "../node_modules/@fontsource/lato/900.css"; /* black | normal */ +// @import "../node_modules/@fontsource/lato/900-italic.css"; /* black | italic */ diff --git a/assets/css/_phx-liveview.scss b/assets/css/_phx-liveview.scss new file mode 100644 index 00000000..2d3b79a1 --- /dev/null +++ b/assets/css/_phx-liveview.scss @@ -0,0 +1,52 @@ +/* LiveView specific classes for your customizations */ +.phx-no-feedback.invalid-feedback, +.phx-no-feedback .invalid-feedback { + display: none; +} + +.phx-click-loading { + opacity: 0.5; + transition: opacity 1s ease-out; +} + +.phx-disconnected { + cursor: wait; +} +.phx-disconnected * { + pointer-events: none; +} + +.phx-modal { + opacity: 1 !important; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0, 0, 0); + background-color: rgba(0, 0, 0, 0.4); +} + +.phx-modal-content { + background-color: #fefefe; + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + width: 80%; +} + +.phx-modal-close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.phx-modal-close:hover, +.phx-modal-close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} \ No newline at end of file diff --git a/assets/css/_svg-icons.scss b/assets/css/_svg-icons.scss new file mode 100644 index 00000000..429dd81d --- /dev/null +++ b/assets/css/_svg-icons.scss @@ -0,0 +1,21 @@ +/* + SVG ICON SYSTEM + per https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4 + */ +.icon { + display: inline-flex; + align-self: center; +} + +.icon svg, +.icon img { + height: 1em; + width: 1em; + fill: currentColor; +} + +.icon.baseline svg, +.icon img { + top: 0.125em; + position: relative; +} diff --git a/assets/css/app.scss b/assets/css/app.scss index 32874401..05224e8c 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -1,86 +1,17 @@ -/* Bootstrap v5 */ +/* Fonts */ +@import "fonts"; + +/* Bootstrap custom variable overrides */ +@import "bs-custom"; + +/* Bootstrap v5 scss */ @import "~bootstrap/scss/bootstrap"; -/* SVG icon style helper */ -// [class*=" icon"], -// [class^="icon"] { -// width: 1em; -// height: 1em; -// stroke: currentColor; -// fill: currentColor; -// } - /*SVG ICON SYSTEM*/ -.icon { - display: inline-flex; - align-self: center; -} +@import "svg-icons"; -.icon svg, -.icon img { - height: 1em; - width: 1em; - fill: currentColor; -} - -.icon.baseline svg, -.icon img { - top: 0.125em; - position: relative; -} - -/* LiveView specific classes for your customizations */ -.phx-no-feedback.invalid-feedback, -.phx-no-feedback .invalid-feedback { - display: none; -} - -.phx-click-loading { - opacity: 0.5; - transition: opacity 1s ease-out; -} - -.phx-disconnected { - cursor: wait; -} -.phx-disconnected * { - pointer-events: none; -} - -.phx-modal { - opacity: 1 !important; - position: fixed; - z-index: 1; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: auto; - background-color: rgb(0, 0, 0); - background-color: rgba(0, 0, 0, 0.4); -} - -.phx-modal-content { - background-color: #fefefe; - margin: 15% auto; - padding: 20px; - border: 1px solid #888; - width: 80%; -} - -.phx-modal-close { - color: #aaa; - float: right; - font-size: 28px; - font-weight: bold; -} - -.phx-modal-close:hover, -.phx-modal-close:focus { - color: black; - text-decoration: none; - cursor: pointer; -} +/* LiveView specific CSS */ +@import "phx-liveview"; /* Alerts and form errors */ .alert:empty { diff --git a/assets/package-lock.json b/assets/package-lock.json index b9ef6f97..be8971df 100644 --- a/assets/package-lock.json +++ b/assets/package-lock.json @@ -6,6 +6,7 @@ "": { "license": "MIT", "dependencies": { + "@fontsource/lato": "^4.2.1", "@fortawesome/fontawesome-free": "^5.15.2", "@mdi/svg": "^5.9.55", "@popperjs/core": "^2.8.4", @@ -24,6 +25,7 @@ "copy-webpack-plugin": "^7.x", "css-loader": "^5.x", "css-minimizer-webpack-plugin": "^1.x", + "file-loader": "^6.2.0", "glob-all": "^3.2.1", "mini-css-extract-plugin": "^1.x", "postcss": "^8.2.6", @@ -1272,6 +1274,11 @@ "node": ">=10.0.0" } }, + "node_modules/@fontsource/lato": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.2.1.tgz", + "integrity": "sha512-prsPmSttIWKF52AK6fNbe1a/wT3Rm5ho2qwegXlU0Qu72dksQIjGrttDtuvs3OlXdlmYXFTmLKOWQKwBMAsMmQ==" + }, "node_modules/@fortawesome/fontawesome-free": { "version": "5.15.2", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz", @@ -3608,6 +3615,58 @@ "reusify": "^1.0.4" } }, + "node_modules/file-loader": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz", + "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==", + "dev": true, + "dependencies": { + "loader-utils": "^2.0.0", + "schema-utils": "^3.0.0" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^4.0.0 || ^5.0.0" + } + }, + "node_modules/file-loader/node_modules/loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "dependencies": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + }, + "engines": { + "node": ">=8.9.0" + } + }, + "node_modules/file-loader/node_modules/schema-utils": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz", + "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==", + "dev": true, + "dependencies": { + "@types/json-schema": "^7.0.6", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, "node_modules/fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -10742,6 +10801,11 @@ "integrity": "sha512-HyYEUDeIj5rRQU2Hk5HTB2uHsbRQpF70nvMhVzi+VJR0X+xNEhjPui4/kBf3VeH/wqD28PT4sVOm8qqLjBrSZg==", "dev": true }, + "@fontsource/lato": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.2.1.tgz", + "integrity": "sha512-prsPmSttIWKF52AK6fNbe1a/wT3Rm5ho2qwegXlU0Qu72dksQIjGrttDtuvs3OlXdlmYXFTmLKOWQKwBMAsMmQ==" + }, "@fortawesome/fontawesome-free": { "version": "5.15.2", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz", @@ -12572,6 +12636,40 @@ "reusify": "^1.0.4" } }, + "file-loader": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz", + "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==", + "dev": true, + "requires": { + "loader-utils": "^2.0.0", + "schema-utils": "^3.0.0" + }, + "dependencies": { + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "schema-utils": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz", + "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.6", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + } + } + } + }, "fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", diff --git a/assets/package.json b/assets/package.json index 8d70ef66..34995eaa 100644 --- a/assets/package.json +++ b/assets/package.json @@ -7,6 +7,7 @@ "watch": "webpack --mode development --watch" }, "dependencies": { + "@fontsource/lato": "^4.2.1", "@fortawesome/fontawesome-free": "^5.15.2", "@mdi/svg": "^5.9.55", "@popperjs/core": "^2.8.4", @@ -25,6 +26,7 @@ "copy-webpack-plugin": "^7.x", "css-loader": "^5.x", "css-minimizer-webpack-plugin": "^1.x", + "file-loader": "^6.2.0", "glob-all": "^3.2.1", "mini-css-extract-plugin": "^1.x", "postcss": "^8.2.6", diff --git a/assets/webpack.config.js b/assets/webpack.config.js index 3f2c2d75..710ceafb 100644 --- a/assets/webpack.config.js +++ b/assets/webpack.config.js @@ -36,6 +36,19 @@ module.exports = (env, options) => { "postcss-loader", ], }, + { + test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/, + use: [ + { + loader: "file-loader", + options: { + esModule: false, + name: "[name].[ext]", + outputPath: "../fonts", + }, + }, + ], + }, { test: /\.svg$/, loader: "svg-sprite-loader", diff --git a/lib/bones73k_web/templates/layout/_navbar.html.eex b/lib/bones73k_web/templates/layout/_navbar.html.eex index 5d02c53b..e1362075 100644 --- a/lib/bones73k_web/templates/layout/_navbar.html.eex +++ b/lib/bones73k_web/templates/layout/_navbar.html.eex @@ -1,10 +1,10 @@