mirror of https://gitlab.com/curben/blog
fix(css): remove background colour for codeblock
- inspired by https://sscaffold-css.com/ - fix copy button's hover colours
This commit is contained in:
parent
e8b76e3ae9
commit
10d9ebd6b3
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue