html {

color: #000;                /* HTML5BP sets it to #222 why?? */

} /* —————————————————————–

optimal line length for reading is 50-75 characters, add some 
left margin for menu and logo, this should probably be updated
for responsiveness based on viewport and whatnot
----------------------------------------------------------------- */

body {

margin-left: 11em; 
max-width: 51em;

} body > footer {

padding: 0 2px 0 4px;
background: #eee;

}

/* —————————————————————–

To make footers go to the bottom of the *window* and stay there
regardless of page content length.

Finally, an example that works!
https://stackoverflow.com/questions/54598718/how-can-i-get-my-content-to-be-scroll-able-while-maintaining-my-header-and-foote
----------------------------------------------------------------- */

html { height: 100%; } body {

height: 100%;
display: flex;
flex-direction: column;

} main {

flex: auto;
flex-grow: 1;
overflow-y: auto;
/* ------------------------------------------------------------- 
   This section is to push the scrollbar from the middle (right)
   of the window to the side where scrollbars normally live.
   Should use sass and variables for all the margin/padding numbers
   ------------------------------------------------------------- */
box-sizing: border-box;
margin-left: -11em;         
padding-left: 11em;
width: 100vw;
padding-right: calc(100vw - 62rem);

/* padding-right: -moz-calc(100% - 62rem);

padding-right: -webkit-calc(100% - 62rem);    */

} /* —————————————————————–

The tabindex/javascript trick used to allow spacebar scrolling of 
content parceled in the <main> also outlines the element in blue,
but since we didn't tabindex it for accessibility reasons, the 
blue is just confusing.
----------------------------------------------------------------- */

main:focus { outline: none; }

/* —————————————————————–

positioning navigation elements
----------------------------------------------------------------- */

top-corner-logo {

position: fixed;
margin-left: -10.5rem;
width: 9.5rem;
top: 0.5rem;

}

site-nav { /* bottom left corner */

width: 9.5rem;
position: fixed;
margin-left: -10.5rem;
border-top: none;
bottom: 0.5rem;

} page-nav { /* top left corner */

width: 6.5rem;
position: fixed;
margin-left: -10.5rem;
border-top: none;
top: 4rem;

} nav#site-nav a, nav#page-nav a {

display: block;
text-align: right;
text-decoration: none;
font: Optima, Gill Sans, Arial, sans-serif;
font-weight: bold;
padding: 2px 4px 2px 0;
margin-top: 2px;
background: #ddd;
color: #000;

} nav#site-nav a:hover, nav#page-nav a:hover { background: bbf; } nav#site-nav a:active, nav#page-nav a:active { background: fbb; } /* —————————————————————–

If the current page is in the menu, it should not be a link so
it is not an href and we differentiate it visually as well.  
----------------------------------------------------------------- */

nav#site-nav a.nav-self, nav#page-nav a.nav-self {

background: linear-gradient(to right, #ddd, #ddd, white, white);

} /* —————————————————————–

If the current page is in the directory of a menu item, it should
still highlight as a link.
----------------------------------------------------------------- */

nav#site-nav a.nav-sub, nav#page-nav a.nav-sub {

background: linear-gradient(to right, #ddd, white);

} nav#site-nav a.nav-sub:hover, nav#page-nav a.nav-sub:hover {

background: linear-gradient(to right, #bbf, white);

} nav#site-nav a.nav-sub:active, nav#page-nav a.nav-sub:active {

background: linear-gradient(to right, #fbb, white);

}

/* —————————————————————–

Styles for the pager buttons recommended by the 
jekyll-paginate-v2 author, modified to make the whole boxed 
area clickable and more clickability feedback.
----------------------------------------------------------------- */

nav.blog-pager ul {

text-align: center;
list-style: none;
padding-left: 0;

} nav.blog-pager ul li {

display: inline;

} nav.blog-pager ul li a {

display: inline-block;
border: 1px solid black;
padding: 10px 15px;
margin: 0 1px;

} nav.blog-pager ul li a:hover:not(), nav.blog-pager ul li a:focus:not() {

border-color:blue;
color: blue;

} nav.blog-pager ul li a:active:not() {

border-color: red;
color: red;

}

/* —————————————————————–

styling the list of categories and tags 
----------------------------------------------------------------- */

.categories, .tags {

display: inline-block;
color: black;
padding: 0.5px 6px;
border-radius: 3px;

} .categories { box-shadow: inset 0 0 6px #000; } .tags { box-shadow: inset 0 0 6px #666; } a.categories, a.tags,

.categories:hover, .tags:hover, .categories:active, .tags:active { text-decoration: none; } .categories:hover { box-shadow: inset 0 0 7.5px #009; } .tags:hover { box-shadow: inset 0 0 7.5px #55f; } .categories:active { box-shadow: inset 0 0 15px f00; } .tags:active { box-shadow: inset 0 0 15px f55; } .catag:last-child:after { /* line break after tags and categories*/

content: ' ';
display: block;

}

/* —————————————————————–

Styles for the blog lists
----------------------------------------------------------------- */

article > header > h3, article > header > h1 { margin-bottom: 0; }

.related h2 { margin-bottom: 0; } .related ul { margin-top: 0; }