From 7e8be26f7b033687fa73e646d3a2803a31034346 Mon Sep 17 00:00:00 2001
From: despiegk <kristof@incubaid.com>
Date: Sun, 12 Jan 2025 20:40:03 +0100
Subject: [PATCH] works

---
 src/css/custom.css | 317 ++++++++++++++++++++++++++++++++++-----------
 1 file changed, 244 insertions(+), 73 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index caa75b5..0d6270c 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -1,76 +1,247 @@
-/* Base styles (keeping all the existing styles up to mobile navigation) */
+/**
+ * Global CSS styles
+ * Combines Infima (Docusaurus default) and custom styles
+ */
 
-/* Mobile Navigation */
-@media (max-width: 996px) {
-  .navbar__toggle {
-    display: block;
-    position: relative;
-  }
-
-  .navbar-sidebar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 300px;
-    background: #131213;
-    z-index: 9998;
-    padding-top: 60px;
-  }
-
-  .navbar-sidebar__items {
-    padding: 1rem;
-  }
-
-  .navbar-sidebar__items .navbar__items {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .navbar-sidebar__items .navbar__link {
-    display: block;
-    padding: 0.75rem;
-    color: #ffffff;
-    font-size: 1.1rem;
-  }
-
-  .navbar-sidebar__brand {
-    display: none;
-  }
-
-  .navbar-sidebar__backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.8);
-    z-index: 9997;
-  }
-
-  .navbar-sidebar__close {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-  }
-
-  /* Ensure menu items are visible */
-  .navbar-sidebar .menu {
-    margin-top: 1rem;
-  }
-
-  .navbar-sidebar .menu__list {
-    list-style: none;
-    padding: 0;
-  }
-
-  .navbar-sidebar .menu__link {
-    display: block;
-    padding: 0.75rem;
-    color: #ffffff;
-    text-decoration: none;
-  }
+/* Typography - Inter font configuration */
+@font-face {
+  font-family: 'Inter';
+  font-weight: 400;
+  font-style: normal;
+  src: url('/fonts/Inter_28pt-Light.ttf') format('truetype');
+  font-display: swap;
 }
 
-/* Rest of the existing styles */
+@font-face {
+  font-family: 'Inter';
+  font-weight: 500;
+  font-style: normal;
+  src: url('/fonts/Inter_28pt-Regular.ttf') format('truetype');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-weight: 600;
+  font-style: normal;
+  src: url('/fonts/Inter_28pt-Medium.ttf') format('truetype');
+  font-display: swap;
+}
+
+/* Custom animations */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideIn {
+  from { transform: translateY(10px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+/* Navigation styles */
+.navbar__logo {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  transition: opacity var(--transition-fast);
+}
+
+.navbar__logo:hover {
+  opacity: 0.9;
+}
+
+.navbar__logo img {
+  max-width: 150px;
+  height: auto;
+}
+
+.navbar__item {
+  display: flex;
+  align-items: center;
+}
+
+.navbar__link {
+  padding: 0.75rem 1rem;
+  transition: color var(--transition-fast);
+  position: relative;
+}
+
+.navbar__link::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 2px;
+  background: var(--ifm-color-primary);
+  transition: all var(--transition-normal);
+  transform: translateX(-50%);
+}
+
+.navbar__link:hover::after {
+  width: 100%;
+}
+
+/* Global typography and spacing */
+body {
+  font-family: 'Inter', sans-serif;
+  font-size: clamp(16px, 1.2vw, 18px);
+  line-height: 1.6;
+  background-color: #131213;
+  color: #ffffff;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Modern heading styles with fluid typography */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 600;
+  font-family: 'Inter', sans-serif;
+  color: #ffffff;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  margin-bottom: 1rem;
+}
+
+h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
+h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
+h3 { font-size: clamp(1.2rem, 3vw, 2rem); }
+h4 { font-size: clamp(1rem, 2vw, 1.5rem); }
+
+/* Enhanced paragraph styles */
+p {
+  font-weight: 400;
+  font-family: 'Inter', sans-serif;
+  color: rgba(255, 255, 255, 0.9);
+  margin-bottom: 1.5em;
+}
+
+/* Enhanced theme variables with modern color palette */
+:root {
+  --ifm-color-primary: #2e83ff;
+  --ifm-color-primary-dark: #1a75ff;
+  --ifm-color-primary-darker: #0066ff;
+  --ifm-color-primary-darkest: #0052cc;
+  --ifm-color-primary-light: #4791ff;
+  --ifm-color-primary-lighter: #61a0ff;
+  --ifm-color-primary-lightest: #7ab3ff;
+  --ifm-background-color: #131213;
+  --ifm-navbar-background-color: rgba(19, 18, 19, 0.8);
+  --ifm-footer-background-color: #131213;
+  --ifm-color-content: #ffffff;
+  --ifm-menu-color: #ffffff;
+  --ifm-toc-link-color: #ffffff;
+  --ifm-breadcrumb-color-active: #2e83ff;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  
+  /* Custom shadow variables */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  
+  /* Custom transition variables */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Dark mode overrides */
+[data-theme='dark'] {
+  --ifm-background-color: #131213;
+  --ifm-navbar-background-color: rgba(19, 18, 19, 0.8);
+  --ifm-footer-background-color: #131213;
+  --ifm-color-content: #ffffff;
+  --ifm-menu-color: #ffffff;
+  --ifm-toc-link-color: #ffffff;
+  --ifm-link-color: #2e83ff;
+  --ifm-breadcrumb-color-active: #2e83ff;
+}
+
+/* Enhanced layout elements with modern styling */
+.footer {
+  background-color: #131213;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 3rem 0;
+}
+
+.footer a,
+.footer p,
+.footer span,
+.footer div {
+  color: rgba(255, 255, 255, 0.8);
+  transition: color var(--transition-fast);
+}
+
+.footer a:hover {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+.navbar {
+  background-color: var(--ifm-navbar-background-color);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  transition: background-color var(--transition-normal);
+}
+
+.navbar__link {
+  color: #ffffff;
+}
+
+.menu {
+  background-color: #131213;
+  padding: 1rem;
+}
+
+.menu__link {
+  color: #ffffff;
+  transition: all var(--transition-fast);
+  border-radius: 6px;
+}
+
+.menu__link:hover {
+  color: #2e83ff;
+  background-color: rgba(46, 131, 255, 0.1);
+}
+
+.menu__link--active {
+  color: #2e83ff;
+  background-color: rgba(46, 131, 255, 0.15);
+}
+
+.table-of-contents {
+  background-color: #131213;
+  padding: 1rem;
+}
+
+.table-of-contents__link {
+  color: rgba(255, 255, 255, 0.8);
+  transition: all var(--transition-fast);
+}
+
+.table-of-contents__link:hover,
+.table-of-contents__link--active {
+  color: #2e83ff;
+  text-decoration: none;
+}
+
+/* Main content area */
+.main-wrapper {
+  background-color: #131213;
+}
+
+aside.theme-doc-sidebar-container {
+  background-color: #131213;
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.theme-doc-sidebar-menu {
+  background-color: #131213;
+}
+
+.theme-doc-toc-desktop {
+  background-color: #131213;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);