more changes

docs/src/layouts/docs/Layout.astro

@@ -62,7 +62,7 @@ const content = await Astro.glob("../../pages/content/**/*.md");
         box-sizing: border-box;
       }
       * {
-        font-family: "Noto Sans";
+        font-family: "Noto Sans", "Noto Sans Mono";
       }
     </style>
     <script is:inline>

docs/src/layouts/docs/LeftSidebar/LeftSidebar.css

@@ -4,13 +4,13 @@
   height: 100vh;
   position: fixed;
   border-right: 1px solid #ddd;
+  overflow-y: auto;
 }
 
 .nav-list {
   height: 100%;
   padding: 0;
   overflow-x: visible;
-  overflow-y: auto;
   max-height: 100vh;
   margin: 0;
 }

docs/src/layouts/docs/LeftSidebar/index.jsx

@@ -56,7 +56,7 @@ export default function Sidebar({ content, currentPage }) {
   return (
     <nav aria-labelledby="grid-left" className="nav">
       <div className="hero-logo">
-      <img src={heroImage} alt="main logo" width="135" />
+      <a href="/"><img src={heroImage} alt="main logo" width="135" /></a>
       </div>
       <ul className="nav-list">
         {folderOrder.map((header, index) => {

docs/src/layouts/landing/Layout.astro

@@ -1,5 +1,4 @@
 ---
-import hero from "../../assets/landing-page-hero.png";
 import heroImage from "../../assets/logos/kairos-white-column.png";
 import footerLogo from "../../assets/index/footer.png";
 import Sections from "./Sections";
@@ -11,10 +10,12 @@ import Sections from "./Sections";
       href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
       rel="stylesheet"
     />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
+      rel="stylesheet"
+    />
     <style>
       .wrapper {
-        margin-top: 2em;
-        margin-bottom: 2em;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -47,21 +48,19 @@ import Sections from "./Sections";
       }
 
       .hero-logo {
-        margin: 0 160px;
+        margin-right: 260px;
       }
 
       .overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
         width: 100%;
         height: 100%;
-        z-index: 10;
+        min-height: 708px;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
         padding: 0 24px;
+        background-color: #03153a;
       }
 
       .constraint {
@@ -73,12 +72,34 @@ import Sections from "./Sections";
         justify-content: center;
       }
 
+      .constraint.vertical {
+        flex-direction: column;
+      }
+
+      .constraint.vertical > .header {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+        max-width: 1200px;
+      }
+
       .title {
-        font-weight: 600;
-        font-size: 48px;
+        font-weight: 700;
+        font-size: 58px;
         line-height: 100%;
         letter-spacing: 0.02em;
         color: #ffffff;
+        font-family: "Noto Sans Mono";
+        margin-top: 0;
+      }
+
+      .subtitle {
+        font-weight: 500;
+        font-size: 31px;
+        line-height: 130%;
+        letter-spacing: 0.01em;
+        color: #ffffff;
       }
 
       .title > span {
@@ -132,19 +153,18 @@ import Sections from "./Sections";
 
       .desc {
         font-weight: 400;
-        font-size: 24px;
-        line-height: 44px;
-        letter-spacing: -0.02em;
+        font-size: 18px;
+        line-height: 170%;
         color: #ffffff;
         max-width: 748px;
-        margin: 50px 0;
+        margin: 64px 0;
+        font-family: "Noto Sans Mono";
+        max-width: 1199px;
       }
 
-      .subtitle {
-        display: block;
-        font-weight: 400;
-        font-size: var(--f-d6);
-        letter-spacing: -0.0625em;
+      .desc span {
+        color: #ee5007;
+        font-weight: bold;
       }
 
       .bio {
@@ -160,6 +180,12 @@ import Sections from "./Sections";
         font-size: var(--f-u4);
       }
 
+      .orange-line {
+        height: 16px;
+        width: 100%;
+        background: #ee5007;
+      }
+
       .buttons {
         display: flex;
       }
@@ -174,18 +200,19 @@ import Sections from "./Sections";
         height: 50px;
         font-weight: 600;
         font-size: 22px;
-        line-height: 22px;
+        line-height: 100%;
+        color: #ffffff;
         text-decoration: none;
-        text-transform: uppercase;
         border-radius: 4px;
         margin-right: 40px;
+        margin-top: 53px;
       }
 
       #quickstart {
-        background: #ffb39e;
+        background: #ee5007;
         box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2),
           0px 1px 2px rgba(0, 0, 0, 0.1), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
-        color: #000000;
+        border-radius: 4px;
       }
 
       #download {
@@ -207,34 +234,37 @@ import Sections from "./Sections";
     </style>
   </head>
   <body>
+    <div class="orange-line"></div>
     <header class="hero">
-      <img
-        width="1600"
-        height="658"
-        class="hero"
-        src={hero}
-        sizes="(max-width: 800px) 800px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px, (max-width: 2400px) 2400px, 1200px"
-      />
       <div class="overlay">
-        <div class="constraint">
-          <div class="hero-logo">
-            <img src={heroImage} alt="main logo" width="200" />
-          </div>
-          <div>
-            <h1 class="title">
-              Edge, but <span>better</span>
-            </h1>
-            <p class="desc">
-              Open-source project which blends Edge, cloud and bare metal nodes
-              lifecycle management by extending the Kubernetes native API.
-            </p>
-            <div class="buttons">
-              <a id="quickstart" href="/content/quickstart/quickstart/"
-                >Quickstart</a
+        <div class="constraint vertical">
+          <div class="header">
+            <div class="hero-logo">
+              <img src={heroImage} alt="main logo" width="200" />
+            </div>
+            <div>
+              <h1 class="title">
+                Edge, but <span>better</span>
+              </h1>
+              <span class="subtitle"
+                >The immutable Linux meta-distribution <br /> for edge Kubernetes</span
               >
-              <a id="download" href="/">Download</a>
+              <div class="buttons">
+                <a id="quickstart" href="/content/quickstart/quickstart/">
+                  Quickstart
+                </a>
+                <a id="download" href="/">Download</a>
+              </div>
             </div>
           </div>
+          <p class="desc">
+            With <span>Kairos</span> you can build immutable, bootable Kubernetes
+            and OS images for your edge devices as easily as writing a Dockerfile.
+            Optional P2P mesh with distributed ledger automates node bootstrapping
+            and coordination. Updating nodes is as easy as CI/CD: push a new image
+            to your container registry and let secure, risk-free A/B atomic upgrades
+            do the rest.
+          </p>
         </div>
       </div>
     </header>