fix: desktop and mobile design audit fixes

Author: svvimming

components/card.vue

@@ -140,22 +140,19 @@ const iconComponent = computed(() => {
     z-index: 2;
     display: flex;
     justify-content: space-between;
-    align-items: center;
     height: 100%;
-    @include medium {
-      align-items: flex-start;
-    }
   }
   .image {
     padding: 0 toRem(28);
     max-height: toRem(120);
+    margin: auto 0;
     @include large {
       padding: 0;
       margin-right: 1rem;
     }
     @include medium {
       max-height: toRem(75);
-      margin-left: 1rem;
+      margin: 0 1rem;
     }
     @include small {
       margin-left: 0;

components/roadmap.vue

@@ -10,19 +10,22 @@
         <div
           class="col-4_sm-3_mi-10_ti-12"
           data-push-left="off-0_mi-1_ti-0">
-          <div class="heading">
-
+          <div class="heading-wrapper">
             <ZeroButton
               tag="a"
+              target="_blank"
               to="https://github.com/data-preservation-programs/singularity/milestones"
-              class="icon-button">
-              <GithubIcon class="icon" />
-            </ZeroButton>
+              class="heading-button">
+              <div class="heading">
 
-            <span class="h2">
-              {{ item.heading }}
-            </span>
+                <GithubIcon class="icon" />
+                
+                <span class="h2">
+                  {{ item.heading }}
+                </span>
 
+              </div>
+            </ZeroButton>
           </div>
         </div>
 
@@ -98,39 +101,56 @@ const cta = computed(() => {
     margin-bottom: toRem(15);
   }
   &:hover {
-    .icon {
+    .heading {
       transform: scale(1.15);
+    }
+    .icon {
       :deep(path) {
         fill: $chardonnay;
       }
     }
+    .h2 {
+      color: $chardonnay;
+    }
   }
 }
 
+.heading-wrapper {
+  display: flex;
+  align-items: center;
+}
+
 .heading {
   display: flex;
   align-items: center;
   margin-top: toRem(25);
+  cursor: pointer;
+  @include transitionDefault;
   @include mini {
     margin-top: 0;
     margin-bottom: 0.5rem;
   }
-  .icon-button {
+  .heading-button {
     display: block;
-    width: toRem(41);
-    height: toRem(41);
-    margin-right: toRem(14);
     padding: 0.5rem;
   }
   .icon {
-    width: 100%;
-    height: 100%;
-    transform: scale(1);
+    width: toRem(41);
+    height: toRem(41);
+    margin-right: toRem(14);
     transition: 300ms cubic-bezier(0.33, 0.2, 0.41, 0.99);
+    @include mini {
+      width: toRem(18);
+      height: toRem(18);
+      margin-right: toRem(7);
+    }
     :deep(path) {
       transition: inherit;
     }
   }
+  .h2 {
+    @include transitionDefault;
+  }
 }
 
 .roadmap-card {

components/site-footer.vue

@@ -81,6 +81,7 @@ const legal = computed(() => {
   align-items: center;
   padding: toRem(34) 0;
   height: toRem(234);
+  z-index: 10;
   @include gridMaxMQ {
     padding-top: toRem(72);
     height: unset;
@@ -149,6 +150,13 @@ const legal = computed(() => {
     @include mini {
       margin-bottom: toRem(22);
     }
+    :deep(a) {
+      display: inline-block;
+      @include transitionDefault;
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
     :deep(span) {
       &.green {
         color: $sageGreen;

components/subfooter-card.vue

@@ -49,8 +49,9 @@
         <div v-if="fullwidth" class="col-5_mi-12 inner-column">
           <div class="after">
 
-            <div class="description">
-              {{ description }}
+            <div
+              class="description"
+              v-html="description">
             </div>
 
             <div v-if="fullwidth && cta" class="cta">
@@ -222,11 +223,19 @@ const cardStyles = computed(() => {
 .description {
   font-size: toRem(18);
   line-height: leading(24, 18);
-  font-weight: 500;
   letter-spacing: 0.01em;
 }
 
+.description {
+  font-weight: 400;
+}
+
+:deep(.weight-500) {
+  font-weight: 500;
+}
+
 .subheading {
+  font-weight: 500;
   @include medium {
     font-size: toRem(16);
   }
@@ -241,6 +250,14 @@ const cardStyles = computed(() => {
       display: inline;
     }
   }
+  :deep(a) {
+    font-size: 1.125rem;
+    display: inline-block;
+    @include transitionDefault;
+    &:hover {
+      transform: scale(1.15);
+    }
+  }
 }
 
 .subfooter-card.fullwidth {
@@ -280,8 +297,10 @@ const cardStyles = computed(() => {
     }
   }
   .after {
+    margin-top: toRem(34);
     padding: 0 toRem(40);
     @include medium {
+      margin-top: 0;
       padding: 0;
     }
     .subheading {

content/core/index.json

@@ -504,7 +504,7 @@
         "borderGradientAngle": "45deg",
         "title": "<img src='/images/topography-graphic-with-border.svg' />Keep up<br>with Singularity",
         "subheading": "Your feedback can shape our next big release. <br>Join us on <a href='https://github.com/data-preservation-programs/singularity' target='_blank'>Github</a> and <a href='https://filecoinproject.slack.com/archives/C05JABREATH' target='_blank'>Slack</a>",
-        "description": "Sign up to keep up. We're passionate about keeping you in the loop with our latest features and updates, but we're even more committed to respecting your inbox.",
+        "description": "<span class='weight-500'>Sign up to keep up.</span> We're passionate about keeping you in the loop with our latest features and updates, but we're even more committed to respecting your inbox.",
         "cta": {
           "tag": "a",
           "to": "https://example.com",

pages/index.vue

@@ -265,6 +265,7 @@ onMounted(() => {
 
 :deep(#features) {
   padding-top: 0;
+  z-index: 10;
   @include medium {
     padding-top: toRem(35);
   }
@@ -317,6 +318,7 @@ onMounted(() => {
 }
 
 :deep(#how-it-works) {
+  padding-top: toRem(60);
   @include medium {
     padding-top: 0.875rem;
   }
@@ -357,6 +359,8 @@ onMounted(() => {
 }
 
 :deep(#roadmap) {
+  padding-top: toRem(11);
+  padding-bottom: 2rem;
   div[data-block-id="col_1"] {
     margin-bottom: toRem(45);
     @include medium {