changed dashboard color palette to be WCAG AA compliant

This commit is contained in:
Ro 2018-11-07 23:24:37 -05:00
parent 77f4a2721d
commit 7b6d849b10
6 changed files with 140 additions and 128 deletions

View file

@ -1357,8 +1357,8 @@ sub {
} }
sup { sup {
top: -0.55em; top: -0.55em;
background: #d1ccc7; background: #c1cdd7;
color: #968c80; color: #374857;
border-radius: 2px; border-radius: 2px;
padding: 0 2px 0 2px; padding: 0 2px 0 2px;
margin: 0 2px 0 0; margin: 0 2px 0 0;
@ -1535,7 +1535,7 @@ template {
h1, h1,
h2, h2,
h3 { h3 {
color: #643c32; color: #b2cce5;
} }
h1 { h1 {
font-size: 2em; font-size: 2em;
@ -1556,13 +1556,13 @@ h3 {
**/ **/
html, html,
body { body {
background-color: #968c80; background-color: #374857;
font: 400 1em 'Apercu', Helvetica, Arial, sans-serif; font: 400 1em 'Apercu', Helvetica, Arial, sans-serif;
height: 100%; height: 100%;
} }
a { a {
font: 300 1em $titleType; font: 300 1em $titleType;
color: #643c32; color: #b2cce5;
text-decoration: underline; text-decoration: underline;
-moz-transition: all 0.1s linear; -moz-transition: all 0.1s linear;
-webkit-transition: all 0.1s linear; -webkit-transition: all 0.1s linear;
@ -1570,11 +1570,11 @@ a {
transition: all 0.1s linear; transition: all 0.1s linear;
} }
a:hover { a:hover {
color: #7c4a3e; color: #bad1e8;
} }
svg.icons { svg.icons {
width: 20px; width: 20px;
fill: #643c32; fill: #b2cce5;
} }
#loader { #loader {
position: fixed; position: fixed;
@ -1586,7 +1586,7 @@ svg.icons {
justify-content: center; justify-content: center;
} }
#loader i { #loader i {
color: #ce9134; color: #f5ab35;
} }
.blog-container { .blog-container {
width: 100%; width: 100%;
@ -1599,7 +1599,7 @@ svg.icons {
.main-container section header { .main-container section header {
width: 100%; width: 100%;
height: 100px; height: 100px;
background-color: #6b6258; background-color: #27323d;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -1617,29 +1617,29 @@ svg.icons {
.main-container section header #header-wrapper #header-two label#the-title { .main-container section header #header-wrapper #header-two label#the-title {
font-family: 'Apercu-Mono'; font-family: 'Apercu-Mono';
font-size: 2em; font-size: 2em;
color: #968c80; color: #374857;
text-decoration: none; text-decoration: none;
display: block; display: block;
} }
::-moz-selection { ::-moz-selection {
background-color: #cd898d; background-color: #fc6399;
color: #eee; color: #f2f1ef;
} }
::selection { ::selection {
background-color: #cd898d; background-color: #fc6399;
color: #eee; color: #f2f1ef;
} }
::-o-selection { ::-o-selection {
background-color: #cd898d; background-color: #fc6399;
color: #eee; color: #f2f1ef;
} }
::-ms-selection { ::-ms-selection {
background-color: #cd898d; background-color: #fc6399;
color: #eee; color: #f2f1ef;
} }
::-webkit-selection { ::-webkit-selection {
background-color: #cd898d; background-color: #fc6399;
color: #eee; color: #f2f1ef;
} }
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
.main-container .content #the-intro { .main-container .content #the-intro {
@ -1666,7 +1666,7 @@ svg.icons {
font-size: 3.3rem; font-size: 3.3rem;
} }
.main-container .header .header-desc span a { .main-container .header .header-desc span a {
color: #eee; color: #f2f1ef;
width: 250px; width: 250px;
font-weight: 300; font-weight: 300;
display: inline-block; display: inline-block;
@ -1676,7 +1676,7 @@ svg.icons {
margin: 0 0 50px 0; margin: 0 0 50px 0;
} }
.main-container .header .header-desc #the-intro { .main-container .header .header-desc #the-intro {
color: #643c32; color: #b2cce5;
opacity: 0; opacity: 0;
font: 400 1.8em $titleType; font: 400 1.8em $titleType;
display: inline-block; display: inline-block;
@ -1746,7 +1746,7 @@ svg.icons {
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-index-one #dash-index-title, #dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-index-one #dash-index-title,
#dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-index-two #dash-index-title { #dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-index-two #dash-index-title {
color: #eee; color: #f2f1ef;
font: 400 2em $titleType; font: 400 2em $titleType;
vertical-align: top; vertical-align: top;
} }
@ -1759,20 +1759,20 @@ svg.icons {
#dash-index-content #dash-index #dash-index-wrapper #dash-menu a { #dash-index-content #dash-index #dash-index-wrapper #dash-menu a {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
background: #897e71; background: #32414e;
width: 30%; width: 30%;
padding: 5px; padding: 5px;
border-radius: 3px; border-radius: 3px;
color: #643c32; color: #b2cce5;
margin: 0 10px 10px 0; margin: 0 10px 10px 0;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-menu a:hover { #dash-index-content #dash-index #dash-index-wrapper #dash-menu a:hover {
background: #7a7065; background: #2c3a46;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-menu a svg { #dash-index-content #dash-index #dash-index-wrapper #dash-menu a svg {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
fill: #eee; fill: #f2f1ef;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-menu a label { #dash-index-content #dash-index #dash-index-wrapper #dash-menu a label {
display: inline-block; display: inline-block;
@ -1782,7 +1782,7 @@ svg.icons {
cursor: pointer; cursor: pointer;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent { #dash-index-content #dash-index #dash-index-wrapper #dash-recent {
background: #a1988d; background: #455b6e;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 5px 0 0 0; padding: 5px 0 0 0;
@ -1792,7 +1792,7 @@ svg.icons {
margin: 50px auto; margin: 50px auto;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list h3 { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list h3 {
color: #897e71; color: #32414e;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a {
font-size: 1.5em; font-size: 1.5em;
@ -1832,13 +1832,13 @@ svg.icons {
} }
.folio-hub .project-list span.drag-handle { .folio-hub .project-list span.drag-handle {
padding: 10px; padding: 10px;
color: #ce9134; color: #f5ab35;
cursor: pointer; cursor: pointer;
} }
.folio-hub .project-list .project-item { .folio-hub .project-list .project-item {
width: 100%; width: 100%;
display: inline-block; display: inline-block;
background: #38332e; background: #28343e;
padding: 5px; padding: 5px;
margin-bottom: 10px; margin-bottom: 10px;
border-radius: 5px; border-radius: 5px;
@ -1848,10 +1848,10 @@ svg.icons {
transition: all 0.3s linear; transition: all 0.3s linear;
} }
.folio-hub .project-list .project-item:hover { .folio-hub .project-list .project-item:hover {
background: #544d45; background: #3b4e5e;
} }
.upload-list { .upload-list {
color: #d1ccc7; color: #c1cdd7;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
width: 260px; width: 260px;
@ -1868,7 +1868,7 @@ svg.icons {
width: 400px; width: 400px;
height: 70px; height: 70px;
background: $form-background; background: $form-background;
color: #d1ccc7; color: #c1cdd7;
text-align: center; text-align: center;
padding: 40px 0 0; padding: 40px 0 0;
font-size: 12px; font-size: 12px;
@ -1920,7 +1920,7 @@ svg.icons {
padding: 0; padding: 0;
} }
#bm-content #bookmark-display .bookmark-list .bookmark-entry { #bm-content #bookmark-display .bookmark-list .bookmark-entry {
background: #2a2723; background: #1e272f;
width: 50%; width: 50%;
height: 500px; height: 500px;
background-size: cover; background-size: cover;
@ -1940,13 +1940,13 @@ svg.icons {
display: block; display: block;
font-size: 0.5em; font-size: 0.5em;
padding: 10px; padding: 10px;
background: #968c80; background: #374857;
border-radius: 5px; border-radius: 5px;
} }
#bm-content #bookmark-display .bookmark-list #paginate-control { #bm-content #bookmark-display .bookmark-list #paginate-control {
width: 100%; width: 100%;
height: 300px; height: 300px;
background: #544d45; background: #3b4e5e;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -1961,7 +1961,7 @@ svg.icons {
} }
#bm-content #bookmark-display .bookmark-list #paginate-control #paginate label { #bm-content #bookmark-display .bookmark-list #paginate-control #paginate label {
padding: 5px; padding: 5px;
color: #ce9134; color: #f5ab35;
font-size: 2.2em; font-size: 2.2em;
} }
#bm-content #bookmark-display .bookmark-list #paginate-control #paginate a { #bm-content #bookmark-display .bookmark-list #paginate-control #paginate a {
@ -1987,7 +1987,7 @@ svg.icons {
font: 400 1.5em $bodyType; font: 400 1.5em $bodyType;
} }
#work-content #header #header-two p span { #work-content #header #header-two p span {
color: #643c32; color: #b2cce5;
} }
#work-content #work-display { #work-content #work-display {
padding: 0; padding: 0;
@ -2000,8 +2000,8 @@ svg.icons {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
background-size: cover; background-size: cover;
background-color: #ce9134; background-color: #f5ab35;
color: #ce9134; color: #f5ab35;
} }
#work-content #work-list .work-item span { #work-content #work-list .work-item span {
font: 600 0.7em $titleType; font: 600 0.7em $titleType;
@ -2011,7 +2011,7 @@ svg.icons {
} }
#work-content #work-contact #contact-form label { #work-content #work-contact #contact-form label {
font: 600 0.8em $titleType; font: 600 0.8em $titleType;
color: #cd898d; color: #fc6399;
margin: 0 0 15px 0; margin: 0 0 15px 0;
display: block; display: block;
} }
@ -2030,17 +2030,17 @@ svg.icons {
} }
#work-content #work-contact #contact-info label#request-status { #work-content #work-contact #contact-info label#request-status {
font: 600 0.8em $titleType; font: 600 0.8em $titleType;
color: #cd898d; color: #fc6399;
margin: 0 0 15px 0; margin: 0 0 15px 0;
display: block; display: block;
text-transform: uppercase; text-transform: uppercase;
} }
#work-content #work-contact #contact-info p { #work-content #work-contact #contact-info p {
font: 400 1em $bodyType; font: 400 1em $bodyType;
color: #ce9134; color: #f5ab35;
} }
#work-content #work-contact #contact-info p i { #work-content #work-contact #contact-info p i {
color: #cd898d; color: #fc6399;
} }
#project-content { #project-content {
width: 100%; width: 100%;
@ -2052,11 +2052,11 @@ svg.icons {
} }
#project-content #project-display #project-info span { #project-content #project-display #project-info span {
font: 400 2em $titleType; font: 400 2em $titleType;
color: #eee; color: #f2f1ef;
} }
#project-content #project-display #project-desc { #project-content #project-display #project-desc {
font: 300 1.2em $bodyType; font: 300 1.2em $bodyType;
color: #ce9134; color: #f5ab35;
} }
#project-content #project-images { #project-content #project-images {
margin: 10px 0 0 0; margin: 10px 0 0 0;
@ -2088,8 +2088,8 @@ input[type=text] {
padding: 5px; padding: 5px;
font: 1em 'Apercu-Mono'; font: 1em 'Apercu-Mono';
display: inline-block; display: inline-block;
background-color: #897e71; background-color: #32414e;
color: #643c32; color: #b2cce5;
} }
textarea { textarea {
border: 0; border: 0;
@ -2099,8 +2099,8 @@ textarea {
} }
button, button,
input[type=submit] { input[type=submit] {
background: #cd898d; background: #fc6399;
color: #b9595f; color: #fb1e6c;
font: 1em 'Apercu-Mono'; font: 1em 'Apercu-Mono';
border-radius: 3px; border-radius: 3px;
position: relative; position: relative;
@ -2109,29 +2109,29 @@ input[type=submit] {
} }
select { select {
font: 1em 'Apercu-Mono'; font: 1em 'Apercu-Mono';
border: 1px solid #643c32; border: 1px solid #b2cce5;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
color: #968c80; color: #374857;
} }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
font: 1em 'Apercu-Mono'; font: 1em 'Apercu-Mono';
color: #aba399; color: #546d84;
} }
:-moz-placeholder { :-moz-placeholder {
/* Firefox 18- */ /* Firefox 18- */
font: 1em 'Apercu-Mono'; font: 1em 'Apercu-Mono';
color: #aba399; color: #546d84;
} }
::-moz-placeholder { ::-moz-placeholder {
/* Firefox 19+ */ /* Firefox 19+ */
font: 1em 'Apercu-Mono'; font: 1em 'Apercu-Mono';
color: #aba399; color: #546d84;
} }
:-ms-input-placeholder { :-ms-input-placeholder {
font: 1em 'Apercu-Mono'; font: 1em 'Apercu-Mono';
color: #aba399; color: #546d84;
} }
/** /**
------------------------------- -------------------------------
@ -2160,10 +2160,10 @@ select {
} }
#entries-index #entries-index-wrapper a span { #entries-index #entries-index-wrapper a span {
font-size: 0.8em; font-size: 0.8em;
color: #b5afa6; color: #62809b;
} }
#entries-index #entries-index-wrapper a:hover { #entries-index #entries-index-wrapper a:hover {
background: #908578; background: #344453;
} }
#entries-index #entries-index-wrapper #entries-list { #entries-index #entries-index-wrapper #entries-list {
color: #32302f; color: #32302f;
@ -2194,36 +2194,37 @@ select {
padding: 0.75rem; padding: 0.75rem;
} }
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-title #entry_title { #entries-edit-index #entries-edit-index-wrapper #entry-header #entry-title #entry_title {
background: #91867a; background: #354554;
font-family: 'Apercu'; font-family: 'Apercu';
width: 100%; width: 100%;
height: 150px; height: 150px;
font-size: 1.5em; font-size: 1.5em;
color: #eee; color: #f2f1ef;
} }
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-title #entry-date { #entries-edit-index #entries-edit-index-wrapper #entry-header #entry-title #entry-date {
background: #897e71; background: #32414e;
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
width: 105px; width: 105px;
font-family: 'Apercu'; font-family: 'Apercu';
color: #cd898d; color: #fc6399;
height: 35px; height: 35px;
vertical-align: top; vertical-align: top;
text-align: center;
} }
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-title label { #entries-edit-index #entries-edit-index-wrapper #entry-header #entry-title label {
background: #81776b; background: #2f3d4a;
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
color: #a69d93; color: #4c6479;
line-height: 35px; line-height: 35px;
} }
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #entry_tags { #entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #entry_tags {
background: #91867a; background: #354554;
font-family: 'Apercu'; font-family: 'Apercu';
width: 100%; width: 100%;
height: 150px; height: 150px;
color: #4c463f; color: #1c242c;
} }
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #featured-click, #entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #featured-click,
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #post-image { #entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #post-image {
@ -2238,8 +2239,8 @@ select {
justify-content: center; justify-content: center;
width: 100%; width: 100%;
min-height: 200px; min-height: 200px;
background: #4c463f; background: #1c242c;
color: #968c80; color: #374857;
vertical-align: middle; vertical-align: middle;
font-family: 'Apercu-Mono'; font-family: 'Apercu-Mono';
} }
@ -2255,10 +2256,10 @@ select {
} }
#entries-edit-index #entries-edit-index-wrapper #entry-feature #featured-new-image-btn #new-upload-link { #entries-edit-index #entries-edit-index-wrapper #entry-feature #featured-new-image-btn #new-upload-link {
padding-top: 4px; padding-top: 4px;
background: #eee; background: #f2f1ef;
} }
#entries-edit-index #entries-edit-index-wrapper #entry-feature #featured-new-image-btn #new-upload-link svg { #entries-edit-index #entries-edit-index-wrapper #entry-feature #featured-new-image-btn #new-upload-link svg {
fill: #cd898d; fill: #fc6399;
} }
#entries-edit-index #entries-edit-index-wrapper #edit-content { #entries-edit-index #entries-edit-index-wrapper #edit-content {
width: 100%; width: 100%;
@ -2268,7 +2269,7 @@ select {
#entries-edit-index #entries-edit-index-wrapper #edit-content #edit-content-wrapper pre code { #entries-edit-index #entries-edit-index-wrapper #edit-content #edit-content-wrapper pre code {
line-height: 1.6em; line-height: 1.6em;
font-size: 1.25em; font-size: 1.25em;
color: #32302f; color: #bebebe;
word-wrap: normal; word-wrap: normal;
white-space: pre-wrap; white-space: pre-wrap;
line-break: normal; line-break: normal;
@ -2279,12 +2280,12 @@ select {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(46,42,38,0.75); background: rgba(17,22,26,0.75);
z-index: 2000; z-index: 2000;
} }
.dp { .dp {
position: relative; position: relative;
background: #968c80; background: #374857;
box-shadow: 2px 2px 16px rgba(0,0,0,0.25); box-shadow: 2px 2px 16px rgba(0,0,0,0.25);
line-height: 1.4; line-height: 1.4;
border-radius: 4px; border-radius: 4px;
@ -2301,7 +2302,7 @@ select {
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
background: #cd898d; background: #fc6399;
} }
.dp-permanent .dp { .dp-permanent .dp {
padding-top: 0; padding-top: 0;
@ -2356,7 +2357,7 @@ select {
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
position: relative; position: relative;
color: #eee; color: #f2f1ef;
border-radius: 2px; border-radius: 2px;
border: 0; border: 0;
background: transparent; background: transparent;
@ -2365,7 +2366,7 @@ select {
position: relative; position: relative;
text-align: center; text-align: center;
padding-bottom: 16px; padding-bottom: 16px;
background: #897e71; background: #32414e;
} }
.dp-next, .dp-next,
.dp-prev { .dp-prev {
@ -2374,7 +2375,7 @@ select {
height: 30px; height: 30px;
overflow: hidden; overflow: hidden;
top: 14px; top: 14px;
color: #4c463f; color: #1c242c;
border-radius: 2px; border-radius: 2px;
border: 0; border: 0;
background: transparent; background: transparent;
@ -2422,13 +2423,13 @@ select {
} }
.dp-cal-footer { .dp-cal-footer {
text-align: center; text-align: center;
background: #897e71; background: #32414e;
} }
.dp-day-today:after { .dp-day-today:after {
content: ''; content: '';
height: 0; height: 0;
width: 0; width: 0;
border: 7px solid #cd898d; border: 7px solid #fc6399;
border-bottom-color: transparent; border-bottom-color: transparent;
border-left-color: transparent; border-left-color: transparent;
position: absolute; position: absolute;
@ -2443,7 +2444,7 @@ select {
width: 33%; width: 33%;
padding: 8px; padding: 8px;
text-decoration: none; text-decoration: none;
color: #4c463f; color: #1c242c;
border: 0; border: 0;
background: transparent; background: transparent;
} }
@ -2458,8 +2459,8 @@ select {
.dp-prev:active, .dp-prev:active,
.dp-cal-month:active, .dp-cal-month:active,
.dp-cal-year:active { .dp-cal-year:active {
background: #cd898d; background: #fc6399;
color: #eee; color: #f2f1ef;
} }
@media screen and (min-device-width: 1200px) { @media screen and (min-device-width: 1200px) {
.dp-close:hover, .dp-close:hover,
@ -2476,8 +2477,8 @@ select {
.dp-cal-month:hover, .dp-cal-month:hover,
.dp-cal-year:hover, .dp-cal-year:hover,
.dp-cal-year:focus { .dp-cal-year:focus {
background: #cd898d; background: #fc6399;
color: #eee; color: #f2f1ef;
} }
} }
.dp-col-header, .dp-col-header,
@ -2516,14 +2517,14 @@ select {
.dp-month:focus, .dp-month:focus,
.dp-year:focus { .dp-year:focus {
outline: none; outline: none;
background: #7c4a3e; background: #bad1e8;
color: #eee; color: #f2f1ef;
} }
.dp-selected:hover, .dp-selected:hover,
.dp-selected:focus, .dp-selected:focus,
.dp-selected { .dp-selected {
background: #643c32; background: #b2cce5;
color: #eee; color: #f2f1ef;
} }
.dp-day-disabled { .dp-day-disabled {
background: transparent; background: transparent;
@ -2591,12 +2592,12 @@ select {
top: 1px; top: 1px;
padding: 2px; padding: 2px;
border-radius: 3px; border-radius: 3px;
background: rgba(137,126,113,0.5); background: rgba(50,65,78,0.5);
width: 100%; width: 100%;
z-index: 2000; z-index: 2000;
} }
#edit-control button { #edit-control button {
margin: 5px; margin: 3px;
} }
#edit-control #post-sumbit-btn { #edit-control #post-sumbit-btn {
-moz-transition: all 0.3s linear; -moz-transition: all 0.3s linear;
@ -2616,16 +2617,16 @@ select {
visibility: hidden; visibility: hidden;
} }
#edit-control .submit-start { #edit-control .submit-start {
background: #eee; background: #f2f1ef;
} }
#edit-control .submit-start svg { #edit-control .submit-start svg {
fill: #cd898d; fill: #fc6399;
} }
#edit-control .submit-cool { #edit-control .submit-cool {
background: #65b16c; background: #32cd32;
} }
#edit-control .submit-cool svg { #edit-control .submit-cool svg {
fill: #eee; fill: #f2f1ef;
} }
#edit-control #option-date { #edit-control #option-date {
height: 30px; height: 30px;
@ -2635,28 +2636,28 @@ select {
margin: -13px 5px 0 0; margin: -13px 5px 0 0;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
fill: #eee; fill: #f2f1ef;
} }
#edit-control .content-editor-btn-icon { #edit-control .content-editor-btn-icon {
height: 30px; height: 30px;
width: 30px; width: 30px;
background: #643c32; background: #b2cce5;
padding: 5px 5px 1px 5px; padding: 5px 5px 1px 5px;
border-radius: 20px; border-radius: 20px;
color: #968c80; color: #374857;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
} }
#edit-control .content-editor-btn-icon svg { #edit-control .content-editor-btn-icon svg {
fill: #968c80; fill: #374857;
} }
#edit-control .content-editor-btn-text { #edit-control .content-editor-btn-text {
width: 30px; width: 30px;
background: #643c32; background: #b2cce5;
padding: 5px; padding: 5px;
border-radius: 20px; border-radius: 20px;
color: #968c80; color: #374857;
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
@ -2688,7 +2689,7 @@ select {
display: block; display: block;
overflow-x: auto; overflow-x: auto;
padding: 0.5em; padding: 0.5em;
background: #897e71; background: #344453;
} }
.hljs, .hljs,
.hljs-subst { .hljs-subst {
@ -2696,12 +2697,13 @@ select {
} }
.hljs-deletion, .hljs-deletion,
.hljs-formula, .hljs-formula,
.hljs-keyword, .hljs-keyword .hljs-selector-tag {
.hljs-link, color: #bebebe;
.hljs-selector-tag {
color: #cfa99f;
font-style: italic; font-style: italic;
} }
.hljs-link {
color: #fc6399;
}
.hljs-built_in, .hljs-built_in,
.hljs-emphasis, .hljs-emphasis,
.hljs-name, .hljs-name,
@ -2709,13 +2711,13 @@ select {
.hljs-strong, .hljs-strong,
.hljs-title, .hljs-title,
.hljs-variable { .hljs-variable {
color: #c0bab3; color: #ffa07a;
} }
.hljs-attr, .hljs-attr,
.hljs-params, .hljs-params,
.hljs-template-tag, .hljs-template-tag,
.hljs-type { .hljs-type {
color: #d8a75d; color: #89c4f4;
} }
.hljs-builtin-name, .hljs-builtin-name,
.hljs-doctag, .hljs-doctag,
@ -2728,7 +2730,7 @@ select {
.hljs-regexp, .hljs-regexp,
.hljs-selector-id, .hljs-selector-id,
.hljs-template-variable { .hljs-template-variable {
color: #fe8019; color: #f5ab35;
} }
.hljs-addition, .hljs-addition,
.hljs-meta-string, .hljs-meta-string,
@ -2737,7 +2739,7 @@ select {
.hljs-selector-class, .hljs-selector-class,
.hljs-string, .hljs-string,
.hljs-symbol { .hljs-symbol {
color: #903d42; color: #f6dd74;
} }
.hljs-attribute, .hljs-attribute,
.hljs-bullet, .hljs-bullet,
@ -2747,7 +2749,7 @@ select {
.hljs-meta-keyword, .hljs-meta-keyword,
.hljs-selector-pseudo, .hljs-selector-pseudo,
.hljs-tag { .hljs-tag {
color: #4c463f; color: #8ea4b8;
} }
.hljs-comment { .hljs-comment {
color: #928374; color: #928374;

File diff suppressed because one or more lines are too long

View file

@ -1,12 +1,18 @@
$primary = #968c80; $primary = #374857;
$secondary = #643c32; $secondary = #b2cce5;
$tertiary = #ce9134 $tertiary = #f5ab35;
$highlight = #cd898d; $highlight = #fc6399;
$white = #eee; $white = #f2f1ef;
$grey = #abb7b7;
$black = #32302f; $black = #32302f;
//editor colors //editor colors
$eventCool = #65b16c $eventCool = #32cd32
$eventLame = #ce483b $eventLame = #ce483b
$editorPrimary = #bebebe;
$editorSecondary = #ffa07a;
$editorTertiary = #89c4f4;
$editorString = #f6dd74;
//Bulma overrides //Bulma overrides

View file

@ -3,32 +3,35 @@
display block display block
overflow-x auto overflow-x auto
padding 0.5em padding 0.5em
background $primary - 10% background $primary - 5%
.hljs, .hljs-subst .hljs, .hljs-subst
color #ebdbb2 color #ebdbb2
.hljs-deletion, .hljs-formula, .hljs-keyword, .hljs-link, .hljs-selector-tag .hljs-deletion, .hljs-formula, .hljs-keyword .hljs-selector-tag
color $secondary + 60% color $editorPrimary
font-style italic font-style italic
.hljs-link
color $highlight
.hljs-built_in, .hljs-emphasis, .hljs-name, .hljs-quote, .hljs-strong, .hljs-title, .hljs-variable .hljs-built_in, .hljs-emphasis, .hljs-name, .hljs-quote, .hljs-strong, .hljs-title, .hljs-variable
color $primary + 40% color $editorSecondary
.hljs-attr, .hljs-params, .hljs-template-tag, .hljs-type .hljs-attr, .hljs-params, .hljs-template-tag, .hljs-type
color $tertiary + 20% color $editorTertiary
.hljs-builtin-name, .hljs-doctag, .hljs-literal, .hljs-number .hljs-builtin-name, .hljs-doctag, .hljs-literal, .hljs-number
color #8f3f71 color #8f3f71
.hljs-code, .hljs-meta, .hljs-regexp, .hljs-selector-id, .hljs-template-variable .hljs-code, .hljs-meta, .hljs-regexp, .hljs-selector-id, .hljs-template-variable
color #fe8019 color $tertiary
.hljs-addition, .hljs-meta-string, .hljs-section, .hljs-selector-attr, .hljs-selector-class, .hljs-string, .hljs-symbol .hljs-addition, .hljs-meta-string, .hljs-section, .hljs-selector-attr, .hljs-selector-class, .hljs-string, .hljs-symbol
color $highlight - 40% color $editorString
.hljs-attribute, .hljs-bullet, .hljs-class, .hljs-function, .hljs-function .hljs-keyword, .hljs-meta-keyword, .hljs-selector-pseudo, .hljs-tag .hljs-attribute, .hljs-bullet, .hljs-class, .hljs-function, .hljs-function .hljs-keyword, .hljs-meta-keyword, .hljs-selector-pseudo, .hljs-tag
color $primary - 50% color $primary + 50%
.hljs-comment .hljs-comment
color #928374 color #928374

View file

@ -8,7 +8,7 @@
z-index 2000 z-index 2000
button button
margin 5px margin 3px
#post-sumbit-btn #post-sumbit-btn
object-transitions(0.3s) object-transitions(0.3s)

View file

@ -70,6 +70,7 @@
color $highlight color $highlight
height 35px height 35px
vertical-align top vertical-align top
text-align: center
label label
background $primary - 15% background $primary - 15%
@ -132,7 +133,7 @@
// font-family 'Apercu-Mono' // font-family 'Apercu-Mono'
line-height 1.6em line-height 1.6em
font-size 1.25em font-size 1.25em
color $black color $editorPrimary
word-wrap normal word-wrap normal
white-space pre-wrap white-space pre-wrap
line-break normal line-break normal