/*! web-ignition v2.2.9 ~~ https://github.com/center-key/web-ignition ~~ MIT License */
/*
Vertical Bars layout -- traditional boring old-school webpage
Usage:
HTML ():
header
nav
a
h1
h2
footer
*/
body {
max-width: 900px;
border: 50px solid;
border-top: none;
border-bottom: none;
padding: 5px 25px;
}
body >header {
padding-top: 5px;
margin-bottom: 50px;
}
body >header nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 30px;
}
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 h1 {
font-size: 2.2rem;
text-align: left;
margin-bottom: 15px;
}
body >header h2 {
text-align: left;
}
main {
min-height: calc(100vh - 350px);
}
body >footer {
padding: 30px 0px 0px 0px;
}
body >footer #social-buttons {
margin-bottom: 10px;
}
/* Mobile devices */
@media (max-width: 667px) { /* selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower */
body { border: none; padding: 5px 15px; }
body >header h1 { font-size: 1.7rem; }
}
/******************************************************************************/
/* Vertical Bars layout -- customize colors */
html { background-color: dimgray; }
body { color: whitesmoke; background-color: black; border-color: firebrick; } /* font, body, bars */
body >header nav a { color: white; }
body >header nav a.current, body >header nav a:hover { border-color: gold; }
body >footer { color: silver; }