pageContent0823.css

File Contents

This style sheet controls the appearaance of my pages. These pages have four chief parts..

A header, with a dark blue background and which contains menus for navigating the site. The menus are generated by PHP, and they have a style file shown in this directory, menus.css.
A container div that holds the navigation area and main content in the <main> tag.
- The navigation area is light blue and its links are styled to be black with no underlining. These links are dynamically generated by the file navigation.php, which dynamically lists all files and folders in the directory you are currently viewing. Each item in that list is a link to that item.
- The main area is where the main content goes. It has a background of Cosmic Latte. Looking at white is much harder on the eyes.
A footer


/*
    pageContent0823.css
    Last change:  20 August 2023
    Copyright &copy;2023 by John M. Morrison
    This is the stylesheet producing the pages
    https://www.johnmmorrison.com/
    This is released under a GPLv3 license and is freely available
    for any non-commerical or educational use.
    No warranties or guarantees of any kind come with this code.
*/
.display
{
    text-align:center;
}
/* This creates the effect of centering subheadings inside of horizontal
   rules.  
*/
h1.subhead:before, h1.subhead:after, h2.subhead:before, h2.subhead:after
{
    content:" ";
    border-top:solid 1px black;
    align-self:center;
}
h1.subhead, h2.subhead
{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1em;
}
body
{
    margin:0;
    padding:0;
    background-color:#FFF8E7;
    height:100%;
    width:100%;
}
header
{
    text-align:center;
    position:absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color:#001A57;
    color:#FFF8E7;
    height:100px;
    z-index:1;
}
.container
{
    position:absolute;
    top:100px;
    left:0;
    width:100%;
    display:grid;
    grid-template-columns:  200px 1fr;
    padding-bottom:80px;
    overflow:scroll;
    font-family: 'EB Garamond', serif;
}
main
{
    padding-top:110px;
    padding:1em;
    overflow:scroll;
}
nav
{
    display:grid;
    grid-template-columns: 1fr;
    background-color:#99BADD;
    overflow:scroll;
    padding:1em;
    border-right:solid 1px black;
    border-bottom:solid 1px black;
}
nav a
{
    text-decoration:none;
    color:black;
}
.nav-menu
{
    position:relative;;

}
footer
{
    border-top: solid 1px black;
    background-color:#FFF8E7;
    text-align:center;
    position:fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height:75px;
    z-index:1;
    font-variant:small-caps;
}
pre code
{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    padding:1em;
    border-radius:1em;
}

table
{
    width:80%;
}
.terminal
{
    width:80%;
    background-color:black;
    color:#FFA500;
    margin-left:auto;
    margin-right:auto;
    padding:1em;
    border-radius:1em;
}
strong, b
{
    font-family:serif;
}