feat: rework website theme

assets/js/custom.js

@@ -1,2 +1,2 @@
-// Minimal custom JS - testing if complex sidebar logic is still needed
-console.log('=== MINIMAL CUSTOM JS LOADED ===');
+// Minimal custom JS - testing if complex sidebar logic is still needed
+console.log('=== MINIMAL CUSTOM JS LOADED ===');

assets/scss/common/_base.scss

@@ -14,23 +14,32 @@
  * Important for landing pages or wide documentation pages.
  */
 .container-fw {
-  max-width: 100%;       /* Uses the full available width */
-  padding-left: 1rem;    /* Minimal left padding */
+  max-width: 100%;
+  /* Uses the full available width */
+  padding-left: 1rem;
+  /* Minimal left padding */
 
   /* Main content (docs-content) in full-width mode */
   .docs-content {
-    margin-left: 0rem !important;    /* Removes standard margins */
-    margin-right: 0rem !important;   /* so the content can use the full */
-    padding-right: 0rem !important;  /* width */
+    margin-left: 0rem !important;
+    /* Removes standard margins */
+    margin-right: 0rem !important;
+    /* so the content can use the full */
+    padding-right: 0rem !important;
+    /* width */
     padding-left: 0rem !important;
   }
 
   /* Table of contents (TOC) in full-width mode */
   .docs-toc {
-    margin-left: 3rem !important;    /* Spacing to main content */
-    margin-right: 0rem !important;   /* No right margin */
-    padding-right: 0rem !important;  /* No right padding */
-    padding-left: 0rem !important;   /* or left */
+    margin-left: 3rem !important;
+    /* Spacing to main content */
+    margin-right: 0rem !important;
+    /* No right margin */
+    padding-right: 0rem !important;
+    /* No right padding */
+    padding-left: 0rem !important;
+    /* or left */
   }
 }
 
@@ -40,6 +49,22 @@
  * They automatically fit the width of their container.
  */
 .content img {
-  max-width: 100%;    /* Image never wider than its container */
-  height: auto;       /* Height scales proportionally */
+  max-width: 100%;
+  /* Image never wider than its container */
+  height: auto;
+  /* Height scales proportionally */
+}
+
+/* WORD WRAPPING
+ * -------------
+ * Used to wrap individual words in spans for styling or animation.
+ */
+.word {
+  display: inline-block;
+  margin-right: 0.25em;
+  /* Add space between words wrapped in spans */
+
+  &:last-child {
+    margin-right: 0;
+  }
 }

assets/scss/common/_custom.scss

@@ -1,11 +1,16 @@
 // Main SCSS file importing all modular components
-@import "base";            // Layout & structure
-@import "header";          // Header & navigation
-@import "branding";        // Logo & fonts
-@import "sidebar";         // Sidebar navigation
-@import "cards";           // Card grid system
-@import "components";      // TOC & description boxes
-@import "footer";          // Footer styles
-@import "pages";           // Page-specific overrides
+@import "variables-custom"; // Custom variables (colors, fonts)
+@import "base"; // Layout & structure
+// @import "header"; // Header & navigation
+@import "header-custom"; // New Custom Header Port
+@import "branding"; // Logo & fonts
+@import "sidebar"; // Sidebar navigation
+@import "cards"; // Card grid system
+@import "components"; // TOC & description boxes
+@import "footer"; // Footer styles
+@import "pages"; // Page-specific overrides
 @import "version-warning"; // Version warning banner styles
+@import "landing-ord"; // Migrated ORD Landing Page Styles
+
+
 // End of imports