feat: site polish

assets/scss/typography.scss

@@ -95,7 +95,7 @@ $letterSpacing_Large: 0.03em;
   }
 }
 
-@mixin cta { // nav links, card ctas, footer links
+@mixin cta { // card ctas, footer links
   @include fontSize_Regular; // 18px
   @include fontWeight_Bold; // 700
   font-family: $font_Secondary;
@@ -109,6 +109,14 @@ $letterSpacing_Large: 0.03em;
   }
 }
 
+@mixin nav { // card ctas, footer links
+  @include fontSize_Small; // 16px
+  @include fontWeight_Bold; // 700
+  font-family: $font_Secondary;
+  line-height: leading(24, 18);
+  letter-spacing: 0.03em;
+}
+
 // @mixin h6 {
 //   @include fontSize_Regular; // 18px
 //   @include fontWeight_Medium; // 500

components/button.vue

@@ -74,12 +74,12 @@ export default {
 .type__text-only,
 .type__nav-link {
   position: relative;
-  @include cta;
+  @include nav;
   padding: toRem(10) 0;
   padding-left: 1rem;
   .text {
     display: inline-block;
-    @include cta;
+    @include nav;
   }
   &:after {
     content: '';

components/card.vue

@@ -224,8 +224,10 @@ export default {
       height: 100%;
         @include selection_Invisible;
       > span {
+        position: absolute;
+        bottom: 0;
         pointer-events: none;
-        animation: sidebarTextScroll 7s linear infinite paused;
+        animation: sidebarTextScroll 20s linear infinite paused;
         display: block;
       }
     }
@@ -567,7 +569,7 @@ export default {
     transform: translateY(0);
   }
   100% {
-    transform: translateY(-100%)
+    transform: translateY(80%)
   }
 }
 

components/navbar.vue

@@ -46,9 +46,5 @@ export default {
   &:last-child {
     @include sectionDivider;
   }
-  :deep(.text) {
-    font-size: 1rem;
-    line-height: leading(24, 16);
-  }
 }
 </style>

components/section-hero.vue

@@ -104,6 +104,10 @@ export default {
   left: 50%;
   transform: translateX(-50%);
   z-index: 1;
+  @include customMinMQ($breakpoint_Xlarge) {
+    width: $breakpoint_Xlarge;
+    margin: 0 auto;
+  }
   @include small {
     margin-top: 1rem;
   }

components/site-footer.vue

@@ -1,12 +1,12 @@
 <template>
   <footer class="site-footer">
-    <div class="grid-noGutter-center">
+    <div class="grid-noGutter">
 
-      <div class="col-11">
+      <div class="col-12">
         <div class="divider"></div>
       </div>
 
-      <div class="col-5_sm-12">
+      <div class="col-6_sm-12">
         <div class="site-footer-logo">
           <div class="statement-of-intent">
             {{ headerData.statement.toUpperCase() }}
@@ -41,7 +41,7 @@
         </div>
       </div>
 
-      <div class="col-11">
+      <div class="col-12">
         <div class="copyright-container">
           <div class="before">
             {{ copyright.before }}

components/site-header.vue

@@ -21,15 +21,15 @@
     </div>
 
     <!-- =========================================================== Desktop -->
-    <div class="grid-center main-content">
+    <div class="grid 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-4_sm-6">
+      <div class="col-5_sm-3" data-push-left="off-5_sm-6">
 
         <Navbar :links="navigation" class="desktop" />
 

components/typeface-pattern.vue

@@ -87,6 +87,9 @@ export default {
   &:first-child {
     padding-top: 0;
   }
+  @include customMinMQ($breakpoint_Xlarge) {
+    width: 101%;
+  }
   @include mini {
     padding-top: 0.5rem;
   }

content/core/index.json

@@ -270,7 +270,8 @@
           "push_left": "off-0_md-0_ti-0",
           "push_right": "off-0_md-1_ti-0"
         },
-        "description": "The Data Programs team is focused on growing the utilization of the Filecoin network, through the development of tools, products, and programs that make data storage on Filecoin more accessible.<br><br> Our team is a part of the Network Growth organization in Outercore, which focuses on ecosystem growth for the Filecoin and IPFS networks. We work closely with several other teams and individuals to form the broader working group. This WG supports several key initiatives in the Filecoin ecosystem.<br><br> In addition to developing and supporting tools and pipelines to onboard data to the network, we want to establish a high standard for how data should be onboarded to the decentralized web at scale. Everything we work on is designed to be open - join us in various Slack conversations, WG meetings, or contribute code to our repos."
+        "heading": "The Data Programs team is focused on growing the utilization of the Filecoin network, through the development of tools, products, and programs that make data storage on Filecoin more accessible.",
+        "description": "Our team is a part of the Network Growth organization in Outercore, which focuses on ecosystem growth for the Filecoin and IPFS networks. We work closely with several other teams and individuals to form the broader working group. This WG supports several key initiatives in the Filecoin ecosystem.<br><br> In addition to developing and supporting tools and pipelines to onboard data to the network, we want to establish a high standard for how data should be onboarded to the decentralized web at scale. Everything we work on is designed to be open - join us in various Slack conversations, WG meetings, or contribute code to our repos."
       }
     },
     "section_articles": {
@@ -301,21 +302,49 @@
               "cards": [
                 {
                   "type": "slider",
-                  "img": "/images/surface-of-the-moon.jpg",
-                  "title": "Implementation of a Third Party KYC (ID Check) for Fil+ Applicants",
-                  "description": "In the Fil+ application process, all application information is public in a GitHub issue in the Fil+ repo. Because all information is public, applicants are only required to use GitHub IDs as a personal identifier in an effort to keep personal information (name, email) from public view (and from potential abuse from scammers who scrape for ID info).",
+                  "img": "/images/data-programs-default-image-3.png",
+                  "title": "LDN Label Update — Part 1: Label Consolidation",
+                  "description": "GitHub issue labels have played an essential role in tracking and facilitating the distribution of DataCap for LDN applications in the Fil+ program.",
                   "ctas": [
                     {
                       "type": "text-only",
                       "text": "READ MORE",
-                      "url": "https://medium.com/filecoin-plus/implementation-of-a-third-party-kyc-id-check-for-fil-applicants-e5e825b1484e",
+                      "url": "https://medium.com/filecoin-plus/ldn-label-update-part-1-label-consolidation-ae2691c78702",
+                      "theme": "strong"
+                    }
+                  ]
+                },
+                {
+                  "type": "slider",
+                  "img": "/images/data-programs-default-image-7.png",
+                  "title": "Fil+ Notary App and GitHub Tooling Metrics Dashboard V0.1",
+                  "description": "I am thrilled to introduce the inaugural version of the Fil+ tooling metrics dashboard.",
+                  "ctas": [
+                    {
+                      "type": "text-only",
+                      "text": "READ MORE",
+                      "url": "https://medium.com/filecoin-plus/fil-notary-app-and-github-tooling-metrics-dashboard-v0-1-2012a9ed961f",
                       "theme": "strong"
                     }
                   ]
                 },
                 {
                   "type": "slider",
-                  "img": "/images/surface-of-the-moon.jpg",
+                  "img": "/images/data-programs-default-image-1.png",
+                  "title": "Announcing the Quality Phase for Filecoin Plus",
+                  "description": "The Filecoin Plus program has been in operation for over 2 years now, and has recently crossed over 700PiB of data onboarded through verified deals, constituting approximately 5% of total network capacity!",
+                  "ctas": [
+                    {
+                      "type": "text-only",
+                      "text": "READ MORE",
+                      "url": "https://medium.com/filecoin-plus/announcing-the-quality-phase-for-filecoin-plus-2890a9797456",
+                      "theme": "strong"
+                    }
+                  ]
+                },
+                {
+                  "type": "slider",
+                  "img": "/images/data-programs-default-image-6.png",
                   "title": "Retrieval Bot is Live!",
                   "description": "We are thrilled to announce the launch of our Retrieval Bot on DataCap applications which provides insight into historic retrievability of datasets stored by Fil+ clients.",
                   "ctas": [
@@ -329,7 +358,21 @@
                 },
                 {
                   "type": "slider",
-                  "img": "/images/surface-of-the-moon.jpg",
+                  "img": "/images/data-programs-default-image-2.png",
+                  "title": "Implementation of a Third Party KYC (ID Check) for Fil+ Applicants",
+                  "description": "In the Fil+ application process, all application information is public in a GitHub issue in the Fil+ repo. Because all information is public, applicants are only required to use GitHub IDs as a personal identifier in an effort to keep personal information (name, email) from public view (and from potential abuse from scammers who scrape for ID info).",
+                  "ctas": [
+                    {
+                      "type": "text-only",
+                      "text": "READ MORE",
+                      "url": "https://medium.com/filecoin-plus/implementation-of-a-third-party-kyc-id-check-for-fil-applicants-e5e825b1484e",
+                      "theme": "strong"
+                    }
+                  ]
+                },
+                {
+                  "type": "slider",
+                  "img": "/images/data-programs-default-image-3.png",
                   "title": "LDN Label Update — Part 1: Label Consolidation",
                   "description": "GitHub issue labels have played an essential role in tracking and facilitating the distribution of DataCap for LDN applications in the Fil+ program.",
                   "ctas": [
@@ -343,7 +386,21 @@
                 },
                 {
                   "type": "slider",
-                  "img": "/images/surface-of-the-moon.jpg",
+                  "img": "/images/data-programs-default-image-7.png",
+                  "title": "Fil+ Notary App and GitHub Tooling Metrics Dashboard V0.1",
+                  "description": "I am thrilled to introduce the inaugural version of the Fil+ tooling metrics dashboard.",
+                  "ctas": [
+                    {
+                      "type": "text-only",
+                      "text": "READ MORE",
+                      "url": "https://medium.com/filecoin-plus/fil-notary-app-and-github-tooling-metrics-dashboard-v0-1-2012a9ed961f",
+                      "theme": "strong"
+                    }
+                  ]
+                },
+                {
+                  "type": "slider",
+                  "img": "/images/data-programs-default-image-1.png",
                   "title": "Announcing the Quality Phase for Filecoin Plus",
                   "description": "The Filecoin Plus program has been in operation for over 2 years now, and has recently crossed over 700PiB of data onboarded through verified deals, constituting approximately 5% of total network capacity!",
                   "ctas": [
@@ -357,19 +414,32 @@
                 },
                 {
                   "type": "slider",
-                  "img": "/images/surface-of-the-moon.jpg",
-                  "title": "Fil+ Notary App and GitHub Tooling Metrics Dashboard V0.1",
-                  "description": "I am thrilled to introduce the inaugural version of the Fil+ tooling metrics dashboard.",
+                  "img": "/images/data-programs-default-image-6.png",
+                  "title": "Retrieval Bot is Live!",
+                  "description": "We are thrilled to announce the launch of our Retrieval Bot on DataCap applications which provides insight into historic retrievability of datasets stored by Fil+ clients.",
                   "ctas": [
                     {
                       "type": "text-only",
                       "text": "READ MORE",
-                      "url": "https://medium.com/filecoin-plus/fil-notary-app-and-github-tooling-metrics-dashboard-v0-1-2012a9ed961f",
+                      "url": "https://medium.com/filecoin-plus/retrieval-bot-is-live-ea577b61f7d3",
+                      "theme": "strong"
+                    }
+                  ]
+                },
+                {
+                  "type": "slider",
+                  "img": "/images/data-programs-default-image-2.png",
+                  "title": "Implementation of a Third Party KYC (ID Check) for Fil+ Applicants",
+                  "description": "In the Fil+ application process, all application information is public in a GitHub issue in the Fil+ repo. Because all information is public, applicants are only required to use GitHub IDs as a personal identifier in an effort to keep personal information (name, email) from public view (and from potential abuse from scammers who scrape for ID info).",
+                  "ctas": [
+                    {
+                      "type": "text-only",
+                      "text": "READ MORE",
+                      "url": "https://medium.com/filecoin-plus/implementation-of-a-third-party-kyc-id-check-for-fil-applicants-e5e825b1484e",
                       "theme": "strong"
                     }
                   ]
                 }
-
               ]
             }
           }

pages/index.vue

@@ -79,7 +79,7 @@ export default {
   background-repeat: repeat;
 }
 
-:deep(.hero-header) {
+:deep(#hero-header) {
   margin-bottom: clamp(toRem(80), vw(225px), toRem(225));
   @include mini {
     margin-bottom: clamp(3rem, 12vw, 6rem);
@@ -115,19 +115,25 @@ export default {
     }
   }
   .text-block {
+    font-family: $font_Secondary;
     &.theme__section-heading {
       margin-bottom: toRem(76);
       @include mini {
         margin-bottom: 0;
       }
     }
+    h2 {
+      font-size: clamp(toRem(18), vw(24px), toRem(24));
+      line-height: (36, 24);
+      font-weight: 600;
+      margin-bottom: toRem(55);
+    }
     .description {
       p {
-        @include h4;
-        margin-bottom: toRem(28);
-        &:first-child {
-          @include fontWeight_Semibold;
-        }
+        font-family: $font_Secondary;
+        font-size: clamp(toRem(16), vw(20px), toRem(20));
+        line-height: (30, 20);
+        font-weight: 500;
       }
     }
   }