hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Decouple primary color tint from bg color

Browse Source 
Can be useful for websites with an image as a background :^)
This commit is contained in:
David Lapshin
2024-05-20 19:39:39 +03:00
parent 328c8ed0b3
commit 399be13097
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
sass/_general.scss
View File

@ -26,7 +26,7 @@ body {
body { body {
display: grid; // Put footer at the bottom for short pages, such as the 404 display: grid; // Put footer at the bottom for short pages, such as the 404
grid-template-rows: auto minmax(auto, 1fr) auto; // Header, stuff, footer grid-template-rows: auto minmax(auto, 1fr) auto; // Header, stuff, footer
background: var(--bg-color); background: var(--bg-color), var(--primary-color);
min-height: 100vh; min-height: 100vh;
color: var(--fg-color); color: var(--fg-color);
line-height: 1.6; line-height: 1.6;

4
sass/_variables.scss
View File

@ -1,6 +1,6 @@
:root { :root {
// COLORS // COLORS
--bg-color: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), var(--primary-color); --bg-color: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
--fg-color: rgba(0, 0, 0, 0.8); --fg-color: rgba(0, 0, 0, 0.8);
--fg-muted-1: rgba(0, 0, 0, 0.05); --fg-muted-1: rgba(0, 0, 0, 0.05);
--fg-muted-2: rgba(0, 0, 0, 0.1); --fg-muted-2: rgba(0, 0, 0, 0.1);
@ -52,7 +52,7 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
// COLORS // COLORS
--bg-color: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), var(--primary-color); --bg-color: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9));
--fg-color: rgb(255, 255, 255); --fg-color: rgb(255, 255, 255);
--fg-muted-1: rgba(255, 255, 255, 0.05); --fg-muted-1: rgba(255, 255, 255, 0.05);
--fg-muted-2: rgba(255, 255, 255, 0.1); --fg-muted-2: rgba(255, 255, 255, 0.1);