adam/wp-rdnyc
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

initial grid-based navbar working

Browse source
This commit is contained in:
Adam Piontek 2021-07-26 13:07:57 -04:00
parent 5e3c175ec0
commit df1f2a31f6
13 changed files with 311 additions and 221 deletions

193
assets/css/_nav-bar-help.scss
View file

@ -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;
}
}
}

106
assets/css/_nav-burger.scss
View file

@ -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;
// }
// }
// }
// }
// }

6
assets/css/_svg-icons.scss
View file

@ -20,12 +20,8 @@
position: relative;
}
svg {
&.img {
fill: currentColor;
&.header-logo {
height: 5.3rem;
}
}
}
}

4
assets/js/_hamburger-helper.js
View file

@ -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");

21
assets/js/main.js
View file

@ -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';