daudix/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: Proper dark style (no more filter hack)

Browse source
This commit is contained in:
David Lapshin 2023-08-10 05:27:31 +03:00
parent 5319fd789a
commit 6a31ea3770
Signed by: daudix
GPG key ID: 93ECF15D3053D81C
1 changed files with 136 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
style.css
View file

@ -58,11 +58,29 @@
--dark5: rgb(0, 0, 0);
--primary-color: var(--purple2); /* Set your project color */
--borders: var(--light3);
--light-op05: rgba(255, 255, 255, 0.05);
--light-op07: rgba(255, 255, 255, 0.07);
--light-op09: rgba(255, 255, 255, 0.09);
--light-op40: rgba(255, 255, 255, 0.4);
--light-op50: rgba(255, 255, 255, 0.5);
--dark-op05: rgba(0, 0, 0, 0.05);
--dark-op07: rgba(0, 0, 0, 0.07);
--dark-op09: rgba(0, 0, 0, 0.09);
--dark-op40: rgba(0, 0, 0, 0.4);
--dark-op50: rgba(0, 0, 0, 0.5);
--light-bg1: rgb(250, 250, 250);
--light-bg2: rgb(255, 255, 255);
--light-bg3: rgb(75, 75, 75);
--dark-bg1: rgb(36, 36, 36);
--dark-bg2: rgb(30, 30, 30);
--dark-bg3: rgb(11, 11, 11);
--background-color: var(--light-bg1);
--background-color-dark: var(--dark-bg2);
}
/* Typography */
@ -94,7 +112,7 @@ body {
body {
color: var(--dark4);
background-color: var(--light2);
background-color: var(--background-color);
/* ⇩⇩ put footer at the bottom for short pages, such as the 404 ⇩⇩ */
display: grid;
min-height: 100vh;
@ -132,18 +150,13 @@ h2 {
@media (prefers-color-scheme: dark) {
body {
filter: invert(100%) hue-rotate(180deg);
color: var(--light2);
background-color: var(--background-color-dark);
}
html {
background-color: var(--dark5);
}
img,
video,
iframe {
filter: invert(100%) hue-rotate(180deg);
}
}
a {
@ -166,6 +179,12 @@ small {
color: var(--dark-op50);
}
@media (prefers-color-scheme: dark) {
small {
color: var(--light-op50);
}
}
dl {
padding: 0;
}
@ -227,6 +246,13 @@ blockquote {
border-left: 0.3rem solid var(--dark-op07);
}
@media (prefers-color-scheme: dark) {
blockquote {
color: var(--light-op40);
border-left: 0.3rem solid var(--light-op07);
}
}
blockquote > :first-child {
margin-top: 0;
}
@ -254,12 +280,34 @@ blockquote > :last-child {
-moz-text-fill-color: transparent;
}
@media (prefers-color-scheme: dark) {
.ascii {
background: linear-gradient(
to top,
rgba(246, 245, 244, 1) 0%,
rgba(246, 245, 244, 0) 100%
);
background-clip: text;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
}
.ascii:hover {
-webkit-text-fill-color: var(--dark4);
-moz-text-fill-color: var(--dark4);
text-shadow: var(--purple2) -6px 0 12px, var(--blue2) 6px 0 12px;
}
@media (prefers-color-scheme: dark) {
.ascii:hover {
-webkit-text-fill-color: var(--light2);
-moz-text-fill-color: var(--light2);
}
}
@media only screen and (max-device-width: 480px) {
/*mobile*/
.ascii {
@ -283,12 +331,28 @@ kbd {
-webkit-user-select: none;
}
@media (prefers-color-scheme: dark) {
kbd {
background-color: var(--light-op05);
border: 1px solid var(--light-op07);
border-radius: 4px;
box-shadow: inset 0 -1px 0 var(--light-op09);
color: var(--light2);
}
}
kbd:active {
box-shadow: inset 0 0px 0 var(--dark-op09);
vertical-align: bottom;
filter: contrast(0.2);
}
@media (prefers-color-scheme: dark) {
kbd:active {
box-shadow: inset 0 0px 0 var(--light-op09);
}
}
/* Layout */
.container {
width: 80%;
@ -332,7 +396,6 @@ kbd:active {
@media (prefers-color-scheme: dark) {
#logo {
filter: invert(100%) hue-rotate(180deg); /* uninvert */
background-image: url("assets/page-logo-i.svg");
}
}
@ -391,6 +454,13 @@ table td {
border: 1px solid var(--dark-op05);
}
@media (prefers-color-scheme: dark) {
table th,
table td {
border: 1px solid var(--light-op05);
}
}
td,
th {
padding: 0;
@ -702,6 +772,13 @@ tbody td {
0 2px 6px 2px rgba(0, 0, 0, 0.03);
}
@media (prefers-color-scheme: dark) {
.highlighter-rouge {
background-color: var(--dark-bg1);
background-image: linear-gradient(to right, var(--light-op05) 1px, transparent 1px), linear-gradient(to bottom, var(--light-op05) 1px, transparent 1px);
}
}
@media only screen and (max-device-width: 480px) {
/*mobile*/
.highlighter-rouge {
@ -722,6 +799,12 @@ code.highlighter-rouge {
background-image: unset;
}
@media (prefers-color-scheme: dark) {
code.highlighter-rouge {
background-color: var(--light-op07);
}
}
/* Buttons */
.dialog-buttons {
display: flex;
@ -741,6 +824,13 @@ code.highlighter-rouge {
color: var(--dark5);
}
@media (prefers-color-scheme: dark) {
.inline-button {
background-color: var(--light-op05);
color: var(--light2);
}
}
/* Comments */
.avatar {
background-position: center;
@ -902,6 +992,12 @@ section#comments .comment .card figure {
0 2px 6px 2px rgba(0, 0, 0, 0.03);
}
@media (prefers-color-scheme: dark) {
section#comments .comment .card figure {
background-color: var(--dark-bg1);
}
}
section#comments .comment .card figure img {
margin: unset;
}
@ -1042,8 +1138,13 @@ nav {
/* padding-right: 0.2rem; */
}
.nav-title:hover,
.nav-title:focus {
@media (prefers-color-scheme: dark) {
.nav-title {
color: var(--light-op50);
}
}
.nav-title:hover {
text-decoration: underline;
}
@ -1060,6 +1161,12 @@ nav {
/* padding: 0 1rem 0 0; */
}
@media (prefers-color-scheme: dark) {
.nav li {
color: var(--light-op50);
}
}
/* .nav li:last-child {
padding-right: 0;
} */
@ -1075,15 +1182,33 @@ nav {
/* transition: 200ms; */
}
@media (prefers-color-scheme: dark) {
.nav a {
color: var(--light-op50);
}
}
.nav a:hover {
background-color: var(--dark-op05);
/* box-shadow: var(--purple2) -6px 0 12px, var(--blue2) 6px 0 12px; */
}
@media (prefers-color-scheme: dark) {
.nav a:hover {
background-color: var(--light-op05);
}
}
.nav svg {
fill: var(--dark-op50);
}
@media (prefers-color-scheme: dark) {
.nav svg {
fill: var(--light-op50);
}
}
.nav .feed-icon {
transform: translateY(0.125em);
}