/* tic-theme.css — the site's brand layer over Bootstrap 5.3.8 (stage 4, §18: BS3 → BS5 re-type). Palette and look carry over from the BS3-era rules; the comment below is the TIC-80 16-color source, kept verbatim: BLACK = 0, -- #1a1c2c DARK_RED = 1, -- #5d275d DARK_BLUE = 2, -- #b13e53 DARK_GRAY = 3, -- #ef7d57 BROWN = 4, -- #ffcd75 GREEN = 5, -- #a7f070 RED = 6, -- #38b764 GRAY = 7, -- #257179 BLUE = 8, -- #29366f ORANGE = 9, -- #3b5dc9 LIGHT_BLUE = 10, -- #41a6f6 LIGHT_GREEN= 11, -- #73eff7 PEACH = 12, -- #f4f4f4 CYAN = 13, -- #94b0c2 YELLOW = 14, -- #566c86 WHITE = 15, -- #333c57 */ @font-face { font-family: "04b03Regular"; src: url("/fonts/434.ttf"); /* swap shows the fallback immediately and swaps once the pixel font arrives — no invisible text, and the swap is preloaded away in the layout (§23 flash-of-unstyled-text fix). */ font-display: swap; } :root { --brand-bg: #333c57; --brand-fg: #f4f4f4; --brand-muted: #94b0c2; --brand-deep: #566c86; --brand-link: #41a6f6; --brand-link-hover: #73eff7; --brand-danger: #b13e53; --brand-success: #38b764; /* BS5 defaults re-pointed at the brand (components consume these variables, so the palette lands everywhere at once). */ --bs-body-bg: var(--brand-bg); --bs-body-color: var(--brand-fg); --bs-body-font-family: "04b03Regular", "Courier New", ui-monospace, monospace; --bs-body-font-size: 1.25rem; /* 20px, like the reference rules */ --bs-link-color: var(--brand-link); --bs-link-hover-color: var(--brand-link-hover); --bs-heading-color: var(--brand-fg); --bs-secondary-color: var(--brand-muted); --bs-emphasis-color: var(--brand-fg); } html { position: relative; min-height: 100%; } body { background-color: var(--brand-bg); margin-bottom: 84px; /* room for the absolutely-placed footer */ } h1, h2, h3, h4, h5, h6 { color: var(--brand-fg); } /* BS3 heading scale (§18 retype): BS5 headings are fluid and drift from the reference look; pin the BS3 sizes the site was designed with. */ h1 { font-size: 36px; } h2 { font-size: 30px; } h3 { font-size: 24px; } h4 { font-size: 18px; } h5 { font-size: 14px; } h6 { font-size: 12px; } hr { border: 0; border-top: 4px solid var(--brand-deep); opacity: 1; } a, a:hover, a:active { color: var(--brand-link); } a:hover { color: var(--brand-link-hover); } .text-body-secondary, .text-muted { color: var(--brand-muted) !important; word-wrap: break-word; } /* ---- site chrome (internal/pages layout) ---- */ /* the navbar sits directly on the content now (the old top hr is gone) — give the body a little top air */ .site-body { margin-top: 24px; } .site-nav { background-color: var(--brand-muted); /* No vertical padding: the nav links fill the bar's full height so the active tab reads as a tab, not a floating button (reference look). */ padding: 0; /* The link's horizontal padding comes from Bootstrap's --bs-navbar-nav-link-padding-x (0.5rem = 8px by default — too tight); widen it here so the tabs don't crowd their text. */ --bs-navbar-nav-link-padding-x: 1.25rem; } .site-nav .nav-link { font-size: 24px; color: var(--brand-bg); border-radius: 0; padding-top: .75rem; padding-bottom: .75rem; white-space: nowrap; } .site-nav .nav-link:hover, .site-nav .nav-link:focus { color: var(--brand-fg); background-color: transparent; } .site-nav .nav-link.active { background-color: var(--brand-bg); color: var(--brand-muted); } /* phones: the 24px tab bar overflows a phone viewport. Portrait (<576px) is tightest; landscape (<768px) is wider but still too narrow for 24px. Both shrink to a compact single row (the links never wrap mid-word). */ @media (max-width: 575.98px) { .site-nav { --bs-navbar-nav-link-padding-x: 0.4rem; } .site-nav .nav-link { font-size: 14px; padding-top: .5rem; padding-bottom: .5rem; } } @media (min-width: 576px) and (max-width: 767.98px) { .site-nav { --bs-navbar-nav-link-padding-x: 0.6rem; } .site-nav .nav-link { font-size: 17px; padding-top: .6rem; padding-bottom: .6rem; } } .site-footer { position: absolute; bottom: 0; width: 100%; height: 84px; } /* ---- components ---- */ .btn { border: 0; border-radius: 0; font-size: 20px; background-color: var(--brand-muted); color: var(--brand-bg); } .btn:hover, .btn:focus { background-color: var(--brand-fg); color: var(--brand-bg); } .btn-lg { font-size: 24px; } /* the reference's .btn-default is the plain .btn at title size (views/home.ejs VIEW ALL...; BS3-era rule, re-typed) */ .btn-default { font-size: 24px; } .btn-link { color: var(--brand-fg); background-color: var(--brand-bg); text-decoration: none; } .btn-link:hover { color: var(--brand-fg); background-color: var(--brand-deep); } .form-control { background-color: var(--brand-deep); border: 4px solid var(--brand-muted); border-radius: 0; font-size: 20px; padding: 6px 10px; height: 46px; color: var(--brand-fg); } .form-control:focus { background-color: var(--brand-deep); border-color: var(--brand-link); color: var(--brand-fg); box-shadow: none; } .form-control::placeholder { color: var(--brand-muted); opacity: 1; } .form-label { color: var(--brand-fg); font-size: 20px; } /* the upload form's file input: the browser's "Choose file" button is a faint grey by default — restyle it on the brand palette and lift the selected file name off the deep backing */ .form-control[type="file"] { padding: 6px; height: auto; } .form-control[type="file"]::file-selector-button { background-color: var(--brand-muted); color: var(--brand-bg); border: 0; border-radius: 0; padding: 6px 12px; margin-right: 10px; font: inherit; cursor: pointer; } .alert { border: 0; border-radius: 0; padding: 20px; color: var(--brand-fg); } .alert.error, .alert-danger { background-color: var(--brand-danger); } .alert.success, .alert-success { background-color: var(--brand-success); } /* the category blurb sits under the pills — give it breathing room */ .catalog-blurb { margin-top: 20px; } /* catalog pills (the reference's nav-pills category tabs) */ .nav-pills { font-size: 24px; } .nav-pills .nav-link { color: var(--brand-fg); border-radius: 0; padding: .4rem .9rem; } .nav-pills .nav-link:hover, .nav-pills .nav-link:focus { color: var(--brand-fg); } .nav-pills .nav-link.active, .nav-pills .nav-link.active:hover { background-color: var(--brand-fg); color: var(--brand-bg); } /* the sort row under the category pills (play.ejs nav-small): the reference sets these to 20px against the pills' 24px */ .nav-pills.nav-small { font-size: 20px; margin-bottom: 24px; } .nav-pills.nav-small .nav-link { padding: .2rem .7rem; } /* pixelated covers and logo (thumb grid, cards) */ img.pixelated { image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; } /* avatars are stored as 16x16 sprites (internal/avatar, roadmap §16) and shown 4-8x up — scale them sharp, not smooth (dev tree, card comments) */ img[src^="/img/users/"] { image-rendering: -moz-crisp-edges; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; } /* catalog cards (views/thumb.ejs): .cart spaces every card (the reference's 60px), .cover-card is its .thumbnail look on a custom class — border frame + muted backing so covers sit on the dark ground */ .cart { margin-bottom: 60px; } .cover-card { border: 4px solid var(--brand-muted); border-radius: 0; padding: 0; background-color: var(--brand-muted); } .cover-card a { display: block; line-height: 0; } .stub { color: var(--brand-muted); } /* catalog search & grid tails (stage 4b, §12/§20): the no-JS search form above the grid, the no-results marker and the end-of-feed block */ .catalog-search { max-width: 420px; margin: 0 0 30px; } .catalog-more-wrap { margin: 10px 0 30px; } .catalog-more.loading { opacity: .7; pointer-events: none; } .no-results, .catalog-end { margin: 30px 0; } /* avatar editor (profile page, #12): the 256x256 canvas holds the 16x16 sprite at x16 (16px per sprite pixel); the palette bar is the 16 Sweetie16 colors. Both render sharp, not smoothed. */ .avatar-editor { margin-bottom: 24px; } .avatar-preview { margin-bottom: 10px; } #avatar-canvas { width: 256px; height: 256px; image-rendering: pixelated; background: #1a1c2c; border: 4px solid var(--brand-muted); cursor: pointer; } #avatar-palette { width: 256px; height: 16px; image-rendering: pixelated; cursor: pointer; } /* a value inside a muted line reads darker than its label: the date client.js fills in, and the language the card states */ .date, .lang { color: var(--brand-deep); } .tiny-label { font-size: 16px; } td { padding-right: 24px; } tr { vertical-align: top; } p { margin: 20px 0; } /* card page (stage 4, /play/{id}/{slug}): the inline styles of the reference player.ejs/cart.ejs re-typed as classes (§18) */ #game-border { width: 100%; overflow: hidden; } #game-cover { width: 100%; height: 100%; background-color: #1a1c2c; cursor: pointer; text-align: center; color: #fff; display: flex; justify-content: center; align-items: center; } #game-cover .game-cover-img { width: 100%; height: 100%; opacity: .2; } #canvas { width: 100%; height: 100%; image-rendering: pixelated; display: none; } .click-to-play { font-size: 34px; position: absolute; } .comments { table-layout: fixed; width: 100%; } .comment-user { width: 150px; text-align: center; word-wrap: break-word; } .comment-text { word-wrap: break-word; } /* /learn documentation (stage 4, §19): the goldmark output of the engine's learn.md inside the shared chrome. The doc keeps the site's pixel font (code included) and layers inline syntax colors on top; its markdown tables (RAM/VRAM maps, command/API listings) take their borders and header tint from the same palette as the rest of the site — no new colors. */ .learn { font-family: "04b03Regular", "Courier New", ui-monospace, monospace; font-size: 1.25rem; /* the pixel font reads best at the site's body size */ line-height: 1.6; color: var(--brand-fg); } .learn h1, .learn h2, .learn h3, .learn h4, .learn h5, .learn h6 { color: var(--brand-fg); } .learn pre { background: #1a1c2c; border: 1px solid var(--brand-deep); padding: 12px; overflow-x: auto; font-family: inherit; /* pixel code, matching the rest of the doc */ } .learn code { font-family: inherit; /* pixel, not Bootstrap's monospace reboot */ font-size: inherit; color: var(--brand-fg); /* default token = FG; the syntax spans below override */ } .learn pre code { color: var(--brand-fg); } /* inline-code syntax colors — the TIC-80 editor theme (palette indices): STRING=4 (#ffcd75), NUMBER=11 (#73eff7), API=5 (#a7f070), SIGN=13 (#94b0c2). KEYWORD=3 and COMMENT=14 are unused: the console help has no language keywords or comments. */ .learn .syntax-string { color: #ffcd75; } .learn .syntax-number { color: #73eff7; } .learn .syntax-api { color: #a7f070; } .learn .syntax-sign { color: #94b0c2; } .learn table { border-collapse: collapse; width: auto; /* fit the content, not the whole column */ margin: 20px 0; } .learn th, .learn td { border: 4px solid var(--brand-deep); /* gray grid, as before */ padding: 6px 12px; text-align: left; vertical-align: top; } .learn th { background-color: var(--brand-deep); color: var(--brand-fg); } .learn img { max-width: 100%; }