/* gameon.css * * Project stylesheet for GameOn. Linked from templates/baseCrispy.html, so it * loads on every page that extends baseCrispy.html (currently 133 templates). * * It loads after the vendored Bootstrap 4.0.0 and before {% block stylesheet %}, * so rules here override Bootstrap, and a page's own {% block stylesheet %} * still overrides rules here. * * Not to be confused with app.css, which is linked from base.html, base_new.html, * base_Emails.html and "base with BS Datepicker.html" only. * * Contents: the load-check marker, then the sticky footer rules. * Contents: the load-check marker, then the frozen-first-column rules for the * Inq results tables. */ :root { /* No visual effect. A custom property is inert unless something references it, so this renders nothing. It exists as a load check: in the console, getComputedStyle(document.documentElement).getPropertyValue('--gameon-css') returns 'loaded' only if this file was fetched AND accepted as CSS. */ --gameon-css: loaded; } /* ================================================================== Sticky footer ================================================================== Keeps the footer at the bottom of the window on short pages (the 404 page renders one heading, and the footer used to float partway up with a white gap under it), while leaving it directly below the content on pages that scroll. How it works: becomes a vertical flex column at least as tall as the window, the layout wrapper grows to fill whatever is left over, and the footer's automatic top margin absorbs the slack inside it. On a long page there is no slack, the auto margin resolves to zero, and the footer sits exactly where it does today. Scoped to "screen" on purpose. Making a flex container upsets page breaking in print, and vh units resolve against the paper size, so a min-height would reserve a whole sheet. The footer carries d-print-none and never prints anyway, so print has nothing to gain here and something to lose. Templates that override {% block stylesheet %} with @page rules, such as Ops/gamesheet.html, are therefore untouched by this block. ------------------------------------------------------------------ */ @media screen { body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; /* min-height rather than height. A percentage height only resolves against a parent with a real height, so this deliberately leaves html and body without one - see the note on h-100 below. */ min-height: 100vh; /* Mobile browsers resolve 100vh against the tallest viewport, i.e. with the address bar hidden, which makes a short page scroll by roughly the height of the browser chrome. dvh tracks the viewport that is actually visible. Browsers that do not know dvh ignore this line and keep the vh value above. */ min-height: 100dvh; } /* The layout wrapper in baseCrispy.html - the only element matched, since the containers the individual templates open are nested inside .col-12 rather than being children of . It takes up the leftover height, and becomes a column itself so the footer's auto margin has somewhere to work. NOTE: h-100 was removed from this element as part of this change. It was height: 100% !important, which never resolved because nothing above it had a height, so it had always been inert. It is not reinstated here: body has a min-height rather than a height, so a percentage height would still not resolve, and an !important declaration fighting flex-grow on this element is not something worth leaving to chance. */ body > .container { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /* Absorbs the leftover space above the footer. Resolves to zero when there is none, which is why long pages are unaffected. */ .gameon-footer { margin-top: auto; } }