initial grid-based navbar working
This commit is contained in:
parent
5e3c175ec0
commit
df1f2a31f6
13 changed files with 311 additions and 221 deletions
|
@ -1,84 +1,145 @@
|
||||||
// navbar-brand coloring
|
/*
|
||||||
.navbar-dark {
|
* top navbar css grid layout
|
||||||
a {
|
*/
|
||||||
&.navbar-brand {
|
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;
|
||||||
|
svg.header-logo {
|
||||||
|
height: 4.3rem;
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
height: 5.3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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;
|
color: $gray-300;
|
||||||
&:hover {
|
&: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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
@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;
|
color: $gray-300;
|
||||||
}
|
&:hover {
|
||||||
}
|
@extend .text-decoration-underline;
|
||||||
}
|
text-decoration-color: $primary !important;
|
||||||
}
|
|
||||||
|
|
||||||
// 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;
|
color: $gray-300;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,56 +1,58 @@
|
||||||
/* Hamburger settings overrides */
|
// /* Hamburger settings overrides */
|
||||||
$hamburger-padding-x: 0.95rem !default;
|
// $hamburger-padding-x: 0.95rem !default;
|
||||||
$hamburger-padding-y: 0.625rem !default;
|
// $hamburger-padding-y: 0.625rem !default;
|
||||||
$hamburger-layer-width: 1.5rem !default;
|
$hamburger-padding-x: 0 !default;
|
||||||
$hamburger-layer-height: 2px !default;
|
$hamburger-padding-y: 0 !default;
|
||||||
$hamburger-layer-spacing: 6px !default;
|
// $hamburger-layer-width: 1.5rem !default;
|
||||||
// * skipping default color, using color from bootstrap instead, below
|
// $hamburger-layer-height: 2px !default;
|
||||||
// $hamburger-layer-color: rgba(0, 0, 0, 0.55) !default;
|
// $hamburger-layer-spacing: 6px !default;
|
||||||
$hamburger-layer-border-radius: 0.25rem !default;
|
// // * skipping default color, using color from bootstrap instead, below
|
||||||
$hamburger-hover-opacity: 0.7 !default;
|
$hamburger-layer-color: $primary !default;
|
||||||
// * skipping default color, using color from bootstrap instead, below
|
// $hamburger-layer-border-radius: 0.25rem !default;
|
||||||
// $hamburger-active-layer-color: $hamburger-layer-color !default;
|
// $hamburger-hover-opacity: 0.7 !default;
|
||||||
$hamburger-active-hover-opacity: $hamburger-hover-opacity !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 hamburgers sass */
|
||||||
@import "../../node_modules/hamburgers/_sass/hamburgers/hamburgers.scss";
|
@import "../../node_modules/hamburgers/_sass/hamburgers/hamburgers.scss";
|
||||||
|
|
||||||
/* correct colors to match bootstrap defaults */
|
// /* correct colors to match bootstrap defaults */
|
||||||
.navbar-light {
|
// .navbar-light {
|
||||||
.hamburger {
|
// .hamburger {
|
||||||
&.navbar-toggler {
|
// &.navbar-toggler {
|
||||||
border: 1px $navbar-light-toggler-border-color solid !important;
|
// border: 1px $navbar-light-toggler-border-color solid !important;
|
||||||
.hamburger-inner {
|
// .hamburger-inner {
|
||||||
&,
|
// &,
|
||||||
&::before,
|
// &::before,
|
||||||
&::after {
|
// &::after {
|
||||||
background-color: $navbar-light-color;
|
// background-color: $primary;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
&.is-active {
|
// &.is-active {
|
||||||
.hamburger-inner::after {
|
// .hamburger-inner::after {
|
||||||
background-color: $navbar-light-color;
|
// background-color: $primary;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
.navbar-dark {
|
// .navbar-dark {
|
||||||
.hamburger {
|
// .hamburger {
|
||||||
&.navbar-toggler {
|
// &.navbar-toggler {
|
||||||
border: 1px $navbar-dark-toggler-border-color solid !important;
|
// border: 1px $navbar-dark-toggler-border-color solid !important;
|
||||||
.hamburger-inner {
|
// .hamburger-inner {
|
||||||
&,
|
// &,
|
||||||
&::before,
|
// &::before,
|
||||||
&::after {
|
// &::after {
|
||||||
background-color: $navbar-dark-color;
|
// background-color: $primary;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
&.is-active {
|
// &.is-active {
|
||||||
.hamburger-inner::after {
|
// .hamburger-inner::after {
|
||||||
background-color: $navbar-dark-color;
|
// background-color: $primary;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
|
@ -20,12 +20,8 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
&.img {
|
&.img {
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
&.header-logo {
|
|
||||||
height: 5.3rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -1,5 +1,5 @@
|
||||||
const togglerBtn = document.getElementById("navbarSupportedContentToggler");
|
const togglerBtn = document.getElementById("top-navbar-grid-toggle-button");
|
||||||
const navbarContent = document.getElementById("navbarSupportedContent");
|
const navbarContent = document.getElementById("top-navbar-grid-main-menu-outer");
|
||||||
|
|
||||||
navbarContent.addEventListener("show.bs.collapse", () => {
|
navbarContent.addEventListener("show.bs.collapse", () => {
|
||||||
console.log("opening navbar content");
|
console.log("opening navbar content");
|
||||||
|
|
|
@ -1,37 +1,20 @@
|
||||||
// Import SCSS
|
// Import SCSS
|
||||||
import '../css/app.scss'
|
import '../css/app.scss'
|
||||||
|
|
||||||
// Import icons for sprite-loader
|
// Import svg files for webpack handling
|
||||||
// // navbar brand icon
|
|
||||||
// import "../../node_modules/@mdi/svg/svg/desktop-classic.svg"; // brand
|
|
||||||
import "../raw/rdnyc-logo.svg"; // rdnyc logo
|
import "../raw/rdnyc-logo.svg"; // rdnyc logo
|
||||||
// other:
|
// other:
|
||||||
// import "../../node_modules/@mdi/svg/svg/magnify.svg"; // search form button icon
|
// 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/home.svg";
|
||||||
// import "../../node_modules/@mdi/svg/svg/information.svg";
|
// import "../../node_modules/@mdi/svg/svg/information.svg";
|
||||||
// import "../../node_modules/@mdi/svg/svg/account.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/calendar-clock.svg";
|
||||||
// import "../../node_modules/@mdi/svg/svg/tag-multiple.svg";
|
// import "../../node_modules/@mdi/svg/svg/tag-multiple.svg";
|
||||||
// import "../../node_modules/@mdi/svg/svg/rss.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
|
||||||
import 'bootstrap/js/dist/collapse';
|
import 'bootstrap/js/dist/collapse';
|
||||||
import 'bootstrap/js/dist/alert';
|
// import 'bootstrap/js/dist/alert';
|
||||||
import 'bootstrap/js/dist/button';
|
import 'bootstrap/js/dist/button';
|
||||||
import 'bootstrap/js/dist/dropdown';
|
import 'bootstrap/js/dist/dropdown';
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<?php
|
<?php
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* example inline SVG function args array supported keys
|
* example inline SVG function atts array supported keys
|
||||||
*/
|
*/
|
||||||
// array(
|
// array(
|
||||||
// 'div_class' => 'icon baseline', // or 'img logo' or something
|
// 'div_class' => 'icon baseline', // or 'img logo' or something
|
||||||
|
@ -16,13 +16,15 @@
|
||||||
* desired SVG must exist in ./dist/images,
|
* desired SVG must exist in ./dist/images,
|
||||||
* preferably by import in main.js and processing by webpack
|
* preferably by import in main.js and processing by webpack
|
||||||
*/
|
*/
|
||||||
function inline_svg( $svg_name, $args = array() ) {
|
function inline_svg( $svg_name, $atts = array() ) {
|
||||||
// load args or defaults
|
// load atts or set defaults
|
||||||
$div_class = array_key_exists( 'div_class', $args ) ? $args['div_class'] : '';
|
extract(shortcode_atts(array(
|
||||||
$svg_class = array_key_exists( 'svg_class', $args ) ? $args['svg_class'] : '';
|
'div_class' => '',
|
||||||
$svg_title = array_key_exists( 'svg_title', $args ) ? $args['svg_title'] : '';
|
'svg_class' => '',
|
||||||
$svg_role_img = array_key_exists( 'svg_role_img', $args ) ? $args['svg_role_img'] : false;
|
'svg_title' => '',
|
||||||
$svg_aria_hidden = array_key_exists( 'svg_aria_hidden', $args ) ? $args['svg_aria_hidden'] : true;
|
'svg_role_img' => false,
|
||||||
|
'svg_aria_hidden' => true,
|
||||||
|
), $atts));
|
||||||
|
|
||||||
// load initial svg content
|
// load initial svg content
|
||||||
$svg_content = file_get_contents( get_template_directory_uri() . '/dist/images/' . $svg_name . '.svg' );
|
$svg_content = file_get_contents( get_template_directory_uri() . '/dist/images/' . $svg_name . '.svg' );
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
namespace WP_RDNYC;
|
namespace WP_RDNYC;
|
||||||
|
|
||||||
get_header(); ?>
|
get_header(); ?>
|
||||||
<main class="container d-flex justify-content-center">
|
<main class="container-fluid">
|
||||||
<div class="d-flex flex-column-reverse flex-lg-row align-items-lg-end mt-sm-3 mt-md-4 pt-md-4 mt-lg-5 pt-lg-5 pb-5" id="tek-front-page">
|
<div class="d-flex flex-column-reverse flex-lg-row align-items-lg-end mt-sm-3 mt-md-4 pt-md-4 mt-lg-5 pt-lg-5 pb-5" id="tek-front-page">
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
|
|
100
header.php
100
header.php
|
@ -39,10 +39,78 @@ namespace WP_RDNYC;
|
||||||
|
|
||||||
<body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage">
|
<body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage">
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-dark px-1 px-sm-2 px-lg-3 px-xl-4 px-xxl-5 pt-5 pb-3 ">
|
<nav id="top-navbar-grid-outer">
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
<h1 class="my-0 py-0 lh-base">
|
<div id="top-navbar-grid-brand-outer">
|
||||||
|
<h1>
|
||||||
|
<!-- my-0 py-0 -->
|
||||||
|
<?php
|
||||||
|
printf( '<a id="top-navbar-grid-brand-link" href="%1$s" rel="home">',
|
||||||
|
esc_url( home_url( '/' ) )
|
||||||
|
);
|
||||||
|
|
||||||
|
echo inline_svg( 'svg-rdnyc-logo',
|
||||||
|
array(
|
||||||
|
'svg_class' => 'img header-logo',
|
||||||
|
'svg_title' => 'Recovery Dharma New York City',
|
||||||
|
'svg_role_img' => true,
|
||||||
|
'svg_aria_hidden' => false
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
echo "</a>";
|
||||||
|
?>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="top-navbar-grid-toggle-button-outer">
|
||||||
|
<button class="hamburger hamburger--squeeze" id="top-navbar-grid-toggle-button"
|
||||||
|
type="button" data-bs-toggle="collapse" data-bs-target="#top-navbar-grid-main-menu-outer"
|
||||||
|
aria-controls="top-navbar-grid-main-menu-outer" aria-expanded="false" aria-label="Toggle navigation"
|
||||||
|
>
|
||||||
|
<span class="hamburger-box">
|
||||||
|
<span class="hamburger-inner"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="top-navbar-grid-socialicon-widget-outer">
|
||||||
|
<?php
|
||||||
|
// using widget to include social icons, so they can be edited by wordpress users
|
||||||
|
if ( is_active_sidebar( 'navbar-socialicon-widget' ) ) :
|
||||||
|
dynamic_sidebar( 'navbar-socialicon-widget' );
|
||||||
|
endif;
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// main navigation menu
|
||||||
|
if ( has_nav_menu( 'navbar-main-menu' ) ) {
|
||||||
|
// echo '<section>';
|
||||||
|
wp_nav_menu([
|
||||||
|
'theme_location' => 'navbar-main-menu',
|
||||||
|
'depth' => 1,
|
||||||
|
'menu' => 'navbar-main-menu',
|
||||||
|
'container' => 'div',
|
||||||
|
'container_id' => 'top-navbar-grid-main-menu-outer',
|
||||||
|
'menu_class' => 'top-navbar-grid-main-menu',
|
||||||
|
'menu_item_class' => 'top-navbar-grid-main-menu-item',
|
||||||
|
'link_class' => 'top-navbar-grid-main-menu-item-link'
|
||||||
|
]);
|
||||||
|
// echo '</section>';
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-dark d-none">
|
||||||
|
|
||||||
|
<div id="navbarInnerContainer">
|
||||||
|
|
||||||
|
<h1>
|
||||||
|
<!-- my-0 py-0 -->
|
||||||
<?php
|
<?php
|
||||||
printf( '<a class="navbar-brand" href="%1$s" rel="home">',
|
printf( '<a class="navbar-brand" href="%1$s" rel="home">',
|
||||||
esc_url( home_url( '/' ) )
|
esc_url( home_url( '/' ) )
|
||||||
|
@ -61,38 +129,42 @@ namespace WP_RDNYC;
|
||||||
?>
|
?>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<button class="hamburger hamburger--vortex collapsed navbar-toggler" id="navbarSupportedContentToggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
<!-- collapsed navbar-toggler -->
|
||||||
<span class="hamburger-box d-flex">
|
<!-- <button class="hamburger hamburger--squeeze" id="navbarSupportedContentToggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="hamburger-box">
|
||||||
<span class="hamburger-inner"></span>
|
<span class="hamburger-inner"></span>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button> -->
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
||||||
|
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
|
// using widget to include social icons, so they can be edited by wordpress users
|
||||||
if ( is_active_sidebar( 'navbar-socialicon-widget' ) ) :
|
if ( is_active_sidebar( 'navbar-socialicon-widget' ) ) :
|
||||||
dynamic_sidebar( 'navbar-socialicon-widget' );
|
dynamic_sidebar( 'navbar-socialicon-widget' );
|
||||||
endif;
|
endif;
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
|
// main navigation menu
|
||||||
if ( has_nav_menu( 'navbar-main-menu' ) ) {
|
if ( has_nav_menu( 'navbar-main-menu' ) ) {
|
||||||
|
// echo '<section>';
|
||||||
wp_nav_menu([
|
wp_nav_menu([
|
||||||
'theme_location' => 'navbar-main-menu',
|
'theme_location' => 'navbar-main-menu',
|
||||||
'depth' => 1,
|
'depth' => 1,
|
||||||
'menu' => 'navbar-main-menu',
|
'menu' => 'navbar-main-menu',
|
||||||
'container' => '',
|
// 'container' => 'div',
|
||||||
'container_class' => '',
|
// 'container_id' => 'section-navbar-main-menu',
|
||||||
'menu_class' => 'navbar-nav',
|
'menu_class' => 'navbar-nav',
|
||||||
'menu_item_class' => 'nav-item',
|
'menu_item_class' => 'nav-item',
|
||||||
'link_class' => 'nav-link font-monospace fs-6'
|
'link_class' => 'nav-link'
|
||||||
]);
|
]);
|
||||||
|
// echo '</section>';
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</nav>
|
||||||
</nav>
|
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
namespace WP_RDNYC;
|
namespace WP_RDNYC;
|
||||||
|
|
||||||
get_header(); ?>
|
get_header(); ?>
|
||||||
<main class="container d-flex justify-content-center">
|
<main class="container-fluid">
|
||||||
<div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 pb-2 mb-4 mt-3">
|
<div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 pb-2 mb-4 mt-3">
|
||||||
|
|
||||||
<?php if (is_archive()) : ?>
|
<?php if (is_archive()) : ?>
|
||||||
|
|
2
page.php
2
page.php
|
@ -9,7 +9,7 @@
|
||||||
namespace WP_RDNYC;
|
namespace WP_RDNYC;
|
||||||
|
|
||||||
get_header(); ?>
|
get_header(); ?>
|
||||||
<main class="container d-flex justify-content-center">
|
<main class="container-fluid d-flex">
|
||||||
<div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 border-bottom border-gray pb-4 mb-3">
|
<div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 border-bottom border-gray pb-4 mb-3">
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
|
|
|
@ -21,7 +21,7 @@ $seventythreek_aria_label = ! empty( $args['aria_label'] ) ? 'aria-label="' . es
|
||||||
<label id="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" for="<?php echo esc_attr( $seventythreek_unique_id ); ?>" aria-hidden class="form-label d-none"><?php _e( 'Search…', 'seventythreek' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></label>
|
<label id="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" for="<?php echo esc_attr( $seventythreek_unique_id ); ?>" aria-hidden class="form-label d-none"><?php _e( 'Search…', 'seventythreek' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></label>
|
||||||
<input type="search" id="<?php echo esc_attr( $seventythreek_unique_id ); ?>" class="form-control me-2 tek-search-input" value="<?php echo get_search_query(); ?>" name="s" aria-labelledby="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" placeholder="Search blog…" />
|
<input type="search" id="<?php echo esc_attr( $seventythreek_unique_id ); ?>" class="form-control me-2 tek-search-input" value="<?php echo get_search_query(); ?>" name="s" aria-labelledby="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" placeholder="Search blog…" />
|
||||||
<button type="submit" class="btn btn-outline-light" title="Search">
|
<button type="submit" class="btn btn-outline-light" title="Search">
|
||||||
<?php echo inline_svg( 'mdi-magnify', array( 'div_class' => 'icon baseline' ) ) ?>
|
<?php echo inline_svg( 'mdi-magnify', array( 'div_class' => 'icon baseline' ) ); ?>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -17,7 +17,7 @@ module.exports = {
|
||||||
'removeHiddenElems',
|
'removeHiddenElems',
|
||||||
'removeEmptyText',
|
'removeEmptyText',
|
||||||
'removeEmptyContainers',
|
'removeEmptyContainers',
|
||||||
'removeViewBox',
|
// 'removeViewBox',
|
||||||
'cleanupEnableBackground',
|
'cleanupEnableBackground',
|
||||||
'minifyStyles',
|
'minifyStyles',
|
||||||
// 'convertStyleToAttrs',
|
// 'convertStyleToAttrs',
|
||||||
|
@ -41,7 +41,7 @@ module.exports = {
|
||||||
'convertEllipseToCircle',
|
'convertEllipseToCircle',
|
||||||
'sortAttrs',
|
'sortAttrs',
|
||||||
'sortDefsChildren',
|
'sortDefsChildren',
|
||||||
// 'removeDimensions',
|
'removeDimensions',
|
||||||
// 'removeAttrs',
|
// 'removeAttrs',
|
||||||
{
|
{
|
||||||
name: 'removeAttrs',
|
name: 'removeAttrs',
|
||||||
|
|
|
@ -3,7 +3,6 @@ const glob = require("glob-all");
|
||||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||||
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
|
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
|
||||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||||
// const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");
|
|
||||||
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
|
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
|
||||||
const PurgecssPlugin = require("purgecss-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: {
|
optimization: {
|
||||||
|
@ -115,7 +90,6 @@ const config = {
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
new MiniCssExtractPlugin({ filename: `[name]${prefix}.css` }),
|
new MiniCssExtractPlugin({ filename: `[name]${prefix}.css` }),
|
||||||
// new SpriteLoaderPlugin({ plainSprite: true }),
|
|
||||||
new CopyWebpackPlugin({
|
new CopyWebpackPlugin({
|
||||||
patterns: [{
|
patterns: [{
|
||||||
from: './assets/images/',
|
from: './assets/images/',
|
||||||
|
|
Loading…
Reference in a new issue