Diff

/var/www/vhosts/3dshawn.com/affiliate.3dshawn.com/TEMPLATES/store_layouts/comic.html

added on local at 2026-07-01 13:47:50

Added

+70

lines

Removed

-0

lines

Context

unchanged

Blobs

from
to aca1eeab82fb

Restore this content →

Unified diff

Naive LCS-based line diff. Additions in emerald, deletions in rose. Both sides decompressed live from BLOB_STORE.

	1	<!-- =====================================================================
	2	LAYOUT: Comic
	3	Comic book panels with speech bubbles and action callouts.
	4	===================================================================== -->
	5
	6	<style>
	7	:root { $theme_css_vars }
	8	.cm-page { max-width:1300px; margin:0 auto; padding:32px; }
	9	.cm-row { display:grid; grid-template-columns: repeat(12, 1fr); gap:8px; margin-bottom:8px; }
	10	.cm-panel { position:relative; border: 4px solid var(--col-text); background: var(--col-bg); overflow:hidden; text-decoration:none; display:block; transition:transform 0.15s; box-shadow: 6px 6px 0 var(--col-text); }
	11	.cm-panel:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--col-text); }
	12	.cm-panel .img { width:100%; height:100%; background-size:cover; background-position:center; }
	13	.cm-burst { position:absolute; background: var(--col-accent); color:#fff; padding:6px 12px; font-family:var(--font-display); font-weight:900; font-size:14px; text-transform:uppercase; letter-spacing:1px; transform:rotate(-6deg); border:3px solid var(--col-text); box-shadow: 3px 3px 0 var(--col-text); }
	14	.cm-bubble { position:absolute; background:#fff; color:#000; padding:8px 12px; border:3px solid var(--col-text); border-radius:18px; font-family:var(--font-display); font-weight:700; font-size:13px; max-width:140px; box-shadow: 3px 3px 0 var(--col-text); }
	15	.cm-bubble::after { content:""; position:absolute; bottom:-12px; left:20px; width:0; height:0; border:9px solid transparent; border-top-color:#fff; border-bottom:0; border-left-width:6px; border-right-width:6px; }
	16	.cm-meta { position:absolute; bottom:0; left:0; right:0; padding:10px 14px; background: var(--col-text); color: var(--col-bg); font-family:var(--font-display); font-weight:800; display:flex; justify-content:space-between; }
	17	</style>
	18
	19	[if:$preview_banner]<div style="position:sticky;top:0;z-index:9999;background:#0a0e1c;border-bottom:1px solid rgba(59,130,246,0.40);box-shadow:0 4px 16px rgba(0,0,0,0.55);padding:10px 20px;text-align:center;font-size:13px;color:#93c5fd;font-weight:600">$preview_banner</div>[/if]
	20
	21	<header style="background:var(--col-bg);padding:18px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:6px solid var(--col-text);flex-wrap:wrap">
	22	<a href="/store.cgi?id=$store_id" style="display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0">
	23	<span style="font-family:var(--font-display);font-size:32px;font-weight:900;color:var(--col-text);letter-spacing:-0.03em;text-transform:uppercase">$store_name!</span>
	24	</a>
	25	<nav style="display:flex;gap:18px;align-items:center;flex-wrap:wrap">
	26	[loop:@nav_pages]<a href="$loop1.href" style="font-size:13px;color:var(--col-text-2);font-weight:600;text-decoration:none">$loop1.title</a>[/loop]
	27	</nav>
	28	<div style="flex:1;display:flex;justify-content:center;min-width:0">$store_search_form</div>
	29	<nav style="display:flex;gap:16px;align-items:center;font-family:var(--font-display);font-weight:800;font-size:14px;text-transform:uppercase">
	30	</nav>
	31	<div style="display:inline-flex;gap:8px;align-items:center;margin-left:8px">$store_signin_link $store_cart_link</div>
	32	</header>
	33
	34	[if:$is_specific_page]
	35	[if:$page_not_found]<section style="padding:120px 32px;text-align:center"><h1 class="hero-title" style="font-size:72px;text-transform:uppercase">Page yanked!</h1></section>[/if]
	36	[if:!$page_not_found]<section class="cm-page"><h1 style="font-family:var(--font-display);font-size:56px;font-weight:900;color:var(--col-text);text-transform:uppercase">$page_title</h1><div class="text-secondary" style="font-size:16px;line-height:1.7;margin-top:18px;white-space:pre-wrap">$page_body</div></section>[/if]
	37	[/if]
	38
	39	[if:!$is_specific_page]
	40	<section class="cm-page">
	41
	42	<!-- Splash panel -->
	43	<div style="border:6px solid var(--col-text);position:relative;height:300px;background:url('/assets/images/[$featured_product.image_idx].webp') center/cover;margin-bottom:18px;box-shadow: 8px 8px 0 var(--col-text)">
	44	<div class="cm-burst" style="top:18px;right:24px;font-size:18px;padding:8px 16px">NEW!</div>
	45	<div class="cm-bubble" style="bottom:30px;left:30px;font-size:18px;max-width:280px">"$store_tagline"</div>
	46	<div class="cm-meta"><span>Issue $product_count</span><span>$store_name</span></div>
	47	</div>
	48
	49	<!-- Comic grid: every 6 products forms a "page" with mixed panel sizes -->
	50	<div id="shop" style="display:grid;grid-template-columns:repeat(12, 1fr);grid-auto-rows:160px;gap:8px">
	51	[loop:@products]
	52	<a href="/listing_details.cgi?id=$loop1.id" class="cm-panel" style="grid-column: span 4;">
	53	<div class="img" style="background-image:url('$loop1.hero_image')"></div>
	54	<div class="cm-bubble" style="top:12px;left:12px;padding:4px 10px;font-size:11px;max-width:100px">$loop1.title!</div>
	55	<div class="cm-meta" style="font-size:13px;padding:6px 10px"><span>#$loop1.id</span><span>$loop1.price</span></div>
	56	</a>
	57	[/loop]
	58	$pagination_html
	59	</div>
	60	</section>
	61
	62	<section id="about" style="background:var(--col-bg-2);border-top:6px solid var(--col-text);border-bottom:6px solid var(--col-text);padding:48px 32px">
	63	<div style="max-width:760px;margin:0 auto;text-align:center">
	64	<h2 style="font-family:var(--font-display);font-size:48px;font-weight:900;color:var(--col-text);text-transform:uppercase;letter-spacing:-0.02em;margin:0 0 18px">Origin Story</h2>
	65	<p style="font-size:16px;color:var(--col-text);line-height:1.85">$store_about</p>
	66	</div>
	67	</section>
	68	[/if]
	69
	70	<footer style="padding:18px 32px;text-align:center;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--col-text-3)">$store_name · powered by affiliate.3dshawn.com</footer>