Merge pull request #56 from Sapiens-OSS/brand-home

Update branding colours and revamp home page
Sapiens-OSS · Nov 18, 2023 · 19a7130 · 19a7130
2 parents 7299a0a + 66fc7bd
commit 19a7130
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 9 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "nuxt.isNuxtApp": false
+}
diff --git a/docs/index.md b/docs/index.md
@@ -14,4 +14,40 @@ hero:
     - theme: alt
       text: Join the Discord
       link: https://discord.gg/WnN8hj2Fyg
----
+
+features:
+  - icon: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="30"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" /></svg>
+    title: Community made
+    details: Documentation is written for developers, by developers.
+  - icon: <svg width="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 5C3 6.30622 3.83481 7.41746 5 7.82929V16.1707C3.83481 16.5825 3 17.6938 3 19C3 20.6569 4.34315 22 6 22C7.65685 22 9 20.6569 9 19C9 17.6938 8.16519 16.5825 7 16.1707V11.3987C8.89299 14.0198 11.8676 15.7195 15.1597 15.9683C15.5625 17.15 16.682 18 18 18C19.6569 18 21 16.6569 21 15C21 13.3431 19.6569 12 18 12C16.7075 12 15.6058 12.8174 15.1839 13.9635C11.726 13.6534 8.7142 11.3899 7.47847 8.09457L7.3272 7.6912C8.31833 7.20148 9 6.18034 9 5C9 3.34315 7.65685 2 6 2C4.34315 2 3 3.34315 3 5ZM6 18C5.44772 18 5 18.4477 5 19C5 19.5523 5.44772 20 6 20C6.55228 20 7 19.5523 7 19C7 18.4477 6.55228 18 6 18ZM17 15C17 14.4477 17.4477 14 18 14C18.5523 14 19 14.4477 19 15C19 15.5523 18.5523 16 18 16C17.4477 16 17 15.5523 17 15ZM5 5C5 4.44772 5.44772 4 6 4C6.55228 4 7 4.44772 7 5C7 5.55228 6.55228 6 6 6C5.44772 6 5 5.55228 5 5Z" fill="currentColor"/></svg>
+    title: Open source
+    details: Anyone can contribute to our documentation, correcting mistakes and adding knowledge.
+  - icon: <svg fill="currentColor" width="30" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">  <g>  <path d="M2,9H9V2H2Zm0,9H9V11H2ZM18,2H11V9h7Zm-8,9,5,8,5-8Z"/>  </g>  </svg>
+    title: Projects
+    details: Many Sapiens-OSS projects provide documentation for developers on this wiki.
+  - icon: <svg width="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 17H12.01M12 14C12.8906 12.0938 15 12.2344 15 10C15 8.5 14 7 12 7C10.4521 7 9.50325 7.89844 9.15332 9M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg>
+    title: Developer support
+    details: Our Discord full of technically-minded developers are willing to provide help.
+---
+
+<style>
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #ea580c 30%, #fb923c);
+
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #fb923c 50%, #fdba74 50%);
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+</style>
diff --git a/docs/public/index.css b/docs/public/index.css
@@ -1,15 +1,26 @@
 @font-face {
-    font-family: 'SapiensLight';
-    src: url('/sapienslight-webfont.woff2') format('woff2'), url('/sapienslight-webfont.woff') format('woff'), url('/sapienslight-webfont.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
+  font-family: "SapiensLight";
+  src: url("/sapienslight-webfont.woff2") format("woff2"),
+    url("/sapienslight-webfont.woff") format("woff"),
+    url("/sapienslight-webfont.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
 }
 
 h1 {
-    font-family: "SapiensLight";
+  font-family: "SapiensLight";
 }
 
 .vp-doc > div > h1 {
-    font-size: 45px !important;
-    text-align: center;
-}
+  font-size: 45px !important;
+  text-align: center;
+}
+
+:root {
+  --vp-c-accent: rgb(218, 180, 11);
+  --vp-c-brand: #f97316;
+  --vp-c-brand-light: #f97316;
+  --vp-c-brand-lighter: #fb923c;
+  --vp-c-brand-dark: #c2410c;
+  --vp-c-brand-darker: #9a3412;
+}