arcusiridis/assets/css/page.css

/* 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);
}