h1{ font-size:2.5em;margin-top:2rem; } h2{ font-size:2em;} h3{ font-size:1.5em;margin-top:1.5rem; } h4{ font-size:.9em;margin-top:1rem;} h5{ font-size:.8em; } h6{ font-size:0.9em; } table > thead > tr > th {margin-top:4rem;} blockquote {font-style:italic;margin: 2rem 2rem 2rem 2rem;} /* ****************************/ /* HEADER BRANDING AND LINKS */ /* ****************************/ /* Center the header */ header {text-align:center;padding-left:0;padding-right:0;width:100%;margin-left:auto;margin-right:auto;} /* * -------------------------------------------------- * Simplest case: Branded name, nothing else * Doesn't act like a link. * -------------------------------------------------- */ header > p {color:var(--header-fg);background-color:var(--header-bg);font-size:var(--branding-height);font-weight:700;display:inline;} /* * -------------------------------------------------- * If you have more than one item, use an unordered list. * These styles show the first item with branding applied, * any number of links following, still slightly * larger than body text, and a last link that * looks like a button. * -------------------------------------------------- */ header > ul {line-height:var(--header-height);font-size:1.25rem;} header > ul {margin-left:0;padding-left:0;list-style-type:none;display:inline;} header > ul > li{display:inline;padding-right:1.5rem;} header > ul > li > a, header > ul > li > a:link, header > ul > li > a:visited {color:var(--header-fg);text-decoration:none;} header > ul > li > a:hover, header > ul > li > a:active {color:var(--header-fg);text-decoration:underline;} /* * -------------------------------------------------- * Special feature: First item in list has biggest * branding * -------------------------------------------------- */ header > ul > li:first-child > a {color:var(--header-fg);font-size:var(--branding-height);font-weight:700;} /* * -------------------------------------------------- * Special feature: Last item in list is styled like * a button. Just leave omit text after the * bullet character (asterisk) in your Markdown * if you don't want the effect. (Or just remove * these lines of CSS.) * -------------------------------------------------- */ /* Make the last item look and act like a button */ header > ul > li:last-child > a {border: 2px solid var(--header-fg);border-radius:.25rem;padding: .25rem;color: var(--header-fg);padding: 1em 1.5em;text-decoration: none;text-transform: uppercase;font-weight:bold;} header > ul > li:last-child > a:hover {color: var(--header-bg);background-color: var(--header-fg);cursor: pointer;} /* ******************************/ /* NAVBAR */ /* ******************************/ nav {text-align:center;padding:0;width:100%;margin:0;} nav{border-top:1px solid gray;border-bottom:1px solid gray;} nav > p > a {font-size:1.5em;margin-right:1em;font-weight:700;} nav > p {margin-top:0;line-height:var(--nav-height);} inav > p {background-color:var(--nav-bg); } nav {color:var(--header-fg;);background-color:var(--header-bg);} nav > p > a {color:var(--nav-fg);font-style:normal;} nav > ul > li {list-style-type:none;} nav > ul > li > a, nav > ul > li > a:link, nav > ul > li > a:visited {display:inline;text-decoration:none;color:var(--nav-fg);} /* For accessibility purposes show visual distinction when hovering or active */ nav > ul > li > a:hover, nav > ul > li > a:active {text-decoration:underline;} /* ******************************/ /* ARTICLE-MAIN PORTION OF TEXT*/ /* ******************************/ /* * -------------------------------------------------- * Special (and required) feature: An image * followed by a p followed by an h4 all have * reduced margin bottoms to position the required * photo credit (an h4) as a photo caption. * The CommonMark spec doesn't have a caption * provision at time of writing. * -------------------------------------------------- */ article > h1 + p{margin-bottom:.25rem;} article > h1 + p + img {margin-bottom:.25rem;} article > h1 + p + h4 {margin-top:.25rem;} /* * -------------------------------------------------- * Special (and required) feature: An image * following an H1 is 100% of the container size. * -------------------------------------------------- */ article > h1 + p > img {width:100%;} /* Style link like button. Expands when mouse hovers over it. */ article > h1 + p > a, article > h1 + p > a:link, article > h1 + p > a:visited {font-size:1em;color:white;background-color:black;padding:.25rem .5rem .25rem .5rem;border-radius:.25em;text-decoration:none;} article > h1 + p > a:hover, article > h1 + p > a:active {padding:.5rem .75rem .5rem .75rem;} /* * -------------------------------------------------- * Special feature: "MORE ABOUT" section showing * a column of teasers where there's an image * on the left, and to its left are an H3 title, * an H4 under it, and a paragraph of text. * Start with an h2 (the "WHAT'S NEW" title), * then each teaser consists of the H3, the H4, * and a normal paragraph. * There can be any number of these. * -------------------------------------------------- */ article > h2 {margin-bottom:1.5em;} article > h2 + ul {padding:0;margin:0;list-style-type:none;} article > h2 + ul li {max-width:60%;width:60%;margin-bottom:8rem;clear:left;} /* Leave some room on the right side of each image */ article > h2 + ul li > img {width:80%;margin:0%;float:left;} /* H3 is to the right of the image. */ article > h2 + ul > li > h3 {font-weight:bold;padding-right:25%;padding-top:1.5em;margin-left:85%;width:80%;} /* H4 under the H3 */ article > h2 + ul > li > h4 {font-weight:bold;margin-left:85%;width:80%;margin-top:0;} /* Paragraph under the H3 */ article > h2 + ul > li > p{margin-left:85%;width:80%;display:block;} /* Style link like button. Expands when mouse hovers over it. */ article > ul > li > p > a, article > ul > li > p > a:link, article > ul > li > p > a:visited {font-size:.65em;color:white;background-color:black;padding:.25rem .5rem .25rem .5rem;border-radius:.25em;text-decoration:none;} article > ul > li > p > a:hover, article > ul > li > p > a:active {padding:.5rem .75rem .5rem .75rem;} /* * -------------------------------------------------- * Special feature: "Featured Posts" section showing * 3 images in a row with captions underneath. * Start with an h3 ("Featured Posts, for example) * then a ul with 3 items consiting of an image * and text for it. * -------------------------------------------------- */ articel> h3 {margin-top:4rem;clear:left;} article > h3 + ul { padding:0; margin:0; list-style-type:none; } /* Leave some room on the right side of each image */ article > h3 + ul li > img { width:90%; margin-right:10%; } /* Each li is 1/3 as wide as the container. */ article > h3 + ul li { font-family:var(--informal); padding-top:.5rem; max-width:33.3%; width:33.3%; float:left; line-height:1em; } /* Start a new line after the 3rd column */ article > h3 + ul li:nth-child(3) { display:block; } /* Style link like a button. Expands when mouse hovers over it. */ article > h3 + ul li > a, article > h3 + ul li > a:link, article > h3 + ul li > a:visited {font-size:.65em;color:white;background-color:black;padding:.25rem .5rem .25rem .5rem;border-radius:.25em;text-decoration:none;} article > h3 + ul li > a:hover, article > h3 + ul li > a:active {padding:.5rem .75rem .5rem .75rem;} article > h1,article > h2 {color:var(--header-fg);font-weight:700;} article > h1 {text-align:center;padding:.5em;} article > h3 {font-weight:bold;padding-top:.5rem;padding-bottom:.5rem;} article > h4 {font-weight:normal;font-size:1em;color:gray;margin-bottom:1em; } /* Byline */ article > h4 > strong {font-weight:bold;color:black; } /* Byline */ article > p, article > ul, article > ol, article > li, article > dd, article > dl, article > hr { font-size:1.5rem; line-height:2.25rem; margin-bottom:1.5em; } article > p > strong {font-family:var(--informal);font-weight:700;} /* Override font rule for code */ article > p > code, article > code, article > pre, article > pre > code { font-family:var(--code); font-size:1em; overflow:auto; margin-bottom:1em; line-height:1.5em; } article > pre { padding-left: 1em;} article > p > a, article > p > a:link, article > p > a:visited {font-family:var(--informal);font-weight:bold;color:var(--trim-fg);text-decoration:underline;} article > p > a:hover, article > p > a:active {text-decoration:underline;color:var(--trim-bg);background-color:var(--trim-fg);} /* Article tables use colors same as header, but reversed in first row */ article > table {width:var(--full-page);margin-top:2rem;margin-bottom:3rem;} article > table > thead > tr > th {color:var(--header-bg);background-color:var(--header-fg);} article > table > td,th {padding:1rem;} article > table > tbody > tr > td {padding:1rem;border-bottom:.1px solid gray;} /* ******************************/ /* SIDEBAR (ASIDE TAG) */ /* ******************************/ /* aside, aside > p, aside > h2, aside > h3, aside > h4 {margin-left:1rem;margin-right:1rem;padding-left:1rem;padding-right:1rem;} aside > h2 {margin-top:2em;font-size:1rem;color:var(--header-fg);text-align:center;margin:0;} aside > h2 + p > img {text-align:center;border-radius:50%;margin:0;padding:0;} aside > h3 {color:var(--trim-fg);} aside > h4 {color:var(--header-bg);background-color:var(--header-fg)} aside {padding:2rem;} aside {margin: 2rem;} aside > p {margin-top:1rem;margin-bottom:1rem;} aside > p {margin:0;margin-0;} iaside > p {padding-left:1rem;padding-right:1rem;} asdie > p {text-align:center;} aside > h2 {padding:0;text-align:center;}; */ aside {text-align:center;} aside > h2 {color:var(--trim-fg);font-size:1.5rem;font-weight:bold;margin-top:2em;margin-bottom:1em;} aside > p > img {width:60%;border-radius:50%;} aside > blockquote {text-align:justify;padding-left:1rem;padding-right:1rem;} /* ******************************/ /* FOOTER */ /* ******************************/ /* FOOTER */ footer {margin-left:var(--left-start);border-top:2px solid var(--trim-fg);font-size:1.5rem;text-align:center;margin-top:4rem;margin-bottom:2rem;padding-top:2rem;} footer > h2 {font-size:1rem;font-weight:bold;text-align:center;} footer > p {margin-bottom:.5em;} /* Color of links in main rows (body) of table */ footer > p > a:link, footer > p > a:visited {color:var(--header-fg);text-decoration:none;} footer > p > a:hover, footer > p > a:active {color:var(--header-fg);text-decoration:underline;}