add logo link and update styles for new logo on top of sidebar

ProvableHQ · Aug 15, 2024 · 40bb0f6 · 40bb0f6
1 parent 00b6246
commit 40bb0f6
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 deletions.
diff --git a/website/src/App.css b/website/src/App.css
@@ -5,4 +5,31 @@
  */
 input[type="text"]:disabled {
     cursor: text;
+}
+
+@font-face {
+    font-family: "AleoSans";
+    src: url("/assets/fonts/AleofontSans-Regular.otf") format("opentype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+.headerDark {
+    font-family: "AleoSans";
+    color: white;
+    font-size:32px;
+    margin-left:2rem;
+    a {
+        color: white;
+    }
+}
+
+.headerLight {
+    font-family: "AleoSans";
+    color: black;
+    font-size:32px;
+    margin-left:2rem;
+    a{
+        color: black;
+    }
 }
diff --git a/website/src/main.jsx b/website/src/main.jsx
@@ -80,20 +80,11 @@ function Main() {
                 <WasmLoadingMessage />
                 <Layout style={{ minHeight: "100vh" }}>
                     <Sider breakpoint="lg" collapsedWidth="0" theme="light">
-                        <img
-                            src={
-                                darkMode
-                                    ? "../public/aleosdklight.svg"
-                                    : "../public/aleosdkdark.svg"
-                            }
-                            alt="Aleo SDK Logo"
-                            style={{
-                                height: "32px",
-                                margin: "16px",
-                                fontWeight: "bold",
-                                whiteSpace: "nowrap",
-                            }}
-                        />
+                        <h1 className={darkMode ? "headerDark": "headerLight"}>
+                            <Link to="/">
+                            Aleo SDK
+                            </Link>
+                        </h1>
                         <Menu
                             theme="light"
                             mode="inline"

diff --git a/website/src/pages/Homepage.jsx b/website/src/pages/Homepage.jsx
@@ -6,14 +6,16 @@ import "./Homepage.css";
 const Homepage = () => {
     return (
         <div className="homepage">
+          <Link to="https://provable.com/">
             <img
                 src="../public/primary-wordmark-dark.png"
                 className="logo"
             ></img>
+            </Link>
             <div className="headerContainer">
                 <h1 className="header">Aleo SDK</h1>
                 <p className="subheader">
-                    The tooling for building zero knowledge applications at your
+                    The tooling for building zero-knowledge applications at your
                     fingertips
                 </p>{" "}
                 <Link