Merge pull request #61 from data-preservation-programs/feat-years-roadmap

feat: add years to roadmap

Author: orvn

assets/scss/theme/utilities.scss

@@ -97,6 +97,12 @@ $siam: #565D50; // siam
   border-radius: toRem(2);
 }
 
+@mixin focusOutlineSmall {
+  outline: 3px solid rgba(255, 197, 130, 0.7);
+  outline-offset: 4px;
+  border-radius: toRem(2);
+}
+
 @mixin focusBoxShadowLink {
   box-shadow: 0 0 0 5px rgba(255, 197, 130, 0.5);
   border-radius: 0.125rem;

components/roadmap.vue

@@ -26,6 +26,7 @@
 
               </div>
             </ZeroButton>
+            <div class="year" v-html="item.year" />
           </div>
         </div>
 
@@ -106,52 +107,74 @@ const cta = computed(() => {
 
 .heading-wrapper {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   margin-top: toRem(25);
+  @include mini {
+    position: relative;
+    z-index: 5;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+  }
+  .year {
+    @include h5;
+    letter-spacing: 0.48px;
+    margin-top: toRem(15);
+    margin-left: toRem(37);
+    @include mini {
+      margin: 0;
+    }
+  }
 }
 
 .heading-button {
   cursor: pointer;
+  width: fit-content;
   @include transitionDefault;
   @include mini {
     margin-top: 0;
-    margin-bottom: 0.5rem;
   }
   &:hover,
   &:focus-visible {
-    transform: scale(1.15);
+    transform: scale(1.15) translate(toRem(5), toRem(-1));
     .icon {
       :deep(path) {
         fill: $chardonnay;
       }
     }
-    .h2 {
-      color: $chardonnay;
-    }
   }
   &:focus-visible {
-    @include focusOutline;
+    @include focusOutlineSmall;
+    transform: scale(1.15) translate(toRem(5), toRem(-7));
   }
   .heading {
     display: flex;
-    align-items: center;
   }
   .icon {
-    width: toRem(41);
-    height: toRem(41);
+    width: toRem(23);
+    height: toRem(23);
     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);
+      transform: translateY(toRem(-1.5));
     }
     :deep(path) {
       transition: inherit;
     }
   }
   .h2 {
+    line-height: 1;
     @include transitionDefault;
+    @include medium {
+      line-height: 1.4;
+    }
+    @include tiny {
+      line-height: 1;
+    }
   }
 }
 

content/core/index.json

@@ -420,6 +420,7 @@
                 "items": [
                   {
                     "heading": "September",
+                    "year": "2023",
                     "milestones": [
                       {
                         "title": "Milestone 1",
@@ -433,6 +434,7 @@
                   },
                   {
                     "heading": "October",
+                    "year": "2023",
                     "milestones": [
                       {
                         "title": "Milestone 3",
@@ -442,6 +444,7 @@
                   },
                   {
                     "heading": "November",
+                    "year": "2023",
                     "milestones": [
                       {
                         "title": "Milestone 4",
@@ -451,6 +454,7 @@
                   },
                   {
                     "heading": "December",
+                    "year": "2023",
                     "milestones": [
                       {
                         "title": "Milestone 5",