*/
.gridcontainer {
display: grid;
grid-template-areas:
"header header"
"nav article"
"footer footer";
grid-template-rows: 0fr 1fr 0fr;
grid-template-columns: 200px 1fr;
grid-row-gap: 10px;
grid-column-gap: 10px;
min-height: 100vh;
margin: 0;
}
/* Grid components */
.gridheader {
grid-area: header;
position: sticky;
top: 0;
z-index: 1;
}
.gridnav {
grid-area: nav;
display: flex;
flex-direction: column;
position: sticky;
top: 0;
}
.gridarticle {
grid-area: article;
width: 90%;
}
.gridfooter {
grid-area: footer;
position: sticky;
bottom: 0;
}
header {
text-align: center;
color: white;
background-image: url("pics/header_background.jpg");
background-size: cover;
background-repeat: no-repeat;
}
footer {
text-align: left;
color: white;
background: #4CA1AF;
}
/* links in the footer */
footer a:link {
color: #99FFFF;
}
footer a:visited {
color: #99FFFF;
}
header, footer, article, nav, div {
padding: 1.2em;
}
/* top-level menu */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
height: 100%;
overflow: auto;
}
nav ul li {
text-align: left;
}
nav ul li a {
display: block;
color: #004080;
padding: 8px 16px;
text-decoration: none;
}
nav ul li a.active {
background-color: #4CA1AF;
color: white;
}
nav ul li a:hover:not(.active) {
background-color: #2C3E50;
color: white;
}
/*
2nd-level dropdown menu
based on
https://www.adam-bray.com/2017/02/17/easy-html-5-css-3-navigation-menu/
*/
nav ul li div.submenu {
display: none;
margin: 0;
opacity: 0;
position: absolute;
visibility: hidden;
z-index: 100;
}
nav ul li:hover > div.submenu {
display: block;
opacity: 1;
background: rgba(255,255,255,1);
visibility: visible;
}
/* Formatting within an article */
/* HTML5 makes h1 and h2 the same size within sections,
I compensate for this by colouring h1 differently */
.gridarticle h1 {
color: Navy;
}
.gridarticle h2,h3 {
font-style: italic;
}
/* For embed-ding webMathematica JSP-s like this:
*
*
*/
.gridarticle embed {
object-fit: contain;
width: 100%;
height: 100%;
}
/* Stack the layout on small devices/viewports. */
/*
@media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"nav"
"footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
*/