arcusiridis/assets/css/page.css

399 lines
8.7 KiB
CSS
Raw Normal View History

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