Merge pull request #37 from mlibrary/repo-cleanup

Fix the utility nav and add meta and social sharing assets

.github/PULL_REQUEST_TEMPLATE/pull_request_template.md → .github/pull_request_template.md

@@ -39,7 +39,7 @@ http://localhost:8888
 ## Reviewer Notes
 
 <!--
-    Is there anything you would like reviewers to give additional scrutiny?
+    Is there anything you would like reviewers to give special attention to?
 --->
 
 ## Code Review Verification Steps

src/_includes/layouts/base.njk

@@ -24,14 +24,23 @@
     <meta property="og:image" content="{{ '/img/social-card.png' | url }}"/>
     <meta property="og:url" content="{{ meta.url }}"/>
     <meta
-    property="og:locale" content="en_US"> <!-- Twitter Card -->
+    property="og:locale" content="en_US"> 
+    <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image"/>
     <meta property="twitter:url" content="{{ meta.url }}">
     <meta property="twitter:title" content="{{ title }}">
     <meta property="twitter:description" content="{{ meta.socialDescription }}">
     <meta property="twitter:image" content="{{ '/img/social-card.png' | url }}">
     <meta property="twitter:image:alt" content="">
     <link rel="icon" href="{{ '/img/favicon.ico' | url }}"/>
+    <!-- Fallback general icon -->
+    <link rel="apple-touch-icon" href="{{ '/img/icons/apple-touch-icon.png' | url }}">
+    <!-- 180x180 for iPhone with Retina display (iOS 7+) -->
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ '/img/icons/apple-touch-icon-180x180.png' | url }}">
+    <!-- 167x167 for iPad Pro -->
+    <link rel="apple-touch-icon" sizes="167x167" href="{{ '/img/icons/apple-touch-icon-167x167.png' | url }}">
+    <!-- 152x152 for iPad with Retina display -->
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ '/img/icons/apple-touch-icon-152x152.png' | url }}">
     <link href="/pagefind/pagefind-ui.css" rel="stylesheet">
     <link rel="stylesheet" href="{{ '/css/style.css' | url }}"/>
     <link href="https://cdn.jsdelivr.net/npm/@umich-lib/[email protected]/umich-lib.css" rel="stylesheet"/>

src/_includes/partials/utility-nav.njk

@@ -1,24 +1,31 @@
 <nav aria-label="Utility" class="utility-nav flex flex-wrap align-items-center">
   <ul>
     <li><a href="https://design-system.lib.umich.edu/visual-elements/color/">
-    <span aria-hidden="true" class="material-symbols-outlined">palette</span>
+      <span class="utility-icon">
+        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#637381" role="img" aria-hidden="true" focusable="false"><path d="M480-96q-79 0-149-30t-122.5-82.5Q156-261 126-331T96-480q0-80 30.5-149.5t84-122Q264-804 335.5-834T488-864q78 0 146.5 27T754-763q51 47 80.5 110T864-518q0 96-67 163t-163 67h-68q-8 0-14 5t-6 13q0 15 15 25t15 53q0 37-27 66.5T480-96Zm0-384Zm-216 36q25 0 42.5-17.5T324-504q0-25-17.5-42.5T264-564q-25 0-42.5 17.5T204-504q0 25 17.5 42.5T264-444Zm120-144q25 0 42.5-17.5T444-648q0-25-17.5-42.5T384-708q-25 0-42.5 17.5T324-648q0 25 17.5 42.5T384-588Zm192 0q25 0 42.5-17.5T636-648q0-25-17.5-42.5T576-708q-25 0-42.5 17.5T516-648q0 25 17.5 42.5T576-588Zm120 144q25 0 42.5-17.5T756-504q0-25-17.5-42.5T696-564q-25 0-42.5 17.5T636-504q0 25 17.5 42.5T696-444ZM480-168q11 0 17.5-8.5T504-192q0-16-15-28t-15-50q0-38 26.5-64t64.5-26h69q66 0 112-46t46-112q0-115-88.5-194.5T488-792q-134 0-227 91t-93 221q0 130 91 221t221 91Z"/></svg>
+      </span>
       <span>Colors</span>
     </a>
     </li>
     <li><a href="https://drive.google.com/drive/folders/1uIDCY-OIyd2cET3PkpZVOco32wGKsM91">
-    <span aria-hidden="true" class="material-symbols-outlined">folder</span>
+      <span class="utility-icon">
+      <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#637381" aria-hidden="true" focusable="false" role="img"><path d="M168-192q-29 0-50.5-21.5T96-264v-432q0-29.7 21.5-50.85Q139-768 168-768h216l96 96h312q29.7 0 50.85 21.15Q864-629.7 864-600v336q0 29-21.15 50.5T792-192H168Zm0-72h624v-336H450l-96-96H168v432Zm0 0v-432 432Z"/></svg></span>
       <span>Google Templates</span>
     </a>
     </li>
     <li>
       <a href="https://www.figma.com/@mlibrary">
-      <span aria-hidden="true" class="material-symbols-outlined">interests</span>
-      <span>Figma Toolkit</span>
+      <span class="utility-icon">
+        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#637381" aria-hidden="true" focusable="false" role="img"><path d="m96-528 192-336 192 336H96Zm192 384q-60 0-102-42.24t-42-101.55Q144-348 186-390q42-42 102-42t102 42q42 42 42 102t-42 102q-42 42-102 42Zm.21-72Q318-216 339-237.21t21-51Q360-318 338.79-339t-51-21Q258-360 237-338.79t-21 51Q216-258 237.21-237t51 21ZM221-600h134l-67-119-67 119Zm307 456v-288h288v288H528Zm72-72h144v-144H600v144Zm72-312q-54-45-89.06-74.59-35.05-29.58-56-52Q506-677 497.5-696q-8.5-19-8.5-42.67 0-42.62 28-71.97Q545-840 589.46-840q25.54 0 46.04 10.5T672-797q16-22 37-32.5t46.18-10.5Q799-840 827-810.64q28 29.35 28 71.97 0 23.67-8 42.67t-29.13 41.2q-21.13 22.2-56.5 51.5Q726-574 672-528Zm0-96q68-57 89.5-78.5T783-740q0-11-8-19.5t-18.74-8.5q-8.26 0-15.26 4t-12 10l-57 53-56-53q-6-6-13.21-10-7.2-4-14.79-4-11 0-19 8.5t-8 19.5q0 17 22.5 39t88.5 77Zm0-77Zm-383 48Zm0 362Zm382 0Z"/></svg>
+      </span>
+      <span >Figma Toolkit</span>
     </a>
     </li>
     <li>
       <a href="https://codepen.io/team/umlibrary-designsystem">
-      <span aria-hidden="true" class="material-symbols-outlined">code</span>
+      <span class="utility-icon">
+        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#637381" aria-hidden="true" focusable="false" role="img"><path d="M336-240 96-480l240-240 51 51-189 189 189 189-51 51Zm288 0-51-51 189-189-189-189 51-51 240 240-240 240Z"/></svg>
+      </span>
       <span>CodePen</span>
     </a>
     </li>

src/scss/_base.scss

@@ -10,6 +10,7 @@
 //     2.3 Blockquotes <blockquote>
 //     2.4 Images
 //     2.5 Accessibility
+//     2.6 DS web components
 // --------------------------------------------------
 
 // ********************** //
@@ -127,4 +128,32 @@ blockquote {
     font-size: 1.25rem;
     padding-left: .25rem;
     vertical-align: sub;
-}
+}
+
+// 2.6 DS Web Components
+
+m-universal-header {
+  display: block;
+  transition: max-height 0.25s ease-out;
+  max-height: 600px;
+}
+
+m-universal-header:not(.hydrated) {
+  height: 3.59rem;
+  max-height: 3.59rem;
+}
+
+m-website-header {
+  display: block;
+  transition: max-height 0.25s ease-out;
+  max-height: 600px;
+}
+
+m-website-header:not(.hydrated) {
+  height: 4rem;
+  max-height: 4rem;
+}
+
+m-website-header:not(.hydrated) > * {
+  display: none;
+}

src/scss/_navigation.scss

@@ -200,9 +200,20 @@ button[aria-expanded="true"]::after {
     font-weight: var(--bold);
     letter-spacing: 1.25px;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     gap: 0.25rem;
   }
+  li a:hover {
+    text-decoration: underline;
+  }
+}
+
+.utility-icon {
+  transition: transform 2s;
+}
+
+.utility-icon:hover {
+  transform: rotate(-30deg);
 }
 
 .material-symbols-outlined {
@@ -219,7 +230,6 @@ button[aria-expanded="true"]::after {
   ;
 }
 
-
 // *************************** //
 // *** 3. Side navigation *** //
 // ************************* //