Something went wrong. Try again.
New TLE Community website using Eleventy. tlecommunity.com
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282@tailwind base;@tailwind components;@tailwind utilities;
/* top-level - must not be nested inside @layer */@font-face { font-family: 'Promethean'; src: url('/assets/fonts/promethean.ttf') format('truetype'); font-display: swap;}
@view-transition { navigation: auto;}
@layer base { /* the legacy sub-pages used Helvetica for body copy */ body { -webkit-font-smoothing: antialiased; }}
@layer utilities { /* legacy 4-way neon glow - white glyph core, blue halo all around */ .text-glow { text-shadow: -5px -5px 9px theme('colors.cyan.glow'), 5px -5px 9px theme('colors.cyan.glow'), -5px 5px 9px theme('colors.cyan.glow'), 5px 5px 9px theme('colors.cyan.glow'); } .text-glow-hot { text-shadow: -5px -5px 9px theme('colors.cyan.hot'), 5px -5px 9px theme('colors.cyan.hot'), -5px 5px 9px theme('colors.cyan.hot'), 5px 5px 9px theme('colors.cyan.hot'); } /* softer glow for large display headings */ .text-glow-lg { text-shadow: 0 0 12px theme('colors.cyan.glow'), 0 0 32px theme('colors.cyan.glow'), -4px -4px 10px theme('colors.cyan.glow'), 4px 4px 10px theme('colors.cyan.glow'); } /* legibility shadow for copy sitting on bright art */ .text-legible { text-shadow: 1px 1px 3px #000; }}
@layer components { /* ---- interior navbar "tab" buttons (legacy #sitenav li) ---- */ .tab { @apply inline-block rounded-b-[10px] border-4 border-amber border-b-amber-bevel border-r-amber-bevel bg-amber px-3 pb-0.5 font-display text-[22px] leading-none text-black no-underline; } .tab-play { @apply border-play border-b-play-bevel border-r-play-bevel bg-play text-white; } .tab-help { @apply border-help border-b-help-bevel border-r-help-bevel bg-help text-white; }
/* ---- interior page chrome - real legacy textures from the asset repo ---- */ .site-crown { @apply mx-auto mt-8 flex max-w-[52rem] justify-center px-4; } .site-crown img { @apply h-auto w-[350px] max-w-full; } .site-bodytop { @apply mx-auto mt-4 flex min-h-[34px] max-w-[52rem] items-center justify-center rounded-t-[10px] bg-[#0a1b2e] bg-[url('/assets/img/bkg_crown.png')] bg-no-repeat bg-cover px-4 py-2 text-center font-display text-xl text-white; } .site-body { @apply mx-auto mb-12 max-w-[52rem] rounded-b-[10px] border border-t-0 border-cyan-glow/20 bg-[#0b1c2e] px-6 py-8 text-white shadow-[0_0_40px_rgba(0,174,255,0.08)]; }
/* ---- homepage "grimy panel" - echoes the legacy blue UI panels in the splash art ---- Pure CSS: a steel-blue base carries a top sheen + edge vignette, an isometric line mesh, and two dot layers (fine grain + sparse speckle). ::before adds vertical grime streaks masked to the upper third; ::after adds corner-chamfer ticks. The box-shadow supplies the bevel (inset) and the outer glow. */ .panel { --panel-blue: #0c2138; --panel-mesh: rgba(150, 200, 238, 0.045); position: relative; isolation: isolate; border-radius: 14px; border: 1px solid rgba(0, 174, 255, 0.18); background-color: var(--panel-blue); background-image: /* top sheen + bottom shade */ linear-gradient( 180deg, rgba(140, 205, 255, 0.1) 0%, rgba(12, 33, 56, 0) 12%, rgba(12, 33, 56, 0) 66%, rgba(0, 0, 0, 0.5) 100% ), /* edge / corner vignette */ radial-gradient( 130% 95% at 50% 0%, rgba(46, 92, 138, 0.3) 0%, rgba(10, 26, 46, 0) 42%, rgba(3, 10, 20, 0.72) 100% ), /* sparse speckle "stars" */ radial-gradient(circle at 2px 2px, rgba(200, 228, 255, 0.13) 1px, transparent 1.6px), /* fine grain */ radial-gradient(circle at 1px 1px, rgba(188, 220, 248, 0.05) 1px, transparent 1.6px), /* isometric mesh - three thin line grids */ repeating-linear-gradient(0deg, var(--panel-mesh) 0 1px, transparent 1px 10px), repeating-linear-gradient(60deg, var(--panel-mesh) 0 1px, transparent 1px 10px), repeating-linear-gradient(-60deg, var(--panel-mesh) 0 1px, transparent 1px 10px); background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat; background-size: 100% 100%, 100% 100%, 29px 37px, 4px 4px, auto, auto, auto; box-shadow: inset 0 1px 0 rgba(150, 210, 255, 0.14), inset 0 0 60px rgba(2, 10, 20, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 18px 40px -12px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 174, 255, 0.06); }
/* vertical grime streaks, faded out below the top third */ .panel::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background-image: repeating-linear-gradient( 90deg, transparent 0px, rgba(4, 12, 22, 0.2) 2px, transparent 5px, rgba(150, 185, 220, 0.05) 7px, transparent 10px, rgba(4, 12, 22, 0.28) 14px, transparent 18px, rgba(4, 12, 22, 0.1) 23px, transparent 28px ); -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.3) 40%, transparent 74%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.3) 40%, transparent 74%); }
/* corner-chamfer ticks - a nod to the HUD frame */ .panel::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(0, 174, 255, 0.45) 0 2px, transparent 2px) top left / 24px 24px no-repeat, linear-gradient(225deg, rgba(0, 174, 255, 0.45) 0 2px, transparent 2px) top right / 24px 24px no-repeat, linear-gradient(45deg, rgba(0, 174, 255, 0.28) 0 2px, transparent 2px) bottom left / 24px 24px no-repeat, linear-gradient(315deg, rgba(0, 174, 255, 0.28) 0 2px, transparent 2px) bottom right / 24px 24px no-repeat; }
/* ---- a11y helper (from css/index.css) ---- */ .visually-hidden:not(:focus):not(:active) { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
#skip-link { @apply rounded-sm border border-white bg-void px-4 py-2 text-white no-underline; }
#skip-link.visually-hidden:focus { @apply absolute left-4 top-4 z-[999]; }
/* The news archive + tag listings (content/news.njk, content/tags.njk, content/tag-pages.njk, includes/postslist.njk) are styled inline with Tailwind utilities - no bespoke classes here. */
/* ---- post byline + tag chips (individual posts - layouts/post.njk) ---- */ .post-tag { display: inline-flex; align-items: center; justify-content: center; text-transform: capitalize; font-style: italic; } .postlist-item > .post-tag { align-self: center; } .post-metadata { display: inline-flex; flex-wrap: wrap; gap: 0.5em; list-style: none; padding: 0; margin: 0 0 1.5em; } .post-metadata time { margin-right: 1em; }
/* ---- post author bio: round avatar left, text + social links right (stacks on mobile) ---- */ .bio { @apply flex flex-col items-center gap-6 pt-8 text-center sm:flex-row sm:items-start sm:text-left; }
/* ---- post body images + "Image: …" captions (layouts/post.njk) ---- Markdown images render as <p><picture>…</picture></p>; a caption is the italic-only paragraph directly after one. drop-shadow (not box-shadow) so transparent PNGs like the Discord logo get a shadow that follows their shape rather than their bounding box. */ .post-content p:has(> picture:only-child, > img:only-child) { @apply mx-auto mb-3 w-11/12; } .post-content p:has(> picture:only-child, > img:only-child) > picture { @apply my-0; } .post-content p:has(> picture:only-child, > img:only-child) img { @apply mx-auto my-0 rounded-lg; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 1px rgba(0, 174, 255, 0.35)); } .post-content p:has(> picture:only-child, > img:only-child) + p:has(> em:only-child) { @apply mx-auto mt-0 w-11/12 text-center text-sm text-slate-400; }
/* ---- post prev/next ---- */ .links-nextprev { display: flex; justify-content: space-between; gap: 0.5em 1em; list-style: ''; border-top: 1px dashed theme('colors.slate.600'); border-bottom: 1px dashed theme('colors.slate.600'); padding: 1em 0; } .links-nextprev > * { flex-grow: 1; } .links-nextprev-next { text-align: right; }
/* ---- keep Prism okaidia readable inside prose-invert ---- */ .prose :where(pre[class*='language-']) { background: #272822; color: #f8f8f2; } .prose :where(code[class*='language-']) { background: none; color: inherit; } .prose :where(code):not([class*='language-'])::before, .prose :where(code):not([class*='language-'])::after { content: none; }}