Preload font

Author: larsenwork

assets/css/_settings.css

@@ -58,26 +58,17 @@
   --zIndex-editor: 10;
   --zIndex-githubCorner: 1;
 
-
   --shadow1: 0 2px 16px hsla(0, 0%, 0%, 0.08);
   --shadow2: 0 0.25px 2px hsla(0, 0%, 0%, 0.16);
   --shadow1--hover: 0 5px 40px hsla(0, 0%, 0%, 0.12);
   --shadow2--hover: 0 1px 8px hsla(0, 0%, 0%, 0.08);
-  --shadow:
-      var(--shadow1),
-      var(--shadow2),
-      inset 0 2px 16px hsla(0, 0%, 0%, 0.0),
-      inset 0 0.25px 2px hsla(0, 0%, 0%, 0.0);
-  --shadow--inset:
-      0 5px 40px hsla(0, 0%, 0%, 0),
-      0 1px 8px hsla(0, 0%, 0%, 0),
-      inset 0 1px 8px hsla(0, 0%, 0%, 0.16),
-      inset 0 0.25px 2px hsla(0, 0%, 0%, 0.32);
-  --shadow--hover:
-      var(--shadow1--hover),
-      var(--shadow2--hover),
-      inset 0 2px 16px hsla(0, 0%, 0%, 0.0),
-      inset 0 0.25px 2px hsla(0, 0%, 0%, 0.0);
+  --shadow: var(--shadow1), var(--shadow2), inset 0 2px 16px hsla(0, 0%, 0%, 0),
+    inset 0 0.25px 2px hsla(0, 0%, 0%, 0);
+  --shadow--inset: 0 5px 40px hsla(0, 0%, 0%, 0), 0 1px 8px hsla(0, 0%, 0%, 0),
+    inset 0 1px 8px hsla(0, 0%, 0%, 0.16),
+    inset 0 0.25px 2px hsla(0, 0%, 0%, 0.32);
+  --shadow--hover: var(--shadow1--hover), var(--shadow2--hover),
+    inset 0 2px 16px hsla(0, 0%, 0%, 0), inset 0 0.25px 2px hsla(0, 0%, 0%, 0);
 }
 
 .theme-primary {

assets/css/_typography.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: 'gidole';
-  src: url('~/assets/fonts/gidole-regular.woff2') format('woff2');
+  src: url('/fonts/gidole-regular.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
 }

assets/css/_utilities.css

@@ -26,7 +26,9 @@
 .u-section {
   margin-bottom: var(--lineHeight-margin-large);
   &:last-child {
-    margin-bottom: calc(var(--lineHeight-margin-large) + var(--lineHeight-margin-small));
+    margin-bottom: calc(
+      var(--lineHeight-margin-large) + var(--lineHeight-margin-small)
+    );
   }
 }
 
@@ -99,3 +101,10 @@
 .u-textCapitalize {
   text-transform: capitalize;
 }
+
+/* ICON */
+.u-icon {
+  width: 1rem;
+  height: 1rem;
+  opacity: var(--opacity-high);
+}

components/select-chevron.vue

@@ -0,0 +1,25 @@
+<template>
+  <chevron-down-icon
+    class="u-icon c-selectChevron"
+  />
+</template>
+
+<script>
+import { ChevronDownIcon } from 'vue-feather-icons'
+
+export default {
+  components: {
+    ChevronDownIcon,
+  },
+}
+</script>
+
+<style>
+.c-selectChevron {
+  position: absolute;
+  right: var(--spacer-xsmall);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+</style>

components/select-chevrons.vue

@@ -21,7 +21,7 @@
         <div
           class="u-position-relative"
         >
-          <select-chevrons />
+          <select-chevron />
           <select
             v-model="$store.state.gradient.settings.easingFunction"
           >
@@ -39,7 +39,7 @@
         <div
           class="u-position-relative"
         >
-          <select-chevrons />
+          <select-chevron />
           <select
             v-model="$store.state.gradient.settings.colorMode"
           >
@@ -220,7 +220,7 @@
                     <div
                       class="u-position-relative"
                     >
-                      <select-chevrons />
+                      <select-chevron />
                       <select
                         id="c-gradientEditor-input-steps-number"
                         v-model="$store.state.gradient.steps.skip"
@@ -283,7 +283,7 @@
 </template>
 
 <script>
-import selectChevrons from '~/components/select-chevrons'
+import selectChevron from '~/components/select-chevron'
 import colorEdit from '~/components/tools/gradient/color-edit'
 import easingEdit from '~/components/tools/gradient/easing-edit'
 import easingPreview from '~/components/tools/gradient/easing-preview'
@@ -298,7 +298,7 @@ export default {
     easingPreview,
     directionEdit,
     directionPreview,
-    selectChevrons,
+    selectChevron,
   },
   mixins: [gradientOutput],
   computed: {

components/tools/gradient/editor.vue

@@ -40,6 +40,7 @@ module.exports = {
       { name: 'theme-color', content: '#ee2b7c' },
     ],
     link: [
+      { rel: 'preload', href: '/fonts/awesome-l.woff2', as: 'font' },
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
       {
         rel: 'apple-touch-icon',