new file: css/sidebar-theme.css
modified: index.html
This commit is contained in:
parent
88dece974a
commit
17a19d53ea
2 changed files with 232 additions and 61 deletions
164
css/sidebar-theme.css
Normal file
164
css/sidebar-theme.css
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
/* CSS Grid-based sidebar navigation theme for PicoCSS */
|
||||
|
||||
:root {
|
||||
--sidebar-width: 280px;
|
||||
--content-max-width: 1200px;
|
||||
--base-font-size: 16px;
|
||||
--heading-scale: 1.125;
|
||||
}
|
||||
|
||||
/* Adjust default font sizes */
|
||||
html {
|
||||
font-size: var(--base-font-size);
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h1 { font-size: calc(1rem * var(--heading-scale) * var(--heading-scale) * var(--heading-scale) * var(--heading-scale)); }
|
||||
h2 { font-size: calc(1rem * var(--heading-scale) * var(--heading-scale) * var(--heading-scale)); }
|
||||
h3 { font-size: calc(1rem * var(--heading-scale) * var(--heading-scale)); }
|
||||
h4 { font-size: calc(1rem * var(--heading-scale)); }
|
||||
h5, h6 { font-size: 1rem; }
|
||||
|
||||
/* Main grid layout */
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-width) 1fr;
|
||||
grid-template-areas:
|
||||
"sidebar main";
|
||||
gap: 2rem;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Sidebar navigation */
|
||||
aside.sidebar {
|
||||
grid-area: sidebar;
|
||||
background: var(--card-background-color);
|
||||
border-right: 1px solid var(--muted-border-color);
|
||||
padding: 2rem;
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
height: calc(100vh - 2rem);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* Main content area */
|
||||
main {
|
||||
grid-area: main;
|
||||
padding: 2rem 3rem;
|
||||
max-width: var(--content-max-width);
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Table of contents styling */
|
||||
.table-of-contents {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.table-of-contents h2 {
|
||||
font-size: 1.125rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--muted-border-color);
|
||||
}
|
||||
|
||||
.table-of-contents nav ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.table-of-contents nav ul ul {
|
||||
padding-left: 1.25rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.table-of-contents nav li {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.table-of-contents nav a {
|
||||
text-decoration: none;
|
||||
color: var(--color);
|
||||
display: block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.table-of-contents nav a:hover {
|
||||
background-color: var(--secondary-focus);
|
||||
}
|
||||
|
||||
.table-of-contents nav a.active {
|
||||
background-color: var(--primary-focus);
|
||||
color: var(--primary-inverse);
|
||||
}
|
||||
|
||||
/* Responsive behavior */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"main";
|
||||
}
|
||||
|
||||
aside.sidebar {
|
||||
position: fixed;
|
||||
left: -100%;
|
||||
width: var(--sidebar-width);
|
||||
z-index: 1000;
|
||||
transition: left 0.3s ease;
|
||||
}
|
||||
|
||||
aside.sidebar.open {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Mobile menu toggle */
|
||||
.sidebar-toggle {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
z-index: 1001;
|
||||
background: var(--primary);
|
||||
color: var(--primary-inverse);
|
||||
border: none;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.sidebar-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar scrollbar styling */
|
||||
aside.sidebar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
aside.sidebar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
aside.sidebar::-webkit-scrollbar-thumb {
|
||||
background: var(--muted-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
aside.sidebar::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color);
|
||||
}
|
||||
129
index.html
129
index.html
|
|
@ -12,38 +12,8 @@
|
|||
<link rel="stylesheet" href="/css/pico.classless.min.css">
|
||||
<!-- ChunkFive Font -->
|
||||
<link rel="stylesheet" href="/css/chunkfive/stylesheet.css" type="text/css" charset="utf-8" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Table of Contents Visual Hierarchy */
|
||||
aside nav ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
aside nav ul ul {
|
||||
list-style-type: circle;
|
||||
padding-left: 30px;
|
||||
margin-top: 8px;
|
||||
border-left: 2px solid rgba(67, 160, 71, 0.2);
|
||||
padding-left: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
aside nav li {
|
||||
margin: 6px 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
aside nav ul ul li {
|
||||
margin: 4px 0;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
</style>
|
||||
<!-- Sidebar Theme -->
|
||||
<link rel="stylesheet" href="/css/sidebar-theme.css">
|
||||
|
||||
<!-- Highlight.js for syntax highlighting -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/a11y-dark.min.css" />
|
||||
|
|
@ -70,33 +40,18 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Mobile menu toggle -->
|
||||
<button class="sidebar-toggle" onclick="document.querySelector('.sidebar').classList.toggle('open')">
|
||||
☰
|
||||
</button>
|
||||
|
||||
<header>
|
||||
<hgroup>
|
||||
<a href="https://uncloseai.com"><h1 class="unturf" style="font-family: 'ChunkFiveRegular';">russell@unturf. presents, uncloseai</h1></a>
|
||||
<p>Welcome to uncloseai.com - Free LLM & Text To Speech Artificial Intelligence Service</p>
|
||||
</hgroup>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#" onclick="switchTheme('auto')">Auto</a></li>
|
||||
<li><a href="#" onclick="switchTheme('light')">Light</a></li>
|
||||
<li><a href="#" onclick="switchTheme('dark')">Dark</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h2 id="introduction">Introducing uncloseai & Hermes & TTS Speech Endpoints</h2>
|
||||
<p>At <strong>uncloseai.</strong>, we offer free AI services powered by the <a href="https://nousresearch.com/hermes3/" target="_blank">NousResearch/Hermes-3-Llama-3.1-8B</a> model and a TTS (Text-to-Speech) endpoint. Our mission is to provide accessible AI tools for everyone, embodying the principles of both free as in beer & free as in freedom. You can interact with our models without any cost, and you are encouraged to contribute and build upon the open-source code & models that we use.</p>
|
||||
|
||||
<p>We intend to be a drop in replacement, you can use the existing open source OpenAI client to communicate with us.</p>
|
||||
|
||||
<!-- Table of Contents -->
|
||||
<aside>
|
||||
<h3>📋 Table of Contents</h3>
|
||||
<!-- Left sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="table-of-contents">
|
||||
<h2>📋 Table of Contents</h2>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#introduction">Introducing uncloseai & Hermes & TTS Speech Endpoints</a></li>
|
||||
<li><a href="#introduction" class="active">Introducing uncloseai & Hermes & TTS Speech Endpoints</a></li>
|
||||
<li><a href="#client-side">Web Client-Only Solution</a>
|
||||
<ul>
|
||||
<li><a href="#quick-start">🚀 Quick Start: Install uncloseai.js</a></li>
|
||||
|
|
@ -132,8 +87,29 @@
|
|||
</ul>
|
||||
</nav>
|
||||
|
||||
<p><strong>🎮 Looking for examples and interactive demos?</strong> <a href="https://ai.unturf.com/demo.html">Visit our comprehensive demo page →</a></p>
|
||||
</aside>
|
||||
<p style="margin-top: 2rem;"><strong>🎮 Looking for examples?</strong><br><a href="https://ai.unturf.com/demo.html">Visit our demo page →</a></p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main content -->
|
||||
<main>
|
||||
<header>
|
||||
<hgroup>
|
||||
<a href="https://uncloseai.com"><h1 class="unturf" style="font-family: 'ChunkFiveRegular';">russell@unturf. presents, uncloseai</h1></a>
|
||||
<p>Welcome to uncloseai.com - Free LLM & Text To Speech Artificial Intelligence Service</p>
|
||||
</hgroup>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#" onclick="switchTheme('auto')">Auto</a></li>
|
||||
<li><a href="#" onclick="switchTheme('light')">Light</a></li>
|
||||
<li><a href="#" onclick="switchTheme('dark')">Dark</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<h2 id="introduction">Introducing uncloseai & Hermes & TTS Speech Endpoints</h2>
|
||||
<p>At <strong>uncloseai.</strong>, we offer free AI services powered by the <a href="https://nousresearch.com/hermes3/" target="_blank">NousResearch/Hermes-3-Llama-3.1-8B</a> model and a TTS (Text-to-Speech) endpoint. Our mission is to provide accessible AI tools for everyone, embodying the principles of both free as in beer & free as in freedom. You can interact with our models without any cost, and you are encouraged to contribute and build upon the open-source code & models that we use.</p>
|
||||
|
||||
<p>We intend to be a drop in replacement, you can use the existing open source OpenAI client to communicate with us.</p>
|
||||
|
||||
<h2 id="client-side">Web Client-Only Solution: Interact with AI Services Directly from Static Sites or CDNs</h2>
|
||||
|
||||
|
|
@ -460,13 +436,44 @@ speech.ai.unturf.com {
|
|||
</script>
|
||||
|
||||
<script>hljs.highlightAll();</script>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<footer>
|
||||
<small>Stylesheets by <a href="https://picocss.com" target="_blank">PicoCSS</a></small>
|
||||
<small>& <a href="https://highlightjs.org/" target="_blank">highlight.js</a></small>
|
||||
</footer>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Simple active link highlighting
|
||||
document.querySelectorAll('.table-of-contents a').forEach(link => {
|
||||
link.addEventListener('click', function() {
|
||||
document.querySelectorAll('.table-of-contents a').forEach(a => a.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Highlight current section on scroll
|
||||
const sections = document.querySelectorAll('h2[id], h3[id]');
|
||||
const navLinks = document.querySelectorAll('.table-of-contents a');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
let current = '';
|
||||
sections.forEach(section => {
|
||||
const sectionTop = section.offsetTop;
|
||||
const sectionHeight = section.clientHeight;
|
||||
if (window.scrollY >= sectionTop - 100) {
|
||||
current = section.getAttribute('id');
|
||||
}
|
||||
});
|
||||
|
||||
navLinks.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
if (link.getAttribute('href') === '#' + current) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue