/* ******** PAGE LAYOUT ********************
⚠
***************************************** */
html {
height: 100%;
/* clip contents overflowing view width => no horiz scrollbar */
overflow-x: hidden;
}
body {
height: 100%;
}
section {
min-height: 100%;
position: relative;
}
header {
position: fixed; /* makes hdr sticky */
height: var(--header-height);
width: 100%;
}
article {
padding: calc(40px + var(--header-height)) 40px calc(40px + var(--footer-height)) 40px;
}
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: var(--footer-height);
}
/* ******** STYLES ********************** */
* {
padding: 0;
margin: 0;
}
html {
/* variable defs */
--header-height: 32px;
--footer-height: 18px;
font-size: 16px;
font-family: 'Montserrat-Regular', roboto;
--head-foot-font-color: navy;
--head-foot-bg-color: rgb(230, 240, 250); /* was rgb(200, 230, 230) */
}
section {
background-color: whitesmoke;
}
header {
color: var(--head-foot-font-color);
background: var(--head-foot-bg-color);
}
article {
color: black;
}
footer {
color: var(--head-foot-font-color);
background: var(--head-foot-bg-color);
font-size: 0.75rem;
text-align: right;
vertical-align: middle;
padding-right: 36px;
}
.copyright {
font-size: 1.2em; /* 20% larger than inherited from footer */
}
footer :last-child {
color: var(--head-foot-bg-color);
}