Spearhead/spearhead
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated (#22)

Browse Source 
Co-authored-by: dutchie032 <dutchie032>
This commit is contained in:
dutchie031
2025-04-25 17:09:19 +02:00
committed by GitHub
co-authored by dutchie032 <dutchie032>
parent cd6c158a0e
commit 743ec6495a
7 changed files with 259 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_docs/js/site.js
+66 -1
View File
@@ -19,4 +19,69 @@ document.addEventListener('DOMContentLoaded', function() {
// Initialize // Initialize
const saved = localStorage.getItem('theme') || 'dark'; const saved = localStorage.getItem('theme') || 'dark';
setTheme(saved); setTheme(saved);
});
// Set side-nav-title to the first h1's text
var h1 = document.querySelector('.content-wrapper h1');
var sideNavTitle = document.querySelector('.side-nav-title');
if (h1 && sideNavTitle) {
sideNavTitle.textContent = h1.textContent;
}
});
// Highlight sidenav link on scroll (shared for all pages)
function setupSideNavHighlight() {
const navLinks = document.querySelectorAll('.side-nav a');
if (!navLinks.length) return;
const sections = Array.from(navLinks).map(link => {
const id = link.getAttribute('href').replace('#', '');
return document.getElementById(id);
});
function getHeaderOffset() {
const header = document.querySelector('header');
return header ? header.offsetHeight : 0;
}
function onScroll() {
const headerOffset = getHeaderOffset();
let activeIdx = 0;
const scrollPos = window.scrollY + headerOffset + 1;
// Highlight the first section if at the very top
if (window.scrollY === 0) {
activeIdx = 0;
} else {
for (let i = 0; i < sections.length; i++) {
const section = sections[i];
const nextSection = sections[i + 1];
if (section) {
const sectionTop = section.offsetTop;
const nextSectionTop = nextSection ? nextSection.offsetTop : Infinity;
if (scrollPos >= sectionTop && scrollPos < nextSectionTop) {
activeIdx = i;
break;
}
}
}
// Only trigger 'at bottom' logic if truly at the bottom and not at the very top
const atBottom = Math.abs((window.innerHeight + window.scrollY) - document.body.offsetHeight) < 2;
if (atBottom && window.scrollY !== 0) {
activeIdx = sections.length - 1;
}
}
navLinks.forEach((link, i) => {
if (i === activeIdx) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
}
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
onScroll(); // Initial call
}
// Run on DOMContentLoaded
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setupSideNavHighlight);
} else {
setupSideNavHighlight();
}
_docs/pages/getstarted.html
+7
View File
@@ -0,0 +1,7 @@
<style>
.side-nav a.active {
font-weight: bold;
color: #4fc3f7;
}
</style>
<!-- Removed inline script: sidenav highlight now handled by site.js -->
_docs/pages/persistence.html
+10 -3
View File
@@ -7,6 +7,12 @@
<title>Spearhead Persistence</title> <title>Spearhead Persistence</title>
<link rel="stylesheet" href="../style/style.css"> <link rel="stylesheet" href="../style/style.css">
<script src="../js/site.js"></script> <script src="../js/site.js"></script>
<style>
.side-nav a.active {
font-weight: bold;
color: #4fc3f7;
}
</style>
</head> </head>
<body> <body>
@@ -39,7 +45,7 @@
<main> <main>
<div class="reference-container"> <div class="reference-container">
<div class="side-nav"> <div class="side-nav">
<h4>Contents</h4> <h4 class="side-nav-title"></h4>
<ul> <ul>
<li><a href="#settings" class="side-nav-h2">Settings</a></li> <li><a href="#settings" class="side-nav-h2">Settings</a></li>
<li><a href="#feedback" class="side-nav-h2">Feedback</a></li> <li><a href="#feedback" class="side-nav-h2">Feedback</a></li>
@@ -53,7 +59,7 @@
</div> </div>
<div class="content-wrapper"> <div class="content-wrapper">
<h1>Spearhead Persistence</h1> <h1>Persistence</h1>
<p> <p>
Spearhead comes with a custom Persistence option. <br/> Spearhead comes with a custom Persistence option. <br/>
@@ -139,4 +145,5 @@
</footer> </footer>
</body> </body>
</html> </html>
```
_docs/pages/reference.html
+10 -4
View File
@@ -7,6 +7,12 @@
<title>Spearhead Reference</title> <title>Spearhead Reference</title>
<link rel="stylesheet" href="../style/style.css"> <link rel="stylesheet" href="../style/style.css">
<script src="../js/site.js"></script> <script src="../js/site.js"></script>
<style>
.side-nav a.active {
font-weight: bold;
color: #4fc3f7;
}
</style>
</head> </head>
<body> <body>
@@ -39,10 +45,10 @@
<main> <main>
<div class="reference-container"> <div class="reference-container">
<div class="side-nav"> <div class="side-nav">
<h4>Contents</h4> <h4 class="side-nav-title"></h4>
<ul> <ul>
<li><a href="#configuration" class="side-nav-h2">Configuration</a></li> <li><a href="#configuration" class="side-nav-h2">Configuration</a></li>
<li><a href="#general-naming-conventions" class="side-nav-h2">General Naming Conventions</a> <li><a href="#general-naming-conventions" class="side-nav-h2">Naming Conventions</a>
<ul> <ul>
<li><a href="#stage-zones" class="side-nav-h3">Stage Zones</a></li> <li><a href="#stage-zones" class="side-nav-h3">Stage Zones</a></li>
<li><a href="#waiting-stages" class="side-nav-h3">Waiting Stages</a></li> <li><a href="#waiting-stages" class="side-nav-h3">Waiting Stages</a></li>
@@ -71,7 +77,7 @@
</div> </div>
<div class="content-wrapper"> <div class="content-wrapper">
<h1>Spearhead Reference</h1> <h1>Reference</h1>
<p> <p>
This page provides a detailed overview of all settings, naming conventions, and logic used in This page provides a detailed overview of all settings, naming conventions, and logic used in
Spearhead. <br /> Spearhead. <br />
@@ -160,7 +166,7 @@
}</pre> }</pre>
<h2 id="general-naming-conventions">General Naming Conventions</h2> <h2 id="general-naming-conventions">Naming Conventions</h2>
<p> <p>
Spearhead uses specific naming conventions for zones, missions, and CAP configurations. These Spearhead uses specific naming conventions for zones, missions, and CAP configurations. These
conventions are critical for the framework to function correctly. conventions are critical for the framework to function correctly.
_docs/pages/spearheadapi.html
+7 -1
View File
@@ -39,7 +39,7 @@
<main> <main>
<div class="reference-container"> <div class="reference-container">
<div class="side-nav"> <div class="side-nav">
<h4>Contents</h4> <h4 class="side-nav-title"></h4>
<ul> <ul>
<li><a href="#introduction" class="side-nav-h2">Introduction</a></li> <li><a href="#introduction" class="side-nav-h2">Introduction</a></li>
<li><a href="#stages" class="side-nav-h2">Stages</a></li> <li><a href="#stages" class="side-nav-h2">Stages</a></li>
@@ -91,6 +91,12 @@
<footer> <footer>
<p>&copy; 2025 Spearhead Project</p> <p>&copy; 2025 Spearhead Project</p>
</footer> </footer>
<style>
.side-nav a.active {
font-weight: bold;
color: #4fc3f7;
}
</style>
</body> </body>
</html> </html>
_docs/pages/tutorials.html
+10 -4
View File
@@ -7,6 +7,12 @@
<title>Spearhead Tutorials</title> <title>Spearhead Tutorials</title>
<link rel="stylesheet" href="../style/style.css"> <link rel="stylesheet" href="../style/style.css">
<script src="../js/site.js"></script> <script src="../js/site.js"></script>
<style>
.side-nav a.active {
font-weight: bold;
color: #4fc3f7;
}
</style>
</head> </head>
<body> <body>
@@ -39,7 +45,7 @@
<main> <main>
<div class="reference-container"> <div class="reference-container">
<div class="side-nav"> <div class="side-nav">
<h4>Contents</h4> <h4 class="side-nav-title"></h4>
<ul> <ul>
<li><a href="#include-the-script" class="side-nav-h2">Include the Script</a></li> <li><a href="#include-the-script" class="side-nav-h2">Include the Script</a></li>
<li><a href="#stages" class="side-nav-h2">Stages</a></li> <li><a href="#stages" class="side-nav-h2">Stages</a></li>
@@ -48,7 +54,7 @@
<li><a href="#creating-cap-routes" class="side-nav-h3">Creating CAP Routes</a></li> <li><a href="#creating-cap-routes" class="side-nav-h3">Creating CAP Routes</a></li>
</ul> </ul>
</li> </li>
<li><a href="#setting-up-the-missions" class="side-nav-h2">Setting up the Missions</a> <li><a href="#setting-up-the-missions" class="side-nav-h2">Setting up Missions</a>
<ul> <ul>
<li><a href="#mission-1-dead" class="side-nav-h3">Mission: DEAD</a></li> <li><a href="#mission-1-dead" class="side-nav-h3">Mission: DEAD</a></li>
<li><a href="#mission-2-strike" class="side-nav-h3">Mission: STRIKE</a></li> <li><a href="#mission-2-strike" class="side-nav-h3">Mission: STRIKE</a></li>
@@ -122,7 +128,7 @@
<h2 id="setting-up-cap">Setting up CAP</h2> <h2 id="setting-up-cap">Setting up CAP</h2>
<p> <p>
If you don't want to use the CAP managers withing Spearhead you can skip this and continue to <a href="#setting-up-the-missions">setting up the missions</a>. <br /> If you don't want to use the CAP managers withing Spearhead you can skip this and continue to <a href="#setting-up-the-missions">Setting up Missions</a>. <br />
However CAP is one of the painpoints in a lot of missions and setting up a dynamic feeling airspace can be However CAP is one of the painpoints in a lot of missions and setting up a dynamic feeling airspace can be
quite the challenge. <br /> quite the challenge. <br />
With the CAP managers we've tried to make this a lot easier. <br /> With the CAP managers we've tried to make this a lot easier. <br />
@@ -181,7 +187,7 @@
If you want to change values for the CAP routes please read about how to configure it here: <a href="./Reference.html#cap-config">Cap Config</a> If you want to change values for the CAP routes please read about how to configure it here: <a href="./Reference.html#cap-config">Cap Config</a>
</p> </p>
<h2 id="setting-up-the-missions">Setting up the Missions</h2> <h2 id="setting-up-the-missions">Setting up Missions</h2>
<p> <p>
Now the part where you as a mission maker can really get into the nitty gritty. <br/> Now the part where you as a mission maker can really get into the nitty gritty. <br/>
Missions are managed and monitored by Spearhead. <br/> Missions are managed and monitored by Spearhead. <br/>
_docs/style/style.css
+149 -74
View File
@@ -1,33 +1,33 @@
:root { :root {
/* Dark Theme (Default) */ /* Dark Theme (Default) - Slightly lighter */
--color-bg-primary: #070a17; /* Darkened primary background */ --color-bg-primary: #0a0b10; /* Much darker primary background */
--color-bg-secondary: #121a30; /* Adjusted secondary background */ --color-bg-secondary: #13141a; /* Darker secondary background */
--color-bg-tertiary: #182040; /* Slightly darkened tertiary */ --color-bg-tertiary: #181a22; /* Darker tertiary */
--color-bg-header: #050715; /* Darkened header */ --color-bg-header: #090a0f; /* Darker header */
--color-bg-code: rgba(11, 16, 35, 0.75); /* Increased opacity for code blocks */ --color-bg-code: #10121a; /* Almost black code block background */
--color-bg-note: rgba(18, 28, 58, 0.75); /* Increased opacity for notes */ --color-bg-note: rgba(30, 32, 40, 0.85); /* Slightly darker note background */
--color-bg-hover: rgba(86, 100, 210, 0.2); /* Slightly increased hover opacity */ --color-bg-hover: rgba(120, 140, 255, 0.12); /* More visible hover */
--color-bg-inline-lua: rgba(25, 18, 8, 0.7); /* Background for inline lua code */ --color-bg-inline-lua: #181a22; /* Match code block background */
--color-bg-note-dark: rgba(50, 40, 15, 0.7); /* Background for note boxes */ --color-bg-note-dark: rgba(40, 35, 30, 0.85); /* Slightly darker note box */
--color-text-primary: #ffffff; /* Made whiter (was #f0f3ff) */ --color-text-primary: #f6f8fa; /* Brighter text */
--color-text-secondary: #d8e0ff; /* Made whiter (was #bbc8ff) */ --color-text-secondary: #bfc8d8; /* Lighter secondary text */
--color-text-accent: #90c0ff; /* Made brighter (was #70aaff) */ --color-text-accent: #7ecbff; /* Brighter accent */
--color-text-light: #ffffff; /* Unchanged */ --color-text-light: #ffffff;
--color-border-primary: #3a4980; /* Brightened primary border */ --color-border-primary: #23263a; /* Stronger border for contrast */
--color-border-accent: #5c75d9; /* Brightened accent border */ --color-border-accent: #3a7bd5; /* Brighter accent border */
--color-link: #90c0ff; /* Made brighter (was #70aaff) */ --color-link: #7ecbff;
--color-link-hover: #d0e5ff; /* Made brighter (was #b0d0ff) */ --color-link-hover: #ffffff;
/* Lua syntax highlighting colors with improved contrast */ /* Lua syntax highlighting colors with high contrast */
--color-lua-variable: #ffe080; /* Brighter variable color */ --color-lua-variable: #4fc3f7;
--color-lua-comment: #c0b8a0; /* Brighter comment color */ --color-lua-comment: #b0b8d0; /* Lighter, more visible comment */
--color-lua-operator: #ffffff; --color-lua-operator: #ffffff;
--color-lua-keyword: #ffd8a0; /* Brighter keyword color */ --color-lua-keyword: #ffd166; /* Orange for keywords */
--color-lua-string: #c0ffb8; /* Brighter string color */ --color-lua-string: #7fffde; /* Aqua for strings */
--color-lua-function: #fff0a0; /* Brighter function color */ --color-lua-function: #ffe066; /* Gold for functions */
/* Shadow and transparency values - unchanged */ /* Shadow and transparency values - unchanged */
--shadow-small: 0 2px 5px rgba(0, 0, 0, 0.3); --shadow-small: 0 2px 5px rgba(0, 0, 0, 0.3);
@@ -45,13 +45,23 @@
--margin-small: 5%; --margin-small: 5%;
/* Scrollbar colors */ /* Scrollbar colors */
--color-scrollbar-track: rgba(7, 10, 23, 0.8); --color-scrollbar-track: rgba(20, 22, 28, 0.8);
--color-scrollbar-thumb-start: #5c75d9; --color-scrollbar-thumb-start: #4c5260;
--color-scrollbar-thumb-end: #3a4980; --color-scrollbar-thumb-end: #323642;
--color-scrollbar-thumb-hover-start: #90c0ff; --color-scrollbar-thumb-hover-start: #5a606e;
--color-scrollbar-thumb-hover-end: #5c75d9; --color-scrollbar-thumb-hover-end: #4c5260;
--color-scrollbar-shadow: rgba(144, 192, 255, 0.3); --color-scrollbar-shadow: rgba(90, 96, 110, 0.3);
--color-scrollbar-shadow-hover: rgba(144, 192, 255, 0.5); --color-scrollbar-shadow-hover: rgba(90, 96, 110, 0.5);
/* New variables for gradients, shadows, and navigation accent */
--gradient-header: linear-gradient(135deg, var(--color-bg-header) 0%, var(--color-bg-secondary) 70%, var(--color-bg-header-accent) 100%);
--color-bg-header-accent: #2a2620;
--color-logo-gradient: linear-gradient(120deg, #5caaff, #a0e8ff, #ffffff);
--color-nav-underline: #b0a890;
--color-nav-underline-glow: rgba(176, 168, 144, 0.6);
--color-nav-hover-bg: var(--color-bg-hover);
--color-nav-hover-text: #ffffff;
--color-nav-hover-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
} }
[data-theme="light"] { [data-theme="light"] {
@@ -59,10 +69,10 @@
--color-bg-secondary: #e8ecf7; --color-bg-secondary: #e8ecf7;
--color-bg-tertiary: #dce2f0; --color-bg-tertiary: #dce2f0;
--color-bg-header: #f0f2fa; --color-bg-header: #f0f2fa;
--color-bg-code: rgba(220, 225, 240, 0.75); --color-bg-code: #e3e6eb; /* Medium-light gray for code block background */
--color-bg-note: rgba(215, 228, 245, 0.75); --color-bg-note: rgba(215, 228, 245, 0.75);
--color-bg-hover: rgba(100, 120, 200, 0.1); --color-bg-hover: rgba(100, 120, 200, 0.1);
--color-bg-inline-lua: rgba(230, 235, 245, 0.7); --color-bg-inline-lua: #e3e6eb;
--color-bg-note-dark: rgba(235, 240, 250, 0.7); --color-bg-note-dark: rgba(235, 240, 250, 0.7);
--color-text-primary: #151720; --color-text-primary: #151720;
@@ -70,19 +80,19 @@
--color-text-accent: #3050b0; --color-text-accent: #3050b0;
--color-text-light: #2a2e40; --color-text-light: #2a2e40;
--color-border-primary: #a0b0e0; --color-border-primary: #a0a8b8;
--color-border-accent: #5c75d9; --color-border-accent: #5c75d9;
--color-link: #3050b0; --color-link: #3050b0;
--color-link-hover: #4060c0; --color-link-hover: #4060c0;
/* Lua syntax highlighting colors for light theme */ /* Lua syntax highlighting colors for light theme */
--color-lua-variable: #0050a0; --color-lua-variable: #1a237e;
--color-lua-comment: #606080; --color-lua-comment: #374151;
--color-lua-operator: #202030; --color-lua-operator: #23272e;
--color-lua-keyword: #6030a0; --color-lua-keyword: #b45309;
--color-lua-string: #008060; --color-lua-string: #065f46;
--color-lua-function: #0070a0; --color-lua-function: #6d28d9;
/* Shadow values adjusted for light theme */ /* Shadow values adjusted for light theme */
@@ -101,6 +111,16 @@
--color-scrollbar-thumb-hover-end: #5c75d9; --color-scrollbar-thumb-hover-end: #5c75d9;
--color-scrollbar-shadow: rgba(48, 80, 176, 0.2); --color-scrollbar-shadow: rgba(48, 80, 176, 0.2);
--color-scrollbar-shadow-hover: rgba(48, 80, 176, 0.4); --color-scrollbar-shadow-hover: rgba(48, 80, 176, 0.4);
/* New variables for gradients, shadows, and navigation accent */
--gradient-header: linear-gradient(135deg, var(--color-bg-header) 0%, var(--color-bg-secondary) 70%, var(--color-bg-header-accent) 100%);
--color-bg-header-accent: #f5e9d2;
--color-logo-gradient: linear-gradient(120deg, #225a9e, #3578c7, #70aaff);
--color-nav-underline: #e0cfa0;
--color-nav-underline-glow: rgba(224, 207, 160, 0.4);
--color-nav-hover-bg: var(--color-bg-hover);
--color-nav-hover-text: var(--color-text-primary);
--color-nav-hover-shadow: 0 4px 8px rgba(48, 80, 176, 0.15);
} }
html { html {
@@ -133,8 +153,8 @@ a:hover {
} }
header { header {
background: linear-gradient(to right, var(--color-bg-header), var(--color-bg-primary)); background: var(--gradient-header);
box-shadow: var(--shadow-large); box-shadow: var(--shadow-medium);
} }
.header-box { .header-box {
@@ -161,7 +181,7 @@ header {
.logo { .logo {
font-size: 2.5em; font-size: 2.5em;
font-weight: 600; font-weight: 600;
background: linear-gradient(120deg, var(--color-text-secondary), var(--color-text-accent)); background: var(--color-logo-gradient);
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
color: transparent; color: transparent;
@@ -170,7 +190,8 @@ header {
} }
.logo:hover { .logo:hover {
transform: scale(1.02); transform: scale(1.03);
filter: brightness(1.1);
text-decoration: none; text-decoration: none;
} }
@@ -190,14 +211,17 @@ header nav a {
position: relative; position: relative;
color: var(--color-text-primary); color: var(--color-text-primary);
font-weight: 500; font-weight: 500;
padding: 0.5em 0.8em; padding: 0.6em 1em;
border-radius: 4px; border-radius: 6px;
transition: all 0.2s ease-in-out; transition: all 0.25s ease-in-out;
letter-spacing: 0.02em;
} }
header nav a:hover { header nav a:hover {
color: var(--color-text-accent); color: var(--color-nav-hover-text);
background-color: var(--color-bg-hover); background-color: var(--color-nav-hover-bg);
transform: translateY(-2px);
box-shadow: var(--color-nav-hover-shadow);
text-decoration: none; text-decoration: none;
} }
@@ -208,9 +232,11 @@ header nav a::after {
left: 50%; left: 50%;
width: 0; width: 0;
height: 2px; height: 2px;
background-color: var(--color-text-accent); background-color: var(--color-nav-underline);
transition: all 0.3s ease; transition: width 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s, background-color 0.3s;
transform: translateX(-50%); transform: translateX(-50%);
box-shadow: 0 0 6px var(--color-nav-underline-glow);
pointer-events: none;
} }
header nav a:hover::after { header nav a:hover::after {
@@ -266,8 +292,9 @@ main {
/* Side navigation styles */ /* Side navigation styles */
.reference-container { .reference-container {
margin-top: 2em;
display: flex; display: flex;
align-items: flex-start;
margin-top: 2em;
margin-left: var(--margin-left); margin-left: var(--margin-left);
flex-direction: row; flex-direction: row;
gap: 2em; gap: 2em;
@@ -275,14 +302,14 @@ main {
} }
.side-nav { .side-nav {
width: 250px; /* Fixed width instead of percentage */ width: 200px;
min-width: 250px; /* Same fixed minimum width */ min-width: 200px;
padding: 1em; padding-left: 0;
overflow-y: auto;
border-right: none;
position: sticky; position: sticky;
top: 2em; top: 2em;
min-height: calc(100vh - 20em); align-self: flex-start;
overflow-y: auto;
border-right: 2px solid var(--color-border-accent);
} }
.side-nav h4 { .side-nav h4 {
@@ -292,7 +319,7 @@ main {
.side-nav ul { .side-nav ul {
list-style-type: none; list-style-type: none;
padding-left: 1em; padding-left: 0.5em;
margin-top: 0.5em; margin-top: 0.5em;
} }
@@ -303,11 +330,25 @@ main {
.side-nav a { .side-nav a {
color: var(--color-text-primary); color: var(--color-text-primary);
text-decoration: none; text-decoration: none;
padding: 0.5em 1em;;
} }
.side-nav a:hover { .side-nav a:hover, .side-nav a.active {
background: linear-gradient(90deg, var(--color-border-accent) 0 6px, var(--color-bg-hover) 6px 100%);
font-weight: bold;
border-radius: 4px;
color: var(--color-link-hover); color: var(--color-link-hover);
text-decoration: underline; text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.side-nav a.active {
background: linear-gradient(90deg, var(--color-border-accent) 0 6px, var(--color-bg-hover) 6px 100%);
font-weight: bold;
border-radius: 4px;
color: var(--color-link-hover);
text-decoration: none;
transition: background 0.2s, color 0.2s;
} }
.side-nav-h2 { .side-nav-h2 {
@@ -325,6 +366,10 @@ main {
.content-wrapper { .content-wrapper {
flex: 1; flex: 1;
max-width: 900px; max-width: 900px;
margin-left: 0;
border-left: 2px solid var(--color-border-accent);
padding-left: 1.5em;
padding-bottom: 20vh; /* Allow last section to scroll to top */
} }
/* Heading styles */ /* Heading styles */
@@ -338,19 +383,30 @@ h1, h2, h3, h4, h5, h6 {
h1 { h1 {
font-size: 2.2em; font-size: 2.2em;
border-bottom: 2px solid var(--color-border-primary); color: #8fc6ff;
font-weight: 700;
text-shadow: 0 1px 4px rgba(143,198,255,0.08);
letter-spacing: 0.01em;
border-bottom: 1.5px solid #8fc6ff;
padding-bottom: 0.3em; padding-bottom: 0.3em;
} }
h2 { h2 {
font-size: 1.8em; font-size: 1.8em;
border-bottom: 1px solid var(--color-border-primary); color: #b3e0ff;
font-weight: 600;
text-shadow: 0 1px 2px rgba(179,224,255,0.07);
letter-spacing: 0.005em;
border-bottom: 1px solid #b3e0ff;
padding-bottom: 0.2em; padding-bottom: 0.2em;
} }
h3 { h3 {
font-size: 1.4em; font-size: 1.4em;
color: var(--color-text-accent); color: #c9e6ff;
font-weight: 600;
text-shadow: 0 1px 1px rgba(201,230,255,0.06);
letter-spacing: 0.005em;
} }
h4 { h4 {
@@ -397,23 +453,26 @@ th {
/* Code and syntax highlighting with improved contrast */ /* Code and syntax highlighting with improved contrast */
.inline-lua { .inline-lua {
background-color: var(--color-bg-inline-lua); /* Darker background for better contrast */ background-color: var(--color-bg-inline-lua);
padding: 0.1em 0.3em;
border-radius: 3px; border-radius: 3px;
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
white-space: nowrap; white-space: nowrap;
padding: 0.1em 0.3em;
color: #23272e;
} }
/* Code block styling with improved contrast */ /* Code block styling with improved contrast */
pre { pre {
background-color: var(--color-bg-inline-lua); /* Darker background for better contrast */ background-color: var(--color-bg-code);
border: 1px solid var(--color-border-primary); border: 1px solid var(--color-border-primary);
border-radius: 5px; border-radius: 8px;
padding: 1em; padding: 1.2em;
margin: 1.5em 0; margin: 1.5em 0;
overflow-x: auto; overflow-x: auto;
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
line-height: 1.4; line-height: 1.4;
box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.08);
color: #23272e;
} }
.lua-variable { .lua-variable {
@@ -451,11 +510,12 @@ pre {
/* Note boxes */ /* Note boxes */
.note { .note {
background-color: var(--color-bg-note-dark); background: linear-gradient(to right, rgba(60, 50, 40, 0.7), rgba(50, 45, 40, 0.55));
border-left: 4px solid var(--color-border-accent); border-left: 4px solid var(--color-border-accent);
padding: 0.8em 1em; padding: 1em 1.2em;
margin: 1.5em 0; margin: 1.8em 0;
border-radius: 0 4px 4px 0; border-radius: 0 8px 8px 0;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
} }
.note p:last-child { .note p:last-child {
@@ -524,6 +584,13 @@ img {
:root { :root {
--margin-left: var(--margin-small); --margin-left: var(--margin-small);
} }
.side-nav {
display: none;
}
.content-wrapper {
margin-left: 0;
}
} }
/* Mobile responsive styles */ /* Mobile responsive styles */
@@ -581,15 +648,23 @@ img {
height: 36px; height: 36px;
border-radius: 50%; border-radius: 50%;
background-color: var(--color-bg-tertiary); background-color: var(--color-bg-tertiary);
transition: background-color 0.3s ease; transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
} }
.theme-toggle:hover { .theme-toggle:hover {
background-color: var(--color-bg-hover); background-color: var(--color-bg-hover);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(100, 130, 255, 0.3);
} }
.theme-toggle svg { .theme-toggle svg {
width: 20px; width: 20px;
height: 20px; height: 20px;
fill: var(--color-text-primary); fill: var(--color-text-primary);
transition: all 0.3s ease;
}
.theme-toggle:hover svg {
fill: var(--color-text-accent);
} }