Commit 4ef85687 authored by Dan Allen's avatar Dan Allen

merge !85

resolves #18 extract all colors into CSS variables
parents a97920f2 d702b660
......@@ -23,7 +23,8 @@ html {
}
body {
color: var(--color-text);
background: var(--body-background);
color: var(--body-font-color);
line-height: 1.6;
margin: 0;
}
......
.doc {
margin: 0 auto;
max-width: var(--width-doc-mobile);
max-width: var(--doc-max-width-mobile);
padding: 0 1rem 4rem;
color: #333;
color: var(--doc-font-color);
}
@media screen and (min-width: 1024px) {
.doc {
margin: 0 2rem;
max-width: var(--width-doc);
max-width: var(--doc-max-width);
}
}
......@@ -18,7 +18,7 @@
.doc h4,
.doc h5,
.doc h6 {
color: #191919;
color: var(--heading-font-color);
font-weight: normal;
line-height: 1.3;
margin: 1rem 0 0;
......@@ -64,11 +64,11 @@
.doc a,
.doc a:visited {
color: #1565c0;
color: var(--link-font-color);
}
.doc a:hover {
color: #104d92;
color: var(--link-hover-font-color);
}
.doc i.fa {
......@@ -78,14 +78,12 @@
/* what about td/th code? */
.doc p code {
font-size: 0.9em;
background-color: #fafafa;
background: var(--code-background);
padding: 0.075rem 0.25rem 0.125rem;
border-radius: 0.2rem;
/* font-weight: 300; */
}
.doc pre {
/* color: #000; */
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
......@@ -137,12 +135,12 @@
}
.doc table.tableblock th {
border-bottom: 2.5px solid #ddd;
border-bottom: 2.5px solid var(--table-border-color);
}
.doc table.tableblock td {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-top: 1px solid var(--table-border-color);
border-bottom: 1px solid var(--table-border-color);
}
.doc .halign-left {
......@@ -199,7 +197,7 @@
.doc .admonitionblock td.content {
padding: 1rem 1rem 0.75rem;
background-color: #fafafa;
background: var(--admonition-background);
width: 100%;
}
......@@ -214,28 +212,33 @@
font-weight: 500;
text-transform: uppercase;
border-radius: 0.45rem;
color: #fff;
color: var(--admonition-label-font-color);
transform: translate(-0.5rem, -50%);
}
.doc .admonitionblock.caution .icon {
background-color: #a0439c;
background-color: var(--caution-color);
color: var(--caution-on-color);
}
.doc .admonitionblock.important .icon {
background-color: #d32f2f;
background-color: var(--important-color);
color: var(--important-on-color);
}
.doc .admonitionblock.note .icon {
background-color: #217ee7;
background-color: var(--note-color);
color: var(--note-on-color);
}
.doc .admonitionblock.tip .icon {
background-color: #41af46;
background-color: var(--tip-color);
color: var(--tip-on-color);
}
.doc .admonitionblock.warning .icon {
background-color: #e18114;
background-color: var(--warning-color);
color: var(--warning-on-color);
}
.doc .admonitionblock .icon i {
......@@ -260,8 +263,7 @@
}
.doc .imageblock .title {
/* color: #4a4a4a; */
color: #191919;
color: var(--caption-font-color);
font-style: italic;
margin-top: 0.5rem;
}
......@@ -283,7 +285,7 @@
}
.doc h2:not(.discrete) {
border-bottom: 1px solid #ddd;
border-bottom: 1px solid var(--section-divider-color);
margin-left: -1rem;
margin-right: -1rem;
padding: 0.4rem 1rem 0.1rem;
......@@ -309,22 +311,22 @@
*/
#preamble .abstract blockquote {
background-color: #f0f0f0;
border-left: 5px solid #ddd;
color: #4a4a4a;
background: var(--abstract-background);
border-left: 5px solid var(--abstract-border-color);
color: var(--abstract-font-color);
font-size: 0.9em;
padding: 0.75em 1em;
}
.doc .quoteblock {
background: #fafafa;
border-left: 5px solid #4a4a4a;
color: #5d5d5d;
background: var(--quote-background);
border-left: 5px solid var(--quote-border-color);
color: var(--quote-font-color);
padding: 0.25rem 2rem 1.25rem;
}
.doc .quoteblock .attribution {
color: #8e8e8e;
color: var(--quote-attribution-font-color);
font-size: 0.8rem;
margin-top: 0.75rem;
}
......@@ -434,8 +436,7 @@
.doc .literalblock .title,
.doc .listingblock .title,
.doc .openblock .title {
/* color: #4a4a4a; */
color: #191919;
color: var(--caption-font-color);
font-size: 0.925rem;
font-style: italic;
letter-spacing: -0.005em;
......@@ -446,10 +447,9 @@
margin-top: 0;
}
/* Other possible colors #248232 (dark green) #2ba84a (brighter green), #f7ef99 (soft yellow), #f78e69 (orangey-grayish) */
.doc .exampleblock > .content {
background-color: #fff;
box-shadow: inset 0 0 1.75px #248232;
background: var(--example-background);
border: 1.5px solid var(--example-border-color);
padding: 0.75rem;
}
......@@ -458,12 +458,12 @@
}
.doc .sidebarblock {
background-color: #ebebeb;
background: var(--sidebar-background);
padding: 0.75rem 1.5rem;
}
.doc .sidebarblock > .content > .title {
color: #191919;
color: var(--caption-font-color);
font-size: 1.2rem;
font-weight: 500;
line-height: 1.3;
......@@ -482,8 +482,8 @@
.doc pre:not(.highlight),
.doc pre.highlight code {
background-color: #fafafa;
box-shadow: inset 0 0 1.75px #ddd;
background: var(--pre-background);
box-shadow: inset 0 0 1.75px var(--pre-border-color);
display: block;
overflow-x: auto;
padding: 0.75rem;
......@@ -497,7 +497,7 @@
.doc .listingblock code[data-lang]::before {
content: attr(data-lang);
display: none;
color: #8e8e8e;
color: var(--pre-annotation-font-color);
font-size: 0.75em;
font-weight: 500;
letter-spacing: 0.05em;
......@@ -513,7 +513,6 @@
}
.doc .dlist dt {
color: #4a4a4a;
font-style: italic;
}
......@@ -522,8 +521,7 @@
}
.doc .conum[data-value] {
/* border: 1px solid #989898; */
border: 1px solid #404040;
border: 1px solid currentColor;
border-radius: 100%;
display: inline-block;
font-family: "Roboto", sans-serif;
......@@ -571,10 +569,10 @@ b.button::after {
kbd {
display: inline-block;
font-size: 0.7rem;
background-color: #fafafa;
border: 1px solid #c1c1c1;
background: var(--kbd-background);
border: 1px solid var(--kbd-border-color);
border-radius: 0.25em;
box-shadow: 0 1px 0 #c1c1c1, 0 0 0 0.1em #fff inset;
box-shadow: 0 1px 0 var(--kbd-border-color), 0 0 0 0.1em var(--body-background) inset;
padding: 0.25em 0.5em;
vertical-align: text-bottom;
white-space: nowrap;
......
footer.footer {
font-size: 0.85rem;
background-color: #2c2c2c;
color: #8e8e8e;
padding: 0.5rem 1rem;
font-size: 0.75rem;
background-color: var(--footer-background);
color: var(--footer-font-color);
padding: 1.5rem;
}
.footer p {
......@@ -10,5 +10,5 @@ footer.footer {
}
.footer a {
color: #5d5d5d;
color: var(--footer-link-font-color);
}
......@@ -3,14 +3,14 @@ html.is-clipped--navbar {
}
body {
padding-top: var(--height-navbar);
padding-top: var(--navbar-height);
}
.navbar {
background-color: var(--color-navbar-bg);
color: var(--color-navbar-text);
background: var(--navbar-background);
color: var(--navbar-font-color);
font-size: 0.83333rem;
height: var(--height-navbar);
height: var(--navbar-height);
position: fixed;
top: 0;
width: 100%;
......@@ -24,7 +24,7 @@ body {
.navbar-brand .navbar-item:first-child,
.navbar-brand .navbar-item:first-child a {
color: var(--color-navbar-text);
color: var(--navbar-font-color);
font-size: 1.15rem;
}
......@@ -35,22 +35,22 @@ body {
@media screen and (min-width: 1024px) {
.navbar-end > .navbar-item,
.navbar-end .navbar-link {
color: var(--color-navbar-text);
color: var(--navbar-font-color);
}
.navbar-end > a.navbar-item:hover,
.navbar-end .navbar-link:hover {
background-color: var(--color-navbar-bg-focus);
color: var(--color-navbar-text);
background: var(--navbar-hover-background);
color: var(--navbar-font-color);
}
.navbar-end .navbar-link::after {
border-color: var(--color-navbar-text);
border-color: var(--navbar-font-color);
}
.navbar-item.has-dropdown:hover .navbar-link {
background-color: var(--color-navbar-bg-focus);
color: var(--color-navbar-text);
background: var(--navbar-hover-background);
color: var(--navbar-font-color);
}
}
......@@ -58,19 +58,19 @@ body {
align-items: stretch;
display: flex;
flex-shrink: 0;
height: var(--height-navbar);
height: var(--navbar-height);
}
.navbar-burger {
color: var(--color-navbar-text);
color: var(--navbar-font-color);
background: none;
border: none;
outline: none;
cursor: pointer;
display: block;
height: var(--height-navbar);
height: var(--navbar-height);
position: relative;
/* width: var(--height-navbar); */
/* width: var(--navbar-height); */
width: 2.75rem;
margin-left: auto;
padding: 0;
......@@ -81,7 +81,7 @@ body {
}
.navbar-burger span {
background-color: var(--color-navbar-text);
background: var(--navbar-font-color);
display: block;
height: 1px;
left: 50%;
......@@ -125,7 +125,7 @@ body {
.navbar-item,
.navbar-link {
color: var(--color-text);
color: var(--navbar-menu-font-color);
display: block;
line-height: 1.5;
padding: 0.5rem 1rem;
......@@ -160,7 +160,7 @@ body {
}
.navbar-divider {
background-color: #e1e1e1;
background-color: var(--navbar-menu-border-color);
border: none;
height: 1px;
margin: 0.25rem 0;
......@@ -173,20 +173,20 @@ body {
}
.navbar-menu {
background-color: #fff;
background: var(--navbar-menu-background);
padding: 0.5rem 0;
}
.navbar-menu.is-active {
display: block;
box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
max-height: var(--height-nav);
max-height: var(--nav-height);
overflow-y: auto;
}
.navbar-menu a.navbar-item:hover,
.navbar-menu .navbar-link:hover {
background-color: #fafafa;
background-color: var(--navbar-menu-hover-background);
}
}
......@@ -241,8 +241,8 @@ body {
}
.navbar-dropdown {
background-color: #fff;
border: 1px solid #e1e1e1;
background-color: var(--navbar-menu-background);
border: 1px solid var(--navbar-menu-border-color);
display: none;
font-size: 0.875rem;
top: 100%;
......@@ -266,18 +266,18 @@ body {
}
.navbar-dropdown a.navbar-item:hover {
background-color: #fafafa;
background-color: var(--navbar-menu-hover-background);
}
}
.navbar .button {
display: inline-flex;
align-items: center;
background-color: #fff;
border: 1px solid #e1e1e1;
background: var(--navbar-button-background);
border: 1px solid var(--navbar-button-border-color);
border-radius: 0.15rem;
height: 1.75rem;
color: #333;
color: var(--navbar-button-font-color);
padding: 0 0.75em;
white-space: nowrap;
}
.nav-container {
display: none;
position: fixed;
top: var(--height-navbar);
top: var(--navbar-height);
left: 0;
width: 100%;
font-size: 0.9375rem;
......@@ -14,7 +14,7 @@
@media screen and (min-width: 769px) {
.nav-container {
width: var(--width-nav);
width: var(--nav-width);
font-size: 0.875rem;
}
}
......@@ -30,24 +30,24 @@
}
.nav {
background-color: #fafafa;
background: var(--nav-background);
position: relative;
top: var(--height-toolbar);
height: var(--height-nav-mobile);
top: var(--toolbar-height);
height: var(--nav-height-mobile);
}
@media screen and (min-width: 769px) {
.nav {
box-shadow: 0.5px 0 3px #c1c1c1;
box-shadow: 0.5px 0 3px var(--nav-border-color);
}
}
@media screen and (min-width: 1024px) {
.nav {
top: var(--height-navbar);
top: var(--navbar-height);
box-shadow: none;
position: sticky;
height: var(--height-nav);
height: var(--nav-height);
}
}
......@@ -67,12 +67,12 @@ html.is-clipped--nav {
display: flex;
flex-direction: column;
/* help Chrome calculate the height correctly; must match .nav value minus height of drawer */
height: var(--height-nav-panel-mobile);
height: var(--nav-panel-height-mobile);
}
@media screen and (min-width: 1024px) {
.nav-panel-menu {
height: var(--height-nav-panel);
height: var(--nav-panel-height);
}
}
......@@ -85,7 +85,7 @@ html.is-clipped--nav {
}
.nav-panel-menu::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
background-color: var(--nav-border-color);
}
.nav-menu {
......@@ -100,7 +100,7 @@ html.is-clipped--nav {
.nav-menu h3.title {
margin: 0;
font-weight: 500;
color: #424242;
color: var(--nav-heading-font-color);
font-size: 1em;
padding: 0.25em 0 0.125em;
}
......@@ -175,9 +175,8 @@ html.is-clipped--nav {
.nav-panel-explore .context {
flex-shrink: 0;
color: #5d5d5d;
background-color: #fafafa;
box-shadow: 0 -1px 0 #e1e1e1;
color: var(--nav-muted-color);
box-shadow: 0 -1px 0 var(--nav-panel-divider-color);
padding: 0 0.25rem 0 0.5rem;
display: flex;
align-items: center;
......@@ -185,7 +184,7 @@ html.is-clipped--nav {
cursor: pointer;
line-height: 1;
font-size: 0.8125rem;
height: var(--height-drawer);
height: var(--drawer-height);
}
@media screen and (min-width: 1024px) {
......@@ -195,7 +194,7 @@ html.is-clipped--nav {
}
.nav-panel-explore.is-active .context {
box-shadow: 0 1px 0 #e1e1e1;
box-shadow: 0 1px 0 var(--nav-panel-divider-color);
}
.nav-panel-explore .context .version {
......@@ -208,8 +207,8 @@ html.is-clipped--nav {
.nav-panel-explore .components {
flex-grow: 1;
box-shadow: inset 0 1px 5px #e1e1e1;
background-color: #f0f0f0;
box-shadow: inset 0 1px 5px var(--nav-panel-divider-color);
background: var(--nav-secondary-background);
padding: 0.5rem;
margin: 0;
overflow-y: auto;
......@@ -246,15 +245,17 @@ html.is-clipped--nav {
}
.nav-panel-explore .component .version a {
border: 1px solid #b0b0b0;
border: 1px solid var(--nav-border-color);
border-radius: 0.25em;
color: #4a4a4a;
color: inherit;
opacity: 0.75;
white-space: nowrap;
padding: 0.05em 0.25em 0;
}
.nav-panel-explore .component .is-current a {
border-color: #4a4a4a;
border-color: currentColor;
opacity: 0.9;
font-weight: 500;
}
......
......@@ -10,10 +10,6 @@
}
}
.page-versions.is-active {
color: #333;
}
.page-versions .version-menu-toggle {
color: inherit;
font-family: inherit;
......@@ -21,7 +17,7 @@
background: url(../img/chevron.svg) no-repeat;
background-position: right 0.5rem top 50%;
background-size: auto 0.75em;
border: 1px solid transparent;
border: none;
outline: none;
cursor: pointer;
padding: 0.35rem 1.5rem 0.35rem 0.5rem;
......@@ -35,7 +31,7 @@
.page-versions .version-menu {
border: 1px solid transparent;
background-color: #f0f0f0;
background-color: var(--page-version-menu-background);
padding: 1.3rem 0.5rem 0.35rem;
position: absolute;
top: 0;
......@@ -58,7 +54,7 @@
}
.page-versions .version.is-missing {
color: #8e8e8e;
color: var(--page-version-missing-font-color);
font-style: italic;
text-decoration: none;
}
......@@ -71,9 +71,10 @@
footer.footer {
background: none;
border-top: 1px solid #ddd;
color: #5d5d5d;
border-top: 1px solid var(--panel-border-color);
color: var(--quote-attribution-font-color);
font-size: 0.9em;
padding: 0.5rem;
}
.footer * {
......
.toolbar {
color: #5d5d5d;
color: var(--toolbar-font-color);
align-items: center;
background-color: #fafafa;
box-shadow: 0 1px 0 #e1e1e1;
background-color: var(--toolbar-background);
box-shadow: 0 1px 0 var(--toolbar-border-color);
display: flex;
font-size: 0.75rem;
height: var(--height-toolbar);
height: var(--toolbar-height);
justify-content: flex-start;
position: sticky;
top: var(--height-navbar);
top: var(--navbar-height);
z-index: var(--z-index-toolbar);
}
......@@ -71,5 +71,5 @@
}
.toolbar .edit-this-page a {
color: #8e8e8e;
color: var(--toolbar-muted-color);
}
:root {
--color-text: #222;
--color-navbar-bg: #0a0a0a;
--color-navbar-bg-focus: #000;
--color-navbar-text: #fff;
--height-navbar: 3.25rem;
--height-drawer: 2.5rem;
--height-toolbar: 2.5rem;
--height-to-body: var(--height-navbar);
--height-min-body: calc(100vh - var(--height-to-body));
--height-nav: var(--height-min-body);
--height-nav-mobile: calc(var(--height-min-body) - var(--height-toolbar));
--height-nav-panel: calc(var(--height-nav) - var(--height-drawer));
--height-nav-panel-mobile: calc(var(--height-nav-mobile) - var(--height-drawer));
--width-nav: 16rem;
--width-doc: 54rem;
--width-doc-mobile: 40rem;
/* colors */
--color-white: #fff;
--color-smoke-10: #fefefe;
--color-smoke-30: #fafafa;
--color-smoke-50: #f5f5f5;
--color-smoke-70: #f0f0f0;
--color-smoke-90: #e1e1e1;
--color-gray-10: #c1c1c1;
--color-gray-30: #8e8e8e;
--color-gray-50: #808080;
--color-gray-70: #5d5d5d;
--color-jet-20: #4a4a4a;
--color-jet-30: #424242;
--color-jet-50: #333;
--color-jet-70: #222;
--color-jet-80: #191919;
--color-black: #000;
/* base */
--body-background: var(--color-white);
--body-font-color: var(--color-jet-70);
--panel-background: var(--color-smoke-30);
--panel-border-color: var(--color-smoke-90);
/* navbar */
--navbar-background: var(--color-jet-80);
--navbar-hover-background: var(--color-black);
--navbar-font-color: var(--color-white);
--navbar-button-background: var(--color-white);
--navbar-button-border-color: var(--panel-border-color);
--navbar-button-font-color: var(--body-font-color);
--navbar-menu-border-color: var(--panel-border-color);
--navbar-menu-background: var(--color-white);
--navbar-menu-hover-background: var(--color-smoke-50);
--navbar-menu-font-color: var(--body-font-color);
/* nav */
--nav-background: var(--panel-background);
--nav-border-color: var(--color-gray-10);
--nav-heading-font-color: var(--color-jet-30);
--nav-muted-color: var(--color-gray-70);
--nav-panel-divider-color: var(--color-smoke-90);
--nav-secondary-background: var(--color-smoke-70);
/* toolbar */
--toolbar-background: var(--panel-background);
--toolbar-border-color: var(--panel-border-color);
--toolbar-font-color: var(--color-gray-70);
--toolbar-muted-color: var(--color-gray-30);
--page-version-menu-background: var(--color-smoke-70);
--page-version-missing-font-color: var(--color-gray-30);
/* footer */
--footer-background: var(--color-smoke-90);
--footer-font-color: var(--color-gray-70);
--footer-link-font-color: var(--color-jet-80);
/* admonitions */
--caution-color: #a0439c;
--caution-on-color: var(--color-white);
--important-color: #d32f2f;
--important-on-color: var(--color-white);
--note-color: #217ee7;
--note-on-color: var(--color-white);
--tip-color: #41af46;
--tip-on-color: var(--color-white);
--warning-color: #e18114;
--warning-on-color: var(--color-white);
/* doc */
--doc-font-color: var(--color-jet-50);
--heading-font-color: var(--color-jet-80);
--section-divider-color: var(--panel-border-color);
--link-font-color: #1565c0;
--link-hover-font-color: #104d92;
--abstract-background: var(--color-smoke-70);
--abstract-font-color: var(--color-jet-20);
--abstract-border-color: var(--panel-border-color);
--admonition-background: var(--panel-background);
--caption-font-color: var(--heading-font-color);
--code-background: var(--panel-background);