Merge pull request #11 from data-preservation-programs/content-copy-i…

…mages feat: copy + images, review requests
data-preservation-programs · Jul 12, 2023 · 00fe792 · 00fe792
2 parents 64988ff + 3c9e967
commit 00fe792
Show file tree

Hide file tree

Showing 16 changed files with 239 additions and 109 deletions.
diff --git a/components/button.vue b/components/button.vue
@@ -75,7 +75,7 @@ export default {
 .type__nav-link {
   position: relative;
   @include cta;
-  padding: 0.75rem 0;
+  padding: toRem(10) 0;
   padding-left: 1rem;
   .text {
     display: inline-block;
@@ -85,18 +85,18 @@ export default {
     content: '';
     display: inline-block;
     position: relative;
-    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='14' viewBox='0 0 24 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M16 0C16 0.742 16.733 1.85 17.475 2.78C18.429 3.98 19.569 5.027 20.876 5.826C21.856 6.425 23.044 7 24 7M24 7C23.044 7 21.855 7.575 20.876 8.174C19.569 8.974 18.429 10.021 17.475 11.219C16.733 12.15 16 13.26 16 14M24 7H0' stroke='%231A1A1A' stroke-width='2'/%3e%3c/svg%3e ");
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 24 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M16 0C16 0.742 16.733 1.85 17.475 2.78C18.429 3.98 19.569 5.027 20.876 5.826C21.856 6.425 23.044 7 24 7M24 7C23.044 7 21.855 7.575 20.876 8.174C19.569 8.974 18.429 10.021 17.475 11.219C16.733 12.15 16 13.26 16 14M24 7H0' stroke='%231A1A1A' stroke-width='2'/%3e%3c/svg%3e ");
     background-repeat: no-repeat;
     background-size: 24px 14px;
     background-position: center right;
     width: 0;
-    height: 0.875rem;
+    height: toRem(10);
     transition: 250ms ease;
   }
   &:hover,
   &:focus-visible {
     &:after {
-      width: 2.375rem;
+      width: toRem(32);
     }
   }
 }

diff --git a/components/card.vue b/components/card.vue
@@ -222,9 +222,9 @@ export default {
       position: relative;
       width: 100%;
       height: 100%;
-      pointer-events: none;
-      @include selection_Invisible;
+        @include selection_Invisible;
       > span {
+        pointer-events: none;
         animation: sidebarTextScroll 7s linear infinite paused;
         display: block;
       }

diff --git a/components/section-collaborators.vue b/components/section-collaborators.vue
@@ -44,20 +44,13 @@
       <div class="col-7_md-8_sm-7_mi-12">
         <div class="cta-block">
 
-          <div class="typeface">
-            <JoinUsTypeface class="typeface" />
+          <div class="text-marquee">
+            <span class="typeface" v-html="ctatext.marquee_text" />
           </div>
 
           <div class="cta">
 
-            <div class="text">
-              <div class="strong">
-                Lorem ipsum work with us?
-              </div>
-              <div class="regular">
-                Lörem ipsum syfask disamma.
-              </div>
-            </div>
+            <span class="text regular" v-html="ctatext.text" />
 
             <div class="button-wrapper">
               <Button :button="{ url: 'https://boards.greenhouse.io/protocollabs/jobs/4864599004' }">
@@ -84,7 +77,6 @@
 import Button from '@/components/button'
 import ImageBlock from '@/components/blocks/image-block'
 import ArrowUpRight from '@/components/svgs/arrow-up-right'
-import JoinUsTypeface from '@/components/svgs/join-us'
 import CircularSlider from '@/components/sliders/circular-slider-b'
 
 // ====================================================================== Export
@@ -95,7 +87,6 @@ export default {
     Button,
     ImageBlock,
     ArrowUpRight,
-    JoinUsTypeface,
     CircularSlider
   },
 
@@ -105,6 +96,11 @@ export default {
       required: false,
       default: () => []
     },
+    ctatext: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     imageblock: {
       type: Object,
       required: false,
@@ -263,7 +259,6 @@ export default {
   height: 100%;
   background-color: $color_Secondary;
   border-radius: toRem(19);
-  padding: toRem(30) toRem(38);
   overflow: hidden;
   @include medium {
     padding: toRem(30) toRem(30);
@@ -272,27 +267,37 @@ export default {
     padding: toRem(27) toRem(19);
     padding-bottom: toRem(20);
   }
-  .typeface {
+  &:hover {
+    .typeface {
+      animation-play-state: running;
+    }
+  }
+  .text-marquee {
+    height: toRem(190);
     width: 100%;
-    margin-top: 1.125rem;
+  }
+  .typeface {
+    display: block;
+    font-family: $font_Primary;
+    font-size: toRem(146);
+    line-height: 1.3;
+    color: $color_Secondary;
+    @include fontWeight_Medium;
+    white-space: nowrap;
+    text-shadow: 0px 0px 0 $mercury, 0px 0px 0 $mercury, 0px 0px 0 $mercury, 0px 0px 0 $mercury;
+    -webkit-text-stroke: 1px $mercury;
+    animation: marqueeTextScroll 17s linear infinite paused;
+    pointer-events: none;
+    @include selection_Invisible;
     @include small {
       margin-top: 0;
       margin-bottom: 1.875rem;
     }
-    :deep(svg) {
-      width: toRem(1103);
-      transform: translateX(-138px);
-      @include small {
-        width: toRem(477);
-        transform: translateX(-50px);
-        height: toRem(45);
-        margin-bottom: 0;
-      }
-    }
   }
   .cta {
     display: flex;
     justify-content: space-between;
+    padding: toRem(30) toRem(19) toRem(30) toRem(38);
     @include large {
       align-items: flex-end;
     }
@@ -310,9 +315,6 @@ export default {
       @include small {
         @include fontSize_Small;
       }
-      .strong {
-        @include fontWeight_Medium;
-      }
       .regular {
         @include fontWeight_Regular;
       }
@@ -326,12 +328,12 @@ export default {
     }
     :deep(.button) {
       @include small {
-        width: toRem(39);
-        height: toRem(39);
+        width: toRem(94);
+        height: toRem(94);
       }
       svg {
-        width: toRem(39);
-        height: toRem(39);
+        width: toRem(94);
+        height: toRem(94);
       }
     }
   }
@@ -343,4 +345,14 @@ export default {
   }
 }
 
+// ////////////////////////////////////////////////////////////////// Animations
+@keyframes marqueeTextScroll {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-440%)
+  }
+}
+
 </style>
diff --git a/components/section-hero.vue b/components/section-hero.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="section-hero-header">
 
-    <div class="grid">
-      <div class="col-7_sm-8_ti-9">
+    <div class="grid-center">
+      <div class="col-7_sm-8_ti-9" data-push-right="off-4">
         <div
           class="statement-of-intent"
           v-html="headerData.statement.toUpperCase()">

diff --git a/components/site-footer.vue b/components/site-footer.vue
@@ -1,12 +1,12 @@
 <template>
   <footer class="site-footer">
-    <div class="grid-noGutter">
+    <div class="grid-noGutter-center">
 
-      <div class="col-12">
+      <div class="col-11">
         <div class="divider"></div>
       </div>
 
-      <div class="col-6_sm-12">
+      <div class="col-5_sm-12">
         <div class="site-footer-logo">
           <div class="statement-of-intent">
             {{ headerData.statement.toUpperCase() }}
@@ -41,7 +41,7 @@
         </div>
       </div>
 
-      <div class="col-12">
+      <div class="col-11">
         <div class="copyright-container">
           <div class="before">
             {{ copyright.before }}
@@ -205,13 +205,17 @@ export default {
   }
   .after {
     :deep(.button) {
+      transition: scale 250ms ease;
       &:not(:last-child) {
         margin-right: toRem(55);
       }
       .text {
         @include fontWeight_Medium;
         line-height: leading(36, 16);
       }
+      &:hover {
+        scale: 1.125;
+      }
     }
   }
 }
@@ -220,6 +224,17 @@ export default {
   &.social {
     margin: 0.75rem 0;
     margin-left: 1.375rem;
+    :deep(path) {
+      transition: all 250ms ease;
+      stroke: transparent;
+      stroke-width: 1px;
+    }
+    &:hover {
+      :deep(path) {
+        fill: transparent;
+        stroke: black;
+      }
+    }
   }
 }
 </style>
diff --git a/components/site-header.vue b/components/site-header.vue
@@ -21,15 +21,15 @@
     </div>
 
     <!-- =========================================================== Desktop -->
-    <div class="grid main-content">
+    <div class="grid-center main-content">
 
       <div class="col-2_sm-3">
         <NuxtLink to="/" class="logo">
           <SiteLogo />
         </NuxtLink>
       </div>
 
-      <div class="col-5_sm-3" data-push-left="off-5_sm-6">
+      <div class="col-5_sm-3" data-push-left="off-4_sm-6">
 
         <Navbar :links="navigation" class="desktop" />
 

diff --git a/content/core/general.json b/content/core/general.json
@@ -77,7 +77,7 @@
       }
     ],
     "copyright": {
-      "before": "© All Rights Reserved",
+      "before": "",
       "after": [
         {
           "text": "Terms",