fix: nuxtjs.org design

nuxtjs.org/components/ASelectNative.vue

@@ -2,6 +2,7 @@
   <div class="relative">
     <select
       v-bind="props"
+      class="select-none"
       :class="[{ 'pointer-events-none opacity-50': disabled }, selectClass]"
       @input="$emit('input', $event.target.value)"
       @focus="handleFocus(true)"

nuxtjs.org/components/MPartnersBanner.vue

@@ -70,7 +70,7 @@ export default defineComponent({
 .dark .partners__slider::before,
 .dark .partners__slider::after {
   @apply absolute h-24 w-48 z-10;
-  background: linear-gradient(to right, #01232d 0%, rgba(255, 255, 255, 0) 20%);
+  background: linear-gradient(to right, #001e26 0%, rgba(255, 255, 255, 0) 20%);
   content: '';
 }
 
@@ -84,7 +84,7 @@ export default defineComponent({
 @screen sm {
   .dark .partners__slider::before,
   .dark .partners__slider::after {
-    background: linear-gradient(to right, #01232d 0%, rgba(255, 255, 255, 0) 50%);
+    background: linear-gradient(to right, #001e26 0%, rgba(255, 255, 255, 0) 50%);
   }
 }
 
@@ -98,7 +98,7 @@ export default defineComponent({
 @screen md {
   .dark .partners__slider::before,
   .dark .partners__slider::after {
-    background: linear-gradient(to right, #01232d 0%, rgba(255, 255, 255, 0) 100%);
+    background: linear-gradient(to right, #001e26 0%, rgba(255, 255, 255, 0) 100%);
   }
 }
 

nuxtjs.org/components/PageHero.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="relative pt-24 pb-32 bg-gray-100 dark:bg-secondary-darkest">
+    <div class="relative d-container-content">
+      <h1 class="text-display-3 font-serif mb-4">{{ title }}</h1>
+      <p class="text-body-xl max-w-3xl">{{ description }}</p>
+    </div>
+
+    <img
+      loading="lazy"
+      :src="`/img/page-hero/dark/mountains.svg`"
+      class="absolute -bottom-1px left-0 w-full h-24 object-fill light:hidden pointer-events-none"
+      alt="A landscape image"
+    />
+    <img
+      loading="lazy"
+      :src="`/img/page-hero/light/mountains.svg`"
+      class="absolute -bottom-1px left-0 w-full h-24 object-fill dark:hidden pointer-events-none"
+      alt="A landscape image"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    }
+  }
+})
+</script>

nuxtjs.org/components/SimplePageHero.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="overflow-hidden mt-12 mb-6">
+    <div class="relative d-container-content">
+      <h1 class="text-display-4 font-serif mb-4">{{ title }}</h1>
+      <p class="text-body-lg max-w-3xl">{{ description }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    }
+  }
+})
+</script>

nuxtjs.org/content/design.md

@@ -0,0 +1,11 @@
+---
+template: page
+layout:
+  fluid: true
+---
+::page-hero
+title: NuxtJS Design Kit
+description: "NuxtJS is an MIT licensed open source project and completely free to use.
+You can freely use our logos as long as you mention NuxtJS and link to nuxtjs.org."
+---
+::

nuxtjs.org/content/resources.md

@@ -0,0 +1,10 @@
+---
+template: page
+layout:
+  fluid: true
+---
+::simple-page-hero
+title: NuxtJS Resources
+description: "Discover a panel of resources made by our partners. By using thoses affiliate resources links, you are helping us to maintain and develop the Open Source Framework."
+---
+::

nuxtjs.org/content/team.md

@@ -0,0 +1,10 @@
+---
+template: page
+layout:
+  fluid: true
+---
+::page-hero
+title: NuxtJS Team
+description: "The development of NuxtJS and its ecosystem is guided by an international team. We have a very active and engaged team that is constantly striving to push Nuxt forward."
+---
+::

nuxtjs.org/content/themes.md

@@ -0,0 +1,10 @@
+---
+template: page
+layout:
+  fluid: true
+---
+::simple-page-hero
+title: NuxtJS Themes
+description: "Discover a panel of resources made by our partners. By using thoses affiliate resources links, you are helping us to maintain and develop the Open Source Framework."
+---
+::

nuxtjs.org/content/video-courses.md

@@ -0,0 +1,10 @@
+---
+template: page
+layout:
+  fluid: true
+---
+::simple-page-hero
+title: NuxtJS Video Courses
+description: "Discover a panel of resources made by our partners. By using thoses affiliate resources links, you are helping us to maintain and develop the Open Source Framework."
+---
+::

nuxtjs.org/windi.config.js

@@ -5,7 +5,6 @@ export default {
     colors: {
       transparent: 'transparent',
       current: 'currentColor',
-
       'primary-green': '#00DC82',
       'secondary-surface': '#E5F9FF',
       'secondary-lightest': '#B7E1ED',
@@ -16,13 +15,6 @@ export default {
       'secondary-darker': '#003543',
       'secondary-darkest': '#012A35',
       'secondary-black': '#001E26',
-      // secondary: '#002E3B',
-      // 'secondary-lightest': '#95CDDE', // where the heck is lightest? colors are complete mess
-      // 'secondary-light': '#064A5B',
-      // 'secondary-dark': '#01232D',
-      // 'secondary-darker': '#001D25',
-      // 'secondary-darkest': '#00181F',
-
       terciary: '#B2CCCC', // cloud
       'cloud-surface': '#E6F0F0',
       'cloud-lightest': '#D1E2E2',
@@ -33,7 +25,6 @@ export default {
       'cloud-darker': '#334040',
       'cloud-darkest': '#273131',
       'cloud-black': '#1A2121',
-
       black: '#000',
       white: '#fff',
       blue: colors.lightBlue,
@@ -42,7 +33,6 @@ export default {
       rose: colors.rose,
       yellow: colors.amber,
       gray: colors.gray
-
       // $colorNeutralWhite: #FFFFFF;
       // $colorNeutralBlack: #000000;
       // $colorGreenLighter: #80EEC0;