Description: An absolutely positioned templated intended for HD monitors. Files: console.html, console.css

console.css

/**
 * Console
 *
 * An absolutely positioned template intended for an HD monitor. Does NOT
 * support mobile by design.
 *
 * @link https://gist.github.com/earth3300/2715962ab786f3781a6e0e9f1b993f07
 * File: console.css
 * Created: 2020-02-10
 * Update: 2020-02-14
 * Time: 20:57 EDT
 * ID: ENG-001
 */

@media all {

  html.console {
    min-width: 960px;
    min-height: 540px;
  }

  html.console,
  html.console * {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
  }

  html.console,
  html.console body,
  html.console main,
  html.console .grid,
  html.console .inner,
  html.console footer {
    bottom: 0;
  }

  html.console body {
    margin: 0;
    font: 12pt/1.5 sans-serif;
    text-rendering: optimizeLegibility;
    left: 7px;
    right: 7px;
    top: 7px;
    bottom: 7px;
  }

  html.console .site-logo {
    z-index: 100;
    position: absolute;
    height: 50px;
    width: 50px;
    left: 10px;
    top: 10px;
  }

  html.console-hd {
    min-width: 960px;
    min-height: 540px;
  }

  html.console .statistic a {
    position: relative !important;
  }

  html.console body,
  html.console main {
    border-radius: 4px;
  }

  html.console h1 {
    display: none;
  }

  html.console body {
    font-size: 90%;
  }

  html.console .grid h1 {
    margin-top: -24pt;
  }

  html.console .grid h2 {
    padding-top: 2%;
    font-size: 125%;
    font-weight: 500;
  }

  html.console .site-logo {
    opacity: 0.67;
  }
  html.console .grid .inner > *:not(a) {
    opacity: 0.5;
  }

  html.console .grid .inner :not(h2) a {
    opacity: 0.5;
  }

  html.console .statistic,
  html.console .statistic > * {
    opacity: 1.0 !important;
  }

  html.console .grid h2 {
    top: 1%;
  }

  html.console .grid a {
    padding: inherit;
  }

  html.console .statistic {
    font-size: 24pt;
    height: 24pt;
    font-weight: 500;
  }

  html.console .middle {
    top: 50%;
    transform: translateY(-52%);
  }

  html.console footer {
    height: 12pt;
    left: 5px;
    right: 5px;
    font-size: 85%;
    font-weight: normal;
  }

  html.console .bottom {
    top: initial;
    bottom: 6%;
  }

  html.console p:last-child {
    margin-bottom: 0 !important;
  }

  html.console .grid {
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
  }

  html.console .unit > .inner {
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
  }

  html.console .grid .control .unit > .inner {
    padding: 3.333%;
  }

  html.console .size1of3 {
    width: 33.333%;
    height: 33.333%;
  }

  html.console .size3of4 {
    width: 75%;
  }

  html.console .hgh1of1 {
    height: 100%;
  }

  html.console .hgh1of3 {
    height: 33.333%;
  }

  html.console .hgh2of3 {
    height: 66.667%;
  }

  html.console .pos2x1,
  html.console .pos2x2,
  html.console .pos2x3 {
    left: 33.333%;
  }

  html.console .pos3x1,
  html.console .pos3x2,
  html.console .pos3x3 {
    left: 66.666%;
  }

  html.console .pos1x2,
  html.console .pos2x2,
  html.console .pos3x2 {
    top: 33.333%;
  }

  html.console .pos1x3,
  html.console .pos2x3,
  html.console .pos3x3 {
    top: 66.667%;
  }

  html.console .border {
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 3px;
  }

  html.console nav,
  html.console nav a {
    position: absolute;
    left: 50%;
    width: 150px;
    margin-left: -75px;
    top: initial;
    bottom: 0;
  }

  html.console nav {
    height: 35px;
    opacity: 0.3;
    text-align: center;
    border: 1px solid #666;
    border-bottom: initial;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }

  html.console nav a {
    height: 35px;
    line-height: 43px;
  }

  html.console nav:hover {
    opacity: 0.5;
    background-color: inherit;
  }

  html.console nav:hover a {
    opacity: 0.8;
  }

  html.console .control {
    font-size: small;
  }

  html.console #notice {
    display: none;
  }

  html.console .notice h3 {
    display: block;
  }

  html.console .notice {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
  }

  html.console .notice {
    text-align: center;
    color: #cecece;
    background-color: #2b2b2b;
    opacity: 0.85;
  }

  html.console .notice > div {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -55px;
    display: block;
  }

  html.console .notice p {
    max-width: initial;
  }

  html.console .hide {
    display: none;
  }
}

/* theme shading (color for screen) */
@media screen {

  html.console {
    background-color: hsl(30, 2.3%, 14.9%); /* #2c2b2a; */
    color: hsl(30, 3.4%, 88.6%); /* #e3e2e1; */
  }

  html.console body {
    border: 1px solid hsl(30, 33.3%, 20%); /* #432; */
    background-color: hsl(30, 3%, 12.9%); /* #222120; */
    box-shadow: none;
  }

  html.console .border {
    border: 1px solid #444;
  }

  html.console .unit .inner {
    background-color: hsl(30, 2.3%, 16.9%); /* #2c2b2a; */
  }

  html.console .border.dashed {
    border: 1px dashed hsl(30, 33.3%, 20%);  !important; /* #432; */
  }

  html.console .statistic {
    color: hsl(96, 50%, 50%); /* #73bf40; */
  }

  html.console a {
    outline: none !important;
  }

  html.console a:link {
    color: inherit;
  }

  html.console a:hover {
    color: inherit;
  }

  html.console a:focus {
    color: hsl(125, 50%, 50%);
  }

  html.console a:active {
    color: hsl(150, 50%, 50%);
  }

  html.console a:visited {
    color: inherit;
  }

  html.console nav:hover {
    background-color: #222;
  }
  /* theme shading end */
}

@media print {
  html {
    filter: invert(100%);
  }
}

console.html

<!--
Title: Console
Description: An absolutely positioned templated intended for HD monitors
Created: 2020-02-10
Updated: 2020-02-13
Time: 10:57 EDT
File: index.html
-->
<!DOCTYPE html>
<html class="console" lang="en-CA">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Console</title>
<meta name="robots" content="noindex,nofollow"/>
<link rel="stylesheet" href="console.css">
</head>
<body>
<a href="/" title="Home">
<div class="site-logo">
<div class="inner">
<img src="/site-logo.png" alt="Site Logo" width="50" height="50" />
</div>
</div>
</a>
<main class="grid">
<h1 style="display: none;">Console</h1>
<div class="unit size1of3 pos1x1">
<div class="inner border dashed">
  <h2>Grid 1x1</h2>
    <span id="grid-1x1" class="statistic middle" title="Title 1x1">---</span>
  <footer class="bottom">
  <a href="#" target="_blank" title="#">Footer</a>
  </footer>
</div>
</div>
<div class="unit size1of3 pos1x2">
<div class="inner border dashed">
  <h2>Grid 1x2</h2>
    <span id="grid-1x2" class="statistic middle" title="Title 1x2">---</span>
  <footer class="bottom">
  <a href="#" title="#" target="_blank">Footer</a>
  </footer>
</div>
</div>
<div class="unit size1of3 pos1x3">
<div class="inner border dashed">
  <h2>Grid 1x3</h2>
    <span id="grid-1x3" class="statistic middle" title="#">---</span>
  <footer class="bottom">
  <a href="#" target="_blank">Footer</a>
  </footer>
</div>
</div>
<div class="unit size1of3 pos2x1">
<div class="inner border dashed">
  <h2>Grid 2x1</h2>
    <span id="grid-2x1" class="statistic middle" title="#">---</span>
  <footer class="bottom">
  <a href="#" target="_blank">Footer</a>
  </footer>
</div>
</div>
<div class="unit size1of3 pos2x2">
<div class="inner border dashed">
  <h2>Grid 2x2</h2>
    <span id="grid-2x2" class="statistic middle" title="#">---</span>
  <footer class="bottom">
  <a href="#" target="_blank">Footer</a>
  </footer>
</div>
</div>
<div class="unit size1of3 pos2x3">
<div class="inner border dashed">
  <h2>Grid 2x3</h2>
    <span id="grid-2x3" class="statistic middle">--</span>
  <footer class="bottom hide">
  <a href="#" target="_blank">Footer</a>
  </footer>
</div>
</div>
<div class="unit size1of3 pos3x1">
<div class="inner border dashed">
  <h2>Grid 3x1</h2>
    <span id="grid-3x1" class="statistic middle" title="#">---</span>
  <footer class="bottom">
  <a href="#" target="_blank">Footer</a>
  </footer>
</div>
</div>
<div class="unit size1of3 pos3x2">
<div class="inner border dashed">
  <h2>Grid 3x2</h2>
    <span id="grid-3x2" class="statistic middle">
    <span data-precip="01" class="hide">---</span>
    <span data-precip="02" class="visible">---</span>
    <span data-precip="03" class="hide">---</span>
    <span data-precip="04" class="hide">---</span>
    <span data-precip="05" class="hide">---</span>
    <span data-precip="06" class="hide">---</span>
    <span data-precip="07" class="hide">---</span>
    <span data-precip="08" class="hide">---</span>
    <span data-precip="09" class="hide">---</span>
    <span data-precip="10" class="hide">---</span>
    <span data-precip="11" class="hide">---</span>
    <span data-precip="12" class="hide">---</span>
    </span>
  <footer class="bottom">
  <a href="#" target="_blank">Footer</a>
  </footer>
</div>
</div>
<div class="unit size1of3 pos3x3">
<div class="inner border dashed">
  <h2>Grid 3x3</h2>
    <span id="grid-3x2" class="statistic middle">---</span>
  <footer class="bottom">
  <a href="#" target="_blank">Footer</a>
  </footer>
</div>
</div>
</main>
<script>
</script>
<div id="notice" class="notice screen-small">
<div class="inner">
<h3>Best viewed on a tablet or better</h3>
<p>Minimum Screen 960 x 540</p>
<p>View in landscape mode</p>
</div>
</div>
<nav><a href="../" title="Up one level">^</a></nav>
</body>
</html>