|
|
/* Entire page */ /* Screen size selectors match Foundation's for consistency */ @media screen and (max-width: 39.9375em) { body { background-image: var(--image-bg-sm); }
#main-nav { display: none; }
#main-container { border-top: 3px solid var(--color-border-header); } #site-container { width: 100%; } #site-title-container { margin: auto; } }
@media screen and (min-width: 40em) { body { background-image: var(--image-bg-md); } #site-container { width: 100%; } }
@media screen and (min-width: 64em) { body { background-image: var(--image-bg-lg); } #site-container { width: 60%; } }
::-moz-selection { color: var(--color-fg-accent); background-color: var(--color-bg-accent); }
::selection { color: var(--color-fg-accent); background-color: var(--color-bg-accent); }
#site-container { margin: auto; /*background-color: rgba(0,0,0,0.65);*/ background-color: var(--color-bg-main); max-width: 1080px; margin: 25px auto; }
body { background-color: var(--color-bg-page); color: var(--color-fg-main); background-attachment: var(--bg-attach); background-repeat: var(--bg-repeat); background-size: var(--bg-size); }
#site-container a:hover { text-decoration: underline; }
/* Site header */
#site-header ::-moz-selection, .tag ::-moz-selection { color: var(--color-fg-main); background-color: var(--color-bg-main); }
#site-header ::selection, .tag ::selection { color: var(--color-fg-main); background-color: var(--color-bg-main); }
header a:hover, header a:active, header a:focus { text-decoration: underline; color: var(--color-fg-main); }
header a, header a:link, header a:visited, { color: var(--color-fg-main); text-decoration: none; }
#site-header a:hover, #site-header a:active { text-decoration: none; }
#site-header { background-color: var(--color-bg-accent); color: var(--color-fg-accent); }
#site-header header { align-items: center; padding: 1rem; vertical-align: middle; }
#site-thumbnail { display: block; /* Tested working with multiple sites - no vertical shift when thumbnail loads */ max-height: 5.8rem; max-width: 5.8rem; padding-left: 0; padding-right: 0.5rem; border-radius: var(--thumbnail-radius); }
#site-header header div { padding-left: var(--site-header-padding); }
#site-title, #site-tagline { text-transform: uppercase; font-weight: bold; display:inline-block; color: var(--color-fg-accent); line-height: 1; }
#site-title, #site-tagline, #site-title-container { flex-shrink: 1; }
#site-title { padding-bottom: var(--site-title-padding-bottom); font-size: var(--site-title-size); }
#site-tagline { font-size: 1.2rem; padding: 0.5rem 0; border-top: 1px solid var(--color-fg-accent); }
:not(pre) > code { background-color: var(--color-bg-code); color: var(--color-bg-accent); overflow-wrap: break-word; white-space: pre-wrap; display: inline-block; padding: 0 0.2rem; font-size: 0.9rem; border: none; }
pre code { padding-left: 0; padding-right: 0; }
a code, code a { color: var(--color-bg-accent); }
del code { text-decoration: line-through; }
a:hover code, code a:hover { text-decoration: underline; }
pre, pre code { background-color: var(--color-bg-alt) !important; color: var(--color-fg-alt); font-size: 0.9rem; border: none; }
pre { padding: 1.2rem; overflow-x: auto; margin-bottom: 1em; }
#main-container { padding-top: 15px; margin: auto; }
#page-header h1 { font-weight: bold; margin-top: 0; }
main { padding: 1rem 0.7rem; }
main a, main a:hover, .callout a, .callout a:hover { color: var(--color-bg-accent); }
main a, .callout a { font-weight: bold; }
main header a, main header a:link, main header a:visited, main header a:hover, main header a:active, main header a:focus { color: var(--color-fg-main); }
article { margin-bottom: 1rem; }
.callout { border: 1px solid var(--color-bg-accent); display: block; background-color: var(--color-bg-alert); padding: 1rem; margin-bottom: 0.5rem; max-width: 100%; width: 100%; color: var(--color-fg-main); }
.callout a, .callout a:hover, .callout code { color: var(--color-fg-alert-link); }
.callout p:last-child { margin-bottom: 0; }
.callout p:first-child { margin-top: 0; }
/* Sidebar */
aside { padding-bottom: 20px; }
aside a:link:not(.button), aside a:visited:not(.button) { color: var(--color-fg-main); text-decoration: none; }
aside a:hover, aside a:active, aside a:focus { text-decoration: underline; }
/* Footer */
footer { padding: 0.5rem 1rem; background-color: var(--color-bg-alt); color: var(--color-fg-alt); border-top: 3px solid var(--color-border-main); }
footer p { margin-bottom: 0; }
footer a { color: var(--color-bg-accent); }
footer .row { align-items: center; }
#social-icons { font-size: 1.5rem; }
#social-icons a:link, #social-icons a:visited, #social-icons a:active, #social-icons a:focus { color: var(--color-fg-alt); text-decoration: none; }
#social-icons a:hover { color: var(--color-bg-accent); }
#social-icons .fab:not(.fa-square):not(.fa-circle)::before, #social-icons .fas:not(.fa-square):not(.fa-circle)::before, #social-icons .far:not(.fa-square):not(.fa-circle)::before { color: var(--color-bg-alt); }
#social-icons .fab:not(.fa-square):not(.fa-circle):hover::before, #social-icons .fas:not(.fa-square):not(.fa-circle):hover::before, #social-icons .far:not(.fa-square):not(.fa-circle):hover::before { color: var(--color-fg-accent); }
#main-nav { background-color: var(--color-bg-alt); border-top: 2px solid var(--color-border-nav); border-bottom: 2px solid var(--color-border-main); }
.dropdown.menu > li { margin-right: 0.5rem; }
#off-canvas-toggle { z-index: 1; position: sticky; position: -webkit-sticky; left: 0; top: 0; width: 3rem; height: 3rem; }
.off-canvas { background-color: var(--color-bg-alt); color: var(--color-fg-alt); }
.drilldown li { width: 100%; max-width: 100%; }
.dropdown.menu .button { text-align: left; }
.is-dropdown-submenu { border-color: var(--color-fg-alt); }
/* Foundation is this specific, so I need to be too */
.drilldown .is-drilldown-submenu { background-color: var(--color-bg-alt); }
.dropdown.menu > li.is-dropdown-submenu-parent > a::after { border-top-color: var(--color-fg-alt); }
.dropdown.menu > li.is-dropdown-submenu-parent > a:hover::after, .dropdown.menu > li.is-dropdown-submenu-parent > a:active::after, .dropdown.menu > li.is-dropdown-submenu-parent > a:focus::after, .dropdown.menu > li.is-dropdown-submenu-parent > a.active::after { border-top-color: var(--color-fg-accent); }
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a::after, .is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a::after { border-left-color: var(--color-fg-alt); border-right-color: var(--color-fg-alt); }
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a:hover::after, .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a:active::after, .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a:focus::after, .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a.active::after { border-left-color: var(--color-fg-accent); background-color: var(--color-bg-accent); }
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a.button { padding-left: 1rem; }
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a:hover::after, .is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a:active::after, .is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a:focus::after, .is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a.active::after { border-left-color: var(--color-fg-accent); border-right-color: var(--color-fg-accent); background-color: var(--color-bg-accent); margin-right: 1rem; }
.drilldown .is-drilldown-submenu-parent a::after { border-left-color: var(--color-fg-alt); }
.drilldown .is-drilldown-submenu-parent a:hover::after, .drilldown .is-drilldown-submenu-parent a:active::after, .drilldown .is-drilldown-submenu-parent a:focus::after, .drilldown .is-drilldown-submenu-parent a.active::after { border-left-color: var(--color-fg-accent); }
.drilldown .is-drilldown-submenu-parent a::before { border-right-color: var(--color-fg-alt); }
.drilldown .is-drilldown-submenu-parent a:hover::before, .drilldown .is-drilldown-submenu-parent a:active::before, .drilldown .is-drilldown-submenu-parent a:focus::before, .drilldown .is-drilldown-submenu-parent a.active::before { border-right-color: var(--color-fg-accent); }
|