filip(feat): non-landing page design implementation (to account for t…

…he landing page changes)
cardano-scaling · Aug 7, 2024 · 50457c2 · 50457c2
1 parent 5c1ca27
commit 50457c2
Show file tree

Hide file tree

Showing 33 changed files with 732 additions and 88 deletions.
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -166,6 +166,27 @@ const config = {
             label: "User manual",
             position: "right",
           },
+          {
+            to: "/docs/dev",
+            label: "Developer Documentation",
+            position: "right",
+          },
+          //commenting out for the time being
+          // {
+          //   to: "/core-concepts",
+          //   label: "Core Concepts",
+          //   position: "right",
+          // },
+          {
+            to: "/topologies",
+            label: "Topologies",
+            position: "right",
+          },
+          {
+            to: "/use-cases",
+            label: "Use cases",
+            position: "right",
+          },
           {
             to: "/docs/faqs",
             label: "FAQ",

diff --git a/docs/src/components/homepage/CaseStudies.tsx b/docs/src/components/homepage/CaseStudies.tsx
@@ -28,7 +28,7 @@ const CaseStudies: FC = () => {
             <p>{FeaturedCaseStudy.content}</p>
             <Link
               className="bg-none text-teal self-start inline-flex gap-3 group hover:no-underline hover:text-teal"
-              href="/"
+              href="/use-cases"
             >
               {"View case studies "}
               <Arrow className="mt-1 rounded-full group-hover:bg-teal/15" />

diff --git a/docs/src/components/homepage/HowItWorks.tsx b/docs/src/components/homepage/HowItWorks.tsx
@@ -99,7 +99,7 @@ const HowItWorks: FC = () => {
       <div
         className={clsx(
           "w-full z-30 relative",
-          expanded ? "mt-4 laptop:mt-2" : "laptop:-mt-4"
+          expanded ? "mt-4 laptop:mt-2" : "laptop:-mt-4 mt-4"
         )}
       >
         <button

diff --git a/docs/src/components/icons/Home.tsx b/docs/src/components/icons/Home.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import { SVGProps } from "react";
+const Home = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="25"
+    viewBox="0 0 24 25"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M6.00078 19.4992H9.90078V13.6492H14.1008V19.4992H18.0008V10.4992L12.0008 5.94922L6.00078 10.4992V19.4992ZM5.30078 20.1992V10.1492L12.0008 5.07422L18.7008 10.1492V20.1992H13.4008V14.3492H10.6008V20.1992H5.30078Z"
+      fill="black"
+    />
+  </svg>
+);
+export default Home;
diff --git a/docs/src/components/icons/ToggleMenu.tsx b/docs/src/components/icons/ToggleMenu.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import { SVGProps } from "react";
+const ToggleMenu = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      d="M15.3258 14.9258V9.07578L12.3758 12.0008L15.3258 14.9258ZM5.80078 19.7008C5.38411 19.7008 5.02995 19.5549 4.73828 19.2633C4.44661 18.9716 4.30078 18.6174 4.30078 18.2008V5.80078C4.30078 5.38411 4.44661 5.02995 4.73828 4.73828C5.02995 4.44661 5.38411 4.30078 5.80078 4.30078H18.2008C18.6174 4.30078 18.9716 4.44661 19.2633 4.73828C19.5549 5.02995 19.7008 5.38411 19.7008 5.80078V18.2008C19.7008 18.6174 19.5549 18.9716 19.2633 19.2633C18.9716 19.5549 18.6174 19.7008 18.2008 19.7008H5.80078ZM8.00078 19.0008V5.00078H5.80078C5.60078 5.00078 5.41745 5.08411 5.25078 5.25078C5.08411 5.41745 5.00078 5.60078 5.00078 5.80078V18.2008C5.00078 18.4008 5.08411 18.5841 5.25078 18.7508C5.41745 18.9174 5.60078 19.0008 5.80078 19.0008H8.00078ZM8.70078 19.0008H18.2008C18.4008 19.0008 18.5841 18.9174 18.7508 18.7508C18.9174 18.5841 19.0008 18.4008 19.0008 18.2008V5.80078C19.0008 5.60078 18.9174 5.41745 18.7508 5.25078C18.5841 5.08411 18.4008 5.00078 18.2008 5.00078H8.70078V19.0008Z"
+      fill="black"
+    />
+  </svg>
+);
+
+export default ToggleMenu;
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
@@ -15,10 +15,34 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: "Inter";
+  font-weight: 400;
+  src: url("/fonts/Inter-VariableFont.ttf");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 400;
+  font-style: italic;
+  src: url("/fonts/Inter-Italic-VariableFont.ttf");
+  font-display: swap;
+}
+
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #12506c;
   --ifm-code-font-size: 95%;
+  --ifm-navbar-height: 56px;
+  font-family: "Inter";
+  --ifm-color-emphasis-600: #283032;
+}
+
+@media (min-width: 768px) {
+  :root {
+    --ifm-navbar-height: 96px;
+  }
 }
 
 h1,
@@ -28,6 +52,11 @@ h4 {
   font-family: "Lexend";
 }
 
+h5,
+h6 {
+  font-family: "Inter";
+}
+
 h4 {
   line-height: 30px !important;
 }
@@ -179,39 +208,43 @@ svg.architecture {
 }
 
 .navbar__title {
-  font-size: 24px;
+  font-size: 19px;
+  letter-spacing: -0.142px;
+  line-height: normal;
   font-weight: 400;
   font-family: "Lexend";
-  letter-spacing: -0.18px;
 }
+
+@media (min-width: 1024px) {
+  .navbar__title {
+    font-size: 24px;
+    line-height: normal;
+    letter-spacing: -0.18px;
+  }
+}
+
 .navbar__item {
   font-size: 14px;
   font-weight: 600;
 }
 
 .navbar__items--right {
   display: flex !important;
+  font-family: "Lexend";
 }
 
-.navbar__item:nth-of-type(3) {
+.navbar__item:nth-of-type(6) {
   order: 2;
 }
 
-.navbar__itemt:nth-of-type(5) {
+.navbar__itemt:nth-of-type(8) {
   order: 1;
 }
 
-.navbar__item:nth-of-type(4) {
+.navbar__item:nth-of-type(7) {
   order: 3;
 }
 
-@media (max-width: 996px) {
-  .searchBox_src-theme-Navbar-Search-styles-module {
-    position: relative !important;
-    right: 0 !important;
-  }
-}
-
 .DocSearch-Button .DocSearch-Search-Icon {
   color: black !important;
   height: 24px !important;
@@ -249,10 +282,6 @@ svg.architecture {
   display: none;
 }
 
-.navbar {
-  padding-bottom: 60px !important;
-}
-
 .navbar__toggle {
   margin-right: 0 !important;
   margin-left: 32px;
@@ -261,3 +290,73 @@ svg.architecture {
 .mobile-side-menu > .menu__list-item > .menu__link {
   color: #283032 !important;
 }
+
+.breadcrumbHomeIcon_src-theme-DocBreadcrumbs-Items-Home-styles-module {
+  height: 100% !important;
+  width: 100% !important;
+}
+
+.breadcrumbs__link {
+  margin-bottom: -12px !important;
+}
+
+.menu {
+  padding: 24px !important;
+}
+
+.menu__link--active {
+  background-color: #e7eef0 !important;
+  font-weight: 700;
+}
+
+.breadcrumbs__item--active > span {
+  background-color: #e7eef0 !important;
+}
+
+.container {
+  padding: 24px !important;
+}
+
+@media (min-width: 768px) {
+  .markdown {
+    padding: 32px 0 16px 0px !important;
+  }
+  .container {
+    padding: 24px 32px 56px 32px !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .markdown {
+    padding: 56px !important;
+    padding-right: 0 !important;
+  }
+  .container {
+    padding: 24px 16px 24px 16px !important;
+  }
+}
+
+.theme-edit-this-page {
+  display: inline-flex;
+}
+
+.col--3 {
+  padding-right: 56px !important;
+  padding-top: 86px !important;
+}
+
+.collapseSidebarButton {
+  display: block;
+}
+
+.container {
+  border-bottom: solid 1px #eaeaea;
+}
+
+.navbar-sidebar__item {
+  width: 100vw !important;
+}
+
+.navbar-sidebar__items--show-secondary {
+  margin-left: -15%;
+}
diff --git a/docs/src/theme/DocBreadcrumbs/Items/Home/index.js b/docs/src/theme/DocBreadcrumbs/Items/Home/index.js
@@ -0,0 +1,24 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import { translate } from "@docusaurus/Translate";
+import styles from "./styles.module.css";
+import Home from "../../../../components/icons/Home";
+export default function HomeBreadcrumbItem() {
+  const homeHref = useBaseUrl("/");
+  return (
+    <li className="breadcrumbs__item">
+      <Link
+        aria-label={translate({
+          id: "theme.docs.breadcrumbs.home",
+          message: "Home page",
+          description: "The ARIA label for the home page in the breadcrumbs",
+        })}
+        className="breadcrumbs__link"
+        href={homeHref}
+      >
+        <Home className={styles.breadcrumbHomeIcon} />
+      </Link>
+    </li>
+  );
+}
diff --git a/docs/src/theme/DocBreadcrumbs/Items/Home/styles.module.css b/docs/src/theme/DocBreadcrumbs/Items/Home/styles.module.css
@@ -0,0 +1,7 @@
+.breadcrumbHomeIcon {
+  position: relative;
+  top: 1px;
+  vertical-align: top;
+  height: 1.1rem;
+  width: 1.1rem;
+}