From d9229784f0100d299df246f575c8638b54a21ba8 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Mon, 4 Jan 2021 22:45:10 -0800 Subject: [PATCH] DEC-000: Small fixes and background image assets. --- dev/webpack.dev.config.js | 2 +- dist/assets/img/icon-search.svg | 3 ++ dist/decanter.css | 51 ++++++++++++++----- src/assets/img/.gitkeep | 0 src/assets/img/icon-search.svg | 3 ++ src/plugins/components/brand-bar/brand-bar.js | 2 +- src/plugins/components/logo/logo.js | 2 +- .../components/site-search/site-search.js | 2 +- src/plugins/theme/backgroundImage.js | 12 +++++ src/plugins/theme/fontFamily.js | 2 +- tailwind.config.js | 4 +- 11 files changed, 63 insertions(+), 20 deletions(-) create mode 100644 dist/assets/img/icon-search.svg delete mode 100644 src/assets/img/.gitkeep create mode 100644 src/assets/img/icon-search.svg create mode 100644 src/plugins/theme/backgroundImage.js diff --git a/dev/webpack.dev.config.js b/dev/webpack.dev.config.js index 92325242e..37a9948cd 100644 --- a/dev/webpack.dev.config.js +++ b/dev/webpack.dev.config.js @@ -54,8 +54,8 @@ module.exports.optimization = { // Entry points. // ----------------------------------------------------------------------------- module.exports.entry = { - 'test': path.resolve(__dirname, "src/index.js"), 'decanter': path.resolve(__dirname, "../src/decanter.js"), + 'test': path.resolve(__dirname, "src/index.js"), }; // Output points. diff --git a/dist/assets/img/icon-search.svg b/dist/assets/img/icon-search.svg new file mode 100644 index 000000000..548caa39d --- /dev/null +++ b/dist/assets/img/icon-search.svg @@ -0,0 +1,3 @@ + + + diff --git a/dist/decanter.css b/dist/decanter.css index a16011135..d4fabfa94 100644 --- a/dist/decanter.css +++ b/dist/decanter.css @@ -1026,12 +1026,7 @@ table tbody th{ } .su-logo{ display: inline-block; - font-family: "Stanford"; - font-family: "Source Serif Pro"; - font-family: Georgia; - font-family: Times; - font-family: "Times New Roman"; - font-family: serif; + font-family: Stanford, "Source Serif Pro", Georgia, Times, "Times New Roman", serif; font-weight: 400; line-height: 0.75; text-decoration: none; @@ -1064,7 +1059,7 @@ table tbody th{ background-color: #8C1515; } .su-brand-bar .su-logo{ - font-family: "Stanford", "Source Serif Pro", Georgia, Times, "Times New Roman", serif; + font-family: Stanford, "Source Serif Pro", Georgia, Times, "Times New Roman", serif; margin-top: 8px; font-size: 20px; } @@ -1514,6 +1509,7 @@ table tbody th{ margin-right: 0; margin-bottom: 0; opacity: 0.6; + background: url(/assets/img/icon-search.svg) no-repeat 0 0; } .su-site-search__submit:hover, .su-site-search__submit:active, .su-site-search__submit:focus{ background-color: transparent; @@ -3873,6 +3869,9 @@ table tbody th{ background-image: -webkit-gradient(linear, right bottom, left top, from(var(--tw-gradient-stops))); background-image: linear-gradient(to top left, var(--tw-gradient-stops)); } +.su-bg-icon-search{ + background-image: url(/assets/img/icon-search.svg); +} .su-from-transparent{ --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0)); @@ -7697,7 +7696,7 @@ table tbody th{ font-family: "Roboto Slab", Georgia, Times, "Times New Roman", serif; } .su-font-stanford{ - font-family: "Stanford", "Source Serif Pro", Georgia, Times, "Times New Roman", serif; + font-family: Stanford, "Source Serif Pro", Georgia, Times, "Times New Roman", serif; } .su-font-fab{ font-family: "Font Awesome 5 Brands"; @@ -25402,6 +25401,10 @@ table tbody th{ background-image: linear-gradient(to top left, var(--tw-gradient-stops)); } + .xs\:su-bg-icon-search{ + background-image: url(/assets/img/icon-search.svg); + } + .xs\:su-from-transparent{ --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0)); @@ -30399,7 +30402,7 @@ table tbody th{ } .xs\:su-font-stanford{ - font-family: "Stanford", "Source Serif Pro", Georgia, Times, "Times New Roman", serif; + font-family: Stanford, "Source Serif Pro", Georgia, Times, "Times New Roman", serif; } .xs\:su-font-fab{ @@ -48509,6 +48512,10 @@ table tbody th{ background-image: linear-gradient(to top left, var(--tw-gradient-stops)); } + .sm\:su-bg-icon-search{ + background-image: url(/assets/img/icon-search.svg); + } + .sm\:su-from-transparent{ --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0)); @@ -53506,7 +53513,7 @@ table tbody th{ } .sm\:su-font-stanford{ - font-family: "Stanford", "Source Serif Pro", Georgia, Times, "Times New Roman", serif; + font-family: Stanford, "Source Serif Pro", Georgia, Times, "Times New Roman", serif; } .sm\:su-font-fab{ @@ -71616,6 +71623,10 @@ table tbody th{ background-image: linear-gradient(to top left, var(--tw-gradient-stops)); } + .md\:su-bg-icon-search{ + background-image: url(/assets/img/icon-search.svg); + } + .md\:su-from-transparent{ --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0)); @@ -76613,7 +76624,7 @@ table tbody th{ } .md\:su-font-stanford{ - font-family: "Stanford", "Source Serif Pro", Georgia, Times, "Times New Roman", serif; + font-family: Stanford, "Source Serif Pro", Georgia, Times, "Times New Roman", serif; } .md\:su-font-fab{ @@ -94723,6 +94734,10 @@ table tbody th{ background-image: linear-gradient(to top left, var(--tw-gradient-stops)); } + .lg\:su-bg-icon-search{ + background-image: url(/assets/img/icon-search.svg); + } + .lg\:su-from-transparent{ --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0)); @@ -99720,7 +99735,7 @@ table tbody th{ } .lg\:su-font-stanford{ - font-family: "Stanford", "Source Serif Pro", Georgia, Times, "Times New Roman", serif; + font-family: Stanford, "Source Serif Pro", Georgia, Times, "Times New Roman", serif; } .lg\:su-font-fab{ @@ -117830,6 +117845,10 @@ table tbody th{ background-image: linear-gradient(to top left, var(--tw-gradient-stops)); } + .xl\:su-bg-icon-search{ + background-image: url(/assets/img/icon-search.svg); + } + .xl\:su-from-transparent{ --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0)); @@ -122827,7 +122846,7 @@ table tbody th{ } .xl\:su-font-stanford{ - font-family: "Stanford", "Source Serif Pro", Georgia, Times, "Times New Roman", serif; + font-family: Stanford, "Source Serif Pro", Georgia, Times, "Times New Roman", serif; } .xl\:su-font-fab{ @@ -140937,6 +140956,10 @@ table tbody th{ background-image: linear-gradient(to top left, var(--tw-gradient-stops)); } + .\32xl\:su-bg-icon-search{ + background-image: url(/assets/img/icon-search.svg); + } + .\32xl\:su-from-transparent{ --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0)); @@ -145934,7 +145957,7 @@ table tbody th{ } .\32xl\:su-font-stanford{ - font-family: "Stanford", "Source Serif Pro", Georgia, Times, "Times New Roman", serif; + font-family: Stanford, "Source Serif Pro", Georgia, Times, "Times New Roman", serif; } .\32xl\:su-font-fab{ diff --git a/src/assets/img/.gitkeep b/src/assets/img/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/assets/img/icon-search.svg b/src/assets/img/icon-search.svg new file mode 100644 index 000000000..548caa39d --- /dev/null +++ b/src/assets/img/icon-search.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/plugins/components/brand-bar/brand-bar.js b/src/plugins/components/brand-bar/brand-bar.js index 6de793c89..0fb9a9c89 100644 --- a/src/plugins/components/brand-bar/brand-bar.js +++ b/src/plugins/components/brand-bar/brand-bar.js @@ -5,7 +5,7 @@ module.exports = function () { return function ({ addComponents, theme, config }) { - var stanford = config('theme.fontFamily.stanford').join(", "); + let stanford = config('theme.fontFamily.stanford').join(", "); const components = { '.brand-bar': { diff --git a/src/plugins/components/logo/logo.js b/src/plugins/components/logo/logo.js index 22595e737..042ab3070 100644 --- a/src/plugins/components/logo/logo.js +++ b/src/plugins/components/logo/logo.js @@ -4,7 +4,7 @@ */ module.exports = function () { return function ({ addComponents, theme, config }) { - const stanford = config('theme.fontFamily.stanford'); + let stanford = config('theme.fontFamily.stanford').join(", "); const components = { '.logo': { diff --git a/src/plugins/components/site-search/site-search.js b/src/plugins/components/site-search/site-search.js index f13da7640..d63376c46 100644 --- a/src/plugins/components/site-search/site-search.js +++ b/src/plugins/components/site-search/site-search.js @@ -32,7 +32,7 @@ module.exports = function () { marginRight: '0', marginBottom: '0', opacity: '0.6', - //background: 'url("#{$su-image-path}/icon-search.svg") no-repeat 0 0', + background: theme('backgroundImage.icon-search') + ' no-repeat 0 0', '&:hover, &:active, &:focus': { backgroundColor: 'transparent', opacity: '1', diff --git a/src/plugins/theme/backgroundImage.js b/src/plugins/theme/backgroundImage.js new file mode 100644 index 000000000..8c79a21b8 --- /dev/null +++ b/src/plugins/theme/backgroundImage.js @@ -0,0 +1,12 @@ +let path = require('path') + +/** + * Aspect ratio options for containers + */ +module.exports = function () { + let dir = path.resolve(__dirname, '../../', 'assets/img') + + return { + 'icon-search': "url('" + dir + "/icon-search.svg')", + } +} diff --git a/src/plugins/theme/fontFamily.js b/src/plugins/theme/fontFamily.js index c9cba4820..deab0a0a8 100644 --- a/src/plugins/theme/fontFamily.js +++ b/src/plugins/theme/fontFamily.js @@ -7,7 +7,7 @@ module.exports = function () { sans: ['"Source Sans Pro"', '"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif'], serif: ['"Source Serif Pro"', 'Georgia', 'Times', '"Times New Roman"', 'serif'], slab: ['"Roboto Slab"', 'Georgia', 'Times', '"Times New Roman"', 'serif'], - stanford: ['"Stanford"','"Source Serif Pro"', 'Georgia', 'Times','"Times New Roman"', 'serif'], + stanford: ['Stanford','"Source Serif Pro"', 'Georgia', 'Times','"Times New Roman"', 'serif'], fab: ['"Font Awesome 5 Brands"'], far: ['"Font Awesome 5 Free"'], fas: ['"Font Awesome 5 Free"'], diff --git a/tailwind.config.js b/tailwind.config.js index dcd3c1018..41a58f25d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -31,7 +31,9 @@ module.exports = { // Decanter Custom. decanter: require(dir + '/theme/decanter.js')(), // Extensions of tailwind core config. - extend: {} + extend: { + backgroundImage: require(dir + '/theme/backgroundImage.js')() + } }, // The corePlugins section lets you completely disable classes that Tailwind