Merge pull request #10 from data-preservation-programs/feat-qa-design…

…-review-2
data-preservation-programs · Jul 10, 2023 · 64988ff · 64988ff
2 parents 1310916 + e607091
commit 64988ff
Show file tree

Hide file tree

Showing 42 changed files with 182 additions and 100 deletions.
diff --git a/app/router.scrollBehavior.js b/app/router.scrollBehavior.js
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -111,8 +111,8 @@ html, body {
   scroll-behavior: smooth;
   ::selection,
   ::-moz-selection {
-    background: $color_Primary;
-    color: white;
+    background-color: $grenadier;
+    color: #FFFFFF;
   }
   &.no-scroll {
     overflow-y: hidden;
@@ -122,6 +122,10 @@ html, body {
   }
   * {
     box-sizing: border-box;
+    &:focus-visible {
+      outline: 3px solid $grenadier;
+      outline-offset: 2px;
+    }
     &:before,
     &:after {
       box-sizing: border-box;

diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
@@ -15,6 +15,7 @@ $color_Secondary: #1A1A1A;
 $color_Accent: #000000;
 $gallery: #F0F0F0;
 $mercury: #E5E5E5;
+$grenadier: #e22900;
 
 // ----------------------------------------------------------------- Transitions
 $bounce: cubic-bezier(0.8, 0.5, 0.2, 1.3);

diff --git a/components/blocks/card-list-block.vue b/components/blocks/card-list-block.vue
@@ -42,6 +42,14 @@ export default {
 
   computed: {
     cards () {
+      const sortKey = this.block.sortKey
+      if (this.block.alphabetize && sortKey) {
+        return [...this.block.cards].sort((a, b) => {
+          if (a[sortKey].toLowerCase() < b[sortKey].toLowerCase()) { return -1 }
+          if (a[sortKey].toLowerCase() > b[sortKey].toLowerCase()) { return 1 }
+          return 0
+        })
+      }
       return this.block.cards
     },
     grid () {

diff --git a/components/button.vue b/components/button.vue
@@ -61,7 +61,8 @@ export default {
   padding: 0 toRem(15);
   color: white;
   border-radius: $borderRadius_Medium;
-  &:hover {
+  &:hover,
+  &:focus-visible {
     transition: background-color $duration ease;
     background-color: $color_Secondary;
   }
@@ -92,7 +93,8 @@ export default {
     height: 0.875rem;
     transition: 250ms ease;
   }
-  &:hover {
+  &:hover,
+  &:focus-visible {
     &:after {
       width: 2.375rem;
     }
@@ -111,7 +113,8 @@ export default {
     @include cta;
     transition: 250ms ease;
   }
-  &:hover {
+  &:hover,
+  &:focus-visible {
     background-color: $color_Secondary;
     .text {
       color: $mercury;
@@ -134,7 +137,8 @@ export default {
     .text {
       color: $mercury;
     }
-    &:hover {
+    &:hover,
+    &:focus-visible {
       background-color: $color_Primary;
       &:before {
         opacity: 1;

diff --git a/components/card.vue b/components/card.vue
@@ -124,7 +124,9 @@ export default {
     },
     sidebarText () {
       if (this.card.sidebar_text) { return this.card.sidebar_text }
-      return Array(10).fill(this.title).join(' ')
+      const titleLength = this.title.length
+      const titleRepeats = Math.ceil(150 / (titleLength + 1))
+      return Array(titleRepeats).fill(this.title).join(' ')
     },
     headerImage () {
       return this.type === 'slider' ? { 'background-image': `url(${this.image})` } : null
@@ -203,20 +205,30 @@ export default {
   border: solid 2px $color_Accent;
   border-radius: 0.625rem;
   background-color: $color_Primary;
-  overflow: hidden;
+  z-index: 10;
   @include mini {
     border: solid 1.5px $color_Accent;
   }
   .sidebar {
     padding: toRem(14) toRem(17);
     width: toRem(70);
-    height: calc(100% + 2px);
     border-right: solid 2px $color_Accent;
     @include mini {
       border-right: solid 1.5px $color_Accent;
       width: toRem(53);
       padding: toRem(14) toRem(12);
     }
+    .sidebar-text {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      @include selection_Invisible;
+      > span {
+        animation: sidebarTextScroll 7s linear infinite paused;
+        display: block;
+      }
+    }
   }
   .card-content {
     display: flex;
@@ -231,23 +243,34 @@ export default {
     display: flex;
     align-items: flex-end;
   }
+    &:hover {
+      .sidebar-text > span {
+      animation-play-state: running;
+    }
+  }
 }
 // ////////////////////////////////////////////////////////////// Type [Project]
 .card.type__project {
   position: relative;
+  box-sizing: content-box;
+  // height: 100%;
   @include mini {
     height: toRem(330);
   }
   .sidebar {
     position: relative;
     background-color: $color_Secondary;
+    border-top-left-radius: toRem(8);
+    border-bottom-left-radius: toRem(8);
     &:before {
       content: '';
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
+      border-top-left-radius: toRem(8);
+      border-bottom-left-radius: toRem(8);
       opacity: 0;
       background-color: $color_Primary;
       transition: 1ms linear 350ms;
@@ -258,6 +281,7 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    height: 100%;
     .sidebar-text {
       transition: 1ms linear 350ms;
       height: calc(100% - 70px);
@@ -404,7 +428,9 @@ export default {
 .card.type__slider {
   width: 100%;
   height: 100%;
+  overflow: hidden;
   .sidebar {
+    height: calc(100% + 2px);
     @include small {
       border-right: solid 1.5px $color_Accent;
       width: toRem(53);
@@ -535,4 +561,14 @@ export default {
     transform: scaleX(1);
   }
 }
+
+@keyframes sidebarTextScroll {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-100%)
+  }
+}
+
 </style>
diff --git a/components/deck-of-cards.vue b/components/deck-of-cards.vue
@@ -184,7 +184,8 @@ export default {
       &:after {
         transform: translateX(0.125rem);
       }
-      &:hover {
+      &:hover,
+      &:focus-visible {
         &:after {
           transform: translateX(0.875rem);
         }
@@ -195,7 +196,8 @@ export default {
       &:after {
         transform: rotate(180deg) translateX(0.25rem);
       }
-      &:hover {
+      &:hover,
+      &:focus-visible {
         &:after {
           transform: rotate(180deg) translateX(0.875rem);
         }

diff --git a/components/section-collaborators.vue b/components/section-collaborators.vue
@@ -238,12 +238,14 @@ export default {
     }
     .slider-button {
       &.previous {
-        padding-left: 0;
         padding-right: 1rem;
         &:after {
           transform: rotate(180deg);
         }
       }
+      &.next {
+        padding-right: 1rem;
+      }
       &:after {
         @include mini {
           background-size: toRem(25) toRem(15);
@@ -318,7 +320,8 @@ export default {
   }
   .button-wrapper {
     transition: 220ms ease;
-    &:hover {
+    &:hover,
+    &:focus-within {
       transform: scale(1.05);
     }
     :deep(.button) {

diff --git a/components/section-hero.vue b/components/section-hero.vue
@@ -50,8 +50,8 @@ export default {
       tiny: [
         { offset: 4, reverse: true, transparent: ['programs'] },
         { offset: 36, transparent: ['data'] },
-        { offset: -12, reverse: true, fill: ['data'] },
-        { offset: 12, reverse: true, fill: ['programs'] },
+        { offset: -14, reverse: true, fill: ['data'] },
+        { offset: 14, reverse: true, fill: ['programs'] },
         { offset: 11, reverse: true },
         { offset: -4.5, reverse: true },
         { offset: 10, reverse: true },

diff --git a/components/site-footer.vue b/components/site-footer.vue
@@ -159,7 +159,8 @@ export default {
     display: block;
     width: fit-content;
     transition: 250ms ease;
-    &:hover {
+    &:hover,
+    &:focus-visible {
       transform: scale(1.08);
     }
   }
@@ -217,8 +218,8 @@ export default {
 
 .link {
   &.social {
-    padding: 0.75rem 0;
-    padding-left: 1.375rem;
+    margin: 0.75rem 0;
+    margin-left: 1.375rem;
   }
 }
 </style>
diff --git a/components/site-header.vue b/components/site-header.vue
@@ -186,8 +186,10 @@ export default {
 
 .logo {
   display: block;
+  width: fit-content;
   transition: 250ms ease;
-  &:hover {
+  &:hover,
+  &:focus-visible {
     transform: scale(1.08);
   }
   :deep(svg) {

diff --git a/components/typeface-pattern.vue b/components/typeface-pattern.vue
@@ -95,16 +95,36 @@ export default {
 .data-programs-typeface {
   &.tiny {
     display: none;
+    height: calc(toRem(55) + toRem(14));
     width: toRem(570);
     padding: toRem(7) 0;
     @include tiny {
       display: flex;
     }
+    @include customMaxMQ (390px) {
+      .data {
+        translate : toRem(-3);
+      }
+      programs {
+        translate :toRem(3);
+      }
+    }
+    @include customMaxMQ (375px) {
+      .typeface {
+        height: toRem(47);
+      }
+      .data {
+        translate : toRem(-12);
+      }
+      .programs {
+        translate :toRem(12);
+      }
+    }
   }
 }
 
 .typeface {
-  max-height: clamp(55px, vw(145px), toRem(145));
+  height: clamp(55px, vw(145px), toRem(145));
   :deep(path) {
     fill: transparent;
   }