diff --git a/assets/css/app.scss b/assets/css/app.scss index 0d33aa8..7ebd9b6 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -34,34 +34,6 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts"; opacity: 0.95 !important; } -/* Alerts and form errors used by phx.new */ -.alert { - padding: 15px; - margin-bottom: 20px; - border: 1px solid transparent; - border-radius: 4px; -} -.alert-info { - color: #31708f; - background-color: #d9edf7; - border-color: #bce8f1; -} -.alert-warning { - color: #8a6d3b; - background-color: #fcf8e3; - border-color: #faebcc; -} -.alert-danger { - color: #a94442; - background-color: #f2dede; - border-color: #ebccd1; -} -.alert p { - margin-bottom: 0; -} -.alert:empty { - display: none; -} .invalid-feedback { color: #a94442; display: block; diff --git a/assets/css/components.scss b/assets/css/components.scss index d3c8d46..f46cc75 100644 --- a/assets/css/components.scss +++ b/assets/css/components.scss @@ -6,8 +6,9 @@ } .input-primary { - @apply border-primary-500 hover:border-primary-600 active:border-primary-600; - @apply text-black; + @apply bg-primary-900; + @apply border-primary-600 hover:border-primary-500 active:border-primary-400; + @apply text-primary-400; } .checkbox { @@ -27,31 +28,62 @@ .btn { @apply focus:outline-none px-4 py-2 rounded-lg; @apply shadow-sm focus:shadow-lg; + @apply border; @apply transition-all duration-300 ease-in-out; } .btn-primary { - @apply bg-primary-500 focus:bg-primary-600 active:bg-primary-600; - @apply border-primary-500 focus:border-primary-600 active:border-primary-600; - @apply text-white; + @apply bg-primary-900 focus:bg-primary-900 active:bg-primary-800; + @apply border-primary-600 hover:border-primary-500 active:border-primary-400; + @apply text-primary-400; } .btn-alert { @apply bg-red-600 focus:bg-red-700 active:bg-red-800; @apply border-red-600 focus:border-red-700 active:border-red-800; - @apply text-white; + @apply text-primary-400; } .hr { - @apply border border-primary-300 w-full max-w-2xl; + @apply border border-primary-400 w-full max-w-2xl; } .hr-light { - @apply border border-white w-full max-w-2xl; + @apply border border-primary-600 w-full max-w-2xl; } .link { @apply hover:underline; @apply transition-colors duration-500 ease-in-out; } + + .alert { + @apply bg-primary-900; + @apply border-primary-600 hover:border-primary-500 active:border-primary-400; + @apply text-primary-400; + padding: 15px; + margin-bottom: 20px; + border: 1px solid transparent; + border-radius: 4px; + } + + .alert-info { + @apply text-primary-400; + } + + .alert-warning { + color: #8a6d3b; + } + + .alert-danger { + color: #a94442; + } + + .alert p { + margin-bottom: 0; + } + + .alert:empty { + @apply hidden; + } } diff --git a/assets/js/app.js b/assets/js/app.js index b220c9f..09cc87a 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -1,6 +1,7 @@ // We import the CSS which is extracted to its own file by esbuild. // Remove this line if you add a your own CSS build pipeline (e.g postcss). import '../css/app.scss' +import "@fontsource/nunito-sans"; // If you want to use Phoenix channels, run `mix help phx.gen.channel` // to get started and then uncomment the line below. diff --git a/assets/package-lock.json b/assets/package-lock.json index 37fcc18..34089f1 100644 --- a/assets/package-lock.json +++ b/assets/package-lock.json @@ -6,6 +6,7 @@ "": { "license": "MIT", "dependencies": { + "@fontsource/nunito-sans": "^4.5.8", "@fortawesome/fontawesome-free": "^6.1.1", "alpinejs": "^3.10.2", "phoenix": "file:../deps/phoenix", @@ -1828,6 +1829,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@fontsource/nunito-sans": { + "version": "4.5.8", + "resolved": "https://registry.npmjs.org/@fontsource/nunito-sans/-/nunito-sans-4.5.8.tgz", + "integrity": "sha512-a725clWrshbo8nNGraAiX+DdI684JTUAMqcdBIldvbFVccWSjGzIJC6q7lXSEtsAGaEm/4h2FeMhgs4tS6UZEw==" + }, "node_modules/@fortawesome/fontawesome-free": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.1.tgz", @@ -1894,6 +1900,30 @@ "node": ">=6.0.0" } }, + "node_modules/@jridgewell/source-map": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz", + "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==", + "dev": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.0", + "@jridgewell/trace-mapping": "^0.3.9" + } + }, + "node_modules/@jridgewell/source-map/node_modules/@jridgewell/gen-mapping": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", + "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", + "dev": true, + "dependencies": { + "@jridgewell/set-array": "^1.0.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/@jridgewell/sourcemap-codec": { "version": "1.4.13", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz", @@ -7227,12 +7257,6 @@ "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true }, - "node_modules/lodash.sortby": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", - "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=", - "dev": true - }, "node_modules/lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -11227,14 +11251,14 @@ } }, "node_modules/terser": { - "version": "5.13.1", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.13.1.tgz", - "integrity": "sha512-hn4WKOfwnwbYfe48NgrQjqNOH9jzLqRcIfbYytOXCOv46LBfWr9bDS17MQqOi+BWGD0sJK3Sj5NC/gJjiojaoA==", + "version": "5.14.2", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz", + "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==", "dev": true, "dependencies": { + "@jridgewell/source-map": "^0.3.2", "acorn": "^8.5.0", "commander": "^2.20.0", - "source-map": "~0.8.0-beta.0", "source-map-support": "~0.5.20" }, "bin": { @@ -11314,18 +11338,6 @@ "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", "dev": true }, - "node_modules/terser/node_modules/source-map": { - "version": "0.8.0-beta.0", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz", - "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==", - "dev": true, - "dependencies": { - "whatwg-url": "^7.0.0" - }, - "engines": { - "node": ">= 8" - } - }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -11386,15 +11398,6 @@ "node": ">=0.8" } }, - "node_modules/tr46": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz", - "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=", - "dev": true, - "dependencies": { - "punycode": "^2.1.0" - } - }, "node_modules/trim-newlines": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz", @@ -11669,12 +11672,6 @@ "minimalistic-assert": "^1.0.0" } }, - "node_modules/webidl-conversions": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz", - "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==", - "dev": true - }, "node_modules/webpack": { "version": "5.72.0", "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.72.0.tgz", @@ -12062,17 +12059,6 @@ "node": ">=0.8.0" } }, - "node_modules/whatwg-url": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz", - "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==", - "dev": true, - "dependencies": { - "lodash.sortby": "^4.7.0", - "tr46": "^1.0.1", - "webidl-conversions": "^4.0.2" - } - }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -13546,6 +13532,11 @@ } } }, + "@fontsource/nunito-sans": { + "version": "4.5.8", + "resolved": "https://registry.npmjs.org/@fontsource/nunito-sans/-/nunito-sans-4.5.8.tgz", + "integrity": "sha512-a725clWrshbo8nNGraAiX+DdI684JTUAMqcdBIldvbFVccWSjGzIJC6q7lXSEtsAGaEm/4h2FeMhgs4tS6UZEw==" + }, "@fortawesome/fontawesome-free": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.1.tgz", @@ -13596,6 +13587,29 @@ "integrity": "sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==", "dev": true }, + "@jridgewell/source-map": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz", + "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==", + "dev": true, + "requires": { + "@jridgewell/gen-mapping": "^0.3.0", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "dependencies": { + "@jridgewell/gen-mapping": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", + "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", + "dev": true, + "requires": { + "@jridgewell/set-array": "^1.0.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.9" + } + } + } + }, "@jridgewell/sourcemap-codec": { "version": "1.4.13", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz", @@ -17640,12 +17654,6 @@ "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true }, - "lodash.sortby": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", - "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=", - "dev": true - }, "lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -20476,14 +20484,14 @@ } }, "terser": { - "version": "5.13.1", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.13.1.tgz", - "integrity": "sha512-hn4WKOfwnwbYfe48NgrQjqNOH9jzLqRcIfbYytOXCOv46LBfWr9bDS17MQqOi+BWGD0sJK3Sj5NC/gJjiojaoA==", + "version": "5.14.2", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz", + "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==", "dev": true, "requires": { + "@jridgewell/source-map": "^0.3.2", "acorn": "^8.5.0", "commander": "^2.20.0", - "source-map": "~0.8.0-beta.0", "source-map-support": "~0.5.20" }, "dependencies": { @@ -20498,15 +20506,6 @@ "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", "dev": true - }, - "source-map": { - "version": "0.8.0-beta.0", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz", - "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==", - "dev": true, - "requires": { - "whatwg-url": "^7.0.0" - } } } }, @@ -20584,15 +20583,6 @@ "punycode": "^2.1.1" } }, - "tr46": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz", - "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=", - "dev": true, - "requires": { - "punycode": "^2.1.0" - } - }, "trim-newlines": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz", @@ -20814,12 +20804,6 @@ "minimalistic-assert": "^1.0.0" } }, - "webidl-conversions": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz", - "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==", - "dev": true - }, "webpack": { "version": "5.72.0", "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.72.0.tgz", @@ -21087,17 +21071,6 @@ "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==", "dev": true }, - "whatwg-url": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz", - "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==", - "dev": true, - "requires": { - "lodash.sortby": "^4.7.0", - "tr46": "^1.0.1", - "webidl-conversions": "^4.0.2" - } - }, "which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/assets/package.json b/assets/package.json index 8d2d6da..dfef580 100644 --- a/assets/package.json +++ b/assets/package.json @@ -9,6 +9,7 @@ "test": "standard" }, "dependencies": { + "@fontsource/nunito-sans": "^4.5.8", "@fortawesome/fontawesome-free": "^6.1.1", "alpinejs": "^3.10.2", "phoenix": "file:../deps/phoenix", diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index 2c9a0d7..a6e83be 100644 --- a/assets/tailwind.config.js +++ b/assets/tailwind.config.js @@ -9,7 +9,7 @@ module.exports = { colors: { transparent: 'transparent', current: 'currentColor', - primary: colors.black, + primary: colors.zinc, black: colors.black, white: colors.white, gray: colors.neutral, @@ -17,6 +17,9 @@ module.exports = { red: colors.rose, yellow: colors.amber }, + fontFamily: { + 'sans': ['Nunito Sans', 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont'] + }, extend: { spacing: { 128: '32rem', diff --git a/lib/memex_web/components/topbar.ex b/lib/memex_web/components/topbar.ex index bba35fd..bafacd8 100644 --- a/lib/memex_web/components/topbar.ex +++ b/lib/memex_web/components/topbar.ex @@ -13,12 +13,12 @@ defmodule MemexWeb.Components.Topbar do %{results: [], title_content: nil, flash: nil, current_user: nil} |> Map.merge(assigns) ~H""" -