bbaovanc/bobatheme
1
0
Fork 0
mirror of https://github.com/BBaoVanC/bobatheme.git synced 2024-12-22 04:13:17 -06:00
Code Issues Projects Releases Wiki Activity

Overhaul color scheme

Browse Source
This commit is contained in:
BBaoVanC 2022-05-14 23:19:52 -05:00
parent 833edacc1f
commit 9c3a076e96
Signed by: bbaovanc
GPG Key ID: 18089E4E3CCF1D3A
1 changed files with 117 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
assets/css/bobastyle.css
View File

@ -2,40 +2,51 @@
* https://github.com/BBaoVanC/bobatheme.
*/
/* color notes:
*
* lightness (dark):
* background-0: 5
* background-1: 12.5
* background-2: 20
* background-highlight: 27.5
* text-0: 92.5
* text-1: 85
*/
:root {
--background-0: #111111;
--background-1: #212121;
--background-2: #303030;
--background-highlight: #414141;
--background-0: #111111; /* lch(5, 0, X) */
--background-1: #212121; /* lch(12.5, 0, X) */
--background-2: #303030; /* lch(20, 0, X) */
--background-3: #414141; /* lch(27.5, 0, X) */
--background-accent-red: #2d1411; /* lch(10, 15, 30) */
--background-accent-orange: #291705; /* lch(10, 15, 60) */
--background-accent-yellow: #2b2510; /* lch(15, 15, 90) */
--background-accent-lime: #202813; /* lch(15, 15, 120) */
--background-accent-green: #092010; /* lch(10, 15, 150) */
--background-accent-turquoise: #062b25; /* lch(15, 15, 180) */
--background-accent-teal: #002b30; /* lch(15, 15, 210) */
--background-accent-cerulean: #022331; /* lch(12, 15, 240) */
--background-accent-blue: #101c30; /* lch(10, 15, 270) */
--background-accent-purple: #1e182d; /* lch(10, 15, 300) */
--background-accent-pink: #291526; /* lch(10, 15, 330) */
--background-pink-1: #331821; /* lch(12.5, 15, 0) */
--background-red-1: #331917; /* lch(12.5, 15, 30) */
--background-orange-1: #2e1c0e; /* lch(12.5, 15, 60) */
--background-yellow-1: #262008; /* lch(12.5, 15, 90) */
--background-lime-1: #1b230c; /* lch(12.5, 15, 120) */
--background-green-1: #0e2516; /* lch(12.5, 15, 150) */
--background-turquoise-1: #012620; /* lch(12.5, 15, 180) */
--background-teal-1: #00262b; /* lch(12.5, 15, 210) -- out of sRGB */
--background-cerulean-1: #032432; /* lch(12.5, 15, 240) */
--background-blue-1: #152135; /* lch(12.5, 15, 270) */
--background-purple-1: #241d33; /* lch(12.5, 15, 300) */
--background-magenta-1: #2e1a2b; /* lch(12.5, 15, 330) */
--background-accent: var(--background-accent-blue);
--background-pink-2: #4b2431; /* lch(20, 20, 0) */
--background-red-2: #4a2623; /* lch(20, 20, 30) */
--background-orange-2: #432a17; /* lch(20, 20, 60) */
--background-yellow-2: #373012; /* lch(20, 20, 90) */
--background-lime-2: #283416; /* lch(20, 20, 120) */
--background-green-2: #163721; /* lch(20, 20, 150) */
--background-turquoise-2: #003830; /* lch(20, 20, 180) -- out of sRGB */
--background-teal-2: #00373e; /* lch(20, 20, 210) -- out of sRGB */
--background-cerulean-2: #013549; /* lch(20, 20, 240) */
--background-blue-2: #1f314e; /* lch(20, 20, 270) */
--background-purple-2: #352c4a; /* lch(20, 20, 300) */
--background-magenta-2: #43263f; /* lch(20, 20, 330) */
--background-accent-1: var(--background-blue-1);
--background-accent-2: var(--background-blue-2);
--text-0: #d4d4d4; /* lch(85, 0, X) */
--text-1: #d4d4d4; /* lch(85, 0, X) */
--text-2: #d4d4d4; /* lch(85, 0, X) */
--text-3: #e9e9e9; /* lch(92.5, 0, X) */
--text-gray-0: #ababab; /* lch(70, 0, X) */
--text-gray-1: #919191; /* lch(60, 0, X) */
--link-0: #3a94fb; /* lch(60, 60, 270) */
--text-0: #e9e9e9;
--text-1: #d4d4d4;
--link-color: #3a94fb; /* lch(60, 60, 270) */
--figure-border: #1f5593; /* lch(35, 40, 270) */
--pagination-active-hover-text: black;
@ -45,28 +56,50 @@
@media print, (prefers-color-scheme: light) {
:root {
--background-0: #f1f1f1;
--background-1: #dbdbdb;
--background-2: #c6c6c6;
--background-highlight: #c6c6c6;
--background-0: #f1f1f1; /* lch(95, 0, X) */
--background-1: #dbdbdb; /* lch(87.5, 0, X) */
--background-2: #c6c6c6; /* lch(80, 0, X) */
--background-3: #b2b2b2; /* lch(72.5, 0, X) */
--background-accent-red: #f1cbc7; /* lch(85, 15, 30); */
--background-accent-orange: #f8ddca; /* lch(90, 15, 60); */
--background-accent-yellow: #f0e1b2; /* lch(90, 25, 90); */
--background-accent-lime: #dce6c9; /* lch(90, 15, 120); */
--background-accent-green: #cdead3; /* lch(90, 15, 150); */
--background-accent-turquoise: #c3ebe2; /* lch(90, 15, 180); */
--background-accent-teal: #c1eaf0; /* lch(90, 15, 210); */
--background-accent-cerulean: #c8e7fb; /* lch(90, 15, 240); */
--background-accent-blue: #d7e3ff; /* lch(90, 15, 270); */
--background-accent-purple: #e8defb; /* lch(90, 15, 300); */
--background-accent-pink: #f6daf1; /* lch(90, 15, 330); */
--background-pink-1: #f7d1dc; /* lch(87.5, 15, 0) */
--background-red-1: #f8d2ce; /* lch(87.5, 15, 30) */
--background-orange-1: #f1d6c3; /* lch(87.5, 15, 60) */
--background-yellow-1: #e4dbbf; /* lch(87.5, 15, 90) */
--background-lime-1: #d5dfc2; /* lch(87.5, 15, 120) */
--background-green-1: #c6e3cc; /* lch(87.5, 15, 150) */
--background-turquoise-1: #bce4db; /* lch(87.5, 15, 180) */
--background-teal-1: #bae3e9; /* lch(87.5, 15, 210) */
--background-cerulean-1: #c2e0f4; /* lch(87.5, 15, 240) */
--background-blue-1: #d0dcf8; /* lch(87.5, 15, 270) */
--background-purple-1: #e1d7f4; /* lch(87.5, 15, 300) */
--background-magenta-1: #efd3ea; /* lch(87.5, 15, 330) */
--background-accent: var(--background-accent-blue);
--background-pink-2: #fbb1c8; /* lch(80, 30, 0) */
--background-red-2: #fbb4ac; /* lch(80, 30, 30) */
--background-orange-2: #eebc97; /* lch(80, 30, 60) */
--background-yellow-2: #d6c58e; /* lch(80, 30, 90) */
--background-lime-2: #b8ce95; /* lch(80, 30, 120) */
--background-green-2: #9ad4a9; /* lch(80, 30, 150) */
--background-turquoise-2: #81d6c5; /* lch(80, 30, 180) */
--background-teal-2: #7ad5e1; /* lch(80, 30, 210) */
--background-cerulean-2: #8cd0f6; /* lch(80, 30, 240) */
--background-blue-2: #adc8fe; /* lch(80, 30, 270) */
--background-purple-2: #d0bef7; /* lch(80, 30, 300) */
--background-magenta-2: #ecb5e3; /* lch(80, 30, 330) */
--background-accent-1: var(--background-blue-1);
--background-accent-2: var(--background-blue-2);
--text-0: #262626; /* lch(15, 0, X) */
--text-1: #262626; /* lch(15, 0, X) */
--text-2: #262626; /* lch(15, 0, X) */
--text-3: #171717; /* lch(72.5, 0, X) */
--text-gray-0: #474747; /* lch(30, 0, X) */
--text-gray-1: #5e5e5e; /* lch(40, 0, X) */
--link-0: #2061a8; /* lch(40, 45, 270) */
--text-0: #171717;
--text-1: #262626;
--link-color: #2061a8; /* lch(40, 45, 270) */
--figure-border: #367acd; /* lch(50, 50, 270) */
--pagination-active-hover-text: white;
@ -111,6 +144,7 @@
padding-bottom: 24px;
border-radius: 12px;
background-color: var(--background-1);
color: var(--text-1);
}
.post-series-position {
@ -182,6 +216,7 @@
.taxonomy-list li {
background-color: var(--background-1);
color: var(--text-1);
padding: 8px 12px;
border-radius: 8px;
display: flex;
@ -215,6 +250,7 @@
flex-flow: row wrap;
list-style: none;
background-color: var(--background-0);
color: var(--text-0);
padding: 8px;
border-radius: 16px;
}
@ -235,12 +271,14 @@
.section {
background-color: var(--background-1);
color: var(--text-1);
border-radius: 12px;
padding: 1px 25px;
}
.section:hover {
background-color: var(--background-2);
color: var(--text-2);
}
.section-title {
@ -285,6 +323,7 @@ h1.header {
/* Content formatting */
.series-box {
background-color: var(--background-1);
color: var(--text-1);
padding: 8px 16px;
border-radius: 8px;
margin: 15px 0;
@ -292,6 +331,7 @@ h1.header {
.table-of-contents {
background-color: var(--background-1);
color: var(--text-1);
padding: 8px 20px;
border-radius: 8px;
margin: 10px 0;
@ -364,6 +404,7 @@ h1.header {
/* Social media share buttons */
.share-buttons {
background: var(--background-1);
color: var(--text-1);
margin: 25px 0;
padding: 8px 0;
border-radius: 8px;
@ -375,6 +416,7 @@ h1.header {
.share-buttons button,
.share-buttons a {
background-color: var(--background-2);
color: var(--text-2);
padding: 4px;
border-radius: 8px;
}
@ -400,6 +442,7 @@ h1.header {
/* See also formating */
.see-also {
background-color: var(--background-1);
color: var(--text-1);
padding: 8px 12px;
border-radius: 8px;
margin: 10px 0;
@ -417,6 +460,7 @@ h1.header {
bottom: 25px;
right: 25px;
background-color: var(--background-1);
color: var(--text-1);
border-radius: 100%;
padding: 12px;
display: none;
@ -430,6 +474,7 @@ h1.header {
flex-wrap: nowrap;
flex-direction: row;
background-color: var(--background-1);
color: var(--text-1);
border-radius: 8px;
margin-top: 5px;
padding: 4px;
@ -451,10 +496,15 @@ h1.header {
.navbar-item:hover,
.langpicker summary:hover,
.langpicker[open] summary {
background-color: var(--background-highlight);
background-color: var(--background-3);
text-decoration: none;
}
.langpicker summary:hover,
.langpicker[open] summary {
color: var(--text-3);
}
.topbar .active {
font-weight: bold;
}
@ -476,6 +526,7 @@ h1.header {
margin-top: 8px;
right: 0;
background-color: var(--background-1);
color: var(--text-1);
border: 2px solid var(--background-2);
padding: 8px 12px;
border-radius: 8px;
@ -506,7 +557,7 @@ html {
body {
background-color: var(--background-0);
color: var(--text-1);
color: var(--text-0);
font-family: "Open Sans", "Noto Sans", sans-serif;
margin: 20px;
max-width: 720px;
@ -556,7 +607,7 @@ figcaption {
}
a {
color: var(--link-color);
color: var(--link-0);
text-decoration: inherit;
}
@ -570,7 +621,7 @@ blockquote {
}
hr {
border: 1px solid var(--background-highlight);
border: 1px solid var(--background-3);
}
table.markdown {
@ -580,6 +631,7 @@ table.markdown {
.markdown thead {
background-color: var(--background-2);
color: var(--text-2);
}
.markdown th,
@ -589,9 +641,11 @@ table.markdown {
.markdown tbody tr:nth-child(odd) {
background-color: var(--background-0);
color: var(--text-0);
}
.markdown tbody tr:nth-child(even) {
background-color: var(--background-1);
color: var(--text-1);
}
* {
@ -612,6 +666,7 @@ table.markdown {
:not(pre) > code {
background-color: var(--background-2);
color: var(--text-2);
padding: 2px 4px;
overflow-wrap: break-word;
}
@ -631,6 +686,7 @@ aside {
padding: 8px 16px;
margin: 16px 0;
border-radius: 8px;
color: var(--text-1);
}
.aside-title {
@ -647,19 +703,19 @@ aside {
}
aside.note {
background-color: var(--background-accent-blue);
background-color: var(--background-blue-1);
}
aside.info {
background-color: var(--background-accent-green);
background-color: var(--background-green-1);
}
aside.tip {
background-color: var(--background-accent-teal);
background-color: var(--background-teal-1);
}
aside.warning {
background-color: var(--background-accent-yellow);
background-color: var(--background-yellow-1);
}
aside.example {
background-color: var(--background-accent-purple);
background-color: var(--background-purple-1);
}
aside.quote {
background-color: var(--background-1);
@ -716,7 +772,7 @@ h1 svg.icon {
}
:not(li.disabled) > .page-link:hover {
background-color: var(--background-highlight);
background-color: var(--background-3);
}
li.disabled {
@ -763,11 +819,13 @@ li.disabled > .page-link:hover {
flex-direction: column;
color: inherit;
background-color: var(--background-1);
color: var(--text-1);
padding: 8px 16px;
}
.prevnext > a:hover {
background-color: var(--background-2);
color: var(--text-2);
text-decoration: none;
}
@ -799,11 +857,6 @@ li.disabled > .page-link:hover {
/* Light mode */
@media print,
(prefers-color-scheme: light) {
/* Basic elements */
.section:hover {
color: inherit;
}
li.disabled {
opacity: .25;
}