fix: styles for nuxtjs.org 🚧 (#392)

* add DM fonts * fix(nuxtjs): use typescript * init style fixes * ✨ (head) move design things to defaultTheme instead of app also improve Windi parsing * add body text tokens * move hero parallax * HeroDescription * cleanup section titles and description * merge conflict * cleanup section titles and description * fix buttons * discover dx items * add category label * section content item * header border and bg; footer; lot of fixes * fix: parallax * update primary color * fix sections bgs * fix dark footer text colors * tokenise body text color; fixes * fix docus aside and toc dark bg Co-authored-by: Farnabaz <[email protected]> Co-authored-by: Yaël GUILLOUX <[email protected]>
nuxt-themes · Jun 11, 2021 · 7538ae0 · 7538ae0
1 parent d98c578
commit 7538ae0
Show file tree

Hide file tree

Showing 51 changed files with 658 additions and 517 deletions.
diff --git a/nuxtjs.org/components/AButton.vue b/nuxtjs.org/components/AButton.vue
@@ -24,7 +24,7 @@
   </Component>
 </template>
 <script>
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent, ref } from '@vue/composition-api'
 
 export default defineComponent({
   props: {
@@ -58,27 +58,27 @@ export default defineComponent({
     }
   },
   setup() {
-    let focusedByMouse = false
-    let focus = false
-    let focusVisible = false
+    const focusedByMouse = ref(false)
+    const focus = ref(false)
+    const focusVisible = ref(false)
 
     function mousedownHandler() {
-      focusedByMouse = true
+      focusedByMouse.value = true
     }
 
     function handleFocus(state) {
       if (state) {
         if (focusedByMouse) {
-          focus = true
-          focusVisible = false
+          focus.value = true
+          focusVisible.value = false
         } else {
-          focus = true
-          focusVisible = true
+          focus.value = true
+          focusVisible.value = true
         }
       } else {
-        focus = false
-        focusVisible = false
-        focusedByMouse = false
+        focus.value = false
+        focusVisible.value = false
+        focusedByMouse.value = false
       }
     }
 

diff --git a/nuxtjs.org/components/ALabel.vue b/nuxtjs.org/components/ALabel.vue
@@ -3,6 +3,7 @@
     <slot />
   </Component>
 </template>
+
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
 export default defineComponent({

diff --git a/nuxtjs.org/components/ASelectNative.vue b/nuxtjs.org/components/ASelectNative.vue
@@ -13,12 +13,7 @@
       </option>
 
       <template v-for="(option, i) in normalizedOptions">
-        <optgroup
-          v-if="option.options"
-          :key="`${option.value}-${i}`"
-          :label="option.label"
-          :disabled="option.disabled"
-        >
+        <optgroup v-if="option.options" :key="`${option.value}-${i}`" :label="option.label" :disabled="option.disabled">
           <option
             v-for="(optGroupOption, i2) in option.options"
             :key="`${optGroupOption.value}-${i}-${i2}`"
@@ -28,21 +23,15 @@
           </option>
         </optgroup>
 
-        <option
-          v-else
-          :key="`${option.value}-${i}`"
-          :value="option.value"
-          :disabled="option.disabled"
-        >
+        <option v-else :key="`${option.value}-${i}`" :value="option.value" :disabled="option.disabled">
           {{ option.text }}
         </option>
       </template>
     </select>
-    <div
-      class="pointer-events-none absolute inset-y-0 right-0 px-2 flex items-center"
-    >
+
+    <div class="pointer-events-none absolute inset-y-0 right-0 px-2 flex items-center">
       <svg
-        class="h-4 w-4 dark:text-white light:text-gray-500"
+        class="h-4 w-4 dark:text-secondary light:text-gray-300"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 20 20"
         fill="currentColor"
@@ -117,9 +106,7 @@ export default defineComponent({
       return {
         label: optgroup.label,
         disabled: optgroup.disabled,
-        options: optgroup.options
-          .map((option) => this.normalizeOption(option))
-          .filter(Boolean)
+        options: optgroup.options.map(option => this.normalizeOption(option)).filter(Boolean)
       }
     }
 
@@ -166,11 +153,7 @@ export default defineComponent({
     normalizedOptions() {
       if (Array.isArray(this.options)) {
         return this.options
-          .map((option) =>
-            option.options
-              ? this.normalizeOptionGroup(option)
-              : this.normalizeOption(option)
-          )
+          .map(option => (option.options ? this.normalizeOptionGroup(option) : this.normalizeOption(option)))
           .filter(Boolean)
       }
 

diff --git a/nuxtjs.org/components/AnimFromCliCodeblock.vue b/nuxtjs.org/components/AnimFromCliCodeblock.vue
@@ -60,15 +60,11 @@
           </p>
           <p class="flex">
             <span class="fromcli__seconddollar">$&nbsp;</span
-            ><span class="fromcli__yarn__cd"
-              >cd <span class="text-primary-green">My Project</span></span
-            >
+            ><span class="fromcli__yarn__cd">cd <span class="text-primary-green">My Project</span></span>
           </p>
           <p class="flex">
             <span class="fromcli__thirddollar">$&nbsp;</span
-            ><span class="fromcli__yarn__run"
-              >yarn run <span class="text-primary-green">dev</span></span
-            >
+            ><span class="fromcli__yarn__run">yarn run <span class="text-primary-green">dev</span></span>
           </p>
         </div>
         <div class="fromcli__code__ide">
@@ -94,28 +90,22 @@
             </p>
             <p>
               <!-- Logo component -->
-              <span>&lt;</span><span class="text-red-400">Logo</span
-              ><span>/&gt;</span>
+              <span>&lt;</span><span class="text-red-400">Logo</span><span>/&gt;</span>
             </p>
             <p>
               <!-- Nuxt Card component -->
-              <span>&lt;</span><span class="text-red-400">NuxtCard</span
-              ><span>&#47;&gt;</span>
+              <span>&lt;</span><span class="text-red-400">NuxtCard</span><span>&#47;&gt;</span>
             </p>
             <p>
               <!-- Nuxt Card component -->
-              <span>&lt;</span><span class="text-red-400">NuxtCard</span
-              ><span>&#47;&gt;</span>
+              <span>&lt;</span><span class="text-red-400">NuxtCard</span><span>&#47;&gt;</span>
             </p>
             <p>
               <!-- AlertBanner component -->
-              <span>&lt;</span><span class="text-red-400">AlertBanner</span
-              ><span>&#47;&gt;</span>
+              <span>&lt;</span><span class="text-red-400">AlertBanner</span><span>&#47;&gt;</span>
             </p>
             <p>
-              <span>&lt;</span>&#47;<span class="text-red-400">{{
-                'template'
-              }}</span
+              <span>&lt;</span>&#47;<span class="text-red-400">{{ 'template' }}</span
               ><span>&gt;</span>
             </p>
           </div>
@@ -124,22 +114,14 @@
     </div>
     <div class="fromcli__display">
       <div class="fromcli__display_loading">
-        <img
-          loading="lazy"
-          class="fromcli__display__logo"
-          src="~/static/img/home/learn/master/logo.svg"
-        />
+        <img loading="lazy" class="fromcli__display__logo" src="~/static/img/home/learn/master/logo.svg" />
         <div class="fromcli__display__progressbar">
           <div class="fromcli__display__progressbar__background"></div>
           <div class="fromcli__display__progressbar__progress"></div>
         </div>
       </div>
       <div class="fromcli__display__content">
-        <img
-          loading="lazy"
-          class="fromcli__display__content__logo"
-          src="~/static/img/home/learn/master/logo.svg"
-        />
+        <img loading="lazy" class="fromcli__display__content__logo" src="~/static/img/home/learn/master/logo.svg" />
         <img
           loading="lazy"
           class="fromcli__display__content__content1"
@@ -179,8 +161,7 @@
 
 .fromcli__display_loading {
   @apply overflow-hidden opacity-0;
-  animation: appear 300ms cubic-bezier(0.83, 0, 0.17, 1) forwards 3.5s,
-    disappear 200ms forwards 10.4s;
+  animation: appear 300ms cubic-bezier(0.83, 0, 0.17, 1) forwards 3.5s, disappear 200ms forwards 10.4s;
 }
 
 .fromcli__display__content {
@@ -192,20 +173,17 @@
   & img:first-child {
     @apply self-start mb-4;
     height: 36px;
-    animation: slideUpContent 300ms cubic-bezier(0.83, 0, 0.17, 1) forwards
-        10.9s,
+    animation: slideUpContent 300ms cubic-bezier(0.83, 0, 0.17, 1) forwards 10.9s,
       appear 150ms cubic-bezier(0.83, 0, 0.17, 1) forwards 10.9s;
   }
   & img:nth-child(2) {
     @apply mb-4 w-full;
-    animation: slideUpContent 300ms cubic-bezier(0.83, 0, 0.17, 1) forwards
-        11.1s,
+    animation: slideUpContent 300ms cubic-bezier(0.83, 0, 0.17, 1) forwards 11.1s,
       appear 150ms cubic-bezier(0.83, 0, 0.17, 1) forwards 11.1s;
   }
   & img:last-child {
     @apply w-full;
-    animation: slideUpContent 300ms cubic-bezier(0.83, 0, 0.17, 1) forwards
-        11.3s,
+    animation: slideUpContent 300ms cubic-bezier(0.83, 0, 0.17, 1) forwards 11.3s,
       appear 150ms cubic-bezier(0.83, 0, 0.17, 1) forwards 11.3s;
   }
 }
@@ -240,16 +218,13 @@ span[class*='fromcli__yarn'] {
   border-right: 0.15em solid transparent;
   letter-spacing: 0.75px;
   &.fromcli__yarn__createnuxtapp {
-    animation: typingVeryLong 1.5s steps(12, end) forwards,
-      blink-caret 0.75s step-end 4 backwards;
+    animation: typingVeryLong 1.5s steps(12, end) forwards, blink-caret 0.75s step-end 4 backwards;
   }
   &.fromcli__yarn__cd {
-    animation: typingSmall 1s steps(12, end) forwards 7.6s,
-      blink-caret 0.75s step-end 2 backwards 7.6s;
+    animation: typingSmall 1s steps(12, end) forwards 7.6s, blink-caret 0.75s step-end 2 backwards 7.6s;
   }
   &.fromcli__yarn__run {
-    animation: typingRunDev 1s steps(12, end) forwards 8.6s,
-      blink-caret 0.75s step-end 3 backwards 8.6s;
+    animation: typingRunDev 1s steps(12, end) forwards 8.6s, blink-caret 0.75s step-end 3 backwards 8.6s;
   }
 }
 
@@ -280,14 +255,12 @@ span[class*='fromcli__yarn'] {
 
 .fromcli__question2__answer1 {
   @apply opacity-0 overflow-hidden;
-  animation: appear 150ms ease forwards 3.5s,
-    heightDisappear 150ms ease forwards 4.2s;
+  animation: appear 150ms ease forwards 3.5s, heightDisappear 150ms ease forwards 4.2s;
 }
 
 .fromcli__question2__answer2 {
   @apply opacity-0 overflow-hidden;
-  animation: appear 150ms ease forwards 3.65s,
-    heightDisappear 150ms ease forwards 4.2s;
+  animation: appear 150ms ease forwards 3.65s, heightDisappear 150ms ease forwards 4.2s;
 }
 
 .fromcli__question3,

diff --git a/nuxtjs.org/components/AppFooter.vue b/nuxtjs.org/components/AppFooter.vue
@@ -1,8 +1,5 @@
 <template>
-  <footer
-    class="light:bg-gray-50 dark:bg-secondary-darker"
-    aria-labelledby="footerHeading"
-  >
+  <footer class="light:bg-gray-50 dark:bg-secondary-black" aria-labelledby="footerHeading">
     <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
       <div class="pb-8 xl:grid xl:grid-cols-5 xl:gap-8">
         <div class="grid grid-cols-2 gap-8 xl:col-span-4">
@@ -16,10 +13,24 @@
         <MFooterLanguage class="mt-12 xl:mt-0" />
       </div>
       <MFooterNewsLetter
-        class="border-t light:border-gray-200 dark:border-gray-600 pt-8 lg:flex lg:items-center lg:justify-between xl:mt-0"
+        class="
+          border-t
+          light:border-gray-200
+          dark:border-secondary-darker
+          pt-8
+          lg:flex lg:items-center lg:justify-between
+          xl:mt-0
+        "
       />
       <MFooterFoot
-        class="mt-8 border-t border-gray-200 dark:border-gray-600 pt-8 md:flex md:items-center md:justify-between flex-row-reverse"
+        class="
+          mt-8
+          border-t border-gray-200
+          dark:border-secondary-darker
+          pt-8
+          md:flex md:items-center md:justify-between
+          flex-row-reverse
+        "
       />
     </div>
   </footer>

diff --git a/nuxtjs.org/components/CategoryLabel.vue b/nuxtjs.org/components/CategoryLabel.vue
@@ -0,0 +1,16 @@
+<template>
+  <span class="text-terciary font-bold text-lg">{{ label }}</span>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    label: {
+      type: String,
+      default: ''
+    }
+  }
+})
+</script>
diff --git a/nuxtjs.org/components/HeaderNavigation.vue b/nuxtjs.org/components/HeaderNavigation.vue
@@ -10,10 +10,8 @@
       >
         <NuxtLink
           :to="`/${link.slug}/${link.children[0].slug || ''}`"
-          class="pb-2"
           :class="{
-            'text-primary-green': currentSlug === link.slug,
-            'mt-4': $route.path !== '/'
+            'text-primary-green': currentSlug === link.slug
           }"
         >
           {{ link.title }}

diff --git a/nuxtjs.org/components/HeroDescription.vue b/nuxtjs.org/components/HeroDescription.vue
@@ -0,0 +1,5 @@
+<template>
+  <p class="font-normal text-body-base xs:text-body-lg md:text-body-xl 2xl:text-body-2xl">
+    <slot />
+  </p>
+</template>