Clean up colors and docs

This commit is contained in:
Patrick Marsceill
2018-11-18 11:07:45 -05:00
parent b52f66a2ee
commit f0bb38e1b8
12 changed files with 106 additions and 25 deletions

View File

@@ -7,6 +7,11 @@
box-sizing: border-box;
}
::selection {
color: $white;
background: $link-color;
}
html {
@include fs-4;
}

View File

@@ -15,11 +15,11 @@
font-size: inherit;
font-weight: 500;
line-height: 1.5;
color: $purple-200;
color: $link-color;
text-decoration: none;
vertical-align: baseline;
cursor: pointer;
background-color: #f7f7f7;
background-color: $base-button-color;
border-width: 0;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
@@ -38,7 +38,7 @@
&:hover,
&.zeroclipboard-is-hover {
color: $purple-300;
color: darken($link-color, 2%);
}
&:hover,
@@ -46,13 +46,13 @@
&.zeroclipboard-is-hover,
&.zeroclipboard-is-active {
text-decoration: none;
background-color: #f4f4f4;
background-color: darken($base-button-color, 1%);
}
&:active,
&.selected,
&.zeroclipboard-is-active {
background-color: #ededed;
background-color: darken($base-button-color, 3%);
background-image: none;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
@@ -83,7 +83,7 @@
&:active,
&.zeroclipboard-is-hover,
&.zeroclipboard-is-active {
color: $grey-dk-100;
color: darken($link-color, 4%);
text-decoration: none;
background-color: transparent;
box-shadow: inset 0 0 0 3px $grey-lt-300;

View File

@@ -7,7 +7,8 @@ $body-text-color: $grey-lt-300;
$body-heading-color: $grey-lt-000;
$nav-child-link-color: $grey-dk-000;
$link-color: lighten($purple-000, 8%);
$btn-primary-color: $purple-200;
$link-color: $blue-000;
$btn-primary-color: $blue-200;
$base-button-color: $grey-dk-250;
$code-background-color: $grey-dk-250;

View File

@@ -17,6 +17,7 @@
// $grey-dk-000: #959396;
// $grey-dk-100: #5c5962;
// $grey-dk-200: #44434d;
// $grey-dk-250: #302d36 !default;
// $grey-dk-300: #27262b;
//
// $grey-lt-000: #f5f6fa;
@@ -39,9 +40,16 @@
// $green-200: #009c7b;
// $green-300: #026e57;
//
// $body-text-color: $grey-dk-100;
// $body-heading-color: $grey-dk-300;
// $link-color: $purple-000;
// $body-background-color: $white !default;
// $sidebar-color: $grey-lt-000 !default;
// $code-background-color: $grey-lt-000 !default;
// $body-text-color: $grey-dk-100 !default;
// $body-heading-color: $grey-dk-300 !default;
// $nav-child-link-color: $grey-dk-100 !default;
// $link-color: $purple-000 !default;
// $btn-primary-color: $purple-100 !default;
// $base-button-color: #f7f7f7 !default;
//
// //
// // Media queries in pixels

View File

@@ -45,7 +45,7 @@
position: absolute;
margin-top: 0.3em;
margin-left: -0.8em;
color: $border-color;
color: rgba($body-text-color, 0.3);
content: "- ";
}

View File

@@ -39,7 +39,7 @@
display: block;
width: 300px;
margin-top: $gutter-spacing;
background: $white;
background: lighten($body-background-color, 1%);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
}
}
@@ -65,7 +65,7 @@
box-shadow: none;
+ .search-icon {
fill: $purple-000;
fill: $link-color;
}
}
@@ -108,6 +108,7 @@
padding-left: $sp-3;
&:hover {
background-color: $grey-lt-000;
color: $body-heading-color;
background-color: darken($body-background-color, 2%);
}
}

View File

@@ -59,6 +59,7 @@ $body-heading-color: $grey-dk-300 !default;
$nav-child-link-color: $grey-dk-100 !default;
$link-color: $purple-000 !default;
$btn-primary-color: $purple-100 !default;
$base-button-color: #f7f7f7 !default;
//
// Media queries in pixels

View File

@@ -25,7 +25,7 @@ td {
padding-right: $sp-3;
padding-bottom: $sp-2;
padding-left: $sp-3;
background-color: lighten($body-background-color, 1%);
background-color: lighten($body-background-color, 2%);
border-bottom: $border rgba($border-color, 0.5);
border-left: $border $border-color;

View File

@@ -16,6 +16,10 @@
color: $grey-dk-200 !important;
}
.text-grey-dk-250 {
color: $grey-dk-250 !important;
}
.text-grey-dk-300 {
color: $grey-dk-300 !important;
}
@@ -130,6 +134,10 @@
background-color: $grey-dk-200 !important;
}
.bg-grey-dk-250 {
background-color: $grey-dk-250 !important;
}
.bg-grey-dk-300 {
background-color: $grey-dk-300 !important;
}