diff --git a/pandoc-template.html b/pandoc-template.html
index c109159..a857d9d 100644
--- a/pandoc-template.html
+++ b/pandoc-template.html
@@ -1,5 +1,5 @@
-
+
@@ -7,14 +7,23 @@
+
+
+
+
+
-
+
$body$
@@ -55,11 +95,22 @@
-
\ No newline at end of file
+
diff --git a/static/css/style.css b/static/css/style.css
index 3217170..15f32cb 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -12,10 +12,10 @@
--background-light: #f8f9fa;
--border-color: #dee2e6;
--code-background: #f1f3f4;
-
+
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
--font-family-mono: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
-
+
--max-width: 1200px;
--content-width: 800px;
--toc-min-width: 250px;
@@ -46,41 +46,19 @@ body {
padding: 0 2rem;
}
-/* Header */
-.site-header {
- background: var(--background);
- border-bottom: 2px solid var(--border-color);
- padding: 1rem 0;
- position: sticky;
- top: 0;
- z-index: 1000;
-}
-
-.header-content {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.logo {
- display: flex;
- align-items: center;
- gap: 1rem;
-}
.xi-symbol {
width: 32px;
height: 32px;
}
-.logo h1 {
+.logo {
+ display: flex;
font-size: 1.8rem;
font-weight: 700;
- color: var(--primary-color);
}
.main-nav {
- display: flex;
gap: 2rem;
}
@@ -187,7 +165,7 @@ body {
.toc {
font-size: 0.95rem;
}
-
+
.toc-inner {
padding: 0.75rem;
}
@@ -197,7 +175,7 @@ body {
.toc-inner {
padding: 1.5rem;
}
-
+
.toc a {
font-size: 1.05rem;
padding: 0.3rem 0;
@@ -208,7 +186,7 @@ body {
.toc-inner {
padding: 2rem;
}
-
+
.toc a {
font-size: 1.1rem;
padding: 0.35rem 0;
@@ -282,7 +260,7 @@ body {
padding: 3rem 0;
min-height: calc(100vh - 200px);
}
-
+
.toc {
grid-column: 1;
justify-self: end;
@@ -296,14 +274,14 @@ body {
height: fit-content;
max-height: calc(100vh - 150px);
}
-
+
.main-content {
grid-column: 2;
width: 100%;
max-width: var(--content-width);
padding: 0 2rem;
}
-
+
/* Calculate TOC width based on available space */
@media (min-width: 1400px) {
.toc {
@@ -317,7 +295,7 @@ body {
#page-layout {
grid-template-columns: minmax(auto, 1fr) var(--content-width) minmax(auto, 1fr);
}
-
+
.toc {
max-width: min(500px, calc(100% - 2rem));
}
@@ -336,18 +314,18 @@ body {
display: block;
padding: 2rem 0;
}
-
+
.toc {
margin: 0 auto 2rem;
max-width: var(--content-width);
width: calc(100% - 4rem);
position: static;
}
-
+
.toc.collapsed {
margin-bottom: 2rem;
}
-
+
.main-content {
max-width: var(--content-width);
margin: 0 auto;
@@ -516,41 +494,42 @@ code {
.container {
padding: 0 1rem;
}
-
+
.header-content {
- flex-direction: column;
+ flex-direction: row;
+ flex-wrap: nowrap;
gap: 1rem;
}
-
+
.main-nav {
gap: 1rem;
}
-
+
.hero-title {
font-size: 3rem;
}
-
+
.hero-subtitle {
font-size: 1.3rem;
}
-
+
.main-content {
padding: 0 1rem;
}
-
+
.resource-grid {
grid-template-columns: 1fr;
}
-
+
.formula-block {
padding: 1.5rem;
font-size: 1.2rem;
}
-
+
.toc {
width: calc(100% - 2rem);
}
-
+
.toc a {
font-size: 0.95rem;
}
@@ -560,7 +539,7 @@ code {
.hero-title {
font-size: 2.5rem;
}
-
+
.formula-block {
font-size: 1rem;
}
@@ -589,23 +568,23 @@ button:focus {
.toc {
display: none !important;
}
-
+
#page-layout {
display: block !important;
padding: 0 !important;
}
-
+
.main-content {
max-width: none;
margin: 0;
padding: 0;
}
-
+
a {
color: var(--text-color);
text-decoration: underline;
}
-
+
.resource-card {
border: 1px solid var(--border-color);
break-inside: avoid;
@@ -724,7 +703,7 @@ button:focus {
padding: 1.5rem;
margin: 1.5rem 0;
}
-
+
.human-voice::before,
.ai-claude-voice::before,
.ai-xilope-voice::before,
@@ -733,3 +712,337 @@ button:focus {
left: 15px;
}
}
+
+/* Header */
+.site-header {
+ background: var(--background);
+ border-bottom: 2px solid var(--border-color);
+ padding: 1rem 0;
+ position: sticky;
+ top: 0;
+ z-index: 1000;
+}
+
+/* Desktop header layout - Logo left, Nav center, Translate right */
+.header-content {
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ align-items: center;
+ gap: 2rem;
+}
+
+.logo {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ grid-column: 1;
+ justify-self: start;
+ order: unset; /* Ensure no order conflicts */
+}
+
+.xi-symbol {
+ width: 32px;
+ height: 32px;
+}
+
+.logo h1 {
+ font-size: 1.8rem;
+ font-weight: 700;
+ color: var(--primary-color);
+}
+
+/* Mobile TOC in header - hidden by default on desktop */
+.mobile-toc-toggle {
+ display: none;
+ grid-column: unset; /* Don't participate in grid on desktop */
+}
+
+/* Navigation - centered on desktop */
+.main-nav {
+ display: flex;
+ gap: 2rem;
+ grid-column: 2;
+ justify-self: center;
+ order: unset; /* Ensure no order conflicts */
+}
+
+.main-nav a {
+ color: var(--text-color);
+ text-decoration: none;
+ font-weight: 600;
+ transition: color 0.2s ease;
+}
+
+.main-nav a:hover {
+ color: var(--accent-color);
+}
+
+/* Translate button - right aligned on desktop */
+.translate-button {
+ grid-column: 3;
+ justify-self: end;
+ order: unset; /* Ensure no order conflicts */
+}
+
+/* Mobile menu toggle - hidden on desktop */
+.mobile-menu-toggle {
+ display: none;
+ background: none;
+ border: 1px solid var(--border-color);
+ border-radius: 4px;
+ cursor: pointer;
+ padding: 0.5rem;
+ color: var(--text-color);
+ font-size: 1.5rem;
+ line-height: 1;
+ grid-column: unset; /* Don't participate in grid on desktop */
+ transition: all 0.2s ease;
+}
+
+.mobile-menu-toggle:hover {
+ background: var(--background-light);
+ color: var(--accent-color);
+}
+
+/* Mobile menu overlay */
+.mobile-menu-overlay {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.5);
+ z-index: 999;
+}
+
+.mobile-menu {
+ position: fixed;
+ top: 0;
+ right: -100%;
+ width: 80%;
+ max-width: 300px;
+ height: 100%;
+ background: var(--background);
+ box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+ transition: right 0.3s ease;
+ z-index: 1001;
+ overflow-y: auto;
+}
+
+.mobile-menu.active {
+ right: 0;
+}
+
+.mobile-menu-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem;
+ border-bottom: 1px solid var(--border-color);
+}
+
+.mobile-menu-close {
+ background: none;
+ border: none;
+ cursor: pointer;
+ font-size: 1.5rem;
+ color: var(--text-color);
+ padding: 0.5rem;
+}
+
+.mobile-menu-nav {
+ padding: 1rem;
+}
+
+.mobile-menu-nav a {
+ display: block;
+ padding: 0.75rem 1rem;
+ color: var(--text-color);
+ text-decoration: none;
+ font-weight: 600;
+ transition: background-color 0.2s ease;
+ border-radius: 4px;
+}
+
+.mobile-menu-nav a:hover {
+ background: var(--background-light);
+ color: var(--accent-color);
+}
+
+.mobile-menu-translate {
+ padding: 1rem;
+ border-top: 1px solid var(--border-color);
+}
+
+/* Mobile TOC dropdown */
+.mobile-toc-dropdown {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: var(--background);
+ border: 1px solid var(--border-color);
+ border-top: none;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ max-height: 70vh;
+ overflow-y: auto;
+ z-index: 998;
+ margin: 0; /* Ensure no margin offsets */
+}
+
+.mobile-toc-dropdown.active {
+ display: block;
+}
+
+.mobile-toc-content {
+ padding: 1rem;
+}
+
+/* Mobile-specific header styles */
+@media (max-width: 768px) {
+ .site-header {
+ padding: 0.75rem 0;
+ }
+
+ .container {
+ position: relative;
+ overflow: visible; /* Allow dropdown to extend outside */
+ }
+
+ /* Change header layout for mobile - TOC left, Logo center, Menu right */
+ .header-content {
+ display: flex;
+ grid-template-columns: unset;
+ justify-content: space-between;
+ gap: 0.5rem;
+ padding: 0 0.5rem; /* Add some padding to prevent buttons touching edges */
+ position: relative; /* For absolute positioned logo */
+ }
+
+ /* Logo centered on mobile */
+ .logo {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ justify-self: unset;
+ grid-column: unset; /* Reset grid column */
+ order: unset; /* Reset any order property */
+ z-index: 1; /* Ensure logo is above but not clickable over buttons */
+ pointer-events: none; /* Allow clicks to pass through to buttons behind */
+ }
+
+ /* Make logo link clickable */
+ .logo a {
+ pointer-events: auto;
+ }
+
+ /* Reset grid properties for nav and translate on mobile */
+ .main-nav,
+ .translate-button {
+ grid-column: unset;
+ }
+
+ .logo h1 {
+ font-size: 1.5rem;
+ }
+
+ /* Show mobile TOC toggle on left */
+ .mobile-toc-toggle {
+ display: block;
+ background: none;
+ border: 1px solid var(--border-color);
+ border-radius: 4px;
+ padding: 0.5rem 0.75rem;
+ cursor: pointer;
+ font-weight: 600;
+ color: var(--text-color);
+ transition: all 0.2s ease;
+ white-space: nowrap;
+ order: -1; /* Ensure it comes first */
+ min-width: 50px; /* Ensure consistent width */
+ }
+
+ .mobile-toc-toggle:hover,
+ .mobile-toc-toggle.active {
+ background: var(--background-light);
+ color: var(--accent-color);
+ }
+
+ /* Hide desktop navigation and translate button */
+ .main-nav,
+ .translate-button {
+ display: none;
+ }
+
+ /* Show mobile menu toggle on right */
+ .mobile-menu-toggle {
+ display: block;
+ order: 999; /* Ensure it comes last */
+ min-width: 50px; /* Match TOC button width */
+ text-align: center;
+ }
+
+ /* Hide desktop TOC */
+ #page-layout .toc {
+ display: none !important;
+ }
+
+ /* Ensure mobile menu overlay is available */
+ .mobile-menu-overlay {
+ display: block;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.3s ease;
+ }
+
+ .mobile-menu-overlay.active {
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+/* No-JS fallback - show full menu */
+.no-js .mobile-menu-toggle,
+.no-js .mobile-toc-toggle {
+ display: none !important;
+}
+
+.no-js .main-nav,
+.no-js .translate-button {
+ display: flex !important;
+}
+
+@media (max-width: 768px) {
+ .no-js .header-content {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ justify-content: center;
+ }
+
+ .no-js .logo {
+ position: static;
+ transform: none;
+ flex: 0 0 100%;
+ text-align: center;
+ justify-content: center;
+ }
+
+ .no-js .main-nav {
+ flex: 1 1 auto;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ justify-content: center;
+ }
+
+ .no-js .main-nav a {
+ padding: 0.5rem;
+ font-size: 0.9rem;
+ }
+
+ .no-js .translate-button {
+ flex: 0 0 auto;
+ }
+}