diff --git a/assets/css/_nav-bar-help.scss b/assets/css/_nav-bar-help.scss index 3280e49..2aa2c07 100644 --- a/assets/css/_nav-bar-help.scss +++ b/assets/css/_nav-bar-help.scss @@ -1,81 +1,142 @@ -// navbar-brand coloring -.navbar-dark { - a { - &.navbar-brand { +/* + * top navbar css grid layout + */ +nav#top-navbar-grid-outer { + @extend .container-fluid; + @extend .mt-4; + @extend .mt-md-5; + @extend .mb-4; + @extend .px-3; + @extend .px-sm-4; + @extend .px-md-5; + @extend .d-grid; + grid-template-columns: auto minmax(0, 1fr); + grid-template-rows: calc(4.3rem / 2) calc(4.3rem / 2) auto; + @include media-breakpoint-up(md) { + grid-template-rows: calc(5.3rem / 2) calc(5.3rem / 2) auto; + } + // grid-auto-rows: calc(4.3rem / 2); + div#top-navbar-grid-brand-outer { + grid-column-start: 1; + grid-column-end: 2; + grid-row-start: 1; + grid-row-end: 3; + a#top-navbar-grid-brand-link { color: $gray-300; - &:hover { - color: $gray-300; + svg.header-logo { + height: 4.3rem; + @include media-breakpoint-up(md) { + height: 5.3rem; + } } } } -} - -// navbar widget social icon coloring -// #block-7 > ul > li.wp-social-link.wp-block-social-link > a -.navbar-dark { - .widget_block { - ul { - &.wp-block-social-links { - &.is-style-logos-only { - li { - &.wp-social-link { - &.wp-block-social-link { - a { - &.wp-block-social-link-anchor { - color: $gray-300; - } - } + div#top-navbar-grid-toggle-button-outer { + grid-column-start: 2; + grid-column-end: 3; + grid-row-start: 1; + grid-row-end: 2; + display: grid; + justify-items: end; + @extend .d-lg-none; + } + div#top-navbar-grid-socialicon-widget-outer { + grid-column-start: 2; + grid-column-end: 3; + grid-row-start: 2; + grid-row-end: 3; + display: grid; + justify-items: end; + align-items: end; + @include media-breakpoint-up(lg) { + grid-row-start: 1; + grid-row-end: 2; + align-items: start; + } + section.widget_block { + ul.wp-block-social-links { + @extend .mb-0; + li.wp-social-link { + @extend .mx-0; + @extend .my-0; + @extend .px-0; + @extend .py-0; + a.wp-block-social-link-anchor { + @extend .px-1; + @extend .px-md-2; + @extend .py-0; + color: $gray-300; + &:hover { + color: $primary; + } + svg { + height: 1.1em; + width: 1.1em; + @include media-breakpoint-up(md) { + height: 1.25em; + width: 1.25em; } } } + &:first-child { + a.wp-block-social-link-anchor { + @extend .ps-0; + } + } + &:last-child { + a.wp-block-social-link-anchor { + @extend .pe-0; + } + } } } } } -} - -// navbar menu layout -.navbar-expand-lg { - .nav-item { - // margin-left: 2px; - a { - &.nav-link { - // padding: 0 0 0 6px; - // margin: 8px 0 8px 0; - // border-left: 6px transparent solid; - &.active { - // border-left: 6px $secondary solid; - // border-bottom: none; - } - &:hover, &:active { - // color: $primary !important; - // border-left: 6px $secondary solid; - // border-bottom: none; - } - } + div#top-navbar-grid-main-menu-outer { + @extend .d-none; + &.show, &.collapsing { + @extend .d-grid; + grid-column-start: 1; + grid-column-end: 3; + grid-row-start: 3; + grid-row-end: 4; + justify-items: center; } - } -} - -@include media-breakpoint-up(lg) { - .navbar-expand-lg { - .nav-item { - // margin-left: 0; - a { - &.nav-link { - // padding: 0 0 2px 0; - // margin: 0 12px 0 12px; - // border-left: none; - // border-top: 6px transparent solid; - // border-bottom: 6px transparent solid; - &.active { - // border-left: none; - // border-bottom: 6px $secondary solid; - } - &:hover, &:active { - // color: $primary !important; - // border-left: none; - // border-bottom: 6px $secondary solid; + @extend .d-lg-grid; + @include media-breakpoint-up(lg) { + grid-column-start: 2; + grid-column-end: 3; + grid-row-start: 2; + grid-row-end: 3; + justify-items: end; + align-items: end; + } + ul#menu-navbar-main-menu { + @extend .d-grid; + grid-template-columns: 1fr; + list-style-type: none; + padding: 0; + margin: 1em 0 0 0; + @extend .d-lg-inline; + @include media-breakpoint-up(lg) { + margin: 0; + } + li.menu-item { + @extend .text-center; + @extend .py-2; + @extend .d-lg-inline; + @include media-breakpoint-up(lg) { + padding: 0 0 0 1.5em !important; + } + a.top-navbar-grid-main-menu-item-link { + @extend .fw-bold; + @extend .text-uppercase; + @extend .text-decoration-none; + color: $gray-300; + &:hover { + @extend .text-decoration-underline; + text-decoration-color: $primary !important; + color: $gray-300; } } } diff --git a/assets/css/_nav-burger.scss b/assets/css/_nav-burger.scss index b8bb66b..c86f2b2 100644 --- a/assets/css/_nav-burger.scss +++ b/assets/css/_nav-burger.scss @@ -1,56 +1,58 @@ -/* Hamburger settings overrides */ -$hamburger-padding-x: 0.95rem !default; -$hamburger-padding-y: 0.625rem !default; -$hamburger-layer-width: 1.5rem !default; -$hamburger-layer-height: 2px !default; -$hamburger-layer-spacing: 6px !default; -// * skipping default color, using color from bootstrap instead, below -// $hamburger-layer-color: rgba(0, 0, 0, 0.55) !default; -$hamburger-layer-border-radius: 0.25rem !default; -$hamburger-hover-opacity: 0.7 !default; -// * skipping default color, using color from bootstrap instead, below -// $hamburger-active-layer-color: $hamburger-layer-color !default; -$hamburger-active-hover-opacity: $hamburger-hover-opacity !default; +// /* Hamburger settings overrides */ +// $hamburger-padding-x: 0.95rem !default; +// $hamburger-padding-y: 0.625rem !default; +$hamburger-padding-x: 0 !default; +$hamburger-padding-y: 0 !default; +// $hamburger-layer-width: 1.5rem !default; +// $hamburger-layer-height: 2px !default; +// $hamburger-layer-spacing: 6px !default; +// // * skipping default color, using color from bootstrap instead, below +$hamburger-layer-color: $primary !default; +// $hamburger-layer-border-radius: 0.25rem !default; +// $hamburger-hover-opacity: 0.7 !default; +// // * skipping default color, using color from bootstrap instead, below +// // $hamburger-active-layer-color: $hamburger-layer-color !default; +// $hamburger-active-hover-opacity: $hamburger-hover-opacity !default; /* import hamburgers sass */ @import "../../node_modules/hamburgers/_sass/hamburgers/hamburgers.scss"; -/* correct colors to match bootstrap defaults */ -.navbar-light { - .hamburger { - &.navbar-toggler { - border: 1px $navbar-light-toggler-border-color solid !important; - .hamburger-inner { - &, - &::before, - &::after { - background-color: $navbar-light-color; - } - } - &.is-active { - .hamburger-inner::after { - background-color: $navbar-light-color; - } - } - } - } -} -.navbar-dark { - .hamburger { - &.navbar-toggler { - border: 1px $navbar-dark-toggler-border-color solid !important; - .hamburger-inner { - &, - &::before, - &::after { - background-color: $navbar-dark-color; - } - } - &.is-active { - .hamburger-inner::after { - background-color: $navbar-dark-color; - } - } - } - } -} +// /* correct colors to match bootstrap defaults */ +// .navbar-light { +// .hamburger { +// &.navbar-toggler { +// border: 1px $navbar-light-toggler-border-color solid !important; +// .hamburger-inner { +// &, +// &::before, +// &::after { +// background-color: $primary; +// } +// } +// &.is-active { +// .hamburger-inner::after { +// background-color: $primary; +// } +// } +// } +// } +// } +// .navbar-dark { +// .hamburger { +// &.navbar-toggler { +// border: 1px $navbar-dark-toggler-border-color solid !important; +// .hamburger-inner { +// &, +// &::before, +// &::after { +// background-color: $primary; +// } +// } +// &.is-active { +// .hamburger-inner::after { +// background-color: $primary; +// } +// } +// } +// } +// } diff --git a/assets/css/_svg-icons.scss b/assets/css/_svg-icons.scss index 29b8bb2..b5f0f30 100644 --- a/assets/css/_svg-icons.scss +++ b/assets/css/_svg-icons.scss @@ -20,12 +20,8 @@ position: relative; } - svg { &.img { fill: currentColor; - &.header-logo { - height: 5.3rem; - } } -} \ No newline at end of file +} diff --git a/assets/js/_hamburger-helper.js b/assets/js/_hamburger-helper.js index f1432c2..604dcd5 100644 --- a/assets/js/_hamburger-helper.js +++ b/assets/js/_hamburger-helper.js @@ -1,5 +1,5 @@ -const togglerBtn = document.getElementById("navbarSupportedContentToggler"); -const navbarContent = document.getElementById("navbarSupportedContent"); +const togglerBtn = document.getElementById("top-navbar-grid-toggle-button"); +const navbarContent = document.getElementById("top-navbar-grid-main-menu-outer"); navbarContent.addEventListener("show.bs.collapse", () => { console.log("opening navbar content"); diff --git a/assets/js/main.js b/assets/js/main.js index bde18a0..48979e3 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,37 +1,20 @@ // Import SCSS import '../css/app.scss' -// Import icons for sprite-loader -// // navbar brand icon -// import "../../node_modules/@mdi/svg/svg/desktop-classic.svg"; // brand +// Import svg files for webpack handling import "../raw/rdnyc-logo.svg"; // rdnyc logo // other: // import "../../node_modules/@mdi/svg/svg/magnify.svg"; // search form button icon // import "../../node_modules/@mdi/svg/svg/home.svg"; // import "../../node_modules/@mdi/svg/svg/information.svg"; // import "../../node_modules/@mdi/svg/svg/account.svg"; -// import "../../node_modules/@mdi/svg/svg/briefcase-account.svg"; -// import "../../node_modules/@mdi/svg/svg/zip-disk.svg"; -// import "../../node_modules/@mdi/svg/svg/typewriter.svg"; // import "../../node_modules/@mdi/svg/svg/calendar-clock.svg"; // import "../../node_modules/@mdi/svg/svg/tag-multiple.svg"; // import "../../node_modules/@mdi/svg/svg/rss.svg"; -// import "../../node_modules/@mdi/svg/svg/account-hard-hat.svg"; -// import "../../node_modules/@mdi/svg/svg/open-in-new.svg"; -// social -// import "../../node_modules/@mdi/svg/svg/linkedin.svg"; -// import "../../node_modules/@mdi/svg/svg/github.svg"; -// import "../../node_modules/@mdi/svg/svg/key-variant.svg"; -// import "../../node_modules/@mdi/svg/svg/goodreads.svg"; -// import "../../node_modules/@mdi/svg/svg/twitter.svg"; -// import "../../node_modules/@mdi/svg/svg/facebook.svg"; -// import "../../node_modules/@mdi/svg/svg/instagram.svg"; -// import "../../node_modules/@mdi/svg/svg/steam.svg"; -// import "../../node_modules/@mdi/svg/svg/discord.svg"; // Import Bootstrap JS import 'bootstrap/js/dist/collapse'; -import 'bootstrap/js/dist/alert'; +// import 'bootstrap/js/dist/alert'; import 'bootstrap/js/dist/button'; import 'bootstrap/js/dist/dropdown'; diff --git a/custom-functions.php b/custom-functions.php index 3394e80..7c14721 100644 --- a/custom-functions.php +++ b/custom-functions.php @@ -1,7 +1,7 @@ 'icon baseline', // or 'img logo' or something @@ -16,13 +16,15 @@ * desired SVG must exist in ./dist/images, * preferably by import in main.js and processing by webpack */ -function inline_svg( $svg_name, $args = array() ) { - // load args or defaults - $div_class = array_key_exists( 'div_class', $args ) ? $args['div_class'] : ''; - $svg_class = array_key_exists( 'svg_class', $args ) ? $args['svg_class'] : ''; - $svg_title = array_key_exists( 'svg_title', $args ) ? $args['svg_title'] : ''; - $svg_role_img = array_key_exists( 'svg_role_img', $args ) ? $args['svg_role_img'] : false; - $svg_aria_hidden = array_key_exists( 'svg_aria_hidden', $args ) ? $args['svg_aria_hidden'] : true; +function inline_svg( $svg_name, $atts = array() ) { + // load atts or set defaults + extract(shortcode_atts(array( + 'div_class' => '', + 'svg_class' => '', + 'svg_title' => '', + 'svg_role_img' => false, + 'svg_aria_hidden' => true, + ), $atts)); // load initial svg content $svg_content = file_get_contents( get_template_directory_uri() . '/dist/images/' . $svg_name . '.svg' ); diff --git a/front-page.php b/front-page.php index 4005c4c..3ea9dd9 100644 --- a/front-page.php +++ b/front-page.php @@ -9,7 +9,7 @@ namespace WP_RDNYC; get_header(); ?> -
+
itemscope itemtype="https://schema.org/WebPage"> - + + + +
- + diff --git a/index.php b/index.php index 9113fe0..55663f6 100644 --- a/index.php +++ b/index.php @@ -9,7 +9,7 @@ namespace WP_RDNYC; get_header(); ?> -
+
diff --git a/page.php b/page.php index 14dc311..0f10dcd 100644 --- a/page.php +++ b/page.php @@ -9,7 +9,7 @@ namespace WP_RDNYC; get_header(); ?> -
+
" for="" aria-hidden class="form-label d-none">
diff --git a/svgo.config.js b/svgo.config.js index 0460747..7700d7f 100644 --- a/svgo.config.js +++ b/svgo.config.js @@ -17,7 +17,7 @@ module.exports = { 'removeHiddenElems', 'removeEmptyText', 'removeEmptyContainers', - 'removeViewBox', + // 'removeViewBox', 'cleanupEnableBackground', 'minifyStyles', // 'convertStyleToAttrs', @@ -41,7 +41,7 @@ module.exports = { 'convertEllipseToCircle', 'sortAttrs', 'sortDefsChildren', - // 'removeDimensions', + 'removeDimensions', // 'removeAttrs', { name: 'removeAttrs', diff --git a/webpack.config.js b/webpack.config.js index 5f2e60e..1df24b6 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -3,7 +3,6 @@ const glob = require("glob-all"); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); const CopyWebpackPlugin = require('copy-webpack-plugin'); -// const SpriteLoaderPlugin = require("svg-sprite-loader/plugin"); const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); const PurgecssPlugin = require("purgecss-webpack-plugin"); @@ -77,30 +76,6 @@ const config = { } ], }, - // { - // test: /\.svg$/, - // loader: "svg-sprite-loader", - // options: { - // extract: true, - // spriteFilename: "icon-sprites.svg", - // publicPath: "./images/", - // symbolId: (filePath) => { - // if (filePath.includes("bootstrap-icons")) { - // return `bi-${path.basename(filePath).slice(0, -4)}`; - // } else if (filePath.includes("@mdi")) { - // return `mdi-${path.basename(filePath).slice(0, -4)}`; - // } else if (filePath.includes("heroicons")) { - // if (filePath.includes("outline")) { - // return `hio-${path.basename(filePath).slice(0, -4)}`; - // } else { - // return `his-${path.basename(filePath).slice(0, -4)}`; - // } - // } else { - // return `${path.basename(filePath).slice(0, -4)}`; - // } - // }, - // }, - // }, ] }, optimization: { @@ -115,7 +90,6 @@ const config = { }, plugins: [ new MiniCssExtractPlugin({ filename: `[name]${prefix}.css` }), - // new SpriteLoaderPlugin({ plainSprite: true }), new CopyWebpackPlugin({ patterns: [{ from: './assets/images/',