diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 31ec686..adb47f5 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -6,6 +6,7 @@ $leaderboardHeight: 90px; $leaderboardHeightMobile: 50px; $playerHeight: 100px; $toolsBreakPoint: 472px; +$menuBreakpoint: 1180px; $head-color-height: 280px; $head-color-height-lg: 130px; diff --git a/assets/scss/global.scss b/assets/scss/global.scss index f621aed..d53b02d 100644 --- a/assets/scss/global.scss +++ b/assets/scss/global.scss @@ -127,8 +127,12 @@ section { } &:after { content: ''; - transition: height calc(var(--transition-duration) * 2), top calc(var(--transition-duration) * 2); - -webkit-transition: height calc(var(--transition-duration) * 2), top calc(var(--transition-duration) * 2); + transition: + height calc(var(--transition-duration) * 2), + top calc(var(--transition-duration) * 2); + -webkit-transition: + height calc(var(--transition-duration) * 2), + top calc(var(--transition-duration) * 2); //default alpha gradient background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0.46) 100%); @@ -363,3 +367,104 @@ section { } @import 'cards'; + +// had to bring this entire file in because of the menu breakpoint +@media screen and (max-width: $menuBreakpoint) { + .p-menubar { + position: relative; + + .p-menubar-button { + display: flex; + width: $actionIconWidth; + height: $actionIconHeight; + color: $horizontalMenuRootMenuitemIconColor; + border-radius: $actionIconBorderRadius; + transition: $actionIconTransition; + + &:hover { + color: $horizontalMenuRootMenuitemIconHoverColor; + background: $horizontalMenuRootMenuitemHoverBg; + } + + &:focus { + @include focused(); + } + } + + .p-menubar-root-list { + position: absolute; + display: none; + padding: $verticalMenuPadding; + background: $overlayMenuBg; + border: $overlayMenuBorder; + box-shadow: $overlayMenuShadow; + width: 100%; + + .p-menu-separator { + border-top: $divider; + margin: $menuSeparatorMargin; + } + + .p-submenu-icon { + font-size: $menuitemSubmenuIconFontSize; + } + + > .p-menuitem { + width: 100%; + position: static; + + > .p-menuitem-link { + @include menuitem-link(); + + > .p-submenu-icon { + margin-left: auto; + transition: transform $transitionDuration; + } + } + + &.p-menuitem-active { + > .p-menuitem-link { + > .p-submenu-icon { + transform: rotate(-180deg); + } + } + } + } + + .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + + .p-submenu-icon { + transition: transform $transitionDuration; + transform: rotate(90deg); + } + + .p-menuitem-active { + > .p-menuitem-link { + > .p-submenu-icon { + transform: rotate(-90deg); + } + } + } + } + + .p-menuitem { + width: 100%; + position: static; + } + + @include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10); + } + + &.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + } + } +} diff --git a/components/ListenersCta.vue b/components/ListenersCta.vue index 67ff31d..a96fdfa 100644 --- a/components/ListenersCta.vue +++ b/components/ListenersCta.vue @@ -1,12 +1,16 @@ Listeners + + Naming Contest + + Read The Credits @@ -23,7 +27,6 @@ import ArrowRight from '~/components/icons/ArrowRight.vue' .listeners-cta { position: relative; background: var(--gold-500); - min-height: 433px; border-radius: 20px; height: 100%; display: flex; @@ -38,7 +41,7 @@ import ArrowRight from '~/components/icons/ArrowRight.vue' var(--pink-500) 100% ); border-radius: 0 0 70% 70%; - content: ''; + content: ""; height: 740px; position: absolute; top: -580px; @@ -47,6 +50,9 @@ import ArrowRight from '~/components/icons/ArrowRight.vue' right: 0; margin: auto; } + .text-right { + padding-top: 130px; + } } .listeners-cta h2, .listeners-cta .flexible-link { diff --git a/components/RadiolabHeader.vue b/components/RadiolabHeader.vue index a91d6b7..46b0026 100644 --- a/components/RadiolabHeader.vue +++ b/components/RadiolabHeader.vue @@ -1,8 +1,8 @@ @@ -38,7 +38,7 @@ onUnmounted(() => { @@ -51,9 +51,14 @@ onUnmounted(() => { - + { } .site-header { - @include media('>=md') { + @include media(">=md") { position: sticky; top: 0px; } - @include media(' { .content { width: 100%; padding: 0; + display: flex; + @media (min-width: $menuBreakpoint) { + display: block !important; + } + .mobile-bm-button { + @media (min-width: $menuBreakpoint) { + display: none; + } + } } .p-menubar:not(.p-menubar-mobile-active) { @@ -152,7 +166,7 @@ onUnmounted(() => { border: none; padding: 1rem 0.5rem; - @include media(' { display: flex; } - @include media('>lg') { + @media (min-width: $menuBreakpoint) { justify-content: space-between; } @@ -190,11 +204,11 @@ onUnmounted(() => { &.gap { @media (min-width: 1440px) { - margin-left: 290px !important; + margin-left: 160px !important; } - @include media('>lg') { - margin-left: calc(50vw - 430px); + @include media(">lg") { + margin-left: calc(50vw - 530px); } } @@ -221,7 +235,7 @@ onUnmounted(() => { } &:after { - content: ''; + content: ""; height: 1px; background: var(--black100); position: absolute; @@ -259,8 +273,7 @@ onUnmounted(() => { top: 0; opacity: 0; pointer-events: none; - transition: top var(--transition-duration), - opacity var(--transition-duration); + transition: top var(--transition-duration), opacity var(--transition-duration); -webkit-transition: top var(--transition-duration), opacity var(--transition-duration); display: flex; @@ -272,7 +285,7 @@ onUnmounted(() => { -webkit-transition: background-color var(--transition-duration), border-color var(--transition-duration); background-color: var(--white); - content: ''; + content: ""; left: -100vw; top: 1px; position: absolute; @@ -342,7 +355,7 @@ onUnmounted(() => { .pi-bars { &:before { - content: '\e90b'; + content: "\e90b"; } } diff --git a/utilities/menuItems.js b/utilities/menuItems.js index f647ef4..132da90 100644 --- a/utilities/menuItems.js +++ b/utilities/menuItems.js @@ -161,6 +161,19 @@ export default [{ } ] }, +{ + label: 'Naming Contest', + url: 'https://woobox.com/wc2qxd/', + class: 'alone', + command: () => { + const { $analytics } = useNuxtApp() + $analytics.sendEvent('click_tracking', { + event_category: 'Click Tracking', + component: 'Navigation', + event_label: 'Naming Contest', + }) + } +}, { label: 'How to listen', to: '/how-to-listen', @@ -278,4 +291,4 @@ export default [{ }) } }, -] +] \ No newline at end of file