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

View File

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

View File

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