From fb2d2c803e01916da6333033abbf8b7ce24da3a4 Mon Sep 17 00:00:00 2001 From: rdrew Date: Mon, 15 Jun 2026 16:32:23 -0300 Subject: [PATCH] lots of menu stuff --- css/components/header.css | 4 +- css/components/menu.css | 4 + css/components/site-branding.css | 20 +++-- css/components/top-nav.css | 37 +++++----- css/components/unsorted.css | 123 +++++++++++++++++++++++++------ css/layout.css | 9 ++- css/tokens.css | 83 +++++++++++++++++++-- js/druid.behaviors.js | 10 ++- 8 files changed, 231 insertions(+), 59 deletions(-) diff --git a/css/components/header.css b/css/components/header.css index dfa2ef4c..9c15c265 100644 --- a/css/components/header.css +++ b/css/components/header.css @@ -8,8 +8,8 @@ */ @layer components { .header { - padding-block: var(--size-4); - padding-inline: var(--size-3); + padding-block: var(--size-2); + padding-inline: var(--size-2); border-bottom: 1px solid #ccc; } } diff --git a/css/components/menu.css b/css/components/menu.css index b93622ee..8e834754 100644 --- a/css/components/menu.css +++ b/css/components/menu.css @@ -19,6 +19,10 @@ list-style-type: circle; list-style-image: url(../../images/icons/menu-expanded.png); } + .dropdown.horizontal .menu-item--expanded { + list-style-image: none; + list-style-type: none; + } .menu-item--collapsed { list-style-type: disc; list-style-image: url(../../images/icons/menu-collapsed.png); /* LTR */ diff --git a/css/components/site-branding.css b/css/components/site-branding.css index d2a93b79..a86fd253 100644 --- a/css/components/site-branding.css +++ b/css/components/site-branding.css @@ -7,20 +7,28 @@ @layer components { #block-druid-site-branding { display: flex; + align-items: center; } .site-logo { border-right: 1px solid var(--upei-dark-red); - padding-right: var(--size-3); - margin-right: var(--size-3); + padding-right: var(--size-2); + margin-right: var(--size-2); } .site-logo img { - width: 200px; + width: 175px; height: auto; display: block; } - .site-name a { + .site-name { font-family: var(--font-serif); - font-size: 2em; - text-decoration: none; + font-size: var(--size-7); + margin-bottom: 0; + line-height: 1; + a { + text-decoration: none; + } + } + .site-slogan { + font-size: var(--size-4); } } diff --git a/css/components/top-nav.css b/css/components/top-nav.css index 64169c4f..3000e402 100644 --- a/css/components/top-nav.css +++ b/css/components/top-nav.css @@ -9,31 +9,32 @@ .top-nav { text-transform: uppercase; background-color: var(--upei-red); - color: white; - font-family: var(--font-sans); + padding: var(--size-2) 0; ul.menu { display: flex; flex-wrap: wrap; - gap: var(--size-3); margin: 0; padding: 0; font-size: 12px; - } - a { - color: white; - text-decoration: none; - } - a:hover { - text-decoration: underline; - } - a.is-active { - color: var(--upei-yellow); - } - ul.menu a { color: white; - } - ul.menu a.is-active { - color: var(--upei-yellow); + font-family: var(--font-sans); + li { + border-right: 1px solid black; + padding: 0 var(--size-2); + &:last-child { + border-right: 0; + } + } + a { + color: white; + text-decoration: none; + } + a:hover { + text-decoration: underline; + } + a.is-active { + color: var(--upei-yellow); + } } } } diff --git a/css/components/unsorted.css b/css/components/unsorted.css index b0208bec..9b7cb25c 100644 --- a/css/components/unsorted.css +++ b/css/components/unsorted.css @@ -4,32 +4,36 @@ /* ======================================= */ /* sliding yellow links, no dropdowns */ - .null.region-sidebar-second { + /* add classes to sidebar menus with block class in the gui or template */ + nav.sidebar_links { + h2 { + margin-bottom: 0; + } .menu { margin: 0; } - .menu a { - text-decoration: none; - display: block; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAARCAYAAADkIz3lAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAh5JREFUeNpi/PPnz//Xb98xMDMy7mFgYHBlgAImZiYGZMB0++59Bke/SIbKlm4XBkbGbUDMAMZogOnps+cv//3/y7Bq0zaGsoZ2z1+/fq4DYkyFP3/+MK0vyXkiLS7KsGL9Vob6zomBzMzMK4BybMgKmSMiIj+xs7JuNtbX8bl9/5Hg7oNHGd6+fa9jY26szMbKugvoiF8ghzAnpaQwsLKyvuPj5dmtpa7scvPWPRGQ4u8/f+o62FjIsbOz7wPa8JM5OjqG4f+/fyD8hpeba7++jqbdw8fPxDbv3sfw4eMnPUtTQ1mgwgPM0bFxyE55zcPNdVhJXsby0ZPnkrsPHmP4+vWbnrG+rjzDi+fPsOHSurae/yxiKv8ZBOX+r1y/+T8Lv6AgekgY3bn3MPHYmQsMf/78ZvB1d2bgZGWZy/Dp0ydkbHD2wuXbdj5h/xmEFf4Hxqb+37Zrz+xde/fzsfz+8wdmku7Dx083FtW2yB0+fprB3cGGISLAa/avnz8LfjEwfGOBRpbGo6fP9uRWNoidPHORwdfDmSEjIWIuEyNjNlDuNzRmfik8ePzsWHZZvdi5i1cZnG3MGWKDfBZ9/fQlBaYIBFjevv9wMbO0hu/ajdsMTjYWDPnpCauA4vEgyX///sJ9yPLp02e+p89eMFgY6zMkRwZv+vLpczhMkouHC66Q8efPn/9v3r7L8PPXr+1AvhdyOL199xbOBggwAPE+9T0FxGv+AAAAAElFTkSuQmCC); - background-position: 96% 10px; - background-repeat: no-repeat; - padding: 6px 20px 6px 0; - background-color: transparent; - color: #192a36; - /* display: inline-block; */ - /* padding: 0 3px; */ - margin-left: 0; - margin-right: -3px; - position: relative; - text-decoration: none; - transition: color ease 0.3s; - z-index: 0; - } - li.menu-item { + .menu-item { border-bottom: 2px solid var(--upei-orange); font-size: 16px; padding-top: 0; + a { + text-decoration: none; + display: block; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAARCAYAAADkIz3lAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAh5JREFUeNpi/PPnz//Xb98xMDMy7mFgYHBlgAImZiYGZMB0++59Bke/SIbKlm4XBkbGbUDMAMZogOnps+cv//3/y7Bq0zaGsoZ2z1+/fq4DYkyFP3/+MK0vyXkiLS7KsGL9Vob6zomBzMzMK4BybMgKmSMiIj+xs7JuNtbX8bl9/5Hg7oNHGd6+fa9jY26szMbKugvoiF8ghzAnpaQwsLKyvuPj5dmtpa7scvPWPRGQ4u8/f+o62FjIsbOz7wPa8JM5OjqG4f+/fyD8hpeba7++jqbdw8fPxDbv3sfw4eMnPUtTQ1mgwgPM0bFxyE55zcPNdVhJXsby0ZPnkrsPHmP4+vWbnrG+rjzDi+fPsOHSurae/yxiKv8ZBOX+r1y/+T8Lv6AgekgY3bn3MPHYmQsMf/78ZvB1d2bgZGWZy/Dp0ydkbHD2wuXbdj5h/xmEFf4Hxqb+37Zrz+xde/fzsfz+8wdmku7Dx083FtW2yB0+fprB3cGGISLAa/avnz8LfjEwfGOBRpbGo6fP9uRWNoidPHORwdfDmSEjIWIuEyNjNlDuNzRmfik8ePzsWHZZvdi5i1cZnG3MGWKDfBZ9/fQlBaYIBFjevv9wMbO0hu/ajdsMTjYWDPnpCauA4vEgyX///sJ9yPLp02e+p89eMFgY6zMkRwZv+vLpczhMkouHC66Q8efPn/9v3r7L8PPXr+1AvhdyOL199xbOBggwAPE+9T0FxGv+AAAAAElFTkSuQmCC); + background-position: 96% 10px; + background-repeat: no-repeat; + padding: 6px 20px 6px 0; + background-color: transparent; + color: #192a36; + /* display: inline-block; */ + /* padding: 0 3px; */ + margin-left: 0; + margin-right: -3px; + position: relative; + text-decoration: none; + transition: color ease 0.3s; + z-index: 0; + } a:before { content: ""; position: absolute; @@ -42,17 +46,88 @@ transition: all ease 0.3s; } a:hover:before { - width: 100%; + width: 88%; } } } /* sidebar block menu with dropdowns (may need to adjust .block-menu and/or regions) */ /* *see the associated behavior */ - .region-sidebar-second { - nav h2 { + nav.dropdown.vertical { + h2 { + margin-bottom: 0; + } + .menu { + margin: 0; + /* margin-bottom: 1rem; */ + } + .menu li a { + text-decoration: none; + padding: 7px 0 7px 10px; + display: block; + border-bottom: 2px solid #8c2004; + color: #192a36; + } + .menu-item { + padding: 0; + } + .menu-item--expanded .menu a { + margin-left: 1em; + border: none; + } + /* Hide nested menus by default */ + .menu-item--expanded > ul { + display: none; + } + + /* Show when open */ + .menu-item--expanded.open > ul { + display: block; + } + + /* Position container */ + .menu-item--expanded { + position: relative; + list-style-type: none; + list-style-image: none; + } + + /* Caret button */ + .menu-caret { + position: absolute; + right: 0.5rem; + top: 0.75rem; + cursor: pointer; + font-size: 0.8rem; + user-select: none; + } + + /* Optional caret icon (triangle) */ + .menu-caret::after { + content: "▼"; + } + + /* Rotate when open */ + .menu-item--expanded.open > .menu-caret::after { + transform: rotate(180deg); + display: inline-block; + } + + .menu-item--expanded > ul { + display: block; + max-height: 0; + overflow: hidden; + transition: max-height 0.5s ease; + } + + .menu-item--expanded.open > ul { + max-height: 500px; + } + } + .null.region-sidebar-second { + nav.dropdown h2 { margin-bottom: 0; } - nav ul.menu li a { + nav.dropdown .menu li a { text-decoration: none; padding: 7px 0 7px 10px; display: block; diff --git a/css/layout.css b/css/layout.css index 64164439..2e3bb322 100644 --- a/css/layout.css +++ b/css/layout.css @@ -69,7 +69,7 @@ main > .content-rail { display: grid; - gap: var(--size-4); + gap: var(--size-10); grid-template-columns: minmax(0, 1fr); } @@ -93,6 +93,13 @@ grid-area: second; } + .region-sidebar-first, + .region-sidebar-second { + display: flex; + flex-direction: column; + gap: var(--size-4); + } + /* Tablet+: single-sidebar layouts side-by-side. */ @media (min-width: 768px) { body.layout-sidebar-first main > .content-rail { diff --git a/css/tokens.css b/css/tokens.css index 96a20c97..9994e1ef 100644 --- a/css/tokens.css +++ b/css/tokens.css @@ -1,7 +1,4 @@ -/* - * @file - * Design tokens for the druid theme. - * +/* @file Design tokens for the druid theme. * Custom properties live in the `tokens` cascade layer so any later layer * (base, layout, components, utilities) can reference them without * specificity concerns. To override a token in a narrower scope, re-declare @@ -75,10 +72,10 @@ --border-1: #ccc; /* Easing — cherry-picked from Open Props (props.easing.css). */ - --ease-out-2: cubic-bezier(0, 0, .5, 1); + --ease-out-2: cubic-bezier(0, 0, 0.5, 1); /* Typography scale — cherry-picked from Open Props (props.fontsize.css). */ - --font-size-0: .75rem; + --font-size-0: 0.75rem; --font-size-1: 1rem; --font-size-2: 1.1rem; --font-size-3: 1.25rem; @@ -99,5 +96,79 @@ --upei-orange: #fbb040; --brand: hsl(210 90% 50%); --brand: #8c2004; + + /* Sizes */ + --size-1: 0.25rem; + --size-2: 0.5rem; + --size-3: 1rem; + --size-4: 1.25rem; + --size-5: 1.5rem; + --size-6: 1.75rem; + --size-7: 2rem; + --size-8: 3rem; + --size-9: 4rem; + --size-10: 5rem; + --size-11: 7.5rem; + --size-12: 10rem; + --size-13: 15rem; + --size-14: 20rem; + --size-15: 30rem; + --size-px-000: -8px; + --size-px-00: -4px; + --size-px-1: 4px; + --size-px-2: 8px; + --size-px-3: 16px; + --size-px-4: 20px; + --size-px-5: 24px; + --size-px-6: 28px; + --size-px-7: 32px; + --size-px-8: 48px; + --size-px-9: 64px; + --size-px-10: 80px; + --size-px-11: 120px; + --size-px-12: 160px; + --size-px-13: 240px; + --size-px-14: 320px; + --size-px-15: 480px; + --size-fluid-1: clamp(0.5rem, 1vw, 1rem); + --size-fluid-2: clamp(1rem, 2vw, 1.5rem); + --size-fluid-3: clamp(1.5rem, 3vw, 2rem); + --size-fluid-4: clamp(2rem, 4vw, 3rem); + --size-fluid-5: clamp(4rem, 5vw, 5rem); + --size-fluid-6: clamp(5rem, 7vw, 7.5rem); + --size-fluid-7: clamp(7.5rem, 10vw, 10rem); + --size-fluid-8: clamp(10rem, 20vw, 15rem); + --size-fluid-9: clamp(15rem, 30vw, 20rem); + --size-fluid-10: clamp(20rem, 40vw, 30rem); + --size-content-1: 20ch; + --size-content-2: 45ch; + --size-content-3: 60ch; + --size-header-1: 20ch; + --size-header-2: 25ch; + --size-header-3: 35ch; + --size-xxs: 240px; + --size-xs: 360px; + --size-sm: 480px; + --size-md: 768px; + --size-lg: 1024px; + --size-xl: 1440px; + --size-xxl: 1920px; + --size-relative-000: -0.5ch; + --size-relative-00: -0.25ch; + --size-relative-1: 0.25ch; + --size-relative-2: 0.5ch; + --size-relative-3: 1ch; + --size-relative-4: 1.25ch; + --size-relative-5: 1.5ch; + --size-relative-6: 1.75ch; + --size-relative-7: 2ch; + --size-relative-8: 3ch; + --size-relative-9: 4ch; + --size-relative-10: 5ch; + --size-relative-11: 7.5ch; + --size-relative-12: 10ch; + --size-relative-13: 15ch; + --size-relative-14: 20ch; + --size-relative-15: 30ch; } } diff --git a/js/druid.behaviors.js b/js/druid.behaviors.js index 07186827..427632d2 100644 --- a/js/druid.behaviors.js +++ b/js/druid.behaviors.js @@ -72,7 +72,8 @@ attach(context) { once( "dropdown-menu-toggle", - "nav .menu li.menu-item--expanded > a", + // "nav .menu li.menu-item--expanded > a", + "nav.dropdown .menu-item--expanded > a", context ).forEach((link) => { let touched = false; @@ -107,12 +108,17 @@ }, }; })(Drupal, once); + +// this adds the classes for sidebar dropdown menu styles +// (.dropdown .vertical) + ((Drupal, once) => { Drupal.behaviors.sidebarMenuDropdown = { attach(context) { once( "sidebar-menu-dropdown", - ".block-menu .menu-item--expanded", + // ".block-menu .menu-item--expanded", + "nav.dropdown.vertical .menu-item--expanded", context ).forEach((item) => { const link = item.querySelector("a");