3ab60c67b6
- html { font-size: clamp(14px, 2.4vmin, 22px) } — single sliding scale; everything in rem (sidebar widths, h2 font-size, paddings) scales together. Phone rotation swaps width/height but vmin stays the same → 1rem stays the same → navbar/footer/h2 hold their size between portrait + landscape.
- :root --sidebar-w: 5rem (replaces the locally-scoped $sidebar-w SCSS var that lived inside @media blocks); --h2-col-w: 3rem for the rotated wordmark column in landscape. var(--sidebar-w) + var(--h2-col-w) are the only knobs that move the layout.
- Landscape container: margin-left = calc(var(--sidebar-w) + var(--h2-col-w)); margin-right = var(--sidebar-w). Applets are now clipped INSIDE the h2 column, so the rotated "BILLPOST" / "DASHBOARD" wordmark never has content bleeding behind it (the original complaint).
- h2 markup refactor across 13 templates: <span>BILL</span><span>POST</span> instead of <span>BILL</span>POST. Portrait styling: display: flex; first span flex 0 0 45% + --quaUser colour; second span flex 0 0 55% + --secUser inherited. Per-span text-align: justify + text-justify: inter-character keeps the inter-letter spacing within each span. Landscape resets the flex (single rotated wordmark, not split).
- Drop the four h2 font-size jumps (min-height: 400/500/800px) — single font-size: 3rem now scales fluidly via root rem. Drop the @media (orientation: landscape) and (max-width: 1100px) h1 override (rem-fluid handles cramped widths). Drop the entire @media (orientation: landscape) and (min-width: 1800px) sidebar-doubling block in _base.scss / _applets.scss / _bud.scss — the rem clamp ceiling already caps the size.
- _bud.scss + _applets.scss: bud-btn / bud-panel / bud-suggestions / gear-btn / applet menus all switch to var(--sidebar-w)-based positioning; landscape rules are single (no per-breakpoint duplication).
- Per-spec tradeoff: non-.btn-primary buttons (BYE / NVM / OK / kit-btn / etc.) inherit rem-fluid like everything else and will scale slightly w. viewport. User explicitly OK'd this — they don't need to stay px-fixed.
- 852 ITs + 24 layout/navbar/bud FTs green; existing geometry assertions are relative or categorical (not exact-px) so the rem clamp doesn't surface failures at the 800x1200 FT viewport.
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Opus 4.7 (1M context) <noreply@anthropic.com>
43 lines
1.9 KiB
HTML
43 lines
1.9 KiB
HTML
{% extends "core/base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title_text %}Game Kit{% endblock title_text %}
|
|
{% block header_text %}<span>Game</span><span>Kit</span>{% endblock header_text %}
|
|
|
|
{% block content %}
|
|
<div class="gameboard-page">
|
|
{% include "apps/applets/_partials/_gear.html" with menu_id="id_game_kit_menu" %}
|
|
{% include "apps/gameboard/_partials/_game_kit_applet_menu.html" %}
|
|
<div id="id_game_kit_applets_container">
|
|
{% include "apps/gameboard/_partials/_game_kit_sections.html" %}
|
|
</div>
|
|
</div>
|
|
|
|
<dialog id="id_tarot_fan_dialog">
|
|
<div class="tarot-fan-wrap">
|
|
<button id="id_fan_prev" class="fan-nav fan-nav--prev" aria-label="Previous card">‹</button>
|
|
<div id="id_fan_content" class="tarot-fan"></div>
|
|
<button id="id_fan_flip" class="btn btn-reveal fan-flip-btn" type="button">FLIP</button>
|
|
<div class="fan-stage-block sig-stat-block" id="id_fan_stage_block">
|
|
<button class="btn btn-reverse spin-btn" type="button">SPIN</button>
|
|
<button class="btn btn-info fyi-btn" type="button">FYI</button>
|
|
<div class="stat-face stat-face--upright">
|
|
<p class="stat-face-label">Emanation</p>
|
|
<ul class="stat-keywords" id="id_fan_stat_upright"></ul>
|
|
</div>
|
|
<div class="stat-face stat-face--reversed">
|
|
<p class="stat-face-label">Reversal</p>
|
|
<ul class="stat-keywords" id="id_fan_stat_reversed"></ul>
|
|
</div>
|
|
{% include "apps/gameboard/_partials/_sig_fyi_panel.html" with panel_id="id_fan_fyi_panel" panel_extra_attrs='style="display:none"' %}
|
|
</div>
|
|
<button id="id_fan_next" class="fan-nav fan-nav--next" aria-label="Next card">›</button>
|
|
</div>
|
|
</dialog>
|
|
{% endblock content %}
|
|
|
|
{% block scripts %}
|
|
<script src="{% static 'apps/epic/stage-card.js' %}"></script>
|
|
<script src="{% static 'apps/gameboard/game-kit.js' %}"></script>
|
|
{% endblock scripts %}
|