Hugo site now
This commit is contained in:
parent
aceb297d4f
commit
995092af42
GPG key ID:
59B3F0C24135C6A9
34 changed files with 1309 additions and 85 deletions
167
src/static/assets/css/site.css
Normal file
167
src/static/assets/css/site.css
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
:root{
|
||||
--cspresso-mint:#2DD4BF;
|
||||
--cspresso-violet:#A78BFA;
|
||||
--cspresso-ink:#0b1220;
|
||||
--cspresso-ink-2:#111827;
|
||||
--cspresso-cream:#F6F0E7;
|
||||
|
||||
--bs-link-color: var(--cspresso-mint);
|
||||
--bs-link-hover-color: var(--cspresso-violet);
|
||||
--bs-link-color-rgb: 45, 212, 191;
|
||||
--bs-link-hover-color-rgb: 167, 139, 250;
|
||||
|
||||
--bs-nav-pills-link-active-bg: rgba(45,212,191,0.18);
|
||||
--bs-nav-pills-link-active-color: var(--cspresso-ink);
|
||||
}
|
||||
|
||||
html{scroll-behavior:smooth;}
|
||||
|
||||
body{
|
||||
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
||||
color: var(--cspresso-ink);
|
||||
}
|
||||
|
||||
.navbar{
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.navbar-toggler-icon{
|
||||
background-image: url("../img/hamburger.svg");
|
||||
}
|
||||
|
||||
.brand-mark{width:84px;height:84px;}
|
||||
|
||||
.hero{
|
||||
background:
|
||||
radial-gradient(900px 600px at 15% 15%, rgba(45,212,191,0.28), rgba(45,212,191,0.00) 60%),
|
||||
radial-gradient(900px 600px at 85% 35%, rgba(167,139,250,0.26), rgba(167,139,250,0.00) 60%),
|
||||
linear-gradient(180deg, rgba(11,18,32,0.02), rgba(11,18,32,0.00));
|
||||
}
|
||||
|
||||
.hero .lead{
|
||||
color: rgba(15,23,42,0.78);
|
||||
}
|
||||
|
||||
.hero-card{
|
||||
background: rgba(255,255,255,0.70);
|
||||
border: 1px solid rgba(15,23,42,0.08);
|
||||
box-shadow: 0 18px 48px rgba(15,23,42,0.10);
|
||||
border-radius: 1.25rem;
|
||||
}
|
||||
|
||||
.kicker{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
font-weight: 600;
|
||||
font-size: .95rem;
|
||||
padding: .45rem .75rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(45,212,191,0.12);
|
||||
border: 1px solid rgba(45,212,191,0.25);
|
||||
color: var(--cspresso-ink);
|
||||
}
|
||||
|
||||
.section-title{
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.icon-pill{
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(45,212,191,0.12);
|
||||
border: 1px solid rgba(45,212,191,0.25);
|
||||
color: var(--cspresso-ink);
|
||||
}
|
||||
|
||||
.feature-card{
|
||||
border: 1px solid rgba(15,23,42,0.08);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: 0 12px 30px rgba(15,23,42,0.06);
|
||||
}
|
||||
|
||||
.terminal{
|
||||
background: #0b1220;
|
||||
color: #e5e7eb;
|
||||
border-radius: 1rem;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
box-shadow: 0 18px 52px rgba(11,18,32,0.35);
|
||||
}
|
||||
|
||||
.terminal .prompt{ color: #93c5fd; }
|
||||
.terminal code{ color: #e5e7eb; }
|
||||
|
||||
.codeblock{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.copy-btn{
|
||||
position: absolute;
|
||||
top: .75rem;
|
||||
right: .75rem;
|
||||
}
|
||||
|
||||
.badge-soft{
|
||||
background: rgba(15,23,42,0.06);
|
||||
border: 1px solid rgba(15,23,42,0.10);
|
||||
color: rgba(15,23,42,0.85);
|
||||
}
|
||||
|
||||
.callout{
|
||||
border: 1px solid rgba(15,23,42,0.10);
|
||||
border-radius: 1rem;
|
||||
background: rgba(255,255,255,0.78);
|
||||
}
|
||||
|
||||
footer{
|
||||
background:
|
||||
radial-gradient(900px 300px at 20% 0%, rgba(45,212,191,0.12), rgba(45,212,191,0.00) 60%),
|
||||
radial-gradient(900px 300px at 80% 0%, rgba(167,139,250,0.10), rgba(167,139,250,0.00) 60%),
|
||||
linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
||||
border-top: 1px solid rgba(15,23,42,0.06);
|
||||
}
|
||||
|
||||
.smallprint{ color: rgba(15,23,42,0.65); }
|
||||
|
||||
/* Make anchor scrolling nicer under sticky nav */
|
||||
.scroll-mt-nav{ scroll-margin-top: 90px; }
|
||||
|
||||
a{ text-decoration-color: rgba(45,212,191,0.55); }
|
||||
a:hover{ text-decoration-color: rgba(167,139,250,0.85); }
|
||||
|
||||
/* Quickstart pills */
|
||||
.nav-pills .nav-link{
|
||||
border: 1px solid rgba(45,212,191,0.25);
|
||||
color: var(--cspresso-ink);
|
||||
background: rgba(45,212,191,0.10);
|
||||
border-radius: 999px;
|
||||
}
|
||||
.nav-pills .nav-link:hover{
|
||||
background: rgba(167,139,250,0.10);
|
||||
border-color: rgba(45,212,191,0.55);
|
||||
}
|
||||
.nav-pills .nav-link.active,
|
||||
.nav-pills .show > .nav-link{
|
||||
background: rgba(45,212,191,0.18);
|
||||
color: var(--cspresso-ink);
|
||||
border-color: rgba(15,23,42,0.18);
|
||||
}
|
||||
|
||||
|
||||
.chip{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .35rem;
|
||||
padding: .25rem .55rem;
|
||||
border-radius: 999px;
|
||||
font-size: .85rem;
|
||||
background: rgba(15,23,42,0.06);
|
||||
border: 1px solid rgba(15,23,42,0.10);
|
||||
color: rgba(15,23,42,0.88);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
30
src/static/assets/img/cspresso.svg
Normal file
30
src/static/assets/img/cspresso.svg
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="g" x1="40" y1="30" x2="180" y2="190" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#2DD4BF"/>
|
||||
<stop offset="1" stop-color="#A78BFA"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="m" x1="60" y1="70" x2="160" y2="170" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0B1220"/>
|
||||
<stop offset="1" stop-color="#111827"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<circle cx="110" cy="110" r="96" fill="url(#m)" stroke="url(#g)" stroke-width="6"/>
|
||||
|
||||
<path d="M78 64c-10 10-2 18 5 24s15 14 5 26" stroke="url(#g)" stroke-width="6" stroke-linecap="round"/>
|
||||
<path d="M110 58c-10 10-2 18 5 24s15 14 5 26" stroke="url(#g)" stroke-width="6" stroke-linecap="round" opacity=".9"/>
|
||||
<path d="M142 64c-10 10-2 18 5 24s15 14 5 26" stroke="url(#g)" stroke-width="6" stroke-linecap="round" opacity=".8"/>
|
||||
|
||||
<path d="M72 104h76c0 35-13 56-38 56s-38-21-38-56Z" fill="#F6F0E7" opacity=".96"/>
|
||||
<path d="M72 104h76" stroke="#F6F0E7" stroke-width="6" stroke-linecap="round"/>
|
||||
<path d="M148 112h10c10 0 18 8 18 18s-8 18-18 18h-12" stroke="#F6F0E7" stroke-width="8" stroke-linecap="round"/>
|
||||
|
||||
<rect x="86" y="122" width="48" height="24" rx="8" fill="#0B1220" opacity=".92"/>
|
||||
<text x="110" y="139" text-anchor="middle"
|
||||
font-family="ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
|
||||
font-size="12" fill="#F6F0E7">'csp'</text>
|
||||
|
||||
<path d="M68 166c14 10 28 14 42 14s28-4 42-14" stroke="#F6F0E7" stroke-width="7" stroke-linecap="round" opacity=".9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
4
src/static/assets/img/hamburger.svg
Normal file
4
src/static/assets/img/hamburger.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
|
||||
<path stroke="#5A3415" stroke-opacity="0.85" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"
|
||||
d="M4 7h22M4 15h22M4 23h22"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 216 B |
60
src/static/assets/js/site.js
Normal file
60
src/static/assets/js/site.js
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
(function(){
|
||||
// Copy-to-clipboard for code blocks
|
||||
function setupCopyButtons(){
|
||||
document.querySelectorAll('[data-copy-target]').forEach(function(btn){
|
||||
btn.addEventListener('click', async function(){
|
||||
var sel = btn.getAttribute('data-copy-target');
|
||||
var el = document.querySelector(sel);
|
||||
if(!el) return;
|
||||
var text = el.innerText || el.textContent || '';
|
||||
try{
|
||||
await navigator.clipboard.writeText(text.trim());
|
||||
var old = btn.innerHTML;
|
||||
btn.innerHTML = 'Copied';
|
||||
btn.classList.add('btn-success');
|
||||
btn.classList.remove('btn-outline-secondary');
|
||||
setTimeout(function(){
|
||||
btn.innerHTML = old;
|
||||
btn.classList.remove('btn-success');
|
||||
btn.classList.add('btn-outline-secondary');
|
||||
}, 1200);
|
||||
}catch(e){
|
||||
// Fallback
|
||||
var ta = document.createElement('textarea');
|
||||
ta.value = text.trim();
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
try{ document.execCommand('copy'); }catch(_){}
|
||||
document.body.removeChild(ta);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Asciinema embed helper:
|
||||
// Put <div class="asciicast" data-asciinema-id="12345"></div>
|
||||
// Or provide a self-hosted player by swapping the script URL.
|
||||
function setupAsciinema(){
|
||||
document.querySelectorAll('.asciicast[data-asciinema-id]').forEach(function(el){
|
||||
var id = el.getAttribute('data-asciinema-id');
|
||||
if(!id || id === 'REPLACE_ME'){
|
||||
el.innerHTML = '<div class="alert alert-warning mb-0">Add your asciinema id here: <code>data-asciinema-id</code>.</div>';
|
||||
return;
|
||||
}
|
||||
// Avoid injecting twice
|
||||
if(document.getElementById('asciinema-embed-'+id)) return;
|
||||
|
||||
var s = document.createElement('script');
|
||||
s.src = 'https://asciinema.org/a/' + encodeURIComponent(id) + '.js';
|
||||
s.id = 'asciinema-embed-'+id;
|
||||
s.async = true;
|
||||
// The script replaces a placeholder div with the player if it's directly after it.
|
||||
el.appendChild(s);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
setupCopyButtons();
|
||||
setupAsciinema();
|
||||
});
|
||||
})();
|
||||
BIN
src/static/favicon.ico
Normal file
BIN
src/static/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Loading…
Add table
Add a link
Reference in a new issue