mirror of
https://github.com/yhirose/cpp-httplib.git
synced 2026-04-11 19:28:30 +00:00
Add default templates, styles, and scripts for documentation site
This commit is contained in:
yhirose
@@ -1,438 +0,0 @@
|
||||
:root {
|
||||
--bg: #333;
|
||||
--bg-secondary: #3c3c3c;
|
||||
--bg-code: #2a2a2a;
|
||||
--text: #ccc;
|
||||
--text-bright: white;
|
||||
--text-muted: #999;
|
||||
--text-code: #b0b0b0;
|
||||
--text-inline-code: plum;
|
||||
--border: #555;
|
||||
--border-code: #3a3a3a;
|
||||
--link: palegoldenrod;
|
||||
--heading: lightskyblue;
|
||||
--heading-link: #f0c090;
|
||||
--header-nav-link: pink;
|
||||
--emphasis: pink;
|
||||
--nav-section: #bbb;
|
||||
--nav-section-active: #ddd;
|
||||
--content-width: 900px;
|
||||
--sidebar-width: 280px;
|
||||
--header-height: 48px;
|
||||
--line-height: 1.6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: var(--header-height);
|
||||
background-color: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
color: var(--text);
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-title:hover {
|
||||
text-decoration: none;
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
.header-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.header-nav a {
|
||||
color: var(--header-nav-link);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.header-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.lang-selector {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lang-btn {
|
||||
background: none;
|
||||
border: 1px solid var(--text-muted);
|
||||
color: var(--text);
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.lang-btn:hover {
|
||||
border-color: var(--text);
|
||||
}
|
||||
|
||||
.lang-popup {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
margin-top: 4px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
list-style: none;
|
||||
min-width: 60px;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.lang-popup.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lang-popup li a {
|
||||
display: block;
|
||||
padding: 6px 12px;
|
||||
color: var(--text);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.lang-popup li a:hover {
|
||||
background: var(--bg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text);
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
/* Draft banner */
|
||||
.draft-banner {
|
||||
position: fixed;
|
||||
top: var(--header-height);
|
||||
right: 0;
|
||||
background: #c44;
|
||||
color: white;
|
||||
padding: 4px 16px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.1em;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.layout {
|
||||
margin-top: var(--header-height);
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
|
||||
min-height: calc(100vh - var(--header-height));
|
||||
}
|
||||
|
||||
.layout.no-sidebar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
flex-shrink: 0;
|
||||
padding: 24px 16px;
|
||||
border-right: 1px solid var(--bg-secondary);
|
||||
position: sticky;
|
||||
top: var(--header-height);
|
||||
height: calc(100vh - var(--header-height));
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.nav-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.nav-section-title {
|
||||
color: var(--nav-section);
|
||||
font-weight: bold;
|
||||
font-size: 1.0rem;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.nav-section-title.active {
|
||||
color: var(--nav-section-active);
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
list-style: none;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.nav-list li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.nav-list li a {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.nav-list li a:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nav-list li a.active {
|
||||
color: var(--emphasis);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.content {
|
||||
min-width: 0;
|
||||
max-width: var(--content-width);
|
||||
padding: 32px 24px;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.content.portal {
|
||||
max-width: var(--content-width);
|
||||
padding: 48px 24px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content article h1 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 24px;
|
||||
color: var(--heading);
|
||||
}
|
||||
|
||||
.content article h2 {
|
||||
font-size: 1.4rem;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 16px;
|
||||
color: var(--heading-link);
|
||||
}
|
||||
|
||||
.content article h3 {
|
||||
font-size: 1.1rem;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.content article p {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.content article ul,
|
||||
.content article ol {
|
||||
margin-bottom: 12px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.content article li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.content article strong {
|
||||
color: var(--emphasis);
|
||||
}
|
||||
|
||||
.content article code {
|
||||
background: var(--bg-code);
|
||||
color: var(--text-inline-code);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.content article pre {
|
||||
background: var(--bg-code) !important;
|
||||
color: var(--text-code);
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid var(--border-code);
|
||||
}
|
||||
|
||||
.content article pre code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content article table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.content article th,
|
||||
.content article td {
|
||||
border: 1px solid var(--bg-secondary);
|
||||
padding: 8px 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.content article th {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.content article blockquote {
|
||||
border-left: 3px solid var(--text-muted);
|
||||
padding-left: 16px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
padding: 12px 16px;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8rem;
|
||||
border-top: 1px solid var(--bg-secondary);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.layout {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: calc(-1 * var(--sidebar-width));
|
||||
width: var(--sidebar-width);
|
||||
top: var(--header-height);
|
||||
height: calc(100vh - var(--header-height));
|
||||
background: var(--bg);
|
||||
z-index: 50;
|
||||
transition: left 0.2s ease;
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
:root {
|
||||
--header-height: 44px;
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
padding: 0 12px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.header-nav a {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.content article h1 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.content article h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Light mode */
|
||||
[data-theme="light"] {
|
||||
--bg: #f5f5f5;
|
||||
--bg-secondary: #e8e8e8;
|
||||
--bg-code: #eee;
|
||||
--text: #333;
|
||||
--text-bright: #000;
|
||||
--text-muted: #666;
|
||||
--text-code: #333;
|
||||
--text-inline-code: #8b5ca0;
|
||||
--border: #ccc;
|
||||
--border-code: #ddd;
|
||||
--link: #b8860b;
|
||||
--heading: #2a6496;
|
||||
--heading-link: #c06020;
|
||||
--header-nav-link: #c04060;
|
||||
--emphasis: #c04060;
|
||||
--nav-section: #666;
|
||||
--nav-section-active: #333;
|
||||
}
|
||||
|
||||
/* Code block theme switching */
|
||||
.code-light { display: none; }
|
||||
.code-dark { display: block; }
|
||||
|
||||
[data-theme="light"] .code-light { display: block; }
|
||||
[data-theme="light"] .code-dark { display: none; }
|
||||
|
||||
/* Theme toggle */
|
||||
.theme-toggle {
|
||||
background: none;
|
||||
border: 1px solid var(--text-muted);
|
||||
color: var(--text);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
border-color: var(--text);
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
// Language selector
|
||||
(function () {
|
||||
var btn = document.querySelector('.lang-btn');
|
||||
var popup = document.querySelector('.lang-popup');
|
||||
if (!btn || !popup) return;
|
||||
|
||||
btn.addEventListener('click', function (e) {
|
||||
e.stopPropagation();
|
||||
popup.classList.toggle('open');
|
||||
});
|
||||
|
||||
document.addEventListener('click', function () {
|
||||
popup.classList.remove('open');
|
||||
});
|
||||
|
||||
popup.addEventListener('click', function (e) {
|
||||
var link = e.target.closest('[data-lang]');
|
||||
if (!link) return;
|
||||
e.preventDefault();
|
||||
var lang = link.getAttribute('data-lang');
|
||||
localStorage.setItem('preferred-lang', lang);
|
||||
var basePath = document.documentElement.getAttribute('data-base-path') || '';
|
||||
var path = window.location.pathname;
|
||||
// Strip base path prefix, replace lang, then re-add base path
|
||||
var pathWithoutBase = path.slice(basePath.length);
|
||||
var newPath = basePath + pathWithoutBase.replace(/^\/[a-z]{2}\//, '/' + lang + '/');
|
||||
window.location.href = newPath;
|
||||
});
|
||||
})();
|
||||
|
||||
// Theme toggle
|
||||
(function () {
|
||||
var btn = document.querySelector('.theme-toggle');
|
||||
if (!btn) return;
|
||||
|
||||
function getTheme() {
|
||||
var stored = localStorage.getItem('preferred-theme');
|
||||
if (stored) return stored;
|
||||
return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
|
||||
}
|
||||
|
||||
function applyTheme(theme) {
|
||||
if (theme === 'light') {
|
||||
document.documentElement.setAttribute('data-theme', 'light');
|
||||
} else {
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
}
|
||||
btn.textContent = theme === 'light' ? '\u2600\uFE0F' : '\uD83C\uDF19';
|
||||
}
|
||||
|
||||
applyTheme(getTheme());
|
||||
|
||||
btn.addEventListener('click', function () {
|
||||
var current = getTheme();
|
||||
var next = current === 'dark' ? 'light' : 'dark';
|
||||
localStorage.setItem('preferred-theme', next);
|
||||
applyTheme(next);
|
||||
});
|
||||
})();
|
||||
|
||||
// Mobile sidebar toggle
|
||||
(function () {
|
||||
var toggle = document.querySelector('.sidebar-toggle');
|
||||
var sidebar = document.querySelector('.sidebar');
|
||||
if (!toggle || !sidebar) return;
|
||||
|
||||
toggle.addEventListener('click', function () {
|
||||
sidebar.classList.toggle('open');
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (e) {
|
||||
if (!sidebar.contains(e.target) && e.target !== toggle) {
|
||||
sidebar.classList.remove('open');
|
||||
}
|
||||
});
|
||||
})();
|
||||
@@ -1,55 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ lang }}" data-base-path="{{ site.base_path }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ page.title }} - {{ site.title }}</title>
|
||||
<link rel="stylesheet" href="{{ site.base_path }}/css/main.css">
|
||||
<script>
|
||||
(function() {
|
||||
var t = localStorage.getItem('preferred-theme');
|
||||
if (!t) t = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
|
||||
if (t === 'light') document.documentElement.setAttribute('data-theme', 'light');
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="header-inner">
|
||||
<a href="{{ site.base_path }}/{{ lang }}/" class="header-title">{{ site.title }}{% if site.version %} <span style="font-size:0.75em;font-weight:normal;margin-left:4px">v{{ site.version }}</span>{% endif %}</a>
|
||||
<div class="header-spacer"></div>
|
||||
<nav class="header-nav">
|
||||
<a href="{{ site.base_path }}/{{ lang }}/">Home</a>
|
||||
<a href="{{ site.base_path }}/{{ lang }}/tour/">Tour</a>
|
||||
<a href="https://github.com/yhirose/cpp-httplib">GitHub</a>
|
||||
</nav>
|
||||
<div class="header-tools">
|
||||
<button class="theme-toggle" aria-label="Toggle theme"></button>
|
||||
<div class="lang-selector">
|
||||
<button class="lang-btn" aria-label="Language">{{ lang | upper }}</button>
|
||||
<ul class="lang-popup">
|
||||
{% for l in site.langs %}
|
||||
<li><a href="#" data-lang="{{ l }}">{{ l | upper }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% block sidebar_toggle %}{% endblock %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% if page.status == "draft" %}
|
||||
<div class="draft-banner">DRAFT</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="layout {% block layout_class %}{% endblock %}">
|
||||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
© 2026 yhirose. All rights reserved.
|
||||
</footer>
|
||||
|
||||
<script src="{{ site.base_path }}/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,30 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block layout_class %}has-sidebar{% endblock %}
|
||||
|
||||
{% block sidebar_toggle %}<button class="sidebar-toggle" aria-label="Menu">☰</button>{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<aside class="sidebar">
|
||||
<nav class="sidebar-nav">
|
||||
{% for section in nav %}
|
||||
<div class="nav-section">
|
||||
<a href="{{ section.url }}" class="nav-section-title {% if section.active %}active{% endif %}">{{ section.title }}</a>
|
||||
{% if section.children %}
|
||||
<ul class="nav-list">
|
||||
{% for item in section.children %}
|
||||
<li><a href="{{ item.url }}" class="{% if item.active %}active{% endif %}">{{ item.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</aside>
|
||||
<main class="content">
|
||||
<article>
|
||||
<h1>{{ page.title }}</h1>
|
||||
{{ content | safe }}
|
||||
</article>
|
||||
</main>
|
||||
{% endblock %}
|
||||
@@ -1,12 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block layout_class %}no-sidebar{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<main class="content portal">
|
||||
<article>
|
||||
<h1>{{ page.title }}</h1>
|
||||
{{ content | safe }}
|
||||
</article>
|
||||
</main>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user