/*! web-ignition v2.3.9 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
/*
Zebra Sections Layout -- Edge-to-edge blocks with alternating background colors
Usage:
HTML ():
header.responsive-avatar
nav
a.current
h1, h2, h4, img[alt=avatar]
main
section.night-mode[data-background=xyz]
h2
img
cite //author byline or date modified notice
div
blockquote
cite
p //paragraphs are left-aligned
footer
*/
body {
max-width: none;
padding: 0em;
margin: 0px;
}
body >header {
position: relative;
height: 300px;
text-shadow: 0px 0px 0.8em var(--colorCharcoal);
background: no-repeat center center;
background-size: cover;
background-color: gainsboro; /* fallback while image is loading */
border-bottom: 1px solid silver;
padding-top: 10px;
margin-bottom: 0px;
}
body >header #banner { /* alternate way to load in background with opacity fade in */
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: no-repeat center center;
background-size: cover;
}
body >header >nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
body >header nav a {
font-size: 0.9rem;
font-weight: bold;
text-transform: uppercase;
border-bottom: 3px solid;
padding: 3px 6px;
margin: 0px 10px;
}
body >header nav a.current {
cursor: default;
}
body >header nav+h1 {
padding-top: 40px;
}
body >header h1 {
padding-top: 60px;
}
body >header h1,
body >header h2 {
position: relative;
color: whitesmoke;
text-align: center;
}
body >header h2 {
font-size: 1.1rem;
letter-spacing: 0.25em;
text-transform: uppercase;
}
body >header img { /* floating avatar */
position: absolute;
left: 0px;
right: 0px;
bottom: -100px;
width: 200px;
background-color: white;
border: 1px solid silver;
border-radius: 1000px;
margin: 0px auto;
}
main >section {
text-align: center;
background-color: white;
padding: 50px 0px 60px 0px;
margin-bottom: 0px;
}
main >section[data-background] {
color: white;
text-shadow: 0px 0px 0.8em var(--colorCharcoal);
background: center center / cover no-repeat;
}
main >section[data-background] form,
main >section[data-background] table {
color: dimgray;
text-shadow: none;
}
main >section:first-child {
padding-top: 140px;
}
main >section:nth-child(even) {
background-color: whitesmoke;
}
main >section:last-child:not(:has(footer)) {
padding-bottom: 100px;
}
main >section >h2 {
font-size: 1.6rem;
margin-top: -8px;
margin-bottom: 20px;
}
main >section >h2 >i.font-icon {
font-size: 1em;
padding-right: 0.4em;
}
main >section >h2 img {
height: 0.8em;
padding: 0em 0.5em;
}
main >section >h2+cite {
font-style: normal;
font-size: 0.7rem;
display: block;
margin-top: -10px;
}
main >section >h3 {
margin-bottom: 20px;
}
main >section >h4 {
margin-bottom: 5px;
}
main >section >* {
max-width: 800px;
min-width: 250px;
padding: 0px 10px;
margin: 0px auto 30px auto;
}
main >section >*:last-child {
margin-bottom: 0px;
}
main >section >div >blockquote {
display: block;
width: 100%;
font-size: 1.2rem;
font-style: italic;
text-align: left;
border: 1px solid silver;
padding: 10px 25px;
margin: 0px 0px 20px 0px;
}
main >section >div >blockquote >cite {
display: block;
font-size: 0.8rem;
font-weight: 100;
font-style: normal;
letter-spacing: 0.05em;
text-align: right;
padding-top: 5px;
}
main >section >div >blockquote >figure {
margin-bottom: 0px;
}
main >section >div >blockquote >cite::before {
content: "\2014"; /* character: — (em dash) */
margin-right: 0.4em;
}
main >section >p {
text-align: left;
}
main >section >div:has(>ul, >ol, >menu) {
display: flex;
flex-direction: column;
align-items: center;
width: 80%;
max-width: 600px;
padding-bottom: 10px;
}
main >section >div:has(>ul, >ol, >menu) >header {
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 15px;
}
main >section >div >ul,
main >section >div >ol {
text-align: left;
}
main >section >div >menu {
list-style: none;
padding: 0px;
margin: 0px;
}
main >section >div:has(>ul, >ol, >menu) >* >li {
font-size: 1.1rem;
margin-bottom: 10px;
}
main >section >div:has(>ul, >ol, >menu) >* >li i.font-icon {
font-size: 1.1rem;
padding-right: 10px;
}
main >section >div >menu >li i.font-icon {
padding-left: 0px;
}
main >section >form {
display: inline-flex;
flex-direction: column;
color: dimgray;
background-color: gainsboro;
padding: 35px 40px;
margin: 0px 10px 30px 10px;
}
main >section >form >header {
font-size: 1.4rem;
font-weight: bold;
margin: -15px 0px 15px 0px;
}
main >section >figure img {
max-height: 550px;
}
main >section figure img.popup-image {
height: 120px;
max-width: none;
border: 5px solid silver;
}
main >section figure img.popup-image:hover {
border-color: dimgray;
}
main >section figure figcaption {
font-style: italic;
}
main >section a,
main >section code {
white-space: normal;
}
main >section >footer {
font-size: 1.8rem;
padding-top: 20px;
}
main >section >footer.flip-icons {
letter-spacing: 0.1em;
transform: scaleX(-1);
}
body >footer {
flex-direction: column;
text-align: center;
color: silver;
background-color: black;
}
body >footer >div {
padding: 5px 0px;
}
body >footer a {
color: silver;
}
body >footer >div:nth-child(n):not(:nth-child(-n)) { /* specificity hack */
text-align: center;
margin: 5px 0px;
}
body >footer >*:last-child {
margin-bottom: 0px;
}
body >footer i[data-icon],
body >footer i[data-brand] {
font-size: 1.6rem;
margin: 0px 5px;
}
/* Inegration */
body >main >section >ol.marble-checklist {
padding: 0px 10px;
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
main >section {
color: gainsboro;
background-color: var(--colorTar);
}
main >section:nth-child(even) {
background-color: var(--colorCharcoal);
}
}
/* Night Mode */
main >section.night-mode {
color: gainsboro;
background-color: black;
}
main:has(>section.night-mode:last-child)+footer {
background-color: var(--colorTar);
}
/* Mobile Devices */
@media (max-width: 667px) { /* selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower */
body >header.responsive-avatar {
img {
bottom: -50px;
width: 100px;
}
&+main >section:first-child {
padding-top: 80px;
}
}
}
/******************************************************************************/
/* Zebra Sections Layout -- customize header */
body >header {
background-image: url();
}
body >header nav#link-menu a,
body >header nav#link-menu a.current,
body >header nav#link-menu a:hover {
color: white;
}
body >header nav#link-menu a.current,
body >header nav#link-menu a:hover {
border-color: gold;
}