Merge branch 'branding'

docs/.vitepress/theme/custom.css

@@ -1,44 +1,67 @@
 :root {
+  --fibbo-primary: #B978ED;
+  --fibbo-yellow: #F5EA70;
+  --fibbo-black: #0A0901;
+  --fibbo-black-300: #1A151E;
+  --fibbo-secondary: #FFFBE4;
+  --fibbo-secondary-300: #f4eecc;
+
+  /* Font */
+  --vp-c-text-1: var(--fibbo-black);
+
   /* Brand Primary Color */
-  --vp-c-brand-1: #6e15db;
-  --vp-c-brand-2: #6e15db;
+  --vp-c-brand-1: var(--fibbo-primary);
+  --vp-c-brand-2: var(--fibbo-primary);
 
-  --vp-button-brand-bg: #6e15db;
+  /* Primary Button */
+  --vp-button-brand-bg: var(--fibbo-primary);
+  --vp-button-brand-hover-bg: var(--fibbo-primary);
+  --vp-button-brand-active-bg: var(--fibbo-primary);
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-active-text: var(--vp-c-white);
 
   /* Backgrounds */
-  --vp-c-bg-alt: #faf8fc;
-  --vp-c-bg-soft: #faf8fc;
+  --vp-c-bg: var(--fibbo-secondary);
+  --vp-c-bg-alt: var(--fibbo-secondary-300);
+  --vp-c-bg-soft: var(--fibbo-secondary-300);
 
   /* Sidebar */
-  --vp-sidebar-bg-color: #faf8fc;
+  --vp-sidebar-bg-color: var(--fibbo-secondary);
+
+  /* Black */
+  --vp-c-black: #0E0317;
+}
 
-  /* Gray */
-  --vp-c-gray-3: #faf8fc;
+.VPButton.medium.alt {
+  color: var(--fibbo-secondary);
+  background: var(--fibbo-black-300);
+}
+.VPButton.medium.alt:hover {
+  color: var(--fibbo-secondary);
+  background: var(--fibbo-black-300);
+}
+.VPImage.logo {
+  height: 90%;
 }
 
 .dark {
   /* Brand Primary Color */
-  --vp-c-brand-1: #700de9;
-  --vp-c-brand-2: #700de9;
+  --vp-c-brand-1: var(--fibbo-primary);
+  --vp-c-brand-2: var(--fibbo-primary);
 
-  --vp-button-brand-bg: #700de9;
+  /* Font */
+  --vp-c-text-1: var(--fibbo-secondary);
 
   /* Backgrounds */
-  --vp-c-bg: #120220;
-  --vp-c-bg-alt: #1b1231;
-  --vp-c-bg-elv: #120220;
-  --vp-c-bg-soft: #1b1231;
+  --vp-c-bg: var(--fibbo-black);
+  --vp-c-bg-alt: var(--fibbo-black-300);
+  --vp-c-bg-elv: var(--fibbo-black-300);
+  --vp-c-bg-soft: var(--fibbo-black-300);
 
   /* Sidebar */
-  --vp-sidebar-bg-color: #120220;
-
-  /* Gray */
-  --vp-c-gray-3: #1b1231;
-
-  /* Primary Button */
-  --vp-button-brand-hover-bg: #5105ae;
+  --vp-sidebar-bg-color: var(--fibbo-black);
 
-  /* Hero Background Image */
-  --vp-home-hero-image-background-image: linear-gradient(-45deg, #700de96a 40%, #8f00dc1a 50%);
-  --vp-home-hero-image-filter: blur(44px);
+  /* White */
+  --vp-c-white: var(--fibbo-secondary);
 }

docs/getting-started/installation.md

@@ -39,4 +39,4 @@ npm install
 npm run dev
 ```
 
-## Manual installation (WIP)
+## Manual installation <Badge type="warning" text="work in progress" />

docs/guide/core/lights.md

@@ -1,4 +1,4 @@
-# Lights
+# Lights <Badge type="warning" text="work in progress" />
 
 As lights are still not supported natively in Fibbo, you should use the underlying libraries to create and manage lights in your scene.
 

docs/index.md

@@ -3,24 +3,24 @@
 layout: home
 
 hero:
-  name: "Fibbo"
+  name: "fibbo"
   text: "Creating games should be easy"
   image:
-    src: /fibbo-logo.png
+    src: /logo.png
     alt: Fibbo Logo
   actions:
     - theme: brand
       text: Quick start
       link: /getting-started/installation
     - theme: alt
-      text: Components
-      link: /components/introduction
+      text: Fundamentals
+      link: /guide/fundamentals
 
 features:
   - title: No configuration needed ⚙️
     details: Everything is set up for you out of the box.
   - title: Typescript support 🦺
     details: Full typescript support.
-  - title: Minimal code 🚀
-    details: Write less code and create more.
+  - title: 2D and 3D support 🎮
+    details: Create 2D and 3D games with the same API.
 ---