@asd20/ui 3.2.816 → 3.2.818

package/package.json

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

package/src/components/atoms/Asd20Logo/index.vue

@@ -3,9 +3,7 @@
     class="asd20-logo"
     :class="classes"
     :href="link"
-    :aria-label="
-      `${title} ${subtitle} An Academy District 20 School; We educate and inspire students to thrive.`
-    "
+    :aria-label="`${title} ${subtitle} An Academy District 20 School`"
   >
     <figure class="asd20-logo__image">
       <img v-if="image" :src="image" alt="Our school logo." />
@@ -16,8 +14,9 @@
         {{ subtitle }}
       </small>
       <div v-if="tagline" class="asd20-logo__tagline">
-        An Academy District 20 School<hr />
-        <i>We educate and inspire students to thrive.</i>
+        An Academy District 20 School
+        <!-- <hr />
+        <i>We educate and inspire students to thrive.</i> -->
       </div>
     </component>
 
@@ -82,7 +81,7 @@ export default {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  // align-items: center;
+  align-items: center;
   justify-content: flex-start;
   text-decoration: none;
   box-shadow: none;

package/src/components/molecules/Asd20SocialMenu/index.vue

@@ -31,22 +31,36 @@ export default {
 
 .asd20-social-menu {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   justify-content: space-around;
-  flex-direction: column;
+  flex-direction: row;
   margin: space(1) space(0);
   &::v-deep .asd20-button {
-    flex-direction: row;
+    flex-direction: column;
     padding-left: 0;
   }
-  &::v-deep .asd20-button__label {
-    margin-left: space(0.5);
-  }
+  // &::v-deep .asd20-button__label {
+  //   margin-left: space(0.5);
+  // }
   & > * {
     box-sizing: border-box;
   }
 }
-
+@media (min-width: 768px) {
+  .asd20-social-menu {
+    flex-direction: row;
+    &::v-deep .asd20-button {
+      flex-direction: column;
+      padding: space(0.5);
+    }
+    &::v-deep .asd20-button__label {
+      margin-left: space(0);
+    }
+    & > * {
+      flex-basis: auto;
+    }
+  }
+}
 @media (min-width: 1024px) {
   .asd20-social-menu {
     flex-direction: row;

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

@@ -1,5 +1,8 @@
 <template>
-  <footer id="page-footer">
+  <footer
+    id="page-footer"
+    :class="organization.title === 'Academy District 20' ? 'footer-image' : ''"
+  >
     <div class="logoContainer">
       <asd20-logo
         v-if="organization.title !== 'Academy District 20'"
@@ -230,12 +233,9 @@ export default {
       }
       &::v-deep .asd20-logo__image {
         height: 5rem;
-        // margin-bottom: space(0.5);
       }
     }
     img {
-      // margin-top: space(-1);
-      // margin-left: space(1);
       max-width: 6rem;
     }
     .optionalLogo a {
@@ -299,20 +299,10 @@ export default {
   .disclosure-links {
     display: flex;
     flex-wrap: wrap;
-    // justify-content: flex-start;
     margin: 0 0 space(1) 0;
     font-size: 0.75rem;
     line-height: 1.25;
     flex-direction: column;
-    // a {
-    //   // display: block;
-    //   // padding: space(0.25) space(0.25);
-    //   color: var(--website-footer__title-color);
-    //   flex-grow: 0;
-    //   padding: 0;
-    //   // margin: 0 space(0.5) space(0.5) 0;
-    //   min-height: 45px;
-    // }
     .asd20-button {
       color: var(--website-footer__foreground-color);
       font-size: 0.75rem !important;
@@ -322,12 +312,17 @@ export default {
   .copyright {
     font-size: 0.75rem;
     line-height: 1.5;
-    max-width: 75vw;
     color: var(--website-footer__title-color);
     margin-left: space(0.5);
-    // text-align: left;
   }
 }
+#page-footer.footer-image {
+  background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-footer-image.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: 10%;
+  box-shadow: 0px 0px 0px 4000px rgba(0, 23, 128, 0.5) inset;
+}
 
 @media (min-width: 768px) {
   #page-footer {
@@ -393,15 +388,11 @@ export default {
       }
     }
     .asd20-social-menu {
-      grid-column: -4 / -2;
-      grid-row: 3 / 4;
+      grid-column: 2 / 6;
+      grid-row: 4 / 5;
       align-self: start;
       justify-self: end;
-      display: flex;
       margin: space(-0.5) space(-0.5) space(-0.5) space(-0.5);
-      &::v-deep .asd20-button {
-        font-size: 1rem !important;
-      }
     }
     .disclosure-links {
       grid-column: 2 / 6;
@@ -414,13 +405,8 @@ export default {
       margin: 0;
       font-size: 0.75rem;
       line-height: 1.5;
-      justify-content: flex-start;
+      justify-content: flex-end;
       text-align: center;
-      // a {
-      //   padding: space(0.5);
-      //   margin: 0;
-      //   min-height: inherit;
-      // }
     }
     .copyright {
       grid-column: 2 / 6;
@@ -428,19 +414,21 @@ export default {
       align-self: end;
       font-size: 0.75rem;
       line-height: 1.5;
-      max-width: 75vw;
       margin-top: space(3);
       margin-left: space(0.5);
-      text-align: left;
-      // padding-left: space(0.5);
+      text-align: right;
     }
   }
 }
 
 @media (min-width: 1024px) {
   #page-footer {
-    .disclosure-links {
-      justify-content: flex-end;
+    .asd20-social-menu {
+      grid-column: 2 / 6;
+      grid-row: 4 / 5;
+      align-self: start;
+      justify-self: end;
+      margin: space(-0.5) space(-0.5) space(-0.5) space(-0.5);
     }
     .copyright {
       text-align: right;
@@ -449,3 +437,4 @@ export default {
   }
 }
 </style>
+

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

@@ -51,7 +51,7 @@ export default {
     // margin-top: space(-1);
     img {
       width: 100% !important;
-      height: 200px !important;
+      height: 300px !important;
     }
   }
   &::v-deep .asd20-messaging__heading {

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

@@ -183,7 +183,7 @@ export default {
     width: 100%;
     .asd20-messaging {
       height: inherit;
-      padding: space(1);
+      padding: space(3) space(1) space(1) space(1);
       background: var(--color-minus-alpha)
         var(--website-homepage-header__background-style);
     }