init components restructuring; finish Landing; finish AppHeader compo…

…nents
nuxt-themes · May 10, 2023 · f0e00ff · f0e00ff
1 parent 848c1aa
commit f0e00ff
Show file tree

Hide file tree

Showing 62 changed files with 2,701 additions and 698 deletions.
diff --git a/.docs/.studio/app.config.json b/.docs/.studio/app.config.json
@@ -14,7 +14,8 @@
     "aside": {
       "level": 1,
       "collapsed": false,
-      "exclude": []
+      "exclude": [],
+      "navigation": true
     },
     "main": {
       "padded": true,
@@ -25,7 +26,8 @@
       "logo": true,
       "showLinkIcon": true,
       "exclude": [],
-      "fluid": true
+      "fluid": true,
+      "navigation": true
     },
     "footer": {
       "credits": {

diff --git a/.docs/components/landing/Glow.vue b/.docs/components/landing/Glow.vue
@@ -49,6 +49,14 @@ const props = defineProps({
   backgroundImage: {
     type: String,
     default: 'none'
+  },
+  beforeBlendMode: {
+    type: String,
+    default: 'color'
+  },
+  afterBlendMode: {
+    type: [String, Object],
+    default: 'color'
   }
 })
 </script>
@@ -66,6 +74,8 @@ const props = defineProps({
 <style scoped lang="ts">
 css({
   '.glow': {
+    '--beforeBlendMode': (props) => props.beforeBlendMode,
+    '--afterBlendMode': (props) => props.afterBlendMode,
     '--mask-gradient': (props) => typeof props.maskGradient === 'string' ? props.maskGradient : props.maskGradient.light,
     '--gradient': (props) => typeof props.gradient === 'string' ? props.gradient : props.gradient.light,
     '@dark': {
@@ -93,13 +103,17 @@ css({
       mask: 'var(--mask)',
       maskComposite: 'intersect',
       '-webkit-mask-composite': 'source-in',
-      mixBlendMode: 'color'
+      // mixBlendMode: 'color'
     },
     '&.noise::before': {
       filter: 'url(#f)'
     },
+    '&::before': {
+      mixBlendMode: 'var(--beforeBlendMode)',
+    },
     '&::after': {
       background: 'var(--gradient)',
+      mixBlendMode: 'var(--afterBlendMode)',
     }
   }
 })

diff --git a/...s/components/landing/BlockHeroVisuals.vue → .docs/components/landing/HeroVisuals.vue b/...s/components/landing/BlockHeroVisuals.vue → .docs/components/landing/HeroVisuals.vue
diff --git a/.docs/content/0.index.md b/.docs/content/0.index.md
@@ -6,7 +6,35 @@ main:
   fluid: false
 ---
 
-::block-hero
+::landing-section
+
+#root
+:hero-visuals
+::glow
+---
+top: calc(0px - var(--docus-app-header-height))
+height: calc(var(--hero-height) + var(--docus-app-header-height) + 20rem) 
+maskGradient: 
+  light: 
+    initial: radial-gradient(circle at 51% 64%, rgba(0,0,0, 1) -7%, rgba(0,0,0, 0) 70%)
+    xl: radial-gradient(at 70% 45%, red, rgba(255, 0, 0, 0) 85%)
+  dark: 
+    initial: radial-gradient(circle at 51% 64%, rgba(0,0,0, 1) -7%, rgba(0,0,0, 0) 70%)
+    xl: radial-gradient(at 70% 45%, red, rgba(255, 0, 0, 0) 85%)
+gradient:
+  light:
+    initial: radial-gradient(circle at 10% 50%,#4200ff 4%,#fbca0563 25%,#ff4700 65%)
+    xl: radial-gradient(circle at 10% 50%,#4200ff 17%, {color.primary.500} 35%,#fbca0563 56%,#ff4700e6 82%)
+  dark:
+    initial: radial-gradient(circle at 10% 50%,#4142dc,#fbca05db 45%,#ff4700 82%)
+    xl: radial-gradient(circle at 10% 50%,#4200ff 7%,#fbca0563 45%,#ff4700e6 82%)
+noise: true
+backgroundImage: linear-gradient(transparent 75%, {docus.body.backgroundColor})
+---
+::
+
+#default
+::hero
 ---
 cta:
   - Get started
@@ -16,32 +44,6 @@ secondary:
   - https://github.com/nuxt-themes/docus
 ---
 
-#root
-  :block-hero-visuals
-
-  ::glow
-  ---
-  top: calc(0px - var(--docus-header-height))
-  height: calc(var(--block-hero-height) + var(--docus-header-height) + 20rem) 
-  maskGradient: 
-    light: 
-      initial: radial-gradient(circle at 51% 64%, rgba(0,0,0, 1) -7%, rgba(0,0,0, 0) 70%)
-      xl: radial-gradient(at 70% 45%, red, rgba(255, 0, 0, 0) 85%)
-    dark: 
-      initial: radial-gradient(circle at 51% 64%, rgba(0,0,0, 1) -7%, rgba(0,0,0, 0) 70%)
-      xl: radial-gradient(at 70% 45%, red, rgba(255, 0, 0, 0) 85%)
-  gradient:
-    light:
-      initial: radial-gradient(circle at 10% 50%,#4200ff 4%,#fbca0563 25%,#ff4700 65%)
-      xl: radial-gradient(circle at 10% 50%,#4200ff 7%,#23d70c73 35%,#fbca0563 56%,#ff4700e6 82%)
-    dark:
-      initial: radial-gradient(circle at 10% 50%,#4142dc,#fbca05db 45%,#ff4700 82%)
-      xl: radial-gradient(circle at 10% 50%,#4200ff 7%,#23d70c73 35%,#fbca0563 45%,#ff4700e6 82%)
-  noise: true
-  backgroundImage: linear-gradient(transparent 75%, {docus.body.backgroundColor})
-  ---
-  ::
-
 #title
 The best place to start your documentation.
 
@@ -70,37 +72,53 @@ Write pages in [:icon{name=mdi:language-markdown}]{style="margin-right:4px"} [Ma
   ---
   :: 
 ::
+::
 
-::card-grid{cols=6 gap=1rem}
-
-#subtitle
-Subtitle
-
-#title
-What's included
+::landing-section{margin="{space.24} 0"}
 
 #root
 ::glow
 ---
-left: 20% 
-width: 60vw
-height: 15rem
-top: 45% 
-blur: 150px
-colors:
-  - '{color.yellow.700}'
-  - '{color.primary.700}'
-  - '{color.red.800}'
+height: 100%
+maskGradient: 
+  light: 
+    initial: radial-gradient(circle at 51% 44%, rgba(0,0,0, 1) -16%, rgba(0,0,0, 0) 74%)
+    lg: radial-gradient(at 43% 53%, red, rgba(255, 0, 0, 0) 85%)
+  dark: 
+    initial: radial-gradient(circle at 51% 44%, rgba(0,0,0, 1) -16%, rgba(0,0,0, 0) 94%)
+    lg: radial-gradient(at 43% 53%, rgba(0,0,0, 1), rgba(255, 0, 0, 0) 85%)
+gradient:
+  light:
+    initial: radial-gradient(circle at 40% 50%, {color.primary.400}, {color.secondary.400} 52%)
+    lg: radial-gradient(circle at 44% 72%, {color.primary.300} 0%, {color.primary.200} 12%, {color.secondary.400} 70%)
+  dark:
+    initial: radial-gradient(circle at 40% 50%, {color.secondary.600}, {color.orange.800} 52%)
+    lg: radial-gradient(circle at 44% 72%, {color.secondary.700} 12%,#e39f00 74%)
+noise: true
+backgroundImage: linear-gradient(transparent 75%, {docus.body.backgroundColor})
+afterBlendMode: 
+  initial: color
+  dark: darken
 ---
 ::
 
+#subtitle
+Features
+
+#title
+What's included
+
+#default
+::card-grid{cols=6 gap=1rem}
+
 #default
   ::card{icon=logos:nuxt-icon}
   ---
   col: 
     initial: 6
-    sm: 3
+    sm: 2
   row: 1
+  noise: true
   ---
   #title
   Nuxt Architecture
@@ -116,6 +134,7 @@ colors:
   row: 
     initial: 1
     sm: 2
+  noise: true
   ---
   #title
   Nuxt Studio ready
@@ -129,6 +148,7 @@ colors:
     initial: 6
     sm: 2
   row: 1
+  noise: true
   ---
   #title
   Vue Components
@@ -141,6 +161,7 @@ colors:
   col: 
     initial: 6
     sm: 2
+  noise: true
   ---
   #title
   Write Markdown
@@ -153,6 +174,7 @@ colors:
   col: 
     initial: 6
     sm: 3
+  noise: true
   ---
   #title
   Deploy anywhere
@@ -164,7 +186,8 @@ colors:
   ---
   col: 
     initial: 6
-    sm: 3
+    sm: 2
+  noise: true
   ---
 
   #title
@@ -173,3 +196,5 @@ colors:
   Make Docus your own! Use [Design Tokens](https://pinceau.dev/configuration/design-tokens) to build your own Design System.
   ::
 ::
+
+::