Color Adjustments

The colors just needed to be tweaked a bit for the sake on better
contrast and readability.

Still some trouble spots but will adjust as needed
This commit is contained in:
ro 2024-03-21 14:51:24 -06:00
parent 82984635b5
commit 8794ffc715
No known key found for this signature in database
GPG key ID: 29B551CDBD4D3B50
15 changed files with 38 additions and 41 deletions

View file

@ -2,8 +2,8 @@
:root { :root {
--primary: #1d3040; --primary: #1d3040;
--secondary: #fc6399; --secondary: #fc6399;
--tertiary: #f5ab35; --primary-highlight: #f5ab35;
--highlight: #63fcc6ff; --secondary-highlight: #63fcc6ff;
--white: #ebe5d4; --white: #ebe5d4;
--black: #32302f; --black: #32302f;
} }

View file

@ -29,7 +29,7 @@ a {
} }
a:hover { a:hover {
border-bottom: 1px solid var(--highlight); border-bottom: 1px solid var(--secondary-highlight);
} }
sup { sup {
@ -42,7 +42,7 @@ sup {
pre, pre,
code { code {
background: var(--black); background: var(--black);
color: var(--highlight); color: var(--secondary-highlight);
border-radius: 3px; border-radius: 3px;
padding: 3px; padding: 3px;
} }
@ -171,7 +171,7 @@ main > section[role="page-meta"] > div a {
/* FOOTER */ /* FOOTER */
footer { footer {
background: var(--highlight); background: var(--secondary-highlight);
padding: 30px 15%; padding: 30px 15%;
color: var(--primary); color: var(--primary);
} }
@ -188,7 +188,7 @@ footer {
} }
footer { footer {
background: var(--highlight); background: var(--secondary-highlight);
padding: 30px 10%; padding: 30px 10%;
} }
} }

View file

@ -80,7 +80,7 @@ section[role="book-index-pages"] hr {
section[role="book-index-pages"] button[data-active="true"] { section[role="book-index-pages"] button[data-active="true"] {
background: var(--primary); background: var(--primary);
color: var(--tertiary); color: var(--primary-highlight);
} }
section[role="book-index-pages"] button[data-active="false"] { section[role="book-index-pages"] button[data-active="false"] {
@ -91,7 +91,7 @@ section[role="book-index-pages"] > div[role="paginate"] {
width: fit-content; width: fit-content;
margin: 0 auto; margin: 0 auto;
font-size: 1.5em; font-size: 1.5em;
color: var(--highlight); color: var(--secondary-highlight);
} }
section[role="book-index-pages"] > div[role="paginate"] i { section[role="book-index-pages"] > div[role="paginate"] i {

View file

@ -1,9 +1,9 @@
:root { :root {
/* BASE COLORS */ /* BASE COLORS */
--primary: #1d3040; --primary: #1d3040;
--secondary: #b2cce5; --secondary: #f3ebd2;
--tertiary: #f5ab35; --primary-highlight: #f5ab35;
--highlight: #fc6399; --secondary-highlight: #b54b6f;
--white: #efebe3; --white: #efebe3;
--grey: #abb7b7; --grey: #abb7b7;
--black: #32302f; --black: #32302f;

View file

@ -3,7 +3,7 @@ a {
} }
p { p {
background: var(--tertiary); background: var(--primary-highlight);
color: var(--primary); color: var(--primary);
padding: 5px; padding: 5px;
display: block; display: block;
@ -18,7 +18,7 @@ input[type="text"] {
border-radius: 5px; border-radius: 5px;
font: 18px var(--base-type); font: 18px var(--base-type);
display: inline-block; display: inline-block;
background: var(--white); background: var(--secondary);
color: var(--primary); color: var(--primary);
} }
@ -26,12 +26,12 @@ textarea {
border: 0; border: 0;
border-radius: 3px; border-radius: 3px;
color: var(--primary); color: var(--primary);
background: var(--white); background: var(--secondary);
} }
button, button,
input[type="submit"] { input[type="submit"] {
background: var(--highlight); background: var(--secondary-highlight);
color: var(--primary); color: var(--primary);
font: 20px var(--base-type); font: 20px var(--base-type);
border-radius: 5px; border-radius: 5px;

View file

@ -32,7 +32,7 @@ sup {
} }
::selection { ::selection {
background: var(--highlight); background: var(--secondary-highlight);
color: var(--white); color: var(--white);
} }
@ -44,14 +44,14 @@ sup {
pre, pre,
code { code {
background: var(--black); background: var(--black);
color: var(--highlight); color: var(--secondary-highlight);
border-radius: 3px; border-radius: 3px;
padding: 3px; padding: 3px;
} }
svg[role="icon"] { svg[role="icon"] {
transition: all 0.3s linear; transition: all 0.3s linear;
fill: var(--white); fill: var(--secondary);
width: 25px; width: 25px;
height: 25px; height: 25px;
padding-top: 5px; padding-top: 5px;
@ -129,11 +129,11 @@ button[data-render="true"] {
} }
button[data-render="true"] svg { button[data-render="true"] svg {
fill: var(--highlight); fill: var(--primary-highlight);
} }
button[data-render="false"] svg { button[data-render="false"] svg {
fill: var(--white); fill: var(--secondary);
} }
/* RESPONSIVE */ /* RESPONSIVE */

View file

@ -81,7 +81,7 @@ button[data-active="false"] svg {
} }
button[data-active="true"] svg { button[data-active="true"] svg {
fill: var(--highlight); fill: var(--primary-highlight);
} }
section[class="index-recent-pages"] aside { section[class="index-recent-pages"] aside {

View file

@ -38,7 +38,7 @@ section.login form a {
width: 10%; width: 10%;
height: 20px; height: 20px;
display: inline-block; display: inline-block;
background: var(--tertiary); background: var(--primary-highlight);
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
margin: 0 0 0 10px; margin: 0 0 0 10px;

View file

@ -9,7 +9,7 @@ article[role="navigation"] > section > div.nav-item {
width: 98%; width: 98%;
background: var(--white); background: var(--white);
border-radius: 3px; border-radius: 3px;
color: var(--highlight); color: var(--secondary-highlight);
margin: 0 0 10px; margin: 0 0 10px;
font-size: 1.5em; font-size: 1.5em;
cursor: move; cursor: move;

View file

@ -4,7 +4,7 @@ header > nav.top-nav {
grid-template-columns: 50px auto auto; grid-template-columns: 50px auto auto;
height: 100%; height: 100%;
position: relative; position: relative;
background: var(--white); background: var(--secondary);
border-radius: 3px; border-radius: 3px;
transform-style: preserve-3d; transform-style: preserve-3d;
transform-origin: 100% 50%; transform-origin: 100% 50%;

View file

@ -1,7 +1,7 @@
/* FILE MANAGER */ /* FILE MANAGER */
main > section[role="file-manager"] { main > section[role="file-manager"] {
width: 100%; width: 100%;
background: var(--tertiary); background: var(--primary-highlight);
padding: 20px 0; padding: 20px 0;
margin-top: 75px; margin-top: 75px;
} }
@ -153,7 +153,7 @@ main
main > section[role="page-meta"] { main > section[role="page-meta"] {
width: 100%; width: 100%;
background: var(--highlight); background: var(--secondary-highlight);
} }
main > section[role="page-meta"] > div[role="page-meta-wrapper"] { main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
@ -162,12 +162,11 @@ main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
gap: 20px; gap: 20px;
width: 100%; width: 100%;
max-width: 900px; max-width: 900px;
margin: 10px auto; margin: 0 auto;
color: var(--white); color: var(--secondary);
} }
main section[role="page-meta"] textarea#post-title-text { main section[role="page-meta"] textarea#post-title-text {
background: var(--white);
font-family: var(--base-type); font-family: var(--base-type);
width: 100%; width: 100%;
height: 80px; height: 80px;
@ -176,7 +175,6 @@ main section[role="page-meta"] textarea#post-title-text {
} }
main section[role="page-meta"] textarea#post-tags { main section[role="page-meta"] textarea#post-tags {
background: var(--white);
font-family: var(--base-type); font-family: var(--base-type);
width: 100%; width: 100%;
height: 80px; height: 80px;
@ -244,7 +242,7 @@ main
main > section[role="text-editor"] { main > section[role="text-editor"] {
width: 100%; width: 100%;
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 10px auto;
} }
main section[role="text-editor"] .icon-hide { main section[role="text-editor"] .icon-hide {
@ -274,7 +272,7 @@ main > section[role="text-editor"] > div[role="edit-post-wrapper"] {
main > section[role="text-editor"] > div[role="edit-post-wrapper"] textarea:focus { main > section[role="text-editor"] > div[role="edit-post-wrapper"] textarea:focus {
outline: none; outline: none;
border-color: var(--highlight); border-color: var(--secondary-highlight);
} }
main section[role="text-editor"] div[role="edit-post-wrapper"] #edit, main section[role="text-editor"] div[role="edit-post-wrapper"] #edit,
@ -307,7 +305,7 @@ main > section[role="text-editor"] > div[role="edit-post-wrapper"] > #edit {
z-index: 1; z-index: 1;
background: transparent; background: transparent;
color: transparent; color: transparent;
caret-color: var(--highlight); caret-color: var(--secondary-highlight);
} }
main > section[role="text-editor"] > div[role="edit-post-wrapper"] > #highlight { main > section[role="text-editor"] > div[role="edit-post-wrapper"] > #highlight {

View file

@ -47,7 +47,7 @@ section[class="member-settings"] > div:nth-child(4) {
section[class="member-settings"] > div:nth-child(4) a { section[class="member-settings"] > div:nth-child(4) a {
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
color: var(--tertiary); color: var(--primary-highlight);
} }
section[class="member-settings"] > div:nth-child(5) { section[class="member-settings"] > div:nth-child(5) {
@ -122,7 +122,7 @@ section[class="member-settings"]
> div[class="theme"] > div[class="theme"]
button[data-enabled="true"] { button[data-enabled="true"] {
color: var(--white); color: var(--white);
background: var(--highlight); background: var(--secondary-highlight);
display: block; display: block;
border-radius: 3px; border-radius: 3px;
padding: 3px; padding: 3px;
@ -148,9 +148,9 @@ section[class="member-settings"] > div[class="mail"] a {
} }
section[class="member-settings"] > div[class="mail"] a[data-enabled="true"] { section[class="member-settings"] > div[class="mail"] a[data-enabled="true"] {
color: var(--tertiary); color: var(--primary-highlight);
font-weight: bold; font-weight: bold;
border-top: var(--highlight) 1px solid; border-top: var(--secondary-highlight) 1px solid;
} }
section[class="member-settings"] > div[class="mail"] div[data-enabled="false"] { section[class="member-settings"] > div[class="mail"] div[data-enabled="false"] {

View file

@ -51,7 +51,7 @@
</a> </a>
@else @else
<a href="/dashboard/page/edit/{{ $page['uuid'] }}" id="{{ $page['uuid'] }}" class="page-link"> <a href="/dashboard/page/edit/{{ $page['uuid'] }}" id="{{ $page['uuid'] }}" class="page-link">
<div class="page-bg" style="background: url({{ $file }}) no-repeat center center / cover #fc6399"> <div class="page-bg" style="background: url({{ $file }}) no-repeat center center / cover #b54b6f">
<div id="meta"> <div id="meta">
@include('includes.recent-meta') @include('includes.recent-meta')
</div> </div>

View file

@ -137,8 +137,7 @@
</div> </div>
@endif @endif
</section> </section><section role="page-meta">
<section role="page-meta">
<div role="page-meta-wrapper"> <div role="page-meta-wrapper">
<div role="page-title"> <div role="page-title">
<strong>TITLE</strong> <strong>TITLE</strong>

View file

@ -27,7 +27,7 @@
</video> </video>
</a> </a>
@else @else
<a href="/dashboard/page/edit/{{ $page['uuid'] }}" id="{{ $page['uuid'] }}" class="post-link recent-link" style="background: url({{ $file }}) no-repeat center center / cover #fc6399"> <a href="/dashboard/page/edit/{{ $page['uuid'] }}" id="{{ $page['uuid'] }}" class="post-link recent-link" style="background: url({{ $file }}) no-repeat center center / cover #b54b6f">
@include('includes.recent-meta') @include('includes.recent-meta')
</a> </a>
@endif @endif