diff --git a/TODO.md b/TODO.md index bc4a5ad..f7a1def 100644 --- a/TODO.md +++ b/TODO.md @@ -3,12 +3,16 @@ - [X] ~~*fork*~~ [2021-07-02] - [X] ~~*rebrand*~~ [2021-07-02] - [X] ~~*initial updating of node modules/webpack*~~ [2021-07-02] -- [ ] replace tailwind with bootstrap - - [ ] initial webpack config for development - - [ ] pore through template files to update theming - - [ ] purgecss/webpack config for production +- [X] ~~*replace tailwind with bootstrap*~~ [2021-07-03] +- [X] ~~*initial webpack config for development*~~ [2021-07-04] +- [X] ~~*add font handling if possible*~~ [2021-07-04] +- [X] ~~*add svg sprite handling if possible*~~ [2021-07-04] +- [ ] svg theme function? +- [ ] navbar menu +- [ ] navbar hamburger mobile toggler +- [ ] properly incorporate favicons (meta links etc) +- [ ] pore through template files to update theming +- [ ] purgecss/webpack config for production - [ ] double-check npm run build output to ensure it's all working -- [ ] add font handling if possible -- [ ] add svg sprite handling if possible - [ ] ... - [ ] profit! \ 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 0000000..09030d0 --- /dev/null +++ b/assets/css/_svg-icons.scss @@ -0,0 +1,22 @@ +/* + 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; + } + \ No newline at end of file diff --git a/assets/css/app.scss b/assets/css/app.scss index d4fcadc..75df672 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -4,6 +4,9 @@ /* Load Bootstrap v5 and customizations */ @import "bs-load"; +/*SVG ICON SYSTEM*/ +@import "svg-icons"; + /* main */ diff --git a/assets/images/favicon.png b/assets/images/favicon.png new file mode 100755 index 0000000..c9d5b2b Binary files /dev/null and b/assets/images/favicon.png differ diff --git a/assets/js/main.js b/assets/js/main.js index f16ecf0..874cd42 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,6 +1,13 @@ // Import SCSS import '../css/app.scss' +// Import icons for sprite-loader +// navbar brand icon +import "../../node_modules/@mdi/svg/svg/desktop-classic.svg"; // brand +// other: +import "../../node_modules/@mdi/svg/svg/home.svg"; +import "../../node_modules/@mdi/svg/svg/information.svg"; + // Import Bootstrap JS import 'bootstrap/js/dist/collapse'; import 'bootstrap/js/dist/alert'; diff --git a/functions.php b/functions.php index 73a63da..69d80e2 100644 --- a/functions.php +++ b/functions.php @@ -9,6 +9,16 @@ define( 'WP_73k_VERSION', wp_get_theme()->version ); define( 'WP_73k_DIR', __DIR__ ); define( 'WP_73k_URL', get_template_directory_uri() ); +function svg_icon_use($icon_name, $div_class) { + echo "
"; + echo ""; + + echo ""; + + echo ""; + echo "
"; +}; + require_once( WP_73k_DIR . '/vendor/autoload.php' ); \A7\autoload( __DIR__ . '/src' ); diff --git a/header.php b/header.php index d9d520e..a3b76b9 100644 --- a/header.php +++ b/header.php @@ -27,17 +27,23 @@ namespace WP_73k;