added transparency and reduced width of main content
This commit is contained in:
parent
6fc21e9e39
commit
eebb4d350b
395
assets/css/page.css
Normal file
395
assets/css/page.css
Normal file
@ -0,0 +1,395 @@
|
||||
/* 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%;
|
||||
}
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user