-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathblogs.html
More file actions
425 lines (414 loc) · 22.3 KB
/
Copy pathblogs.html
File metadata and controls
425 lines (414 loc) · 22.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog | Raman Pandey</title>
<meta name="description" content="Essays on science, skepticism, and philosophy by Raman Pandey — quantum computing researcher and science-communication enthusiast.">
<link rel="canonical" href="https://ramanpandey.com/blogs.html">
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "Blog — Raman Pandey",
"url": "https://ramanpandey.com/blogs.html",
"description": "Essays on science, skepticism, and philosophy — the science-communication pillar of the portfolio, rendered as cards over a deep-field starscape.",
"about": "Philosophy and science communication",
"isPartOf": {
"@type": "WebSite",
"name": "Raman Pandey — Portfolio",
"url": "https://ramanpandey.com/"
},
"author": {
"@type": "Person",
"name": "Raman Pandey",
"url": "https://ramanpandey.com/about/"
}
}
</script>
<script>
// veil guard: repeat visitors and reduced-motion users never see the overlay
// (set to false to replay the veil on every load while testing)
window.VEIL_ONCE_PER_SESSION = true;
(function () {
var d = document.documentElement;
try {
if ((window.VEIL_ONCE_PER_SESSION && sessionStorage.getItem('blogVeilPlayed')) ||
window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
d.classList.add('no-veil');
} else {
d.classList.add('veiling'); // stages the content entrance after the book opens
}
} catch (e) { d.classList.add('no-veil'); }
}());
</script>
<style>
:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
margin: 0; min-height: 100vh;
font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
color: #d6dcf0;
background:
radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.8) 50%, transparent 51%),
radial-gradient(1px 1px at 34% 68%, rgba(255,255,255,0.55) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 56% 12%, rgba(200,220,255,0.7) 50%, transparent 51%),
radial-gradient(1px 1px at 71% 41%, rgba(255,255,255,0.6) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 88% 76%, rgba(255,230,200,0.6) 50%, transparent 51%),
radial-gradient(1px 1px at 45% 89%, rgba(255,255,255,0.5) 50%, transparent 51%),
radial-gradient(1px 1px at 5% 60%, rgba(200,220,255,0.6) 50%, transparent 51%),
radial-gradient(1.2px 1.2px at 64% 58%, rgba(255,255,255,0.65) 50%, transparent 51%),
radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,0.45) 50%, transparent 51%),
radial-gradient(ellipse at 60% 20%, #171b33 0%, #0e101f 55%);
background-attachment: fixed;
}
/* standard site header bar (matches portfolio-pages.css) */
header {
background: #232749;
padding: 0.6em 2em;
box-shadow: 0 2px 16px rgba(32, 40, 90, 0.10);
}
header nav,
header nav a {
font-family: 'IBM Plex Mono', 'Menlo', 'Consolas', monospace;
color: #70bfff;
text-decoration: none;
font-size: 1.05em;
}
header nav a:hover { color: #e2cfff; text-shadow: 0 0 6px #79c3ff55; }
main { max-width: 760px; margin: 0 auto; padding: 20px 24px 90px; }
h1 { color: #f0f3ff; font-weight: 600; letter-spacing: 0.02em; }
.lede { color: #8b95b5; margin-bottom: 2.6em; }
.post-card {
display: block; text-decoration: none; color: inherit;
background: rgba(22, 26, 48, 0.72);
border: 1px solid rgba(120, 150, 220, 0.18);
border-radius: 14px;
padding: 22px 26px; margin-bottom: 22px;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
backdrop-filter: blur(2px);
}
.post-card:hover {
transform: translateY(-2px);
border-color: rgba(140, 180, 255, 0.45);
box-shadow: 0 6px 30px rgba(60, 100, 200, 0.18);
}
.post-card h2 { margin: 0 0 4px; font-size: 1.2rem; color: #eef2ff; }
.post-card time { font-size: 0.82rem; color: #8b95b5; }
.post-card p { color: #b8c1dd; font-size: 0.95rem; line-height: 1.6; margin: 10px 0 8px; }
.read-more { font-size: 0.85rem; color: #8fb8ff; }
footer { text-align: center; color: #6b7494; font-size: 0.8rem; padding: 20px; }
/* ---- book-open veil (index only; pure overlay above real content) ----
Scene: ancient tome on display → camera slowly zooms while the cover
opens and pages flip to a spread → veil lifts, blog elements fade in. */
#book-veil {
position: fixed; inset: 0; z-index: 60;
display: flex; align-items: center; justify-content: center;
cursor: pointer; overflow: hidden;
background: radial-gradient(ellipse at 50% 42%, #1b1526 0%, #0b0912 62%, #050408 100%);
}
.veil-stage { perspective: 1500px; perspective-origin: 50% 42%; }
.book-scene { transform: scale(0.85); transform-style: preserve-3d; }
.book {
position: relative;
width: min(300px, 56vw); aspect-ratio: 5 / 7;
transform-style: preserve-3d;
transform: rotateX(12deg); /* closed book sits dead center; shifts right as it opens so the spread stays centered */
}
.book::before { /* spine */
content: ""; position: absolute; top: -2px; bottom: -2px; left: -12px; width: 14px;
background: linear-gradient(90deg, #170d04 0%, #3a2510 60%, #241505 100%);
border-radius: 6px 0 0 6px;
box-shadow: 0 14px 40px rgba(0,0,0,0.6);
}
.book::after { /* page-block edge peeking past the cover */
content: ""; position: absolute; top: 7px; bottom: 7px; right: -3px; width: 6px;
background: repeating-linear-gradient(90deg, #e2d3ab 0 1px, #b3a074 1px 2px);
border-radius: 0 2px 2px 0;
}
.book-back, .book-cover {
position: absolute; inset: 0;
transform-origin: left center;
border-radius: 3px 10px 10px 3px;
background:
radial-gradient(ellipse at 30% 22%, rgba(255,220,150,0.08), transparent 55%),
linear-gradient(115deg, #241505 0%, #4a2f14 35%, #5d3d1c 55%, #38230d 85%, #1d1105 100%);
box-shadow: 0 18px 50px rgba(0,0,0,0.65), inset 0 0 40px rgba(0,0,0,0.5);
}
.book-back { inset: -3px -4px; border-radius: 3px 11px 11px 3px; }
.book-cover { transform: translateZ(12px); }
.book-cover::before { /* embossed gold frame */
content: ""; position: absolute; inset: 11px;
border: 3px double rgba(212, 175, 95, 0.55);
border-radius: 2px 7px 7px 2px;
}
.cover-mark {
position: absolute; top: 17%; left: 0; right: 0; text-align: center;
color: rgba(224, 188, 112, 0.9); font-family: Georgia, serif; font-size: 1.7rem;
text-shadow: 0 0 14px rgba(224, 188, 112, 0.35);
}
.cover-title {
position: absolute; top: 32%; left: 0; right: 0; padding: 0 16%;
text-align: center;
color: rgba(224, 188, 112, 0.88); font-family: Georgia, serif;
font-size: 1.02rem; letter-spacing: 0.14em; line-height: 1.7;
text-transform: uppercase;
text-shadow: 0 0 10px rgba(224, 188, 112, 0.25);
}
.cover-author {
position: absolute; bottom: 13%; left: 0; right: 0; text-align: center;
color: rgba(212, 175, 95, 0.65); font-family: Georgia, serif;
font-size: 0.64rem; letter-spacing: 0.34em; text-transform: uppercase;
text-indent: 0.34em; /* recenter: letter-spacing pads only the right side */
}
.leaf {
position: absolute; inset: 5px 7px 5px 0;
transform-origin: left center;
border-radius: 0 6px 6px 0;
background: linear-gradient(100deg, #d5c49c 0%, #eee1c0 18%, #e5d5ae 60%, #c9b688 100%);
box-shadow: inset -14px 0 24px rgba(90, 70, 40, 0.25), inset 5px 0 12px rgba(90, 70, 40, 0.4);
}
.leaf::after { /* faint script lines on the parchment */
content: ""; position: absolute; inset: 13% 11%;
background: repeating-linear-gradient(180deg, rgba(90, 70, 45, 0.3) 0 1px, transparent 1px 9px);
opacity: 0.45;
}
.leaf-1 { transform: translateZ(10px); }
.leaf-2 { transform: translateZ(9px); }
.leaf-3 { transform: translateZ(8px); }
.leaf-4 { transform: translateZ(7px); }
.leaf-5 { transform: translateZ(6px); }
.leaf-6 { transform: translateZ(5px); }
.leaf-7 { transform: translateZ(4px); }
.leaf-8 { transform: translateZ(3px); }
.leaf-9 { transform: translateZ(2px); }
.leaf-10 { transform: translateZ(1px); }
.veil-hint {
position: absolute; bottom: 26px; left: 26px;
font-size: 0.7rem; letter-spacing: 0.14em;
color: rgba(170, 185, 220, 0.55); text-transform: uppercase;
}
/* timeline (runs when html.veil-open lands): camera zooms the whole time,
cover opens at 0.45s, five leaves flip 1.4s→3s (five stay — the book
lands on a middle spread), veil lifts at 3.15s */
html.veil-open .book-scene { animation: veilCamera 3.4s cubic-bezier(0.4, 0.1, 0.3, 1) forwards; }
html.veil-open .book { animation: bookCenter 1.3s 0.45s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
html.veil-open .book-cover { animation: coverOpen 1.3s 0.45s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
html.veil-open .leaf-1 { animation: leafFlip1 0.7s 1.4s ease-in-out forwards; }
html.veil-open .leaf-2 { animation: leafFlip2 0.7s 1.62s ease-in-out forwards; }
html.veil-open .leaf-3 { animation: leafFlip3 0.7s 1.84s ease-in-out forwards; }
html.veil-open .leaf-4 { animation: leafFlip4 0.7s 2.06s ease-in-out forwards; }
html.veil-open .leaf-5 { animation: leafFlip5 0.7s 2.28s ease-in-out forwards; }
html.veil-open #book-veil { animation: veilLift 0.75s 3.15s ease forwards; }
@keyframes veilCamera {
0% { transform: scale(0.85); }
60% { transform: scale(1.24); }
100% { transform: scale(1.85) translateY(4vh); }
}
@keyframes bookCenter {
from { transform: rotateX(12deg) translateX(0); }
to { transform: rotateX(8deg) translateX(50%); }
}
@keyframes coverOpen { to { transform: translateZ(12px) rotateY(-178deg); } }
@keyframes leafFlip1 { to { transform: translateZ(10px) rotateY(-176deg); } }
@keyframes leafFlip2 { to { transform: translateZ(9px) rotateY(-173.5deg); } }
@keyframes leafFlip3 { to { transform: translateZ(8px) rotateY(-171deg); } }
@keyframes leafFlip4 { to { transform: translateZ(7px) rotateY(-168.5deg); } }
@keyframes leafFlip5 { to { transform: translateZ(6px) rotateY(-166deg); } }
@keyframes veilLift { to { opacity: 0; } }
html.no-veil #book-veil { display: none; }
/* blog elements appear once the book has opened (only when the veil plays;
no-JS / reduced-motion never get the hidden state) */
html.veiling header, html.veiling main > *, html.veiling footer {
opacity: 0; transform: translateY(16px);
}
html.veil-done header, html.veil-done main > *, html.veil-done footer {
opacity: 1; transform: none;
transition: opacity 0.9s ease, transform 0.9s ease;
}
html.veil-done main > *:nth-child(1) { transition-delay: 0.1s; }
html.veil-done main > *:nth-child(2) { transition-delay: 0.22s; }
html.veil-done main > *:nth-child(3) { transition-delay: 0.34s; }
html.veil-done main > *:nth-child(4) { transition-delay: 0.46s; }
html.veil-done main > *:nth-child(5) { transition-delay: 0.58s; }
html.veil-done main > *:nth-child(n+6) { transition-delay: 0.7s; }
html.veil-done footer { transition-delay: 0.8s; }
/* ---- margin quotes, persistent rotation (never over the cards) ---- */
.idle-quote {
position: fixed; z-index: 5;
width: min(280px, calc((100vw - 900px) / 2 - 40px));
opacity: 0; pointer-events: none;
transition: opacity 1.4s ease;
font-family: Georgia, 'Times New Roman', serif;
font-style: italic; font-size: 1.02rem; line-height: 1.7;
color: rgba(196, 208, 238, 0.88);
}
.idle-quote.show { opacity: 1; }
.idle-quote .q-src {
display: block; margin-top: 0.7em;
font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
font-style: normal; font-size: 0.7rem; letter-spacing: 0.08em;
color: rgba(130, 145, 185, 0.85);
}
#quote-left { left: 30px; top: 24vh; }
#quote-right { right: 30px; top: 50vh; text-align: right; }
/* margins too narrow → no quotes at all (text-over-text is forbidden) */
@media (max-width: 1319px) { .idle-quote { display: none; } }
@media (prefers-reduced-motion: reduce) { .idle-quote { display: none; } }
</style>
</head>
<body>
<div id="book-veil" aria-hidden="true">
<div class="veil-stage">
<div class="book-scene">
<div class="book">
<div class="book-back"></div>
<div class="leaf leaf-10"></div>
<div class="leaf leaf-9"></div>
<div class="leaf leaf-8"></div>
<div class="leaf leaf-7"></div>
<div class="leaf leaf-6"></div>
<div class="leaf leaf-5"></div>
<div class="leaf leaf-4"></div>
<div class="leaf leaf-3"></div>
<div class="leaf leaf-2"></div>
<div class="leaf leaf-1"></div>
<div class="book-cover">
<span class="cover-mark">✦</span>
<span class="cover-title">Essays on Science, Skepticism & Philosophy</span>
<span class="cover-author">R · Pandey</span>
</div>
</div>
</div>
</div>
<span class="veil-hint">click to skip</span>
</div>
<noscript><style>#book-veil { display: none; }</style></noscript>
<div id="quote-left" class="idle-quote" aria-hidden="true"></div>
<div id="quote-right" class="idle-quote" aria-hidden="true"></div>
<header>
<nav><a href="index.html">Home</a> | <span>Blog</span></nav>
</header>
<main>
<h1>Blog</h1>
<p class="lede">Essays on science, skepticism, and philosophy — written for humans, readable by machines.</p>
<a class="post-card" href="articles/quantum-hype.html">
<h2>The Quantum Hype Problem</h2>
<time datetime="2026-07-14">July 14, 2026</time>
<p>I work in quantum tech, and I'm asking you to be more skeptical of it. On marketing adjectives, timeline inflation, and why honesty is a survival strategy for the field.</p>
<span class="read-more">Read →</span>
</a>
<a class="post-card" href="articles/does-the-machine-understand.html">
<h2>Does the Machine Understand?</h2>
<time datetime="2026-07-05">July 5, 2026</time>
<p>Large language models write essays, prove lemmas, and pass exams. Whether they "understand" anything is a different question — and probably the wrong one.</p>
<span class="read-more">Read →</span>
</a>
<a class="post-card" href="articles/shut-up-and-calculate.html">
<h2>Shut Up and Calculate?</h2>
<time datetime="2026-06-20">June 20, 2026</time>
<p>Physicists are told not to worry about what quantum mechanics means. But the history of the field suggests that worrying about it is exactly how progress gets made.</p>
<span class="read-more">Read →</span>
</a>
<a class="post-card" href="articles/great-silence.html">
<h2>The Great Silence Is Data</h2>
<time datetime="2026-05-30">May 30, 2026</time>
<p>The Fermi paradox is better read as an observation than a paradox, and maybe the most important null result in science. On filters, boring explanations, and how seriously to take the silence.</p>
<span class="read-more">Read →</span>
</a>
<a class="post-card" href="articles/media-skeptics-guide.html">
<h2>The Media Skeptic's Guide to Health BS</h2>
<time datetime="2026-04-03">April 3, 2026</time>
<p>How to spot myths, misinformation, and marketing fluff in modern wellness culture — twelve persistent health myths, debunked.</p>
<span class="read-more">Read →</span>
</a>
<a class="post-card" href="articles/astro-ethics.html">
<h2>Why Ethics Matters in Astrophysics</h2>
<time datetime="2025-06-01">June 1, 2025</time>
<p>The universe is a vast laboratory — but does that mean anything goes? On satellite constellations, sacred land, planetary protection, and who astronomy is for.</p>
<span class="read-more">Read →</span>
</a>
<a class="post-card" href="articles/simulated-universe.html">
<h2>Is the Universe a Simulation?</h2>
<time datetime="2025-05-11">May 11, 2025</time>
<p>From Nick Bostrom's simulation argument to the limits of physical law — could reality be code?</p>
<span class="read-more">Read →</span>
</a>
</main>
<footer>© 2026 Raman Pandey</footer>
<script>
(function () {
var docEl = document.documentElement;
// ---- book-open veil: ancient tome, ~4s, click/key to skip ----
// CSS owns the choreography (html.veil-open); JS only starts it, reveals
// the content near the end, and hard-stops everything at 3.95s or on skip
var veil = document.getElementById('book-veil');
var veilTimers = [];
function endVeil() {
veilTimers.forEach(clearTimeout);
docEl.classList.add('no-veil');
docEl.classList.add('veil-done');
if (window.VEIL_ONCE_PER_SESSION) {
try { sessionStorage.setItem('blogVeilPlayed', '1'); } catch (e) {}
}
}
if (veil && docEl.classList.contains('veiling') && !docEl.classList.contains('no-veil')) {
veil.addEventListener('click', endVeil);
window.addEventListener('keydown', endVeil, { once: true });
// don't burn the animation while the tab is still hidden (fresh window
// spawning, background tab) — wait until the reader can actually see it
var startVeil = function () {
if (docEl.classList.contains('no-veil')) return;
docEl.classList.add('veil-open');
// blog elements start appearing while the veil is still lifting
veilTimers.push(setTimeout(function () { docEl.classList.add('veil-done'); }, 3050));
veilTimers.push(setTimeout(endVeil, 3950));
};
if (document.visibilityState === 'hidden') {
document.addEventListener('visibilitychange', function onVis() {
if (document.visibilityState === 'visible') {
document.removeEventListener('visibilitychange', onVis);
startVeil();
}
});
} else {
startVeil();
}
} else {
endVeil();
}
// ---- margin quotes: my own sentences, persistent rotation ----
var QUOTES = [{"text":"Asking why we study the cosmos, and for whom, keeps the field honest and keeps the sky something that belongs to everyone, not just to whoever owns the biggest telescope.","title":"Why Ethics Matters in Astrophysics"},{"text":"Because if an Earth microbe hitches a ride and we later find life on Mars, we may never be sure it wasn't ours.","title":"Why Ethics Matters in Astrophysics"},{"text":"What if our universe is not \"real\" in the usual sense, but an incredibly complex simulation run by an advanced intelligence?","title":"Is the Universe a Simulation?"},{"text":"That's not detoxing—that's dehydration with branding.","title":"The Media Skeptic's Guide to Health BS"},{"text":"The dose makes the poison—even water, sugar, or oxygen can kill you at the wrong dose.","title":"The Media Skeptic's Guide to Health BS"},{"text":"You don't need a PhD to spot nonsense. Just a bit of logic, a little healthy skepticism, and the courage to say \"uh, that doesn't sound right.\"","title":"The Media Skeptic's Guide to Health BS"},{"text":"A definition that keeps updating to exclude every counterexample has stopped being a definition.","title":"Does the Machine Understand?"},{"text":"You infer that I understand things from my behavior, and that's the only evidence anyone has ever had about another mind.","title":"Does the Machine Understand?"},{"text":"We built machines that talk before we agreed on what talking means.","title":"Does the Machine Understand?"},{"text":"A galaxy could host millions of civilizations serially and still be silent at any given moment.","title":"The Great Silence Is Data"},{"text":"Loneliness might be a scheduling problem as much as a rarity problem.","title":"The Great Silence Is Data"},{"text":"The silence is data. The sensible response is to treat it like any other measurement, and to build a much bigger telescope.","title":"The Great Silence Is Data"},{"text":"Entanglement went from metaphysical embarrassment to engineering resource. The entire field I work in exists because some people refused to shut up.","title":"Shut Up and Calculate?"},{"text":"At that point you've left physics for something more like theology with Hilbert spaces.","title":"Shut Up and Calculate?"},{"text":"The universe doesn't owe us interpretability, but demanding it anyway has paid off every time so far.","title":"Shut Up and Calculate?"},{"text":"I work in quantum technology. Which is exactly why I'm asking you to be more skeptical of it.","title":"The Quantum Hype Problem"},{"text":"\"Within five years\" has been true for twenty years.","title":"The Quantum Hype Problem"},{"text":"A field that can say \"we don't know yet\" out loud is easier to trust.","title":"The Quantum Hype Problem"}];
var slots = [document.getElementById('quote-left'), document.getElementById('quote-right')];
var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduced || !slots[0] || !slots[1] || !QUOTES.length) return;
var lastIdx = -1, slotFlip = 0;
function nextQuote() {
if (window.innerWidth < 1320) { setTimeout(nextQuote, 4000); return; }
var idx;
do { idx = Math.floor(Math.random() * QUOTES.length); }
while (QUOTES.length > 1 && idx === lastIdx);
lastIdx = idx;
var q = QUOTES[idx];
var slot = slots[slotFlip % 2];
slotFlip++;
slot.textContent = '\u201C' + q.text + '\u201D';
var src = document.createElement('span');
src.className = 'q-src';
src.textContent = '\u2014 ' + q.title;
slot.appendChild(src);
slot.classList.add('show');
setTimeout(function () {
slot.classList.remove('show');
setTimeout(nextQuote, 2500);
}, 8000);
}
nextQuote();
}());
</script>
</body>
</html>