Initial commit
This commit is contained in:
commit
09943a6439
GPG key ID:
59B3F0C24135C6A9
10 changed files with 1659 additions and 0 deletions
149
src/assets/css/site.css
Normal file
149
src/assets/css/site.css
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
:root{
|
||||
--enroll-amber:#E8B35E;
|
||||
--enroll-amber-2:#F7D58A;
|
||||
--enroll-brown:#5A3415;
|
||||
--enroll-brown-2:#8A5A2D;
|
||||
--enroll-ink:#0f172a;
|
||||
|
||||
--bs-link-color: var(--enroll-brown);
|
||||
--bs-link-hover-color: var(--enroll-brown-2);
|
||||
--bs-link-color-rgb: 90, 52, 21; /* #5A3415 */
|
||||
--bs-link-hover-color-rgb: 138, 90, 45; /* #8A5A2D */
|
||||
|
||||
--bs-nav-pills-link-active-bg: var(--enroll-amber);
|
||||
--bs-nav-pills-link-active-color: var(--enroll-brown);
|
||||
}
|
||||
|
||||
html{scroll-behavior:smooth;}
|
||||
|
||||
body{
|
||||
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
||||
color: var(--enroll-ink);
|
||||
}
|
||||
|
||||
.navbar{
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.navbar-toggler-icon{
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(90,52,21,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.brand-mark{width:84px;height:84px;}
|
||||
|
||||
.hero{
|
||||
background:
|
||||
radial-gradient(1200px circle at 15% 10%, rgba(247,213,138,0.60), transparent 55%),
|
||||
radial-gradient(900px circle at 85% 20%, rgba(232,179,94,0.55), transparent 60%),
|
||||
linear-gradient(135deg, #fff7e8 0%, #ffffff 55%, #fffaf0 100%);
|
||||
}
|
||||
|
||||
.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;
|
||||
color: var(--enroll-brown);
|
||||
background: rgba(232,179,94,0.18);
|
||||
border: 1px solid rgba(232,179,94,0.35);
|
||||
padding: .35rem .65rem;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.section-title{
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.icon-pill{
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(232,179,94,0.20);
|
||||
border: 1px solid rgba(232,179,94,0.35);
|
||||
color: var(--enroll-brown);
|
||||
}
|
||||
|
||||
.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: linear-gradient(180deg, #ffffff 0%, #fff7e8 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(232,179,94,0.55); }
|
||||
a:hover{ text-decoration-color: rgba(232,179,94,0.85); }
|
||||
|
||||
/* Quickstart pills */
|
||||
.nav-pills .nav-link{
|
||||
border: 1px solid rgba(232,179,94,0.35);
|
||||
color: var(--enroll-brown);
|
||||
background: rgba(232,179,94,0.12);
|
||||
border-radius: 999px;
|
||||
}
|
||||
.nav-pills .nav-link:hover{
|
||||
background: rgba(232,179,94,0.18);
|
||||
border-color: rgba(232,179,94,0.55);
|
||||
}
|
||||
.nav-pills .nav-link.active,
|
||||
.nav-pills .show > .nav-link{
|
||||
background: var(--enroll-amber);
|
||||
color: var(--enroll-brown);
|
||||
border-color: rgba(90,52,21,0.25);
|
||||
}
|
||||
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 |
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