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

refactor(css): custom properties 

- https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
- https://css-irl.info/7-uses-for-css-custom-properties/
This commit is contained in:
curben 2019-12-20 02:33:57 +00:00
parent 763f7dc008
commit e59bfdbca6
No known key found for this signature in database
GPG Key ID: 5D9DB57A25D34EE3
1 changed files with 36 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,14 @@
@import "sanitize"; @import "sanitize";
@import "sanitize/forms"; @import "sanitize/forms";
:root {
--main-bg-color: black;
--main-font-color: #e6e6e6;
--a-hover: white;
--alt-bg-color: #333;
--font-size: 1.2em;
}
html { html {
cursor: unset; cursor: unset;
height: 100%; height: 100%;
@ -10,10 +18,10 @@ html {
} }
body { body {
color: #e6e6e6; color: var(--main-font-color);
background: black; background: var(--main-bg-color);
font-family: sans-serif; font-family: sans-serif;
font-size: 1.2em; font-size: var(--font-size);
/* https://stackoverflow.com/a/6654996 */ /* https://stackoverflow.com/a/6654996 */
min-height: 100%; min-height: 100%;
line-height: 1.5; line-height: 1.5;
@ -66,7 +74,7 @@ a {
a:active, a:active,
a:hover { a:hover {
outline-width: 0; outline-width: 0;
color: white; color: var(--a-hover);
} }
a, a,
@ -83,7 +91,7 @@ textarea {
} }
hr { hr {
background-image: -webkit-linear-gradient(0deg,transparent,#e6e6e6,transparent); background-image: -webkit-linear-gradient(0deg,transparent,var(--main-font-color),transparent);
border: none; border: none;
box-sizing: content-box; box-sizing: content-box;
height: 1px; height: 1px;
@ -107,7 +115,7 @@ hr {
} }
.header-hr { .header-hr {
background-image: -webkit-linear-gradient(90deg,#e6e6e6,#e6e6e6,transparent); background-image: -webkit-linear-gradient(90deg,var(--main-font-color),var(--main-font-color),transparent);
} }
figcaption, figcaption,
@ -173,7 +181,7 @@ th {
table th, table th,
th { th {
background: #333; background: var(--alt-bg-color);
} }
em, em,
@ -186,7 +194,7 @@ code,
kbd, kbd,
pre, pre,
samp { samp {
background: #333; background: var(--alt-bg-color);
font-size: 0.9em; font-size: 0.9em;
} }
@ -218,7 +226,7 @@ strong {
} }
blockquote { blockquote {
background: #333; background: var(--alt-bg-color);
border-left: 2px solid #666; border-left: 2px solid #666;
padding-left: 1em; padding-left: 1em;
margin: 1em 3em 1em 0em; margin: 1em 3em 1em 0em;
@ -609,7 +617,8 @@ td {
/* overlap other elements */ /* overlap other elements */
.mobile-nav-link { .mobile-nav-link {
background: black; background: var(--main-bg-color);
color: var(--main-font-color);
border: 2px solid #999; border: 2px solid #999;
border-radius: 5px; border-radius: 5px;
right: 0; right: 0;
@ -626,7 +635,7 @@ td {
.searchContainer { .searchContainer {
border-radius: 5px; border-radius: 5px;
width: 10em; width: 10em;
background:#333; background: var(--alt-bg-color);
outline: 0; outline: 0;
float: right; float: right;
height: 1.8em; height: 1.8em;
@ -726,8 +735,8 @@ svg#link {
} }
@media (max-width: 468px) { @media (max-width: 468px) {
body { :root {
font-size: 1em; --font-size: 1em;
} }
.archive-container .archive-footer, .archive-container .archive-footer,
@ -742,8 +751,8 @@ svg#link {
} }
@media (max-width: 320px) { @media (max-width: 320px) {
body { :root {
font-size: 0.9em; --font-size: 0.9em;
} }
.article { .article {
@ -772,83 +781,24 @@ svg#link {
} }
.copy-button:hover { .copy-button:hover {
background: #e6e6e6; background: var(--alt-font-color);
color: black; color: var(--alt-bg-color);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body, :root {
.mobile-nav-link { --main-bg-color: black;
background: black; --main-font-color: #e6e6e6;
color: #e6e6e6; --a-hover: white;
} --alt-bg-color: #333;
a:hover {
color: white;
}
blockquote,
code,
kbd,
pre,
samp,
.searchContainer,
table th,
th {
background: #333;
}
hr {
background-image: -webkit-linear-gradient(0deg,transparent,#e6e6e6,transparent);
}
.header-hr {
background-image: -webkit-linear-gradient(90deg,#e6e6e6,#e6e6e6,transparent);
}
.copy-button:hover {
background: #e6e6e6;
color: black;
} }
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
body, :root {
.mobile-nav-link { --main-bg-color: #f1f1f1;
background: #f1f1f1; --main-font-color: #333;
color: #333; --a-hover: black;
} --alt-bg-color: #d8d8d8;
a:hover {
color: black;
}
blockquote,
code,
kbd,
pre,
samp,
.searchContainer,
table th,
th {
background: #d8d8d8;
}
hr {
background-image: -webkit-linear-gradient(0deg,transparent,#333,transparent);
}
.header-hr {
background-image: -webkit-linear-gradient(90deg,#333,#333,transparent);
}
.copy-button:hover {
background: #333;
color: #f1f1f1;
}
table th,
th {
color: #333;
} }
} }