Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix background colors margin + fix dark mode #253

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+51 −21
Open

Fix background colors margin + fix dark mode #253

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fcde02e
Fix margin + fix backgrounds in dark mode
Vadorequest Apr 3, 2022
1e6e79a
Use the same colors as in https://github.com/transitive-bullshit/next…
Vadorequest Apr 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
72 changes: 51 additions & 21 deletions styles/notion.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@
.notion-brown_background,
.notion-gray_background {
padding: 0 0.5rem;
margin: 0 -0.5rem 0 -0.25rem;
margin: 0 -0.25rem 0 -0.25rem;
border-radius: 0.5rem;
border-bottom-left-radius: 0.125rem;
box-decoration-break: clone;
Expand All @@ -230,54 +230,84 @@

/* light yellow */
background-image: linear-gradient(
119deg,
90deg,
var(--bg-color),
#fff697 10.5%,
#fdf59d 85.29%,
#fdeed2 10.5%,
#fde4b5 85.29%,
var(--bg-color)
);
}

.notion-purple_background {
/* light pink */
background-image: linear-gradient(
90deg,
var(--bg-color),
#e4d3fd 10.5%,
#d3b6ff 85.29%,
var(--bg-color)
);
}

.notion-purple_background,
.notion-pink_background {
/* light pink */
background-image: linear-gradient(
119deg,
90deg,
var(--bg-color),
#f5b8d1 10.5%,
#f9bcd3 85.29%,
#ffd2e7 10.5%,
#ffadd3 85.29%,
var(--bg-color)
);
}

.notion-blue_background,
.notion-gray_background {
/* light blue */
background-image: linear-gradient(
119deg,
90deg,
var(--bg-color),
#adedfc 10.5%,
#adebfd 85.29%,
#cfcfcf 10.5%,
#a0a0a0 85.29%,
var(--bg-color)
);
}

.notion-blue_background {
/* light blue */
background-image: linear-gradient(
90deg,
var(--bg-color),
#d9eafd 10.5%,
#b3d6ff 85.29%,
var(--bg-color)
);
}

.notion-red_background {
/* light red */
background-image: linear-gradient(
90deg,
var(--bg-color),
#ffc3c3 10.5%,
#fba6a3 85.29%,
var(--bg-color)
);
}

.notion-red_background,
.notion-orange_background {
/* light red */
background-image: linear-gradient(
119deg,
90deg,
var(--bg-color),
#f5c4ff 10.5%,
#e7a8fc 85.29%,
#ffe6b1 10.5%,
#ffd09b 85.29%,
var(--bg-color)
);
}

.notion-teal_background {
/* light green */
background-image: linear-gradient(
119deg,
90deg,
var(--bg-color),
#d4eabc 10.5%,
#d2eabc 85.29%,
Expand All @@ -288,10 +318,10 @@
.notion-brown_background {
/* dark blue */
background-image: linear-gradient(
119deg,
90deg,
var(--bg-color),
#96b8ec 10.5%,
#a6c3f0 85.29%,
#cab7ae 10.5%,
#b1998d 85.29%,
var(--bg-color)
);
}
Expand All @@ -308,7 +338,7 @@
padding: 0;
margin: 0;
border-radius: 0;
background: none !important;
background-image: none !important;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is intentional for my site. i don't really like how the highlight colors look in dark mode, so i decided to just disable them entirely.

happy to take suggestions on how to make things look better tho :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I thought it might be the reason. Here is a diff between how they lock in dark/light modes if it helps.

image
image

}

/* if you don't want rounded page icon images, remove this */
Expand Down