diff --git a/guide/assets/style.css b/guide/assets/style.css index 1226f84b..d97c1b51 100644 --- a/guide/assets/style.css +++ b/guide/assets/style.css @@ -203,6 +203,67 @@ a:hover > code { color: #0ca; } + +pre { + border-left: 2px solid #0ca; + padding: 5px 0 5px 20px; + font-size: 0.9em; + margin: 20px 0 40px; +} + +code { + font-family: "Menlo", "Consolas", "Monaco", monospace; +} + +code.hljs { + overflow: visible; +} + +/* Demo elements */ +p { + position: relative; + margin-bottom: 1.5em; +} + +.demoOverlay { + position: absolute; + top: 0; left: 0; bottom: 0; right: 0; + /* background: rgba(0,0,0,.2); */ + box-sizing: border-box; +} + + +.demoOverlay::after, .demoOverlay .sourceCodeLink { + display: block; + position: absolute; bottom: 0; right: 0; + background: rgba(0,0,0,.7); + color: #fff; + padding: 10px; + font-size: 11px; + content: 'Touch to try demo'; +} + +.demoOverlay.active { + box-shadow: 0 0 0 2px #fff; +} + +.demoOverlay.active::after { + display: none; +} + +.demoOverlay .sourceCodeLink { + display: none; +} + +.demoOverlay.active .sourceCodeLink { + display: block; +} + +.demoOverlay.active .sourceCodeLink::after { + content: "↗"; +} + + /* Mobile and Responsive */ @media screen and (max-device-width : 768px), screen and (max-width : 768px), print { @@ -346,7 +407,9 @@ a:hover > code { code { font-size: 0.8em; } - + .demoOverlay.active .sourceCodeLink::after { + content: "(desktop)" + } } /* Print */ @@ -364,64 +427,10 @@ a:hover > code { page-break-after: avoid; page-break-inside: avoid; } -} - -pre { - border-left: 2px solid #0ca; - padding: 5px 0 5px 20px; - font-size: 0.9em; - margin: 20px 0 40px; -} - -code { - font-family: "Menlo", "Consolas", "Monaco", monospace; -} - -code.hljs { - overflow: visible; -} - -/* Demo elements */ -p { - position: relative; - margin-bottom: 1.5em; -} - -.demoOverlay { - position: absolute; - top: 0; left: 0; bottom: 0; right: 0; - /* background: rgba(0,0,0,.2); */ - box-sizing: border-box; -} - -.demoOverlay > canvas{ - /* width: 100% !important; height: 100% !important; */ -} -.demoOverlay::after, .demoOverlay .sourceCodeLink { - display: block; - position: absolute; bottom: 0; right: 0; - background: rgba(0,0,0,.7); - color: #fff; - padding: 10px; - font-size: 11px; - content: 'Touch to try demo'; -} - -.demoOverlay.active { - box-shadow: 0 0 0 2px #fff; -} - -.demoOverlay.active::after { - display: none; -} - -.demoOverlay .sourceCodeLink { - display: none; -} - -.demoOverlay.active .sourceCodeLink { - display: block; + h5 { + margin: 10px; + } } diff --git a/guide/js/examples/sound_visual.js b/guide/js/examples/sound_visual.js index d879c96e..2b9c0e45 100644 --- a/guide/js/examples/sound_visual.js +++ b/guide/js/examples/sound_visual.js @@ -50,6 +50,10 @@ // Draw play button function playButton() { + if (!bufferLoaded) { + form.fillOnly("#9ab").text( [20,30], "Loading..." ); + return; + } if (!sound || !sound.playing) { form.fillOnly("#f06").rect( [[0,0], [50,50]] ); form.fillOnly('#fff').polygon( Triangle.fromCenter( [25,25], 10 ).rotate2D( Const.half_pi, [25,25] ) ); @@ -181,6 +185,8 @@ // For use in demo page only if (window.registerDemo) window.registerDemo(demoID, space, startFn, null, true); function startFn() { + radius = space.size.minValue().value/3; + ctrls = Create.radialPts( space.center, radius, 10, -Const.pi-Const.quarter_pi ); if (sound && !sound.playing) space.replay(); } diff --git a/guide/js/guide.js b/guide/js/guide.js index d68f4775..943c8fbc 100644 --- a/guide/js/guide.js +++ b/guide/js/guide.js @@ -25,7 +25,7 @@ Pts.namespace( this ); var divID = imgElem.getAttribute("alt").replace(/js\:/gi, ""); var link = document.createElement("a"); - link.textContent = "Edit live code ↗"; + link.textContent = "Edit live code "; link.classList.add("sourceCodeLink"); link.setAttribute( "target", "pts_github"); link.setAttribute( "href", sourceCodePath+divID);