razzle dazzle
This commit is contained in:
parent
fa375aedac
commit
99be37ccb8
4 changed files with 181 additions and 34 deletions
35
html/tenno/divtable.css
Normal file
35
html/tenno/divtable.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
font-size:16px;
|
||||
line-height:2.0;
|
||||
display:table;
|
||||
margin:auto;
|
||||
border:1px solid var(--seven);
|
||||
.squarethirty {
|
||||
height:30px;
|
||||
width:30px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
97
html/tenno/razzledazzle.css
Normal file
97
html/tenno/razzledazzle.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue