filip(fix): apply design amends

site/package.json

@@ -22,7 +22,8 @@
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "undici": "^7.2.3"
+    "undici": "^7.2.3",
+    "framer-motion": "^12.23.25"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.4.0",

site/src/components/HomepageFeatures/index.tsx

@@ -1,14 +1,19 @@
-import { LinkButton } from "../LinkButton/LinkButton";
-import styles from "./styles.module.css";
+import DecentralizedSvg from "@site/static/img/decentralized.svg";
+
 import ScaleSvg from "@site/static/img/scale.svg";
 import SecureSvg from "@site/static/img/secure.svg";
-import FlexibleSvg from "@site/static/img/flexible.svg";
+import { LinkButton } from "../LinkButton/LinkButton";
+import styles from "./styles.module.css";
 
 type FeatureItem = {
   title: string;
-  Svg: string;
+  Svg: React.ComponentType<
+    React.SVGProps<SVGSVGElement> & {
+      title?: string;
+    }
+  >;
   description: React.ReactElement;
-  button: {
+  button?: {
     text: string;
     url: string;
   };
@@ -37,9 +42,15 @@ const FeatureList: FeatureItem[] = [
     ),
   },
   {
-    title: "Flexible",
-    Svg: FlexibleSvg,
-    description: <>Ouroboros Leios supports diverse applications.</>,
+    title: "Decentralized",
+    Svg: DecentralizedSvg,
+    description: (
+      <>
+        Improving the throughput by 50x while not compromising decentralization.
+        So, the network still will maintain its resiliance, fairness and
+        democratisation.
+      </>
+    ),
   },
 ];
 
@@ -60,7 +71,7 @@ function Feature({ Svg, title, description, button }: FeatureItem) {
 
 export default function HomepageFeatures(): React.ReactElement {
   return (
-    <section className="padding-section">
+    <section className="padding-section homepage-section-primary">
       <div className="container">
         <div className="container-padding">
           <div className={styles.features}>

site/src/components/HomepageFeatures/styles.module.css

@@ -13,7 +13,7 @@
 }
 
 .feature h2 {
-  margin-bottom: 1.8125rem;
+  margin-bottom: 1.2rem;
 }
 
 .featureContent {

site/src/css/custom.css

@@ -21,11 +21,11 @@
   --ifm-font-color-alternate: #000;
   --ifm-background-color-primary: #f8f6fa;
   --ifm-background-color-secondary: #f1edf5;
-  --ifm-color-caption: #73489a;
-  --ifm-link-color: #73489a;
-  --ifm-menu-color: #73489a;
-  --ifm-toc-link-color: #73489a;
-  --link-button-background-hover: #73489a;
+  --ifm-color-caption: #8c02c2;
+  --ifm-link-color: #8c02c2;
+  --ifm-menu-color: #8c02c2;
+  --ifm-toc-link-color: #8c02c2;
+  --link-button-background-hover: #8c02c2;
 
   --ifm-navbar-height: 6.063rem;
 
@@ -44,29 +44,37 @@
   --ifm-footer-link-color: #f8f6fa;
   --ifm-footer-color: #f8f6fa;
 
-  --ifm-footer-link-hover-color: #ffffffdd;
+  --ifm-footer-link-hover-color: rgba(255, 255, 255, 0.6);
 
   --ifm-navbar-padding-vertical: 0;
   --ifm-navbar-item-padding-vertical: 0;
   --ifm-navbar-item-padding-horizontal: 0;
   --ifm-spacing-horizontal: 0;
+  --ifm-heading-font-weight: 500;
+
+  --ifm-footer-heading-color: #8f6dae;
+  --ifm-container-width-xl: 1440px;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme="dark"] {
-  --ifm-navbar-background-color: #333;
-  --ifm-background-color-primary: #1a1a1a;
-  --ifm-background-color-secondary: #333;
-
-  --ifm-link-color: #b1e0fe;
-  --ifm-color-caption: #b1e0fe;
-  --ifm-link-color: #b1e0fe;
-  --ifm-menu-color: #b1e0fe;
-  --ifm-toc-link-color: #b1e0fe;
+html[data-theme="dark"] {
+  --ifm-background-color: #180425;
+  --ifm-navbar-background-color: #180425;
+  --ifm-background-color-primary: #200830;
+  --ifm-background-color-secondary: #180425;
+  --ifm-border-color: #45364e;
+  --ifm-toc-border-color: var(--ifm-border-color);
+
+  --ifm-link-color: #6effd1;
+  --ifm-link-hover-color: rgba(255, 255, 255, 0.95);
+  --ifm-color-caption: #6effd1;
+  --ifm-link-color: #6effd1;
+  --ifm-menu-color: #6effd1;
+  --ifm-toc-link-color: #6effd1;
+  --ifm-color-emphasis-300: var(--ifm-border-color);
 
   --link-button-background-hover: rgba(255, 255, 255, 0.15);
-
-  --ifm-footer-link-hover-color: #000000dd;
+  --ifm-dropdown-background-color: var(--ifm-background-color-primary);
 
   --ifm-font-color-base: #f8f6fa;
   --ifm-font-color-alternate: #fff;
@@ -78,6 +86,16 @@
   --ifm-color-primary-lighter: #a6ccdd;
   --ifm-color-primary-lightest: #b5d4e3;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+
+  --ifm-card-background-color: rgba(0, 0, 0, 0.2);
+}
+
+html[data-theme="dark"] .navbar {
+  border-bottom: 1px solid var(--ifm-border-color);
+}
+
+html[data-theme="dark"] footer {
+  border-top: 1px solid var(--ifm-border-color);
 }
 
 @media (max-width: 997px) {
@@ -153,13 +171,14 @@
   width: fit-content;
   min-width: 81px;
   max-width: 132px;
+  margin-right: 1.5rem;
 }
 
 .navbar__items--right {
   margin-left: auto;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.25rem;
   max-width: 978px;
   width: 100%;
   flex-shrink: 1;
@@ -181,7 +200,6 @@
 
 .navbar__link {
   font-size: var(--text-sm);
-  font-weight: var(--font-weight-bold);
   display: flex;
   align-items: center;
   text-decoration: none;
@@ -198,6 +216,10 @@
   }
 }
 
+.menu {
+  font-weight: normal;
+}
+
 .footer {
   padding: 3.5rem 0;
 }
@@ -214,12 +236,14 @@
 
 .footer__title {
   margin-bottom: 1.25rem;
+  font-weight: 500;
+  color: var(--ifm-footer-heading-color);
 }
 
 .footer__items {
   display: flex;
   flex-direction: column;
-  gap: 1.25rem;
+  gap: 0.75rem;
 }
 
 .footer__bottom {
@@ -228,7 +252,7 @@
   justify-content: space-between;
   align-items: center;
   padding-top: 1rem;
-  border-top: 1px solid #8b8190;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
   margin-top: 4.25rem;
 }
 

site/src/pages/formal-spec/index.tsx

@@ -41,13 +41,15 @@ export default function FormalSpecPage(): React.ReactElement {
       <main className={styles.main}>
         <div className="container">
           <div className="container-padding">
-            <h1>Ouroboros Leios formal specification</h1>
-            <p>
-              This section contains the formal specification of the Ouroboros
-              Leios protocol, written in Agda. The specification provides a
-              mathematical foundation for the protocol's properties and
-              guarantees.
-            </p>
+            <div className={styles.plainHero}>
+              <h1>Ouroboros Leios formal specification</h1>
+              <p>
+                This section contains the formal specification of the Ouroboros
+                Leios protocol, written in Agda. The specification provides a
+                mathematical foundation for the protocol's properties and
+                guarantees.
+              </p>
+            </div>
 
             <h2>Modules</h2>
             <div className={styles.fileGrid}>

site/src/pages/formal-spec/styles.module.css

@@ -1,5 +1,5 @@
 .main {
-  padding: 2rem 0;
+  padding: 3.5rem 0;
   background-color: var(--ifm-background-color);
 }
 
@@ -45,3 +45,8 @@
   color: var(--ifm-color-emphasis-700);
   line-height: 1.4;
 }
+
+.plainHero {
+  max-width: 800px;
+  margin-bottom: 2rem;
+}

site/src/pages/index.module.css

@@ -23,7 +23,7 @@
 }
 
 .heroTitle {
-  margin-bottom: 2rem !important;
+  margin-bottom: 1.25rem !important;
 }
 
 @media (max-width: 997px) {
@@ -195,7 +195,7 @@
   justify-content: center;
   align-items: center;
   gap: 0.625rem;
-  background-color: #333;
+  background-color: rgba(0, 0, 0, 0.7);
   border-radius: 1rem;
 }
 
@@ -225,13 +225,12 @@
 .subtitle {
   font-size: var(--text-xl);
   line-height: var(--line-height-normal);
-  margin: 2.75rem 0;
+  margin: 1.75rem 0;
 }
 
 @media (max-width: 997px) {
   .subtitle {
     font-size: var(--text-base);
-    margin: 3rem 0;
   }
 }
 
@@ -276,7 +275,7 @@
   background-color: transparent;
   --svg-bg-color: transparent;
   --svg-border-color: #555555;
-  --svg-text-color: #e0e0e0;
+  --svg-text-color: #fff;
   --svg-text-secondary: #cccccc;
   --svg-text-muted: #aaaaaa;
   --svg-arrow-color: #bbbbbb;
@@ -339,7 +338,6 @@
 
 .svgCaption {
   margin-top: 0.69rem;
-  color: var(--ifm-color-caption);
   text-align: center;
   line-height: 1.5;
 }