lots of menu stuff

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

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 */

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

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);
+      }
     }
   }
 }

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;

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 {

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

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