VitePress visual refresh v1

docs/.vitepress/theme/style.css

@@ -94,16 +94,24 @@
   --vp-home-hero-name-color: transparent;
   --vp-home-hero-name-background: -webkit-linear-gradient(
     120deg,
-    #bd34fe 30%,
-    #41d1ff
+    #38b6ff 30%,
+    #5271ff
+
+    
   );
 
+  /*
+
   --vp-home-hero-image-background-image: linear-gradient(
     -45deg,
-    #bd34fe 50%,
-    #47caff 50%
+    #5271ff 50%,
+    #38b6ff 50%
+    
   );
-  --vp-home-hero-image-filter: blur(44px);
+  
+  --vp-home-hero-image-filter: blur(44px); 
+
+  */
 }
 
 @media (min-width: 640px) {
@@ -142,12 +150,12 @@
  */
 
 :root {
-  --primary: #2c7d00;
+  --primary: #5271ff;
   --vp-nav-logo-height: 48px;
 }
 
 html.dark {
-  --primary: #b2fb54;
+  --primary: #38b6ff;
 }
 
 body {
@@ -211,3 +219,85 @@ body {
 .outline-link {
   font-size: 12px !important;
 }
+
+/* Customization of VitePress CSS */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #5271ff, #38b6ff);
+}
+
+.VPButton.brand {
+  background: linear-gradient(-45deg,  #5271ff, #38b6ff) !important;
+
+}
+
+.VPButton.brand:hover {
+  background: linear-gradient(45deg, #5271ff, #5271ff) !important;
+}
+
+/* .vitepress/theme/custom.css */
+
+.image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%; /* Ensure it takes up the full height of the parent */
+  width: 100%;  /* Ensure it takes up the full width of the parent */
+}
+
+/* .vitepress/theme/custom.css */
+
+/* Container for all icons and arrows */
+.icon-container {
+  display: flex;
+  align-items: center; /* Align the icons and arrows vertically */
+  justify-content: center; /* Center the icons and arrows horizontally */
+  gap: 20px; /* Space between the icons and arrows */
+}
+
+/* BCH icon styling */
+.bch-icon {
+  width: 64px;
+  height: 64px;
+  transform: rotate(-15deg); /* Rotate the BCH icon by 15 degrees to the left */
+  fill: currentColor;
+}
+
+/* Stack icon styling */
+.stack-icon {
+  width: 64px;
+  height: 64px;
+  fill: currentColor;
+}
+
+/* Apps icon styling */
+.apps-icon {
+  width: 64px;
+  height: 64px;
+  fill: currentColor;
+}
+
+/* Arrow between Stack and BCH */
+.right-arrow {
+  width: 24px;
+  height: 24px;
+ 
+}
+
+/* Arrow between BCH and Apps */
+.left-arrow {
+  width: 24px;
+  height: 24px;
+
+}
+
+/* Light / dark mode logos */
+
+:root:not(.dark) .dark-only {
+  display: none;
+}
+
+:root:is(.dark) .light-only {
+  display: none;
+}