Diff -- /var/www/vhosts/3dshawn.com/shop.3dshawn.com/TEMPLATES/store_layouts/magazine.html
Diff

/var/www/vhosts/3dshawn.com/shop.3dshawn.com/TEMPLATES/store_layouts/magazine.html

added on local at 2026-07-01 22:10:03

Added
+91
lines
Removed
-0
lines
Context
0
unchanged
Blobs
from
to 8c8aacefc34d
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: Magazine
3 Multi-column editorial grid. Mixed sizes, awards-style.
4===================================================================== -->
5
6<style>
7:root { $theme_css_vars }
8.mg-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; max-width: 1500px; margin: 0 auto; padding: 32px; }
9.mg-card { display: block; text-decoration: none; position: relative; overflow: hidden; border-radius: 4px; }
10.mg-card .img { background-size: cover; background-position: center; height: 100%; min-height: 100%; }
11.mg-card .meta { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px; background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); color: #fff; }
12.mg-card .label { font-family: var(--font-mono,monospace); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; opacity: 0.85; }
13.mg-card:nth-child(8n+1) { grid-column: span 6; aspect-ratio: 16/10; }
14.mg-card:nth-child(8n+2) { grid-column: span 3; aspect-ratio: 4/5; }
15.mg-card:nth-child(8n+3) { grid-column: span 3; aspect-ratio: 4/5; }
16.mg-card:nth-child(8n+4) { grid-column: span 4; aspect-ratio: 1; }
17.mg-card:nth-child(8n+5) { grid-column: span 4; aspect-ratio: 1; }
18.mg-card:nth-child(8n+6) { grid-column: span 4; aspect-ratio: 1; }
19.mg-card:nth-child(8n+7) { grid-column: span 8; aspect-ratio: 16/9; }
20.mg-card:nth-child(8n+0) { grid-column: span 4; aspect-ratio: 4/5; }
21@media (max-width: 900px) { .mg-grid { grid-template-columns: repeat(6, 1fr); } .mg-card:nth-child(n) { grid-column: span 6 !important; aspect-ratio: 16/10 !important; } }
22.mg-issue { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.03em; line-height: 1; color: var(--col-text); }
23</style>
24
25[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]
26
27<header style="border-bottom:3px solid var(--col-text);padding:20px 32px;display:flex;align-items:center;justify-content:space-between;background:var(--col-bg);flex-wrap:wrap">
28 <a href="/store.cgi?id=$store_id" style="display:flex;align-items:baseline;gap:14px;text-decoration:none;flex-shrink:0">
29 <span style="font-family:var(--font-display);font-size:32px;font-weight:900;color:var(--col-text);letter-spacing:-0.04em;line-height:1">$store_name</span>
30 <span style="font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--col-text-3)">VOL. I &middot; ISSUE $product_count</span>
31 </a>
32 <nav style="display:flex;gap:18px;align-items:center;flex-wrap:wrap">
33 [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]
34 </nav>
35 <div style="flex:1;display:flex;justify-content:center;min-width:0">$store_search_form</div>
36 <nav style="display:flex;gap:20px;align-items:center;font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:2px;text-transform:uppercase">
37 </nav>
38 <div style="display:inline-flex;gap:8px;align-items:center;margin-left:8px">$store_signin_link $store_cart_link</div>
39</header>
40
41[if:$is_specific_page]
42 [if:$page_not_found]<section style="padding:120px 32px;text-align:center"><h1 class="mg-issue" style="font-size:96px">Off-page.</h1></section>[/if]
43 [if:!$page_not_found]<section style="padding:80px 32px;max-width:900px;margin:0 auto"><span style="font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--col-accent-bright)">&sect; $page_slug</span><h1 class="mg-issue" style="margin-top:14px">$page_title</h1><div class="text-secondary" style="font-size:17px;line-height:1.85;margin-top:32px;white-space:pre-wrap;column-count:2;column-gap:48px;column-rule:1px solid var(--col-border)">$page_body</div></section>[/if]
44[/if]
45
46[if:!$is_specific_page]
47<!-- Cover headline -->
48<section id="cover" style="padding:48px 32px 0;max-width:1500px;margin:0 auto">
49 <div style="display:grid;grid-template-columns:2fr 1fr;gap:48px;align-items:end;border-bottom:1px solid var(--col-border);padding-bottom:32px">
50 <div>
51 <span style="font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--col-accent-bright);font-weight:700">The Issue</span>
52 <h1 class="mg-issue" style="font-size:clamp(56px,8vw,128px);margin:8px 0 0">$store_name.</h1>
53 </div>
54 <div>
55 <p style="font-size:15px;color:var(--col-text-2);line-height:1.65;margin:0">$store_tagline</p>
56 <div style="font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:1.5px;color:var(--col-text-3);margin-top:14px;text-transform:uppercase">$product_count features inside</div>
57 </div>
58 </div>
59</section>
60
61<!-- Editorial grid -->
62<section id="shop" class="mg-grid">
63 [loop:@products]
64 <a href="/listing_details.cgi?id=$loop1.id" class="mg-card">
65 <div class="img" style="background-image:url('$loop1.hero_image')"></div>
66 <div class="meta">
67 <div class="label">Feature / $loop1.id</div>
68 <div style="font-family:var(--font-display);font-size:18px;font-weight:800;letter-spacing:-0.01em;margin-top:4px">$loop1.title</div>
69 <div style="font-family:var(--font-mono,monospace);font-size:12px;margin-top:4px;opacity:0.85">$loop1.price &middot; $loop1.rating_n notes</div>
70 </div>
71 </a>
72 [/loop]
73 $pagination_html
74</section>
75
76<!-- Editor's note (about) -->
77<section style="background:var(--col-bg-2);padding:80px 32px;border-top:3px solid var(--col-text)">
78 <div style="max-width:900px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:start">
79 <div>
80 <span style="font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--col-accent-bright);font-weight:700;display:block;margin-bottom:6px">Editor's Note</span>
81 <span class="mg-issue" style="font-size:42px">From the desk.</span>
82 </div>
83 <p style="font-size:16px;color:var(--col-text);line-height:1.85;margin:6px 0 0;column-count:2;column-gap:36px">$store_about</p>
84 </div>
85</section>
86[/if]
87
88<footer style="border-top:1px solid var(--col-border);padding:18px 32px;font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--col-text-3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px">
89 <span>$store_name &middot; Vol. I</span>
90 <span>Powered by shop.3dshawn.com</span>
91</footer>
Keyboard: j next diff k previous diff g top G bottom r restore c compile-check ? help