feat: rework website theme

.github/config/wordlist.txt

@@ -446,3 +446,4 @@ openssl
 csr
 verifiers
 cryptographically
+svg

.gitignore

@@ -7,4 +7,5 @@ public/
 /.project
 hugo_stats.json
 .DS_Store
-tmp/*
+tmp/*
+.clinerules

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

@@ -7,30 +7,42 @@
  * 2. Basic image adjustments
  */
 
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://rsms.me/inter/inter.css'); /* Inter variable font – OpenMFP and Platform Mesh sites */
+
+html, body {
+  font-family: 'Inter var', 'Inter', system-ui, sans-serif;
+  font-optical-sizing: auto;
+}
 /* FULL-WIDTH CONTAINER
  * --------------------
  * .container-fw = Full Width Container
  * If a page has the class .container-fw, the content is stretched to full width.
  * 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;  /* slightly increased separation from main content */
+    margin-right: 0rem !important;   /* no extra right margin */
+    padding-right: 0rem !important;  /* no extra right padding */
+    padding-left: 0rem !important;   /* keep left padding neutral */
   }
 }
 
@@ -40,6 +52,61 @@
  * 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 */
+}
+
+/* Limit overall content container width and align with navbar padding */
+.wrap {
+  max-width: 1920px;
+  margin-inline: auto;
+  padding-inline: 24px; /* align horizontal content padding with header */
+}
+
+/* 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;
+  }
+}
+
+/* Prevent sticky header from overlapping page content on non-home pages
+ * The non-home layout wraps content in .wrap .content (baseof.html).
+ * Ensure there's always at least the header height above the content.
+ */
+.wrap .content {
+  border-top: none; /* avoid double thickness; rely on header border for the horizontal divider */
+  padding-top: 0; /* shift the offset into the columns so the vertical divider aligns */
+}
+
+/* Shift content and TOC down to clear the sticky header while keeping the top divider flush.
+   Sidebar itself is sticky and already offset via top: var(--nav-height), so do not add extra padding there. */
+.row.flex-xl-nowrap > .docs-content,
+.row.flex-xl-nowrap > .docs-toc {
+  padding-top: var(--nav-height);
+}
+
+/* Ensure the first content element aligns directly under the header divider (no gap) */
+.wrap .content > *:first-child {
+  margin-top: 0;
+}
+
+/* If the first element is an HR or a dedicated divider, remove its top margin as well */
+.wrap .content > hr:first-child,
+.docs-content > hr:first-child {
+  margin-top: 0;
+}
+
+/* Also normalize top margin for the first element inside docs-content */
+.docs-content > *:first-child {
+  margin-top: 0;
+}

assets/scss/common/_branding.scss

@@ -1,4 +1,12 @@
-// Import Quicksand font for OCM logo - ONLY the weight we actually use
+/*
+ * Logo and branding styles.
+ *
+ * Features:
+ * - Quicksand font for OCM logo
+ * - SVG logo sizing and colors
+ * - Theme-dependent logo colors
+ */
+
 @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');
 
 .font-logo {
@@ -43,4 +51,4 @@ header.navbar .ocm-logo-text svg,
 
 [data-bs-theme="light"] .font-logo {
   color: #111111 !important;  // Dark text in light mode
-}
+}