razzle dazzle

html/tenno/divtable.css

@@ -0,0 +1,35 @@
+/*
+ <div class="divTable">
+  <div class="divTableBody">
+   <div class="divTableRow">
+    <div class="divTableCell">
+     abcd1234
+*/
+.divTable {
+  font-size: 16px;
+  display: table;
+  margin: auto;
+  border: 1px solid #000;
+}
+.divTableRow {
+  display: table-row;
+}
+.divTableHeading {
+  display: table-header-group;
+}
+.divTableCell, .divTableHead {
+  vertical-align: middle;
+  display: table-cell;
+  border: 1px solid #000;
+}
+.divTableHeading {
+  display: table-header-group;
+  font-weight: bold;
+}
+.divTableFoot {
+  display: table-footer-group;
+  font-weight: bold;
+}
+.divTableBody {
+  display: table-row-group;
+}

html/tenno/index.css

@@ -70,6 +70,12 @@ h1 {
  padding-top:30px;
  transform:translate3d(0,0,0);
 }
+#main {
+ padding-top:30px;
+}
+#footer {
+ padding-top:30px;
+}
 .title-wrapper {
  text-align:center;
 }
@@ -78,8 +84,6 @@ h1 {
  margin-right:auto;
  padding:1px 20px;
  position:relative;
- z-index:2;
- min-width:270px;
 }
 .title {
  font-size:42px;
@@ -104,7 +108,6 @@ h1 {
 }
 .footdesc {
  color:var(--six);
- margin:20px 0 0;
  display:block;
  font-size:14px;
 }
@@ -127,34 +130,7 @@ h1 {
 .valign {
  vertical-align:middle;
 }
-.divTable {
+.squarethirty {
- font-size:16px;
+ height:30px;
- line-height:2.0;
+ width:30px;
- display:table;
- margin:auto;
- border:1px solid var(--seven);
 }
-.divTableRow {
- display:table-row;
-}
-.divTableHeading {
- display:table-header-group;
-}
-.divTableCell, .divTableHead {
- vertical-align:middle;
- display:table-cell;
- padding:5px 10px;
- border:1px solid var(--seven);
-}
-.divTableHeading {
- display:table-header-group;
- font-weight:bold;
-}
-.divTableFoot {
- display:table-footer-group;
- font-weight:bold;
-}
-.divTableBody {
- display:table-row-group;
-}
-

html/tenno/index.html

@@ -7,6 +7,8 @@
  <meta name="description" content="tenno">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" media="screen" href="index.css">
+ <link rel="stylesheet" media="screen" href="razzledazzle.css" />
+ <link rel="stylesheet" media="screen" href="divtable.css" />
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <link rel="alternate icon" href="favicon.png" type="image/png">
 </head>
@@ -25,8 +27,45 @@
  </header>
 
  <main id="main">
-  <div class="content middle">
+
+  <!-- raaazzle...daaazzle in Bill Murray/Stripes voice -->
+  <div class="divTable">
+   <div class="divTableBody">
+
+    <div class="divTableRow">
+     <div class="divTableCell squarethirty base-white" title="Base (white)"></div>
+     <div class="divTableCell squarethirty thayer-blue" title="Thayer Blue"></div>
+     <div class="divTableCell squarethirty pale-gray" title="Pale Gray"></div>
+     <div class="divTableCell squarethirty standard-gray" title="Standard Gray"></div>
+     <div class="divTableCell squarethirty light-gray-early" title="Light Gray (early)"></div>
+     <div class="divTableCell squarethirty light-gray" title="Light Gray"></div>
+     <div class="divTableCell squarethirty light-gray-late" title="Light Gray (late)"></div>
+     <div class="divTableCell squarethirty haze-gray" title="Haze Gray"></div>
       </div>
+    <div class="divTableRow">
+    <div class="divTableCell squarethirty haze-gray-late" title="Haze Gray (late)"></div>
+     <div class="divTableCell squarethirty ocean-gray-early" title="Ocean Gray (early)"></div>
+     <div class="divTableCell squarethirty ocean-gray" title="Ocean Gray"></div>
+     <div class="divTableCell squarethirty ocean-gray-late" title="Ocean Gray (late)"></div>
+     <div class="divTableCell squarethirty sea-blue" title="Sea Blue"></div>
+     <div class="divTableCell squarethirty navy-blue" title="Navy Blue"></div>
+     <div class="divTableCell squarethirty navy-gray" title="Navy Gray"></div>
+     <div class="divTableCell squarethirty dark-gray" title="Dark Gray"></div>
+    </div>
+    <div class="divTableRow">
+     <div class="divTableCell squarethirty dark-gray-conv" title="Dark Gray (conversion)"></div>
+     <div class="divTableCell squarethirty dull-black" title="Dull Black"></div>
+     <div class="divTableCell squarethirty deck-blue" title="Deck Blue"></div>
+     <div class="divTableCell squarethirty deck-gray" title="Deck Gray"></div>
+     <div class="divTableCell squarethirty flight-deck-earl" title="Flight Deck Stain (early)"></div>
+     <div class="divTableCell squarethirty flight-deck-mid" title="Flight Deck Stain (mid)"></div>
+     <div class="divTableCell squarethirty flight-deck-late" title="Flight Deck Stain (late)"></div>
+     <div class="divTableCell squarethirty" title="(unused cell)"></div>
+    </div>
+
+   </div>
+  </div>
+
  </main>
 
  <footer id="footer">

html/tenno/razzledazzle.css

@@ -0,0 +1,97 @@
+/* https://en.wikipedia.org/wiki/Dazzle_camouflage */
+:root {
+ --base-white:#ffffff;
+ --thayer-blue:#b0c6cb;
+ --pale-gray:#c6c9ce;
+ --standard-gray:#a3a6ab;
+ --light-gray-early:#a4a6a8;
+ --light-gray:#a9afb9;
+ --light-gray-late:#acacac;
+ --haze-gray:#878d96;
+ --haze-gray-late:#939393;
+ --ocean-gray-early:#626971;
+ --ocean-gray:#6e798d;
+ --ocean-gray-late:#7a7a7a;
+ --sea-blue:#52617c;
+ --navy-blue:#455168;
+ --navy-gray:#505050;
+ --dark-gray:#3c3c3c;
+ --dark-gray-conv:#363940;
+ --dull-black:#262626;
+ --deck-blue:#384864;
+ --deck-grey:#484848;
+ --flight-deck-early:#434a58;
+ --flight-deck-mid:#626d81;
+ --flight-deck-late:#384864;
+}
+
+/* CSP "style-src 'self'” blocks inline style="" by design */
+.base-white {
+ background-color:var(--base-white);
+}
+.thayer-blue {
+ background-color:var(--thayer-blue);
+}
+.pale-gray {
+ background-color:var(--pale-gray);
+}
+.standard-gray {
+ background-color:var(--standard-gray);
+}
+.light-gray-early {
+ background-color:var(--light-gray-early);
+}
+.light-gray {
+ background-color:var(--light-gray);
+}
+.light-gray-late {
+ background-color:var(--light-gray-late);
+}
+.haze-gray {
+ background-color:var(--haze-gray);
+}
+.haze-gray-late {
+ background-color:var(--haze-gray-late);
+}
+.ocean-gray-early {
+ background-color:var(--ocean-gray-early);
+}
+.ocean-gray {
+ background-color:var(--ocean-gray);
+}
+.ocean-gray-late {
+ background-color:var(--ocean-gray-late);
+}
+.sea-blue {
+ background-color:var(--sea-blue);
+}
+.navy-blue {
+ background-color:var(--navy-blue);
+}
+.navy-gray {
+ background-color:var(--navy-gray);
+}
+.dark-gray {
+ background-color:var(--dark-gray);
+}
+.dark-gray-conv {
+ background-color:var(--dark-gray-conv);
+}
+.dull-black {
+ background-color:var(--dull-black);
+}
+.deck-blue {
+ background-color:var(--deck-blue);
+}
+.deck-gray {
+ background-color:var(--deck-gray);
+}
+.flight-deck-early {
+ background-color:var(--flight-deck-early);
+}
+.flight-deck-mid {
+ background-color:var(--flight-deck-mid);
+}
+.flight-deck-late {
+ background-color:var(--flight-deck-late);
+}