Merge branch 'develop' into feat-sign-up-poc

Author: tikagan

.fleek.json

@@ -0,0 +1,10 @@
+{
+    "build": {
+      "image": "node:16.19",
+      "command": "npm ci && npm run generate",
+      "publicDir": ".output/public",
+      "environment": {
+        "SERVER_ENV": "production"
+      }
+    }
+}

.gitattributes

@@ -0,0 +1,7 @@
+# Enforce unix newlines
+* text   eol=lf
+
+*.png    binary
+*.jpg    binary
+*.jpeg   binary
+*.webp   binary

.github/pull_request_template.md

@@ -7,4 +7,4 @@
 
 
 ## Ticket link
-<!-- Add link ticket here -->
+<!-- Add link ticket here, if none are available, delete this heading -->

.github/workflows/storybook.yml

@@ -8,6 +8,7 @@ on:
 
 jobs:
   build-and-deploy:
+    if: false
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎️

.gitignore

@@ -72,10 +72,12 @@ typings/
 
 # nuxt.js build output
 .nuxt
+.output
 
 # Nuxt generate
 dist
 
+
 # vuepress build output
 .vuepress/dist
 

assets/scss/core/layout-grid.scss

@@ -12,12 +12,14 @@
 .layout {
   position: relative;
   z-index: 100;
+  overflow-x: hidden;
 }
 
 [class~="grid"], [class*="grid-"], [class*="grid_"] {
   width: $gridWidth;
   margin: 0 auto;
   @include gridMaxMQ {
+    width: 100%;
     padding: 0 4.1665%;
   }
   &[class*="-noGutter"] {

assets/scss/theme/typography.scss

@@ -80,20 +80,24 @@ $fontAssetPath: 'assets/fonts';
   line-height: leading(65, 48);
   font-weight: 500;
   letter-spacing: 0.03em;
-  @include small {
-    font-size: toRem(30);
-    line-height: leading(43, 30);
+  @include medium {
+    font-size: toRem(36);
+    line-height: leading(48, 36);
     font-weight: 500;
     letter-spacing: 0.03em;
   }
+  @include mini {
+    font-size: toRem(30);
+    line-height: leading(43, 30);
+  }
 }
 
 @mixin h2 { // Roadmap headings
   font-size: toRem(26);
   line-height: leading(34, 26);
   font-weight: 500;
   letter-spacing: 0.03em;
-  @include small {
+  @include medium {
     font-size: toRem(20);
     line-height: leading(30, 20);
     font-weight: 500;
@@ -106,20 +110,24 @@ $fontAssetPath: 'assets/fonts';
   line-height: leading(30, 24);
   font-weight: 500;
   letter-spacing: 0.03em;
-  @include small {
-    font-size: toRem(16);
-    line-height: leading(27, 16);
+  @include medium {
+    font-size: toRem(18);
+    line-height: leading(27, 18);
     font-weight: 500;
     letter-spacing: 0.03em;
   }
+  @include mini {
+    font-size: toRem(16);
+    line-height: leading(27, 16);
+  }
 }
 
 @mixin h4 { // Roadmap milestone headings, captions for stats in hero section
   font-size: toRem(16);
   line-height: leading(30, 16);
   font-weight: 500;
   letter-spacing: 0.03em;
-  @include small {
+  @include medium {
     font-size: toRem(14);
     line-height: leading(16, 14);
     font-weight: 500;
@@ -132,7 +140,7 @@ $fontAssetPath: 'assets/fonts';
   line-height: leading(19, 16);
   font-weight: 500;
   letter-spacing: 0.11em;
-  @include small {
+  @include medium {
     font-size: toRem(14);
     line-height: leading(16, 14);
     font-weight: 500;
@@ -199,7 +207,7 @@ $fontAssetPath: 'assets/fonts';
   line-height: leading(27, 16);
   font-weight: 500;
   letter-spacing: 0.03em;
-  @include small {
+  @include medium {
     font-size: toRem(14);
     line-height: leading(21, 14);
     font-weight: 600;
@@ -237,6 +245,10 @@ $fontAssetPath: 'assets/fonts';
   line-height: leading(27, 14);
   font-weight: 500;
   letter-spacing: 0.01em;
+  @include tiny {
+    font-size: toRem(12);
+    line-height: leading(27, 12);
+  }
 }
 
 @mixin formFieldPlaceholder {

components/blocks/accordion-block.vue

@@ -97,17 +97,31 @@ const getIconComponent = (icon) => {
   align-items: center;
   padding: toRem(16) 0;
   cursor: pointer;
+  @include tiny {
+    padding: toRem(10) 0;
+    padding-right: toRem(38);
+  }
   .icon {
     width: toRem(30);
     height: toRem(30);
     margin-right: toRem(22);
+    @include tiny {
+      width: toRem(22);
+      height: toRem(22);
+      min-width: toRem(22);
+    }
   }
   :deep(.plus-minus-icon) {
     position: absolute;
     right: 0;
     top: calc(50% - toRem(15));
     width: toRem(30);
     height: toRem(30);
+    @include tiny {
+      width: toRem(22);
+      height: toRem(22);
+      top: calc(50% - toRem(11));
+    }
     circle {
       @include transitionDefault;
       fill: rgba($codGray, 0);
@@ -121,6 +135,12 @@ const getIconComponent = (icon) => {
   max-height: 0;
   overflow: hidden;
   transition: max-height 300ms cubic-bezier(0.33, 0.2, 0.41, 0.99);
+  @include mini {
+    padding: 0 toRem(48);
+  }
+  @include tiny {
+    padding: 0 toRem(41);
+  }
   .text {
     @include p2;
     margin-bottom: toRem(16);
@@ -161,6 +181,12 @@ const getIconComponent = (icon) => {
   &.open {
     .accordion-content {
       max-height: toRem(200);
+      @include large {
+        max-height: toRem(228);
+      }
+      @include medium {
+        max-height: toRem(300);
+      }
     }
   }
   &.open,

components/blocks/card-list-block.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="card-list-block">
-    <div :class="grid">
+    <div :class="[grid, 'no-padding']">
       <div
         v-for="(card, i) in cards"
         :key="`card-col-${i}`"
-        :class="columns">
+        :class="[columns, 'card-wrapper']">
 
         <Card :card="card" />
 

components/blocks/code-block.vue

@@ -44,6 +44,9 @@ const lines = computed(() => {
   padding: toRem(24);
   background-color: $codeBlack;
   border-radius: toRem(6);
+  @include mini {
+    padding: toRem(7) toRem(13);
+  }
 }
 
 .code-line {
@@ -52,26 +55,71 @@ const lines = computed(() => {
   @include inlineCode;
   margin-bottom: 0.125rem;
   color: $sageGreen;
+  @include medium {
+    margin-bottom: 0;
+  }
+  @include mini {
+    overflow: hidden;
+  }
   &.heading {
     color: $eastSide;
   }
 }
 
 .code {
   display: inline-block;
+  white-space: nowrap;
   @include inlineCode;
+  @include tiny {
+    font-size: 0.75rem;
+  }
   &.id,
   &.type {
     width: 12%;
+    @include medium {
+      width: 20%;
+    }
+    @include tiny {
+      width: 13%;
+    }
+  }
+  &.id {
+    @include small {
+      display: none;
+    }
+    @include mini {
+      display: inline-block;
+    }
+    @include tiny {
+      width: 10%;
+    }
   }
   &.path {
     width: 40%;
+    @include medium {
+      width: 60%;
+    }
+    @include small {
+      width: 80%;
+    }
+    @include mini {
+      width: 60%;
+    }
+    @include tiny {
+      width: 62%;
+    }
   }
   &.scan-state {
     width: 21%;
+    @include medium {
+      display: none;
+    }
   }
   &.dag-state {
     width: 16%;
+    @include gridMaxMQ {
+      display: none;
+    }
   }
 }
 </style>

components/blocks/text-block.vue

@@ -122,6 +122,13 @@ export default {
       width: toRem(90);
       height: toRem(90);
       margin-right: toRem(35);
+      @include medium {
+        width: toRem(60);
+        height: toRem(60);
+      }
+      @include tiny {
+        margin-right: toRem(17);
+      }
     }
   }
   span {

components/button/cta.vue

@@ -122,6 +122,7 @@ const props = defineProps({
 }
 
 .button-content {
+  white-space: nowrap;
   @include transitionDefault;
   &.hide {
     opacity: 0;
@@ -218,6 +219,9 @@ const props = defineProps({
   border: 2px solid $sageGreen;
   background-color: rgba($sageGreen, 0);
   @include transitionDefault;
+  @include mini {
+    padding: toRem(6);
+  }
   .button-content {
     display: flex;
   }