Initial commit
This commit is contained in:
commit
85ecaf2014
GPG key ID:
59B3F0C24135C6A9
14 changed files with 1558 additions and 0 deletions
167
src/assets/css/site.css
Normal file
167
src/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/assets/img/cspresso.svg
Normal file
30
src/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">'self'</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 |
107
src/assets/img/enroll.svg
Normal file
107
src/assets/img/enroll.svg
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="720" height="720" viewBox="0 0 720 720" role="img" aria-label="enroll logo">
|
||||
<defs>
|
||||
<linearGradient id="bgGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#F7D58A"/>
|
||||
<stop offset="1" stop-color="#E8B35E"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="crumbGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#FFE7BD"/>
|
||||
<stop offset="1" stop-color="#E6A44A"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="shineGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#FFF2D6" stop-opacity="0.85"/>
|
||||
<stop offset="1" stop-color="#FFF2D6" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="6" result="blur"/>
|
||||
<feOffset dx="0" dy="10" result="off"/>
|
||||
<feColorMatrix in="off" type="matrix"
|
||||
values="0 0 0 0 0.15 0 0 0 0 0.08 0 0 0 0 0.02 0 0 0 0.35 0" result="shadow"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadow"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<style>
|
||||
.stroke { stroke:#5A3415; stroke-width:10; stroke-linecap:round; stroke-linejoin:round; }
|
||||
.thin { stroke:#5A3415; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; }
|
||||
.text-dark { fill:#5A3415; font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-weight: 800; }
|
||||
.text-light { fill:#8A5A2D; font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-weight: 800; }
|
||||
.sesame { fill:#F8E6C8; opacity:0.92; }
|
||||
.crumb { fill:#E9B56B; opacity:0.30; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<!-- NOTE: background removed for transparency -->
|
||||
|
||||
<!-- Roll group -->
|
||||
<g filter="url(#softShadow)" transform="translate(-120,-70)">
|
||||
<path class="stroke" fill="url(#crumbGrad)"
|
||||
d="M220 450
|
||||
C220 320, 320 235, 480 235
|
||||
C640 235, 740 320, 740 450
|
||||
C740 565, 640 610, 480 610
|
||||
C320 610, 220 565, 220 450 Z"/>
|
||||
|
||||
<path d="M300 320
|
||||
C340 285, 410 265, 480 265
|
||||
C550 265, 620 285, 660 320
|
||||
C610 305, 545 298, 480 298
|
||||
C415 298, 350 305, 300 320 Z"
|
||||
fill="url(#shineGrad)"/>
|
||||
|
||||
<g class="thin" opacity="0.85" fill="none">
|
||||
<path d="M330 320 C350 285, 400 270, 430 315"/>
|
||||
<path d="M420 305 C450 268, 510 268, 540 305"/>
|
||||
<path d="M530 315 C560 270, 610 285, 630 320"/>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<ellipse class="sesame" cx="335" cy="368" rx="10" ry="6"/>
|
||||
<ellipse class="sesame" cx="625" cy="368" rx="10" ry="6"/>
|
||||
<ellipse class="sesame" cx="385" cy="345" rx="10" ry="6"/>
|
||||
<ellipse class="sesame" cx="575" cy="345" rx="10" ry="6"/>
|
||||
<ellipse class="sesame" cx="400" cy="330" rx="10" ry="6"/>
|
||||
<ellipse class="sesame" cx="560" cy="330" rx="10" ry="6"/>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<circle class="crumb" cx="310" cy="430" r="6"/>
|
||||
<circle class="crumb" cx="650" cy="430" r="6"/>
|
||||
<circle class="crumb" cx="350" cy="470" r="5"/>
|
||||
<circle class="crumb" cx="610" cy="470" r="5"/>
|
||||
<circle class="crumb" cx="420" cy="520" r="6"/>
|
||||
<circle class="crumb" cx="540" cy="520" r="6"/>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<circle cx="445" cy="365" r="12" fill="#5A3415"/>
|
||||
<circle cx="515" cy="365" r="12" fill="#5A3415"/>
|
||||
<path d="M445 405 C468 430, 492 430, 515 405"
|
||||
fill="none" stroke="#5A3415" stroke-width="12" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<g transform="translate(330,470)">
|
||||
<rect x="0" y="0" width="300" height="92" rx="26" fill="#F7C879" class="thin"/>
|
||||
|
||||
<g class="thin" fill="none" opacity="0.95">
|
||||
<rect x="18" y="16" width="190" height="24" rx="11" fill="#FFE7BD"/>
|
||||
<rect x="18" y="50" width="190" height="24" rx="11" fill="#FFE7BD"/>
|
||||
<path d="M18 82 H232"/>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<circle cx="245" cy="28" r="6.5" fill="#5A3415"/>
|
||||
<circle cx="268" cy="28" r="6.5" fill="#5A3415"/>
|
||||
<circle cx="291" cy="28" r="6.5" fill="#5A3415"/>
|
||||
<rect x="238" y="52" width="56" height="22" rx="9" fill="#FFE7BD" stroke="#5A3415" stroke-width="7"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
4
src/assets/img/hamburger.svg
Normal file
4
src/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/assets/js/site.js
Normal file
60
src/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();
|
||||
});
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue