curben
/
blog
mirror of https://gitlab.com/curben/blog
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(css): remove background colour for codeblock 

- inspired by https://sscaffold-css.com/
- fix copy button's hover colours
This commit is contained in:
curben 2020-01-04 02:42:15 +00:00
parent e8b76e3ae9
commit 10d9ebd6b3
No known key found for this signature in database
GPG Key ID: 5D9DB57A25D34EE3
1 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
themes/chameleon/source/css/chameleon.css
View File

@ -6,9 +6,10 @@
:root { :root {
--main-bg-color: black; --main-bg-color: black;
--main-font-color: #e6e6e6; --main-font-color: #e6e6e6;
--a-hover: white; --link-hover: white;
--alt-bg-color: #333; --alt-bg-color: #333;
--font-size: 1.2em; --font-size: 1.2em;
--link-underline: #1abc9c;
} }
html { html {
@ -74,7 +75,7 @@ a {
a:active, a:active,
a:hover { a:hover {
outline-width: 0; outline-width: 0;
color: var(--a-hover); color: var(--link-hover);
} }
a, a,
@ -194,12 +195,13 @@ code,
kbd, kbd,
pre, pre,
samp { samp {
background: var(--alt-bg-color);
font-size: 0.9em; font-size: 0.9em;
} }
/* set codeblock width to minimum */ /* set codeblock width to minimum */
pre { pre {
border-left: 0.1em solid var(--link-underline);
padding-left: 1em;
max-width: max-content; max-width: max-content;
} }
@ -227,7 +229,7 @@ strong {
blockquote { blockquote {
background: var(--alt-bg-color); background: var(--alt-bg-color);
border-left: 2px solid #666; border-left: 0.1em solid #666;
padding-left: 1em; padding-left: 1em;
margin: 1em 3em 1em 0em; margin: 1em 3em 1em 0em;
max-width: max-content; max-width: max-content;
@ -380,7 +382,7 @@ span.index-list-count:after {
} }
.article .article-entry a { .article .article-entry a {
border-bottom: 1px solid #1abc9c; border-bottom: 1px solid var(--link-underline);
} }
.article .article-entry a:hover { .article .article-entry a:hover {
@ -670,7 +672,7 @@ input {
/* highlight the text box when focused */ /* highlight the text box when focused */
.searchBox:focus { .searchBox:focus {
border: 1px solid #1abc9c; border: 1px solid var(--link-underline);
} }
/* align the button to center */ /* align the button to center */
@ -693,7 +695,7 @@ svg {
/* fill the link icon with link's color */ /* fill the link icon with link's color */
svg#link { svg#link {
fill: #1abc9c; fill: var(--link-underline);
} }
/* don't underline link icon */ /* don't underline link icon */
@ -703,7 +705,7 @@ svg#link {
/* underline link icon when hover */ /* underline link icon when hover */
.article .article-entry a.headerlink:hover { .article .article-entry a.headerlink:hover {
border-bottom: 1px solid #1abc9c; border-bottom: 1px solid var(--link-underline);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -781,15 +783,15 @@ svg#link {
} }
.copy-button:hover { .copy-button:hover {
background: var(--alt-font-color); background: var(--main-font-color);
color: var(--alt-bg-color); color: var(--main-bg-color);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--main-bg-color: black; --main-bg-color: black;
--main-font-color: #e6e6e6; --main-font-color: #e6e6e6;
--a-hover: white; --link-hover: white;
--alt-bg-color: #333; --alt-bg-color: #333;
} }
} }
@ -798,7 +800,7 @@ svg#link {
:root { :root {
--main-bg-color: #f1f1f1; --main-bg-color: #f1f1f1;
--main-font-color: #333; --main-font-color: #333;
--a-hover: black; --link-hover: black;
--alt-bg-color: #d8d8d8; --alt-bg-color: #d8d8d8;
} }
} }