added on WebSTLs (webstls.com) at 2026-07-01 22:27:06
| 1 | <!-- Help Center -- backed by /tutorials.cgi. --> | |
| 2 | ||
| 3 | <style> | |
| 4 | .help-hero { padding:30px 32px 26px; background:linear-gradient(135deg, rgba(59,130,246,0.10), rgba(124,58,237,0.10)); border:1px solid var(--col-border); border-radius:16px; margin-bottom:22px; } | |
| 5 | .help-hero h1 { margin:0 0 6px; font-family:var(--font-display, inherit); font-size:28px; color:var(--col-text); } | |
| 6 | .help-hero p { margin:0 0 14px; color:var(--col-text-2); font-size:14px; max-width:640px; line-height:1.55; } | |
| 7 | .help-search { display:flex; gap:8px; max-width:540px; } | |
| 8 | .help-search input { flex:1; padding:12px 14px; background:var(--col-surface-2); border:1px solid var(--col-border); border-radius:10px; color:var(--col-text); font-size:14px; } | |
| 9 | .help-search button { padding:12px 20px; background:linear-gradient(135deg, var(--col-accent), var(--col-accent-bright)); color:#fff; border:0; border-radius:10px; font-weight:700; cursor:pointer; } | |
| 10 | ||
| 11 | .help-section { margin-bottom:22px; } | |
| 12 | .help-section-title { font-family:var(--font-display, inherit); font-size:18px; color:var(--col-text); margin:0 0 10px; display:flex; align-items:center; gap:10px; } | |
| 13 | .help-section-title .count { font-size:11px; color:var(--col-text-3); font-family:var(--font-mono, monospace); } | |
| 14 | .help-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px; } | |
| 15 | .help-card { padding:14px 16px; background:var(--col-surface-1); border:1px solid var(--col-border); border-radius:12px; text-decoration:none; color:var(--col-text); display:flex; flex-direction:column; gap:6px; transition:all .15s; position:relative; } | |
| 16 | .help-card:hover { border-color:var(--col-accent); transform:translateY(-1px); } | |
| 17 | .help-card.is-seen { border-style:dashed; opacity:0.85; } | |
| 18 | .help-card .step-num { position:absolute; top:10px; right:12px; font-family:var(--font-mono, monospace); font-size:10px; color:var(--col-text-3); } | |
| 19 | .help-card .icon { font-family:var(--font-mono,monospace); font-size:10px; padding:3px 6px; border-radius:5px; background:var(--col-surface-2); color:var(--col-accent-bright); align-self:flex-start; text-transform:uppercase; letter-spacing:1px; } | |
| 20 | .help-card .title { font-size:15px; font-weight:700; color:var(--col-text); } | |
| 21 | .help-card .summary { font-size:12px; color:var(--col-text-2); line-height:1.45; } | |
| 22 | .help-card .meta { font-size:11px; color:var(--col-text-3); margin-top:auto; } | |
| 23 | .help-card .seen-pill { font-size:10px; color:#86efac; } | |
| 24 | ||
| 25 | .help-empty { padding:40px 24px; text-align:center; border:1px dashed var(--col-border-2); border-radius:14px; color:var(--col-text-2); } | |
| 26 | ||
| 27 | .help-single { max-width:none; width:100%; margin:0; } | |
| 28 | .help-single .back { display:inline-block; margin-bottom:10px; color:var(--col-text-2); text-decoration:none; font-size:13px; } | |
| 29 | .help-single .back:hover { color:var(--col-accent-bright); } | |
| 30 | .help-single h1 { font-family:var(--font-display, inherit); font-size:32px; color:var(--col-text); margin:8px 0 8px; } | |
| 31 | .help-single .summary { color:var(--col-text-2); font-size:16px; margin:0 0 18px; line-height:1.5; } | |
| 32 | .help-single .meta-row { display:flex; gap:14px; color:var(--col-text-3); font-size:12px; margin-bottom:24px; text-transform:uppercase; letter-spacing:1px; } | |
| 33 | .help-body { font-size:15px; line-height:1.65; color:var(--col-text); } | |
| 34 | .help-body h2 { font-family:var(--font-display, inherit); font-size:20px; margin:24px 0 8px; } | |
| 35 | .help-body h3 { font-family:var(--font-display, inherit); font-size:16px; margin:18px 0 6px; } | |
| 36 | .help-body p { margin:0 0 14px; } | |
| 37 | .help-body ul, .help-body ol { margin:6px 0 14px 22px; padding:0; } | |
| 38 | .help-body li { margin:4px 0; } | |
| 39 | .help-body code { padding:2px 6px; background:var(--col-surface-2); border-radius:4px; font-size:0.9em; } | |
| 40 | .help-body strong { color:#fff; } | |
| 41 | .help-body a { color:var(--col-accent-bright); } | |
| 42 | .help-next { margin-top:36px; padding:18px 20px; background:var(--col-surface-1); border:1px solid var(--col-border); border-radius:12px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; } | |
| 43 | .help-next .lbl { font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--col-text-3); } | |
| 44 | .help-next .nxt-title { font-size:16px; font-weight:700; color:var(--col-text); } | |
| 45 | ||
| 46 | mark { background:rgba(251,191,36,0.35); color:inherit; padding:0 2px; border-radius:2px; } | |
| 47 | ||
| 48 | /* ------------------------------------------------------------------ | |
| 49 | Tour-style step grids -- emitted by [step] blocks in the tutorial | |
| 50 | body. Mirrors webstls_tour.html so a tutorial reads like a mini | |
| 51 | product walkthrough: prose on one side, a real iframe of the | |
| 52 | target page on the other, plus a "Go to it" CTA. | |
| 53 | ------------------------------------------------------------------ */ | |
| 54 | .help-single.is-wide { max-width: none; width: 100%; } | |
| 55 | .tut-step-section { | |
| 56 | padding: 36px 0; | |
| 57 | border-top: 1px solid var(--col-border); | |
| 58 | } | |
| 59 | .tut-step-section:first-of-type { border-top: none; padding-top: 8px; } | |
| 60 | .tut-step-grid { | |
| 61 | display: grid; | |
| 62 | grid-template-columns: 1fr 1.25fr; | |
| 63 | gap: 36px; | |
| 64 | align-items: center; | |
| 65 | } | |
| 66 | @media (max-width: 900px) { | |
| 67 | .tut-step-grid { grid-template-columns: 1fr; gap: 24px; } | |
| 68 | } | |
| 69 | .tut-step-section.tut-step-section-wide .tut-step-grid { grid-template-columns: 1fr; } | |
| 70 | .tut-step-left .tour-step { | |
| 71 | font-size:11px; font-weight:800; letter-spacing:2px; | |
| 72 | text-transform:uppercase; color:#a78bfa; margin-bottom:10px; | |
| 73 | } | |
| 74 | .tut-step-left .tour-title { | |
| 75 | font-family: var(--font-display, inherit); | |
| 76 | font-size: 26px; line-height: 1.18; color: var(--col-text); | |
| 77 | margin: 0 0 12px; | |
| 78 | } | |
| 79 | .tut-step-left .tour-lead { | |
| 80 | font-size: 14.5px; line-height: 1.7; color: var(--col-text-2); margin: 0 0 14px; | |
| 81 | } | |
| 82 | .tut-step-left .tour-lead strong { color: var(--col-text); } | |
| 83 | .tut-step-left p { margin: 0 0 12px; } | |
| 84 | .tut-step-left ul.tour-bullets { | |
| 85 | list-style: none; padding: 0; margin: 0 0 12px; | |
| 86 | display: flex; flex-direction: column; gap: 8px; | |
| 87 | } | |
| 88 | .tut-step-left ul.tour-bullets li { | |
| 89 | display: flex; align-items: flex-start; gap: 10px; | |
| 90 | font-size: 13.5px; color: var(--col-text-2); line-height: 1.55; | |
| 91 | } | |
| 92 | .tut-step-left ul.tour-bullets svg { | |
| 93 | width: 16px; height: 16px; flex-shrink: 0; color: #4ade80; margin-top: 2px; | |
| 94 | } | |
| 95 | .tut-step-left ol.tut-step-list { | |
| 96 | margin: 0 0 12px 22px; padding: 0; | |
| 97 | } | |
| 98 | .tut-step-left ol.tut-step-list li { | |
| 99 | margin: 4px 0; font-size: 14px; color: var(--col-text-2); line-height: 1.6; | |
| 100 | } | |
| 101 | .tut-step-left ol.tut-step-list li strong { color: var(--col-text); } | |
| 102 | ||
| 103 | /* Browser-chrome frame around the iframe preview. */ | |
| 104 | .tut-step-right .tour-frame { | |
| 105 | background: linear-gradient(180deg, #0d1224 0%, #0a0e1c 100%); | |
| 106 | border: 1px solid var(--col-border); | |
| 107 | border-radius: 12px; | |
| 108 | overflow: hidden; | |
| 109 | box-shadow: 0 14px 36px rgba(0,0,0,0.40); | |
| 110 | } | |
| 111 | .tut-step-right .tour-frame-bar { | |
| 112 | background: var(--col-surface-2); | |
| 113 | padding: 8px 12px; | |
| 114 | border-bottom: 1px solid var(--col-border); | |
| 115 | display: flex; align-items: center; gap: 6px; | |
| 116 | } | |
| 117 | .tut-step-right .tour-frame-dot { | |
| 118 | width: 10px; height: 10px; border-radius: 50%; | |
| 119 | } | |
| 120 | .tut-step-right .tour-frame-url { | |
| 121 | background: rgba(0,0,0,0.35); | |
| 122 | border-radius: 5px; | |
| 123 | padding: 3px 10px; | |
| 124 | font-size: 10.5px; | |
| 125 | color: var(--col-text-3); | |
| 126 | font-family: var(--font-mono, monospace); | |
| 127 | flex: 1; | |
| 128 | margin-left: 8px; | |
| 129 | max-width: 380px; | |
| 130 | overflow: hidden; | |
| 131 | text-overflow: ellipsis; | |
| 132 | white-space: nowrap; | |
| 133 | } | |
| 134 | .tut-step-right .tour-frame-body { padding: 0; } | |
| 135 | </style> | |
| 136 | ||
| 137 | [if:$is_single] | |
| 138 | <article class="help-single is-wide"> | |
| 139 | <a class="back" href="/tutorials.cgi">← Help Center</a> | |
| 140 | <h1>$title</h1> | |
| 141 | <p class="summary">$summary</p> | |
| 142 | <div class="meta-row"> | |
| 143 | [if:$icon]<span>$icon</span>[/if] | |
| 144 | <span>~$estimated min</span> | |
| 145 | <span>$section</span> | |
| 146 | </div> | |
| 147 | <div class="help-body">$body_html</div> | |
| 148 | [if:$has_next] | |
| 149 | <a href="/tutorials.cgi?slug=$next_slug" class="help-next" style="text-decoration:none"> | |
| 150 | <div> | |
| 151 | <div class="lbl">Next step</div> | |
| 152 | <div class="nxt-title">$next_title</div> | |
| 153 | </div> | |
| 154 | <span style="color:var(--col-accent-bright);font-weight:700">Continue →</span> | |
| 155 | </a> | |
| 156 | [/if] | |
| 157 | </article> | |
| 158 | [/if] | |
| 159 | ||
| 160 | [if:!$is_single] | |
| 161 | <div class="help-hero"> | |
| 162 | <h1>Help Center</h1> | |
| 163 | <p>Step-by-step walkthroughs for every feature, in the order most creators do them. Search below, or pick up where you left off — checked-off steps are dashed.</p> | |
| 164 | <form method="GET" action="/tutorials.cgi" class="help-search"> | |
| 165 | <input type="search" name="q" value="$search_q" placeholder="Search tutorials..." autofocus> | |
| 166 | <button type="submit">Search</button> | |
| 167 | </form> | |
| 168 | </div> | |
| 169 | ||
| 170 | [if:$is_search] | |
| 171 | [if:$no_hits] | |
| 172 | <div class="help-empty"> | |
| 173 | <h3 style="color:#fff;margin-bottom:6px">No tutorials match "$search_q"</h3> | |
| 174 | <p>Try a different keyword, or <a href="/tutorials.cgi" class="text-brand">browse all sections →</a></p> | |
| 175 | </div> | |
| 176 | [/if] | |
| 177 | [if:$has_hits] | |
| 178 | <div class="help-section"> | |
| 179 | <h2 class="help-section-title">Results for "$search_q"</h2> | |
| 180 | <div class="help-grid"> | |
| 181 | [loop:@hits] | |
| 182 | <a class="help-card" href="/tutorials.cgi?slug=$loop1.slug"> | |
| 183 | [if:$loop1.icon]<span class="icon">$loop1.icon</span>[/if] | |
| 184 | <div class="title">$loop1.title</div> | |
| 185 | <div class="summary">$loop1.summary</div> | |
| 186 | <div class="meta">$loop1.section</div> | |
| 187 | </a> | |
| 188 | [/loop] | |
| 189 | </div> | |
| 190 | </div> | |
| 191 | [/if] | |
| 192 | [/if] | |
| 193 | ||
| 194 | [if:!$is_search] | |
| 195 | [if:!$has_sections] | |
| 196 | <div class="help-empty"> | |
| 197 | <h3 style="color:#fff;margin-bottom:6px">No tutorials yet</h3> | |
| 198 | <p>The seed migration installs nine walkthroughs covering the whole platform. Re-run it from <code>installation_instructions.html § 5.15c</code>.</p> | |
| 199 | </div> | |
| 200 | [/if] | |
| 201 | ||
| 202 | [if:$has_sections] | |
| 203 | [loop:@sections] | |
| 204 | <div class="help-section" id="section-$loop1.slug"> | |
| 205 | <h2 class="help-section-title">$loop1.title <span class="count">$loop1.count step(s)</span></h2> | |
| 206 | <div class="help-grid"> | |
| 207 | [loop:@items] | |
| 208 | <a class="help-card[if:$loop2.is_seen] is-seen[/if]" href="/tutorials.cgi?slug=$loop2.slug"> | |
| 209 | [if:$loop2.icon]<span class="icon">$loop2.icon</span>[/if] | |
| 210 | <div class="title">$loop2.title</div> | |
| 211 | <div class="summary">$loop2.summary</div> | |
| 212 | <div class="meta"> | |
| 213 | ~$loop2.est min | |
| 214 | [if:$loop2.is_seen]<span class="seen-pill">· viewed</span>[/if] | |
| 215 | </div> | |
| 216 | </a> | |
| 217 | [/loop] | |
| 218 | </div> | |
| 219 | </div> | |
| 220 | [/loop] | |
| 221 | [/if] | |
| 222 | [/if] | |
| 223 | [/if] | |
| 224 | ||
| 225 | <!-- trailing sentinel: MODS::Template silently returns empty if the | |
| 226 | file ends on a conditional. Keeps the page body non-empty. --> | |
| 227 | <div style="display:none" data-end-of-help></div> |