Refactor CSS files

This commit is contained in:
Gabriel Arazas 2022-05-01 20:38:07 +08:00
parent e4ece49d04
commit f00d93890d
3 changed files with 26 additions and 22 deletions

View File

@ -5,14 +5,14 @@
} }
@keyframes target-fade { @keyframes target-fade {
0% { background: var(--base0C); } 0% { background: var(--accent-color); }
100% { background: unset; } 100% { background: unset; }
} }
::selection { ::selection {
background: var(--base05); background: var(--foreground);
color: var(--base00); color: var(--background);
} }
body { body {
@ -45,7 +45,7 @@ h4, h5, h6 {
} }
a { a {
color: var(--base0C); color: var(--accent-color);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -116,8 +116,8 @@ pre[class*=language-] ::selection {
} }
mark { mark {
background: var(--base05); background: var(--foreground);
color: var(--base00); color: var(--background);
&::selection { &::selection {
color: var(--base06); color: var(--base06);
@ -125,7 +125,7 @@ mark {
} }
hr { hr {
border-color: var(--base0C); border-color: var(--accent-color);
margin: 1em 0; margin: 1em 0;
} }
@ -150,7 +150,7 @@ thead, tbody {
thead { thead {
background: var(--base07); background: var(--base07);
color: var(--base00); color: var(--background);
} }
th, td { th, td {

View File

@ -63,7 +63,7 @@ footer[aria-label="Site footer"] {
} }
.site__theme-btn { .site__theme-btn {
background: var(--base00); background: var(--background);
padding: 0.5em; padding: 0.5em;
position: relative; position: relative;
float: right; float: right;
@ -76,12 +76,13 @@ footer[aria-label="Site footer"] {
} }
.site__theme-dropdown { .site__theme-dropdown {
background: var(--base00); background: var(--background);
border: var(--border-style); border: var(--border-style);
display: none; display: none;
padding: 0.5em; padding: 0.5em;
position: absolute; position: absolute;
right: 0; right: 0;
top: 1.5em;
width: max-content; width: max-content;
} }
@ -98,8 +99,8 @@ footer[aria-label="Site footer"] {
&[data-theme-system] { order: -2; } &[data-theme-system] { order: -2; }
.site__theme-dropdown &:hover { .site__theme-dropdown &:hover {
background: var(--base0C); background: var(--accent-color);
color: var(--base00); color: var(--background);
cursor: pointer; cursor: pointer;
} }
} }
@ -120,21 +121,21 @@ footer[aria-label="Site footer"] {
.page-link { .page-link {
background: var(--base01); background: var(--base01);
color: var(--base0C); color: var(--accent-color);
text-decoration: none; text-decoration: none;
padding: 0.5em; padding: 0.5em;
&:hover { &:hover {
background: var(--base0B); background: var(--base0B);
color: var(--base00); color: var(--background);
text-decoration: none; text-decoration: none;
} }
} }
.page-link--active { .page-link--active {
@extend .page-link; @extend .page-link;
background: var(--base05); background: var(--foreground);
color: var(--base00); color: var(--background);
font-weight: bolder; font-weight: bolder;
padding: 0.5em; padding: 0.5em;
} }
@ -154,7 +155,7 @@ footer[aria-label="Site footer"] {
} }
.post__meta { .post__meta {
color: var(--base05); color: var(--foreground);
font-size: 0.9em; font-size: 0.9em;
margin-top: 0.5em; margin-top: 0.5em;
@ -165,7 +166,7 @@ footer[aria-label="Site footer"] {
.post--single & { .post--single & {
background: var(--base01); background: var(--base01);
color: var(--base05); color: var(--foreground);
font-size: 0.9em; font-size: 0.9em;
padding: 0 0.5em; padding: 0 0.5em;
} }
@ -173,7 +174,7 @@ footer[aria-label="Site footer"] {
.post__meta--single { .post__meta--single {
background: var(--base01); background: var(--base01);
color: var(--base05); color: var(--foreground);
font-size: 0.9em; font-size: 0.9em;
margin: 0.5em auto; margin: 0.5em auto;
padding: 0.5em 1em; padding: 0.5em 1em;

View File

@ -11,6 +11,9 @@
--content-width: 750px; --content-width: 750px;
--border-style: var(--base06) solid 1px; --border-style: var(--base06) solid 1px;
--background: var(--base00);
--foreground: var(--base05);
--accent-color: var(--base0C);
} }
$mobile-breakpoint: 600px; $mobile-breakpoint: 600px;
@ -19,8 +22,8 @@ $tablet-breakpoint: 860px;
:root { :root {
font-family: var(--body-family); font-family: var(--body-family);
font-size: var(--font-size); font-size: var(--font-size);
background: var(--base00); background: var(--background);
color: var(--base05); color: var(--foreground);
line-height: var(--vertical-rhythm); line-height: var(--vertical-rhythm);
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -28,7 +31,7 @@ $tablet-breakpoint: 860px;
@mixin header-link-hover-style { @mixin header-link-hover-style {
> *:hover { > *:hover {
color: var(--base0C); color: var(--accent-color);
text-decoration: none; text-decoration: none;
} }
} }