diff options
| author | Paul Buetow <paul@buetow.org> | 2026-04-25 22:13:32 +0300 |
|---|---|---|
| committer | Paul Buetow <paul@buetow.org> | 2026-04-25 22:13:32 +0300 |
| commit | a5cb9f7ad4b2bcb7ac367854147f661ab83c5ec1 (patch) | |
| tree | 96db490ed72dec49c4bc2aba8539fd57f3246f47 /internal/generator/templates/themes | |
| parent | cc9c69ce748416ad1d9b28592ec463434023d63c (diff) | |
can swap themes dynamicallyv0.12.0
Diffstat (limited to 'internal/generator/templates/themes')
65 files changed, 2812 insertions, 3968 deletions
diff --git a/internal/generator/templates/themes/aurora.tmpl b/internal/generator/templates/themes/aurora.tmpl deleted file mode 100644 index e71c576..0000000 --- a/internal/generator/templates/themes/aurora.tmpl +++ /dev/null @@ -1,359 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>snonux.foo ✦ AURORA</title> - <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script> - <style> - :root { --green:#00ffb3; --teal:#00cfe8; --purple:#c084fc; --navy:#050d1a; } - * { margin:0; padding:0; box-sizing:border-box; } - body { font-family:'Segoe UI',system-ui,sans-serif; background:var(--navy); - color:#e0f8f0; overflow:hidden; height:100vh; } - #three-canvas { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; } - .overlay { position:relative; z-index:10; height:100vh; display:flex; flex-direction:column; } - header { padding:16px 28px; background:rgba(5,13,26,0.78); backdrop-filter:blur(14px); - border-bottom:1px solid rgba(0,255,179,0.25); display:flex; align-items:center; justify-content:space-between; } - .logo { display:flex; align-items:center; gap:14px; } - .logo-mark { font-size:2rem; font-weight:800; background:linear-gradient(90deg,var(--green),var(--teal)); - -webkit-background-clip:text; -webkit-text-fill-color:transparent; } - .logo-title h1 { font-size:1.5rem; font-weight:700; color:#e0f8f0; letter-spacing:1px; } - .logo-title .subtitle { font-size:0.75rem; color:rgba(224,248,240,0.55); margin-top:2px; } - .logo-title .subtitle a { color:var(--green); text-decoration:none; } - .logo-title .subtitle a:hover { text-shadow:0 0 8px var(--green); } - .transmit-btn { border:1px solid var(--teal); color:var(--teal); padding:9px 20px; - border-radius:20px; text-decoration:none; font-size:0.85rem; transition:all 0.2s; } - .transmit-btn:hover { background:var(--teal); color:var(--navy); } - a.header-feed-link { color:var(--green); } - a.header-feed-link:hover { color:var(--teal); text-shadow:0 0 8px var(--green); } - .nav-hints { background:rgba(5,13,26,0.6); border-bottom:1px solid rgba(0,255,179,0.15); - color:rgba(224,248,240,0.45); padding:5px 28px; display:flex; gap:18px; - font-size:0.68rem; flex-wrap:wrap; } - .nav-hints kbd { background:rgba(0,255,179,0.1); border:1px solid rgba(0,255,179,0.35); - color:var(--green); border-radius:3px; padding:0 5px; margin:0 2px; } - .content { flex:1; overflow-y:auto; padding:20px 28px; - scrollbar-width:thin; scrollbar-color:var(--green) var(--navy); } - .page-nav { display:flex; justify-content:center; margin:14px 0; } - .page-nav a { border:1px solid var(--teal); color:var(--teal); padding:8px 20px; - border-radius:20px; text-decoration:none; font-size:0.82rem; letter-spacing:1px; } - .page-nav a:hover { background:var(--teal); color:var(--navy); } - .page-nav-footer { flex-shrink:0; padding:8px 28px; display:flex; justify-content:center; - background:rgba(5,13,26,0.78); backdrop-filter:blur(14px); - border-top:1px solid rgba(0,255,179,0.25); } - .post { background:rgba(5,20,35,0.72); border:1px solid rgba(0,255,179,0.2); border-radius:10px; - padding:20px; margin-bottom:14px; cursor:pointer; - transition:all 0.25s; backdrop-filter:blur(6px); } - .post:hover { border-color:var(--green); box-shadow:0 0 20px rgba(0,255,179,0.2); transform:translateY(-2px); } - .post-active { border-color:var(--purple) !important; background:rgba(15,5,40,0.9) !important; - box-shadow:0 0 24px rgba(192,132,252,0.35),inset 3px 0 0 var(--purple) !important; } - .post-header { display:flex; justify-content:space-between; margin-bottom:12px; font-size:0.88rem; } - .post-time { color:var(--teal); font-family:monospace; font-size:0.8rem; } - .post-text { line-height:1.65; font-size:0.95rem; } - .post-text a { color:var(--green); text-decoration:none; } - .post-text a:hover { text-shadow:0 0 8px var(--green); } - .post-audio { width:100%; margin-top:10px; } - .post-modal { display:none; position:fixed; inset:0; z-index:100; - background:rgba(5,13,26,0.95); backdrop-filter:blur(20px); - overflow-y:auto; padding:40px 20px; } - .post-modal.active { display:block; } - .modal-inner { max-width:760px; margin:0 auto; background:rgba(5,20,40,0.97); - border:1px solid var(--green); border-radius:12px; - box-shadow:0 0 60px rgba(0,255,179,0.25); padding:40px; } - .modal-close { float:right; background:none; border:none; color:var(--teal); - font-size:0.9rem; cursor:pointer; letter-spacing:1px; } - @media(max-width:640px) { .nav-hints{display:none;} header{padding:12px 18px;} .content{padding:14px 18px;} } - .splash-overlay.splash-aurora { - background: radial-gradient(ellipse 120% 80% at 50% 120%, rgba(0,207,232,0.12) 0%, transparent 45%), - radial-gradient(ellipse 90% 60% at 20% 20%, rgba(192,132,252,0.08) 0%, transparent 50%), - linear-gradient(165deg, #030811 0%, var(--navy) 35%, #0a1628 70%, #050d1a 100%); - background-size: 100% 100%, 100% 100%, 200% 200%; - animation: splashAuroraShift 14s ease-in-out infinite; - } - @keyframes splashAuroraShift { 0%,100%{background-position:0% 0%, 0% 0%, 0% 50%} 50%{background-position:0% 0%, 0% 0%, 100% 50%} } - .splash-aurora .splash-aurora-stars { - position:absolute; inset:0; pointer-events:none; z-index:0; opacity:0.45; - background-image: - radial-gradient(1px 1px at 8% 12%, rgba(255,255,255,0.7) 50%, transparent 51%), - radial-gradient(1px 1px at 22% 28%, rgba(255,255,255,0.5) 50%, transparent 51%), - radial-gradient(1px 1px at 78% 18%, rgba(255,255,255,0.6) 50%, transparent 51%), - radial-gradient(1px 1px at 92% 35%, rgba(255,255,255,0.45) 50%, transparent 51%), - radial-gradient(1px 1px at 45% 8%, rgba(224,248,240,0.5) 50%, transparent 51%), - radial-gradient(1px 1px at 65% 42%, rgba(255,255,255,0.4) 50%, transparent 51%); - } - .splash-aurora .splash-aurora-glow { - position:absolute; left:50%; bottom:-5vh; transform:translateX(-50%); width:140%; height:55vh; - pointer-events:none; z-index:0; opacity:0.55; - background: radial-gradient(ellipse 75% 55% at 50% 100%, rgba(0,255,179,0.22) 0%, transparent 62%), - radial-gradient(ellipse 55% 40% at 35% 95%, rgba(0,207,232,0.12) 0%, transparent 55%), - radial-gradient(ellipse 50% 38% at 70% 92%, rgba(192,132,252,0.14) 0%, transparent 55%); - filter: blur(0.5px); - } - .splash-aurora .splash-title { - font-size:clamp(1.5rem,4.8vw,2.15rem); font-weight:700; letter-spacing:0.04em; - background: linear-gradient(120deg, #e8fff4 0%, var(--green) 45%, var(--teal) 78%, #e0e8ff 100%); - -webkit-background-clip:text; -webkit-text-fill-color:transparent; - filter: drop-shadow(0 0 28px rgba(0,255,179,0.35)); - } - .splash-aurora .splash-tag { - margin-top:0.5rem; font-size:0.74rem; letter-spacing:0.28em; text-transform:uppercase; - color:rgba(0,207,232,0.92); text-shadow:0 0 20px rgba(0,255,179,0.4); - } - .splash-aurora .splash-hint { color:rgba(224,248,240,0.88); margin-top:1.1rem; } - .splash-aurora .splash-inner { position:relative; z-index:2; } -{{template "navSharedCSSInner"}} - </style> -</head> -<body> - {{template "splashGate"}} - <div id="splash-overlay" class="splash-overlay splash-aurora" role="dialog" aria-modal="true" aria-label="Open microblog" tabindex="-1"> - <canvas class="splash-gl-canvas" id="splash-gl-canvas" aria-hidden="true"></canvas> - <div class="splash-aurora-stars" aria-hidden="true"></div> - <div class="splash-aurora-glow" aria-hidden="true"></div> - <div class="splash-inner"> - <div class="splash-title">snonux.foo</div> - <div class="splash-tag">Aurora uplink</div> - <div class="splash-hint">Click or Enter to open the feed</div> - </div> - </div> - <script> - (function(){ - if(document.documentElement.classList.contains('sno-splash-skip'))return; - var cv=document.getElementById('splash-gl-canvas'); - if(!cv||typeof THREE==='undefined')return; - var raf,ren,sc,ca,clock,ribbons=[],SEG=48; - var cols=[0x00ffb3,0x00cfe8,0xc084fc,0x48e8d0,0xa855f7]; - var yPos=[2,5.5,9,12.5,16], zPos=[-18,-14,-10,-7,-4]; - function cleanup(){ - window.removeEventListener('resize',sz); - if(raf)cancelAnimationFrame(raf);raf=null; - ribbons.forEach(function(rb){rb.geo.dispose();rb.mesh.material.dispose();}); - ribbons=[]; - if(ren){ren.dispose();ren=null;} - window._snonuxSplashWebGLCleanup=null; - } - window._snonuxSplashWebGLCleanup=cleanup; - function sz(){ - var w=cv.clientWidth||2,h=cv.clientHeight||2; - if(ren)ren.setSize(w,h,false); - if(ca){ca.aspect=w/h;ca.updateProjectionMatrix();} - } - ren=new THREE.WebGLRenderer({canvas:cv,antialias:true,alpha:true}); - ren.setClearColor(0,0);ren.setPixelRatio(Math.min(window.devicePixelRatio||1,2)); - sc=new THREE.Scene(); - ca=new THREE.PerspectiveCamera(52,1,0.1,120); - ca.position.set(0,10,26);ca.lookAt(0,8,-6); - clock=new THREE.Clock(); - for(var r=0;r<5;r++){ - var geo=new THREE.PlaneGeometry(100,7,SEG,1); - var mat=new THREE.MeshBasicMaterial({ - color:cols[r],transparent:true,opacity:0.26+r*0.02, - side:THREE.DoubleSide,blending:THREE.AdditiveBlending,depthWrite:false - }); - var mesh=new THREE.Mesh(geo,mat); - mesh.position.set(0,yPos[r],zPos[r]); - sc.add(mesh); - ribbons.push({mesh:mesh,geo:geo,freq:0.55+0.12*r,phase:r*1.15,amp:2.4+0.2*r}); - } - function loop(){ - raf=requestAnimationFrame(loop); - var t=clock.getElapsedTime(); - for(var i=0;i<ribbons.length;i++){ - var rb=ribbons[i],pos=rb.geo.attributes.position; - for(var v=0;v<pos.count;v++){ - if(pos.getY(v)>0){ - var x=pos.getX(v); - pos.setY(v,rb.amp*Math.sin(t*rb.freq+x*0.065+rb.phase) - +rb.amp*0.38*Math.cos(t*rb.freq*0.72+x*0.042)); - } - } - pos.needsUpdate=true; - } - ren.render(sc,ca); - } - sz();window.addEventListener('resize',sz); - raf=requestAnimationFrame(loop); - })(); - </script> - <canvas id="three-canvas"></canvas> - <div class="overlay"> - <header> - <div class="logo"> - <span class="logo-mark">SN</span> - <div class="logo-title"> - <h1>snonux.foo</h1> - <p class="subtitle">microblog — <a href="https://foo.zone">foo.zone</a> is the real blog</p> - <p class="logo-host">Served by NetBSD on a Raspberry Pi 3</p> - </div> - </div> - <div class="nav"> - <a href="atom.xml" class="header-feed-link" rel="alternate" title="Atom feed" type="application/atom+xml">Atom feed</a> - <a href="https://foo.zone/about" class="transmit-btn">Transmit</a> - </div> - </header> - {{template "navhints" .}} - <div class="content" id="post-content"> - {{range $i, $post := .Posts}} - <div class="post" id="post-{{$post.ID}}" data-index="{{$i}}"> - <div class="post-header"> - <div><strong>@snonux</strong></div> - <div class="post-time">{{$post.FormattedTime}}</div> - </div> - <div class="post-text">{{$post.ContentHTML}}</div> - </div> - {{end}} - </div> - {{if or .PrevPage .NextPage}} - <footer class="page-nav-footer" aria-label="Pagination"> - <div class="page-nav page-nav-dual"> - {{if .PrevPage}}<a href="{{.PrevPage}}">← Newer</a>{{end}} - {{if .NextPage}}<a href="{{.NextPage}}">Older →</a>{{end}} - </div> - </footer> - {{end}} - </div> - {{template "navmodal" .}} - <script> - // Aurora WebGL: six wide ribbon meshes whose top-row vertices are animated - // with overlapping sine waves, rendered with additive blending so they glow - // against the dark navy sky like real aurora curtains. - (function() { - var _wild = false, _snoTOffset = 0, _snoLastT = 0; - var RIBBON_COUNT = 6; - var SEG_W = 60; // horizontal segments per ribbon - var ribbonColors = [0x00ffb3, 0x00cfe8, 0xc084fc, 0x00ffb3, 0x48e8d0, 0xa855f7]; - var ribbonY = [-10, -4, 2, 8, 14, 20]; - var ribbonZ = [-40, -30, -22, -15, -10, -5]; - var ribbonFreq = [0.6, 0.9, 0.7, 1.1, 0.5, 0.8]; - var ribbonPhase = [0.0, 1.2, 2.4, 0.8, 3.1, 1.7]; - var ribbonAmp = [3.0, 2.5, 2.0, 3.5, 2.2, 2.8]; - - var scene, camera, renderer, clock; - var ribbons = []; - - function initThree() { - scene = new THREE.Scene(); - scene.background = new THREE.Color(0x050d1a); - scene.fog = new THREE.Fog(0x050d1a, 40, 120); - - camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 200); - camera.position.set(0, 5, 30); - camera.lookAt(0, 5, 0); - - renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('three-canvas'), antialias: true }); - renderer.setSize(window.innerWidth, window.innerHeight); - renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); - - clock = new THREE.Clock(); - - for (var r = 0; r < RIBBON_COUNT; r++) { - // Wide shallow plane; we animate the top row of vertices - var geo = new THREE.PlaneGeometry(120, 8, SEG_W, 1); - var mat = new THREE.MeshBasicMaterial({ - color: ribbonColors[r], transparent: true, opacity: 0.32, - side: THREE.DoubleSide, blending: THREE.AdditiveBlending, depthWrite: false - }); - var mesh = new THREE.Mesh(geo, mat); - mesh.position.set(0, ribbonY[r], ribbonZ[r]); - scene.add(mesh); - ribbons.push({ mesh: mesh, geo: geo, freq: ribbonFreq[r], - phase: ribbonPhase[r], amp: ribbonAmp[r] }); - } - - window.addEventListener('resize', onResize); - animate(); - } - - function onResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); - } - - function animate() { - requestAnimationFrame(animate); - var realT = clock.getElapsedTime(); - // Wild mode: accelerate time 18× so waves churn much faster - _snoTOffset += (realT - _snoLastT) * (_wild ? 18 : 0); - _snoLastT = realT; - var t = realT + _snoTOffset; - - var ampMult = _wild ? 3.2 : 1; - // Camera sways left/right and bobs up/down in wild mode - camera.position.x = _wild ? Math.sin(t * 0.28) * 10 : 0; - camera.position.y = _wild ? 5 + Math.cos(t * 0.19) * 4 : 5; - - for (var r = 0; r < ribbons.length; r++) { - var rb = ribbons[r]; - var pos = rb.geo.attributes.position; - var count = pos.count; - // In wild mode ribbons also drift vertically so they cross and tangle - var yDrift = _wild ? Math.sin(t * rb.freq * 0.4 + r * 1.1) * 6 : 0; - rb.mesh.position.y = ribbonY[r] + yDrift; - // PlaneGeometry vertices: (SEG_W+1)*2 total; top row is every other vertex - for (var i = 0; i < count; i++) { - var x = pos.getX(i); - // Only animate top row (y > 0 in local space) for the waving top edge - if (pos.getY(i) > 0) { - pos.setY(i, rb.amp * ampMult * Math.sin(t * rb.freq + x * 0.08 + rb.phase) - + rb.amp * ampMult * 0.4 * Math.cos(t * rb.freq * 0.7 + x * 0.05)); - } - } - pos.needsUpdate = true; - } - renderer.render(scene, camera); - } - - initThree(); - - // Aurora nav/wild effects — snow burst on navigate, blizzard storm on wild - window.snonuxOpenEffect = function() { - var modal = document.getElementById('post-modal'); - if (modal) { modal.classList.add('sno-modal-zoom'); setTimeout(function() { modal.classList.remove('sno-modal-zoom'); }, 400); } - // Frost shimmer — aurora-colored radial - var d = document.createElement('div'); - d.style.cssText = 'position:fixed;inset:0;z-index:997;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,255,179,0.14) 0%,rgba(192,132,252,0.1) 55%,transparent 80%);transition:opacity 0.3s'; - document.body.appendChild(d); - setTimeout(function() { d.style.opacity='0'; setTimeout(function() { d.remove(); }, 340); }, 15); - }; - window.snonuxCloseEffect = function() { - var d = document.createElement('div'); - d.style.cssText = 'position:fixed;inset:0;z-index:998;pointer-events:none;background:rgba(0,207,232,0.12);transition:opacity 0.2s'; - document.body.appendChild(d); - setTimeout(function() { d.style.opacity='0'; setTimeout(function() { d.remove(); }, 230); }, 15); - }; - window.snonuxScrollEffect = function(dir) { - var isDown = dir === 'down'; - var thick = _wild ? '14px' : '5px'; - var d = document.createElement('div'); - d.style.cssText = 'position:fixed;left:0;right:0;height:' + thick + ';z-index:9000;pointer-events:none;' + - 'background:linear-gradient(90deg,transparent,rgba(0,207,232,0.9),rgba(120,200,100,0.9),rgba(0,207,232,0.9),transparent);' + - (isDown ? 'top:0;' : 'bottom:0;') + - 'transition:transform 0.32s ease,opacity 0.32s ease;'; - document.body.appendChild(d); - setTimeout(function() { d.style.transform = isDown ? 'translateY(100vh)' : 'translateY(-100vh)'; d.style.opacity='0'; }, 16); - setTimeout(function() { d.remove(); }, 400); - }; - window.snonuxWildToggle = function() { - _wild = !_wild; - var b = document.getElementById('sno-wild-badge'); - if (b) b.classList.toggle('sno-wild-on', _wild); - }; - window.snonuxNavEffect = function() { - // Snow burst — CSS snowflakes scatter from cursor - var ov = document.querySelector('.overlay'); - if (ov) { ov.classList.add('sno-fx-shake'); setTimeout(function() { ov.classList.remove('sno-fx-shake'); }, 380); } - // Frost flash - var d = document.createElement('div'); - d.style.cssText = 'position:fixed;inset:0;z-index:998;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,255,179,0.18) 0%,rgba(192,132,252,0.1) 60%,transparent 100%);transition:opacity 0.22s'; - document.body.appendChild(d); - setTimeout(function() { d.style.opacity='0'; setTimeout(function() { d.remove(); }, 250); }, 30); - }; - window.snonuxPageEffect = function() { - var ov = document.querySelector('.overlay'); - if (ov) { ov.classList.add('sno-fx-zoom'); setTimeout(function() { ov.classList.remove('sno-fx-zoom'); }, 330); } - }; - })(); - </script> - {{template "navscript" .}} -</body> -</html> diff --git a/internal/generator/templates/themes/aurora/meta.json b/internal/generator/templates/themes/aurora/meta.json new file mode 100644 index 0000000..b0b2cf5 --- /dev/null +++ b/internal/generator/templates/themes/aurora/meta.json @@ -0,0 +1,7 @@ +{ + "title": "snonux.foo ✦ AURORA", + "header_html": "\u003cdiv class=\"logo\"\u003e\n \u003cspan class=\"logo-mark\"\u003eSN\u003c/span\u003e\n \u003cdiv class=\"logo-title\"\u003e\n \u003ch1\u003esnonux.foo\u003c/h1\u003e\n \u003cp class=\"subtitle\"\u003emicroblog \u0026mdash; \u003ca href=\"https://foo.zone\"\u003efoo.zone\u003c/a\u003e is the real blog\u003c/p\u003e\n \u003cp class=\"logo-host\"\u003eServed by NetBSD on a Raspberry Pi 3\u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"nav\"\u003e\n \u003ca href=\"atom.xml\" class=\"header-feed-link\" rel=\"alternate\" title=\"Atom feed\" type=\"application/atom+xml\"\u003eAtom feed\u003c/a\u003e\n \u003ca href=\"https://foo.zone/about\" class=\"transmit-btn\"\u003eTransmit\u003c/a\u003e\n \u003c/div\u003e", + "splash_inner_html": "\u003ccanvas class=\"splash-gl-canvas\" id=\"splash-gl-canvas\" aria-hidden=\"true\"\u003e\u003c/canvas\u003e\n \u003cdiv class=\"splash-aurora-stars\" aria-hidden=\"true\"\u003e\u003c/div\u00 |
