/*! web-ignition v2.4.9 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
/*
Color Blocks Layout -- Two columns of colorful blocks
Usage:
HTML ():
header
aside
h1
h2
main
div
section
h2
p
div
section
h2
p
footer
div
*/
body {
max-width: 1000px;
color: dimgray;
background-color: white;
}
body >header {
text-align: left;
margin-bottom: 0px;
}
body table tbody tr:hover {
color: dimgray;
background-color: aliceblue;
}
main {
display: flex;
min-height: 300px;
padding-bottom: 10px;
margin: 0px -5px;
}
main >div {
margin-bottom: 10px;
}
main >div:nth-child(1) {
flex: 0 0 65%; /* wide 1st column */
}
main >div:nth-child(2) {
flex: 0 0 35%; /* narrrow 2nd column */
}
main >div:first-child:last-child {
flex: auto;
}
main >div >section {
border-width: 2px;
border-style: solid;
padding: 10px 10px 20px 10px;
margin: 0px 5px 10px 5px;
}
main >div >section h2 {
position: relative;
font-size: 1.2rem;
color: white;
padding: 3px 8px;
margin: -10px -10px 15px -10px;
}
main >div >section h2 i.font-icon {
position: absolute;
top: 0.04em;
right: 0.3em;
font-size: 1.3em;
color: white;
opacity: 1 !important;
}
main >div >section >aside {
text-align: center;
border: 2px solid;
border-color: inherit;
padding: 0.5em;
}
main >div >section >aside figure {
margin-bottom: 0px;
}
main >div >section >aside figure img {
border: 1px solid black;
}
main >div >section nav {
text-align: right;
margin-bottom: 20px;
}
main >div >section >fieldset {
max-width: none;
border: 1px solid;
border-color: inherit;
border-radius: 2px;
padding: 10px;
margin-bottom: 1em;
}
main >div >section >fieldset >legend {
font-size: 1rem;
font-weight: normal;
border: 1px solid;
border-color: inherit;
border-radius: 2px;
padding: 0px 8px;
}
main >div >section >fieldset i.font-icon {
font-size: 1.1rem;
margin: 0px 8px;
}
main >div >section >fieldset >label:last-child input {
margin-bottom: 0.3em;
}
main >div >section >fieldset >label input {
max-width: none;
}
body >footer {
color: whitesmoke;
background-color: silver;
padding: 20px 20px;
}
body >footer a, body >footer a:visited {
font-weight: bold;
color: whitesmoke;
border-color: whitesmoke;
}
body >footer a:hover {
color: white;
border-color: white;
background-color: transparent;
outline: none;
}
/* Mobile devices */
@media (max-width: 667px) { /* selects iPhone SE (3rd gen) landscape and anything narrower */
body >header { text-align: center; }
body >header >aside { float: none; margin: 0px; }
body >header.forkable >aside { text-align: left; }
body >header >aside button { font-size: 0.8rem; }
body >header >h1 { font-size: 1.6rem; }
body >header >h1+h2 { font-size: 1.3rem; }
main { flex-direction: column; }
main >div:nth-child(n) { flex: auto; }
}
/******************************************************************************/
/* Color Blocks Layout -- customize colors */
/* Block colors (2 columns * 3 blocks --> 6 colors) */
main >div:nth-child(1) >section:nth-child(3n+1) { border-color: rosybrown; }
main >div:nth-child(1) >section:nth-child(3n+1) h2 { background-color: rosybrown; }
main >div:nth-child(1) >section:nth-child(3n+2) { border-color: cadetblue; }
main >div:nth-child(1) >section:nth-child(3n+2) h2 { background-color: cadetblue; }
main >div:nth-child(1) >section:nth-child(3n+3) { border-color: silver; }
main >div:nth-child(1) >section:nth-child(3n+3) h2 { background-color: silver; }
main >div:nth-child(2) >section:nth-child(3n+1) { border-color: lightslategray; }
main >div:nth-child(2) >section:nth-child(3n+1) h2 { background-color: lightslategray; }
main >div:nth-child(2) >section:nth-child(3n+2) { border-color: darkkhaki; }
main >div:nth-child(2) >section:nth-child(3n+2) h2 { background-color: darkkhaki; }
main >div:nth-child(2) >section:nth-child(3n+3) { border-color: darkseagreen; }
main >div:nth-child(2) >section:nth-child(3n+3) h2 { background-color: darkseagreen; }