chore: force build fleek-again

README.md

@@ -2,7 +2,7 @@
 [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?logo=conventionalcommits&logoColor=white)](https://conventionalcommits.org)
 
 
-<img src="/public/images/singularity-open-graph.jpg" alt="package graph image" width="500">
+<img src="/public/images/singularity-open-graph.jpg" alt="package graph image">
 
 ## Overview
 

assets/scss/theme/theme.scss

@@ -26,6 +26,30 @@ code {
   }
 }
 
+ul {
+  li {
+    list-style: none;
+    padding-left: toRem(24);
+    &:before {
+      content: '';
+      display: inline-block;
+      position: relative;
+      left: calc(toRem(-24) + 2px + 9px);
+      width: toRem(6);
+      height: toRem(6);
+      margin-left: -9px;
+      border-radius: 50%;
+      background-color: var(--primary-text-color);
+    }
+    li {
+      &:before {
+        background-color: transparent;
+        border: 1px solid white;
+      }
+    }
+  }
+}
+
 ///////////////////////////////////////////////////////////////////// Components
 // -----------------------------------------------------------------------------
 /*

assets/scss/theme/typography.scss

@@ -12,14 +12,22 @@ $fontAssetPath: 'assets/fonts';
 // -------------------------------------------------------- Suisse International
 @font-face {
   font-family: 'SuisseIntl';
-  src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Light.otf') format('opentype');
+  src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Light.eot');
+  src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Light.eot?#iefix') format('embedded-opentype'),
+    url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Light.woff2') format('woff2'),
+    url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Light.otf') format('opentype'),
+    url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Light.svg#SuisseIntl-Light') format('svg');
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'SuisseIntl';
-  src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Regular.otf') format('opentype');
+  src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Regular.eot');
+  src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Regular.eot?#iefix') format('embedded-opentype'),
+    url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Regular.woff2') format('woff2'),
+    url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Regular.otf') format('opentype'),
+    url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Regular.svg#SuisseIntl-Regular') format('svg');
   font-weight: 400;
   font-style: normal;
 }
@@ -33,9 +41,13 @@ $fontAssetPath: 'assets/fonts';
 
 @font-face {
   font-family: 'SuisseIntl';
-  src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Medium.otf') format('opentype');
+  src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Medium.eot');
+  src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Medium.eot?#iefix') format('embedded-opentype'),
+    url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Medium.woff2') format('woff2'),
+    url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Medium.otf') format('opentype'),
+    url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Medium.svg#SuisseIntl-Medium') format('svg');
   font-weight: 500;
-  font-style: bold;
+  font-style: normal;
 }
 
 @font-face {
@@ -47,26 +59,39 @@ $fontAssetPath: 'assets/fonts';
 
 @font-face {
   font-family: 'SuisseIntl';
-  src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-SemiBold.otf') format('opentype');
+  src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-SemiBold.eot');
+  src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-SemiBold.eot?#iefix') format('embedded-opentype'),
+    url('#{$fontAssetPath}/suisse-intl/SuisseIntl-SemiBold.woff2') format('woff2'),
+    url('#{$fontAssetPath}/suisse-intl/SuisseIntl-SemiBold.otf') format('opentype'),
+    url('#{$fontAssetPath}/suisse-intl/SuisseIntl-SemiBold.svg#SuisseIntl-SemiBold') format('svg');
   font-weight: 600;
-  font-style: bold;
+  font-style: normal;
 }
 
 @font-face {
   font-family: 'SuisseIntl';
-  src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Bold.otf') format('opentype');
+  src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Bold.eot');
+  src: url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Bold.eot?#iefix') format('embedded-opentype'),
+    url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Bold.woff2') format('woff2'),
+    url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Bold.otf') format('opentype'),
+    url('#{$fontAssetPath}/suisse-intl/SuisseIntl-Bold.svg#SuisseIntl-Bold') format('svg');
   font-weight: 700;
-  font-style: bold;
+  font-style: normal;
 }
 
 // --------------------------------------------------- Suisse International Mono
 @font-face {
   font-family: 'SuisseIntlMono';
-  src: url('#{$fontAssetPath}/suisse-intl-mono/SuisseIntlMono-Regular.otf') format('opentype');
+  src: url('#{$fontAssetPath}/suisse-intl-mono/SuisseIntlMono-Regular.eot');
+  src: url('#{$fontAssetPath}/suisse-intl-mono/SuisseIntlMono-Regular.eot?#iefix') format('embedded-opentype'),
+    url('#{$fontAssetPath}/suisse-intl-mono/SuisseIntlMono-Regular.woff2') format('woff2'),
+    url('#{$fontAssetPath}/suisse-intl-mono/SuisseIntlMono-Regular.otf') format('opentype'),
+    url('#{$fontAssetPath}/suisse-intl-mono/SuisseIntlMono-Regular.svg#Suisse-Intl-Mono-Regular') format('svg');
   font-weight: 400;
   font-style: normal;
 }
 
+
 // ///////////////////////////////////////////////////////// Basic Styles Mixins
 // -----------------------------------------------------------------------------
 

components/blocks/accordion-block.vue

@@ -24,9 +24,7 @@
         </div>
 
         <div class="accordion-content">
-          <div class="text">
-            {{ section.content }}
-          </div>
+          <div class="text" v-html="section.content" />
         </div>
 
       </div>

components/blocks/text-block.vue

@@ -36,7 +36,7 @@
           :variant="ctaVariant || cta.variant"
           :disabled="cta.disabled">
           <template #button-content>
-            {{ cta.text }}
+            <span class="text" v-html="cta.text" />
             <span
               v-if="cta.caption"
               class="caption">
@@ -198,12 +198,19 @@ export default {
         @include mini {
           height: toRem(33);
           padding: toRem(8) toRem(28) toRem(8) toRem(10);
+          @include iOSonly {
+            height: toRem(29);
+            padding: 0 toRem(17);
+          }
         }
       }
       .detail-wrapper {
         @include mini {
           left: toRem(-19);
           width: calc(100% + toRem(19) - toRem(2));
+          @include iOSonly {
+            display: none;
+          }
         }
       }
     }

components/button/cta.vue

@@ -21,13 +21,14 @@
             :d="path"
             stroke="#FFC582"
             stroke-width="2"
-            shape-rendering="crispEdges"
+            shape-rendering="auto"
             class="stroke-path" />
         </svg>
       </div>
 
       <div :class="['button-content', { hide: loading }]">
         <slot name="button-content" />
+        <IconArrow v-if="theme === 'secondary'" :class="['arrow', arrowDirection]" />
       </div>
 
       <slot name="loader" :loading="loading" />
@@ -78,6 +79,11 @@ const props = defineProps({
     type: String,
     required: false,
     default: ''
+  },
+  arrowDirection: { // 'left' or 'right', for theme secondary
+    type: String,
+    required: false,
+    default: 'right'
   }
 })
 
@@ -169,7 +175,7 @@ const detailHeight = computed(() => {
 
 .detail {
   .fill-path {
-    opacity: 0.2;
+    opacity: 0.5;
     fill: #070707;
     @include transitionDefault;
   }
@@ -179,7 +185,7 @@ const detailHeight = computed(() => {
 .theme__primary {
   display: block;
   width: fit-content;
-  filter: drop-shadow(0px 2px 14px rgba(255, 197, 130, 0.32));
+  filter: drop-shadow(0px 2px 14px rgba(255, 197, 130, 0.42));
   padding-left: toRem(25);
   cursor: pointer;
   &:before {
@@ -197,6 +203,17 @@ const detailHeight = computed(() => {
     border-bottom-right-radius: 2px;
     @include transitionDefault;
   }
+  @include iOSonly {
+    border: solid 2px $chardonnay;
+    border-radius: toRem(2);
+    padding-left: 0;
+    &::before {
+      content: none;
+    }
+    .detail-wrapper {
+      display: none;
+    }
+  }
   &.large {
     &:before {
       top: 0.5px;
@@ -207,6 +224,9 @@ const detailHeight = computed(() => {
     position: relative;
     height: toRem(41);
     padding: toRem(10) toRem(17) toRem(10) toRem(3);
+    @include iOSonly {
+      padding: toRem(10) toRem(17);
+    }
   }
   .button-content {
     display: flex;
@@ -243,19 +263,30 @@ const detailHeight = computed(() => {
   @include transitionDefault;
   .button-content {
     position: relative;
+    display: flex;
+    align-items: center;
     @include b2;
     color: $chardonnay;
-    &:after {
-      content: '↗';
+    .arrow {
       position: absolute;
-      margin-left: 0.5rem;
+      right: toRem(-18);
+      height: toRem(10);
+      width: toRem(10);
       @include transitionDefault;
+      &.left {
+        right: unset;
+        left: toRem(-18);
+        transform: scaleX(-1);
+      }
     }
   }
   &:hover,
   &:focus-visible {
-    .button-content::after {
-      transform: translateX(0.5rem);
+    .arrow {
+      right: toRem(-26);
+      &.left {
+        left: toRem(-26);
+      }
     }
   }
   &:focus-visible {
@@ -301,6 +332,13 @@ const detailHeight = computed(() => {
   :deep(.button-content) {
     @include h1;
     color: $sageGreen;
+    .text {
+      position: relative;
+      sup {
+        top: -0.5rem;
+        line-height: leading(63, 48);
+      }
+    }
     .caption {
       display: block;
       @include h4;

components/icon/arrow.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" fill="none">
+    <path fill="#FFC582" d="M2.584.392H9.64v7.056H7.768V3.64L1.784 9.576.424 8.248l5.968-6H2.584V.392Z" />
+  </svg>
+</template>

components/signup-card.vue

@@ -203,7 +203,10 @@ const selectOption = (setSelected, closePanel, option, field) => {
  * @method submitForm
  */
 const submitForm = async () => {
-  if (formSubmitted.value) { return }
+  if (formSubmitted.value) {
+    buttonStore.set({id: 'signup-card-form', loading: false})
+    return
+  }
   if (firstName.value && lastName.value && email.value && organization.value && country.value) {
     const body = {
         records: [
@@ -251,6 +254,7 @@ const submitForm = async () => {
   --border-gradient-angle: 0deg;
   @include cardPanel(var(--border-gradient-angle));
   padding: clamp(toRem(32), 3.5vw, toRem(58)) clamp(toRem(14), 7vw, toRem(103)) clamp(toRem(32), 6.3vw, toRem(93));
+  margin-bottom: toRem(76);
   .content {
     position: relative;
     z-index: 2;
@@ -316,6 +320,9 @@ const submitForm = async () => {
 
 .submit-button {
   align-self: flex-end;
+  :deep(.fill-path) {
+    opacity: .6;
+  }
   &.submitted,
   &.submitted:hover {
     cursor: default;
@@ -368,6 +375,7 @@ const submitForm = async () => {
 
 //-------------------------------------------------------------- Dropdown Fields
 .toggle-button {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -376,8 +384,7 @@ const submitForm = async () => {
   &.open {
     border-color: var(--secondary-text-color);
     border-bottom-color: transparent;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    background-color: $codGray;
   }
 }
 .toggle-button-label {
@@ -394,24 +401,24 @@ const submitForm = async () => {
   top: calc(100% - 8px);
   padding-top: 0;
   height: 0;
+  background-color: $codGray;
   @include transitionDefault;
   border: var(--secondary-text-color) 1px solid;
   overflow-y: scroll;
-  border-top-color: transparent;
+  border-top: none;
   border-bottom-left-radius: toRem(5);
   border-bottom-right-radius: toRem(5);
   &:not(.open) {
     transform: (translate(-50%, 0));
   }
   &.open {
-    height: toRem(93);
+    height: toRem(217);
   }
 }
 .option {
   @include formFieldPlaceholder;
   cursor: pointer;
   padding: 0 toRem(20) toRem(4);
-  background-color: #121212;
   @include transitionDefault;
   &:hover {
     background-color: var(--secondary-text-color);

components/site-footer.vue

@@ -97,7 +97,7 @@ const scrollToTop = async () => {
     background-size: 1439px 1200px;
     background-position: 315px -29px;
     background-repeat: no-repeat;
-    background-image: url('/images/ring-of-cross-sections-on-angle.png');
+    background-image: url('/images/ring-of-cross-sections-on-angle.jpg');
     @include gridMaxMQ {
       height: calc(100% + 3rem);
       width: 100%;