Merge pull request #14 from data-preservation-programs/feat-site-polish

feat: site polish

Author: orvn

assets/scss/theme/typography.scss

@@ -106,8 +106,8 @@ $fontAssetPath: 'assets/fonts';
 }
 
 @mixin h3 { // Card headings
-  font-size: toRem(24);
-  line-height: leading(30, 24);
+  font-size: toRem(20);
+  line-height: leading(25, 20);
   font-weight: 500;
   letter-spacing: 0.03em;
   @include medium {

assets/scss/theme/utilities.scss

@@ -196,13 +196,13 @@ $siam: #565D50; // siam
 }
 
 @mixin selection-dark {
-  ::-moz-selection { background: $alto; color: $codGray; }
-  ::selection { background: $alto; color: $codGray; }
+  ::-moz-selection { background: $sageGreen; color: $codGray; }
+  ::selection { background: $sageGreen; color: $codGray; }
 }
 
 @mixin selection-light {
-  ::-moz-selection { background: $alto; color: $codGray; }
-  ::selection { background: $alto; color: $codGray; }
+  ::-moz-selection { background: $sageGreen; color: $codGray; }
+  ::selection { background: $sageGreen; color: $codGray; }
 }
 
 @mixin gradientText {
@@ -227,3 +227,25 @@ $siam: #565D50; // siam
     text-fill-color: $codGray;
   }
 }
+
+@mixin gradientTextBase {
+  background-clip: text;
+  -moz-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-text-fill-color: transparent;
+  text-fill-color: transparent;
+  // IE11 fix
+  @include IE10and11 {
+    background: none;
+  }
+  &::-moz-selection {
+    -webkit-text-fill-color: $codGray;
+    -moz-text-fill-color: $codGray;
+    text-fill-color: $codGray;
+  }
+  &::selection {
+    -webkit-text-fill-color: $codGray;
+    -moz-text-fill-color: $codGray;
+    text-fill-color: $codGray;
+  }
+}

components/blocks/accordion-block.vue

@@ -4,13 +4,12 @@
       <div
         v-for="(section, index) in sections"
         :key="`accordion-section-${index}`"
-        :class="['accordion-section', { open: active[index] } ]">
+        :class="['accordion-section', { open: active[index] } ]"
+        @click="toggleSection(index)">
 
         <div class="border"></div>
 
-        <div
-          class="accordion-heading"
-          @click="toggleSection(index)">
+        <div class="accordion-heading">
 
           <component :is="getIconComponent(section.icon)" class="icon" />
 
@@ -96,7 +95,6 @@ const getIconComponent = (icon) => {
   display: flex;
   align-items: center;
   padding: toRem(16) 0;
-  cursor: pointer;
   @include tiny {
     padding: toRem(10) 0;
     padding-right: toRem(38);
@@ -159,6 +157,7 @@ const getIconComponent = (icon) => {
   position: relative;
   padding: 0 toRem(17);
   margin-bottom: toRem(13);
+  cursor: pointer;
   @include shadow2;
   @include blurredBackdrop;
   &:after {
@@ -178,6 +177,14 @@ const getIconComponent = (icon) => {
     -webkit-mask-composite: xor;
             mask-composite: exclude;
   }
+  &:hover {
+    &:after {
+      opacity: 1;
+    }
+    :deep(.plus-minus-icon) {
+      filter: drop-shadow(0px 0px 3px rgba(#FFC582, 0.6));
+    }
+  }
   &.open {
     .accordion-content {
       max-height: toRem(200);
@@ -189,17 +196,5 @@ const getIconComponent = (icon) => {
       }
     }
   }
-  &.open,
-  &:hover {
-    &:after {
-      opacity: 1;
-    }
-    :deep(.plus-minus-icon) {
-      filter: drop-shadow(0px 0px 3px rgba(#FFC582, 0.6));
-      circle {
-        fill: rgba($codGray, 0.8);
-      }
-    }
-  }
 }
 </style>

components/blocks/text-block.vue

@@ -25,13 +25,15 @@
     </div>
 
     <div v-if="block.ctas" class="button-row">
-      <template v-if="block.ctas && Array.isArray(block.ctas)">
+      <template v-if="ctaData">
         <ButtonCta
           v-for="(cta, index) in ctaData"
           :key="index"
           :tag="cta.tag"
           :to="cta.to"
           :theme="cta.theme"
+          :target="cta.target"
+          :variant="ctaVariant || cta.variant"
           :disabled="cta.disabled">
           {{ cta.text }}
           <span
@@ -71,11 +73,43 @@ export default {
     }
   },
 
+  data () {
+    return {
+      resize: false,
+      ctaVariant: false
+    }
+  },
+
   computed: {
     ctaData () {
-      return this.block.ctas.map((object) => {
-        return { ...object, disabled: object.to === undefined || object.to === '' }
-      })
+      if (this.block.ctas && Array.isArray(this.block.ctas)) {
+        return this.block.ctas.map((object) => {
+          return { ...object, disabled: object.to === undefined || object.to === '' }
+        })
+      }
+      return false
+    }
+  },
+
+  mounted () {
+    if (this.ctaData && this.ctaData.some(cta => cta.theme === 'primary' && cta.variant !== 'large')) {
+      this.resizeCta()
+      this.resize = () => { this.resizeCta() }
+      window.addEventListener('resize', this.resize )
+    }
+  },
+
+  beforeUnmount () {
+    if (this.resize) { window.removeEventListener('resize', this.resize) }
+  },
+
+  methods: {
+    resizeCta () {
+      if (window.matchMedia('(max-width: 40rem)').matches) {
+        if (!this.ctaVariant) { this.ctaVariant = 'small' }
+      } else if (this.ctaVariant) {
+        this.ctaVariant = false
+      }
     }
   }
 }
@@ -139,6 +173,38 @@ export default {
     -webkit-text-fill-color: $alto;
     -moz-text-fill-color: $alto;
     text-fill-color: $alto;
+    &::-moz-selection {
+      -webkit-text-fill-color: $codGray;
+      -moz-text-fill-color: $codGray;
+      text-fill-color: $codGray;
+    }
+    &::selection {
+      -webkit-text-fill-color: $codGray;
+      -moz-text-fill-color: $codGray;
+      text-fill-color: $codGray;
+    }
+  }
+}
+
+.button-row {
+  :deep(.button) {
+    &.theme__primary {
+      @include mini {
+        height: toRem(33);
+      }
+      .inner-content {
+        @include mini {
+          height: toRem(33);
+          padding: toRem(8) toRem(28) toRem(8) toRem(10);
+        }
+      }
+      .detail-wrapper {
+        @include mini {
+          left: toRem(-19);
+          width: calc(100% + toRem(19) - toRem(2));
+        }
+      }
+    }
   }
 }
 </style>