feat: match wing.cloud styles

docusaurus.config.js

@@ -151,14 +151,14 @@ const config = {
         searchParameters: {},
 
         // Optional: path for search page that enabled by default (`false` to disable it)
-        searchPagePath: 'search',
+        searchPagePath: "search",
       },
       navbar: {
         title: "",
         logo: {
           alt: "Wing Logo",
-          src: "../img/wing-logo.svg",
-          srcDark: "../img/wing-logo-dark.svg",
+          src: "../img/winglang-logo-dark.svg",
+          srcDark: "../img/winglang-logo-light.svg",
           href: "https://winglang.io",
           target: "_self",
         },

src/css/custom.css

@@ -4,41 +4,43 @@
  * work well for content-centric websites.
  */
 
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
+
+@import url("../../static/fonts/GeneralSans/css/general-sans.css");
 
 /* You can override the default Infima variables here. */
 :root {
-  font-family: 'IBM Plex Sans', sans-serif;
+  font-family: "GeneralSans-Regular", sans-serif;
   --ifm-color-primary: #1c273d;
   --ifm-color-primary-dark: #192337;
   --ifm-color-primary-darker: #182134;
   --ifm-color-primary-darkest: #141b2b;
   --ifm-color-primary-light: #1f2b43;
   --ifm-color-primary-lighter: #1b918a;
   --ifm-color-primary-lightest: #24334f;
-  --ifm-code-font-size: 95%;
+  --ifm-code-font-size: 100%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-  --ifm-font-family-base: 'IBM Plex Sans', sans-serif;
+  --ifm-font-family-base: "GeneralSans-Regular", sans-serif;
   --doc-sidebar-width: 250px !important;
   --ifm-navbar-height: 80px;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
-html[data-theme='dark'] {
+html[data-theme="dark"] {
   /*#47aca6*/
   /* 8bded9 */
   /* 8fece6 */
-  font-family: 'IBM Plex Sans', sans-serif;
+  font-family: "GeneralSans-Regular", sans-serif;
   --ifm-color-primary: #2ad5c1;
   --ifm-color-primary-dark: #23bab1;
   --ifm-color-primary-darker: #21b0a7;
   --ifm-color-primary-darkest: #1b918a;
   --ifm-color-primary-light: #36d9cf;
   --ifm-color-primary-lighter: #73dcd5;
   --ifm-color-primary-lightest: #84e7e1;
-  --ifm-color-content: #F1F0F1;
+  --ifm-color-content: #f1f0f1;
   --ifm-background-color: #111414;
-  --ifm-background-surface-color: #1C2021;
+  --ifm-background-surface-color: #1c2021;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
@@ -48,7 +50,7 @@ html[data-theme='dark'] {
   background: var(--ifm-menu-link-sublist-icon) 50% / 1rem 1rem;
 }
 
-.menu__list-item-collapsible>a {
+.menu__list-item-collapsible > a {
   font-weight: 600;
 }
 
@@ -62,7 +64,7 @@ html[data-theme='dark'] {
   font-weight: 700;
 }
 
-.theme-doc-sidebar-item-link-level-1>a {
+.theme-doc-sidebar-item-link-level-1 > a {
   font-weight: 600;
 }
 
@@ -123,8 +125,12 @@ button.navbar__toggle {
 
 .navbar__logo {
   height: 24px;
-  width: 88px;
+  width: 139px;
   margin-right: 0px;
+  margin-bottom: 5px;
+  padding-top: 0.2px;
+  padding-left: 5px;
+  padding-bottom: 0.8px;
 }
 
 .navbar__brand {
@@ -137,23 +143,23 @@ button.navbar__toggle {
   background-color: white;
 }
 
-html[data-theme='dark'] .navbar--fixed-top {
+html[data-theme="dark"] .navbar--fixed-top {
   background-color: #121414;
 }
 
-.header-text-link svg[class^='iconExternalLink'] {
+.header-text-link svg[class^="iconExternalLink"] {
   display: none;
 }
 
 .header-text-link {
-  padding: 8px 24px;
-  font-size: 17px;
+  padding: 20px 24px;
+  font-size: 14px;
+  font-weight: 600;
   line-height: 20px;
-  font-weight: 400;
   align-items: center;
 }
 
-html[data-theme='dark'] .header-text-link {
+html[data-theme="dark"] .header-text-link {
   color: #f1f0f1;
 }
 
@@ -174,7 +180,7 @@ html[data-theme='dark'] .header-text-link {
   border-radius: 8px;
 }
 
-html[data-theme='dark'] .header-text-link:hover {
+html[data-theme="dark"] .header-text-link:hover {
   color: var(--ifm-color-primary-lightest);
   background-color: #272828;
   border-radius: 8px;
@@ -193,7 +199,7 @@ html[data-theme='dark'] .header-text-link:hover {
   color: var(--ifm-color-primary-lightest);
 }
 
-.header-slack-link svg[class^='iconExternalLink'] {
+.header-slack-link svg[class^="iconExternalLink"] {
   display: none;
 }
 
@@ -210,16 +216,16 @@ html[data-theme='dark'] .header-text-link:hover {
   color: #334155;
 }
 
-html[data-theme='dark'] .header-slack-link:before {
+html[data-theme="dark"] .header-slack-link:before {
   background: url("../../static/img/slack-dark.svg") no-repeat;
   color: #2bd5c1;
 }
 
-html[data-theme='dark'] .navbar__title {
+html[data-theme="dark"] .navbar__title {
   color: #2ad5c1;
 }
 
-.header-github-link svg[class^='iconExternalLink'] {
+.header-github-link svg[class^="iconExternalLink"] {
   display: none;
 }
 
@@ -228,14 +234,14 @@ html[data-theme='dark'] .navbar__title {
 }
 
 .header-github-link:before {
-  content: '';
+  content: "";
   width: 24px;
   height: 24px;
   display: flex;
   background: url("../../static/img/github-logo.svg") no-repeat;
 }
 
-html[data-theme='dark'] .header-github-link:before {
+html[data-theme="dark"] .header-github-link:before {
   background: url("../../static/img/github-logo-dark.svg") no-repeat;
 }
 
@@ -253,21 +259,21 @@ html[data-theme='dark'] .header-github-link:before {
   padding: 8px 16px;
   font-size: 15px;
   display: flex;
-  color: #1C1E21;
+  color: #1c1e21;
   border: 1px solid #cbd5e1;
 }
 
 .nav-git-mobile {
   display: none;
 }
 
-@media (max-width: 1200px) {
+@media (max-width: 1250px) {
   .nav-git-button {
     display: none;
   }
 }
 
-@media (min-width: 1040px) and (max-width: 1200px) {
+@media (min-width: 1070px) and (max-width: 1250px) {
   .nav-git-mobile {
     display: flex;
   }
@@ -278,17 +284,17 @@ html[data-theme='dark'] .header-github-link:before {
   text-decoration: none;
 }
 
-html[data-theme='dark'] .nav-git {
+html[data-theme="dark"] .nav-git {
   color: #f1f0f1;
   border: 1px solid #475569;
 }
 
-html[data-theme='dark'] .nav-git:hover {
+html[data-theme="dark"] .nav-git:hover {
   color: #1f70bf;
 }
 
 .line-sep {
   width: 1px;
   height: 1.5em;
-  border-right: 1px solid #26413c
-}
+  border-right: 1px solid #26413c;
+}

static/fonts/GeneralSans/css/general-sans.css

@@ -0,0 +1,35 @@
+/**
+ * @license
+ *
+ * Font Family: General Sans
+ * Designed by: Frode Helland
+ * URL: https://www.fontshare.com/fonts/general-sans
+ * © 2023 Indian Type Foundry
+ *
+ * Font Styles:
+ * General Sans Variable(Variable font)
+ * General Sans Variable Italic(Variable font)
+ * General Sans Extralight
+ * General Sans Extralight Italic
+ * General Sans Light
+ * General Sans Light Italic
+ * General Sans Regular
+ * General Sans Italic
+ * General Sans Medium
+ * General Sans Medium Italic
+ * General Sans Semibold
+ * General Sans Semibold Italic
+ * General Sans Bold
+ * General Sans Bold Italic
+ *
+*/
+
+@font-face {
+  font-family: "GeneralSans-Regular";
+  src: url("../fonts/GeneralSans-Regular.woff2") format("woff2"),
+    url("../fonts/GeneralSans-Regular.woff") format("woff"),
+    url("../fonts/GeneralSans-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-display: swap;
+  font-style: normal;
+}