@asd20/ui 3.2.901 → 3.2.903

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.901",
+  "version": "3.2.903",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/organisms/Asd20PageHeader/index.vue

@@ -84,7 +84,7 @@
           </div>
           <div v-if="lead" class="asd20-page-header__lead">
             <span v-html="lead"></span>
-            <a v-if="detailLink && !isDetailPage" :href="detailLink">
+            <a v-show="detailLink && !isDetailPage" :href="detailLink">
               {{ detailLinkLabel }}
             </a>
           </div>

package/src/components/organisms/Asd20SchoolHomepageHeader/index.vue

@@ -123,8 +123,8 @@ export default {
     left: 0;
     right: space(1);
     z-index: -1;
-    background: var(--website-header__background-color)
-      var(--website-header__background-style);
+    background: var(--website-header__background-style);
+    background-color: var(--website-header__background-color);
     border-radius: var(--website-shape__radius-l);
     border-top-left-radius: 0;
     border-top-right-radius: 0;
@@ -206,7 +206,6 @@ export default {
 
   &__content {
     margin-top: space(2);
-    background: rgba(0, 0, 0, 0.01);
   }
 
   &__lead {

package/src/components/templates/Asd20404Template/index.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="page-content-404">
-    <h1><small>404</small>"Not all who wander are lost."</h1>
+    <h1><small>404</small>We're lost. But, we do have a map.</h1>
+    <p class="lead">
+      Let us humbly provide some directions to get you back on track:
+    </p>
+    <!-- <h1><small>404</small>"Not all who wander are lost."</h1>
     <span><i>~ J.R.R. Tolkien, The Fellowship of the Ring</i></span>
     <p class="lead">
       Well, at least in this case, we can't determine your journey's end. Let us
       humbly provide a few options to get you back on track:
-    </p>
+    </p> -->
     <div class="options">
       <asd20-button class="option-button" reversed @click.native="trySearch"
         >Try a Search

package/src/components/templates/Asd20SchoolHomeTemplate/index.vue

@@ -43,7 +43,7 @@
               logo-size="lg"
             ></asd20-organization-picker>
             <a
-              v-if="websiteLogoProps"
+              v-if="websiteLogoProps && showLogo"
               :href="websiteLogoProps.logoLink ? websiteLogoProps.logoLink : ''"
             >
               <img
@@ -54,6 +54,9 @@
                     : ''
                 "
                 :alt="websiteLogoProps.logoAlt ? websiteLogoProps.logoAlt : ''"
+                :aria-label="
+                  websiteLogoProps.logoAlt ? websiteLogoProps.logoAlt : ''
+                "
               />
             </a>
           </div>
@@ -181,10 +184,17 @@ export default {
     languageCode: { type: String, default: 'en' },
   },
 
+  data: () => ({
+    showLogo: true,
+  }),
+
   computed: {
     firstMessage() {
       return this.messages.length > 0 ? this.messages[0] : null
     },
+    // showLogo() {
+    //   return this.screenWidth > 1024 // Show the logo only if the screen width is greater than 1024px
+    // },
 
     pageHeaderContent() {
       if (!this.firstMessage) return null
@@ -213,6 +223,15 @@ export default {
       }
     },
   },
+  mounted() {
+    this.showLogo = window.innerWidth >= 1350
+    window.addEventListener('resize', this.handleResize)
+  },
+  methods: {
+    handleResize() {
+      this.showLogo = window.innerWidth >= 1350
+    },
+  },
 }
 </script>
 
@@ -351,9 +370,9 @@ export default {
     // }
     .pickerContainer {
       display: flex;
-      .optionalLogo {
-        display: none;
-      }
+      // .optionalLogo {
+      //   display: none;
+      // }
     }
     .asd20-quicklinks-menu {
       padding-bottom: space(1);