Skip to content

Commit

Permalink
darkmode test
Browse files Browse the repository at this point in the history
  • Loading branch information
@hanmilLee
hanmilLee committed Mar 25, 2023
1 parent 80e85b1 commit f2b7020
Showing 1 changed file with 65 additions and 153 deletions.
218 changes: 65 additions & 153 deletions styles/notion.css
View file
Original file line number Diff line number Diff line change
@@ -1,123 +1,3 @@
/**
* This file contains site-specifc style overrides for Notion elements from
* react-notion-x.
*
* react-notion-x's goal is to match styling as close as possible to Notion,
* whereas our goal with this site is to adjust Notion's styling in a few key
* places to add some flare.
*/

.notion-page {
padding-bottom: calc(max(5vh, 32px)) !important;
line-height: 1.65;
}

/* .index-page {
--notion-max-width: 900px;
} */

.notion-text {
padding: 0.5em 2px;
}

/* .notion-asset-caption {
text-align: center;
} */

.notion-asset-wrapper {
margin-top: 1em;
margin-bottom: 1em;
}

.notion-asset-wrapper-video > div,
.notion-asset-wrapper-video video {
width: 100% !important;
}

.notion-header .notion-nav-header {
max-width: 1400px;
margin: 0 auto;
}

.notion-nav-header-rhs {
gap: 0.5rem;
}

.notion-gallery-grid {
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
grid-gap: 6vmin;
gap: 6vmin;
}

.notion-gallery-grid .notion-page-icon-inline {
display: none;
}

.notion-gallery-grid .notion-page-title-text {
font-size: 2em;
white-space: unset;
}

.notion-gallery-grid .notion-collection-card-property {
white-space: unset;
text-overflow: unset;
}

.notion-gallery-grid .notion-property-text {
font-size: 14px;
}

.notion-collection-card {
border-radius: 16px;

box-shadow: none;
}

.notion-collection-card-cover img {
}

.notion-collection-card {
overflow: visible;
}

.notion-collection-card-cover {
border-top-left-radius: 16px;
border-top-right-radius: 16px;
box-shadow: 2px 2px 8px 4px rgba(15, 15, 15, 0.1);
}

.notion-collection-card-cover {
border-bottom: 0 none;
transition: filter 150ms linear;
filter: none;
}

/* .notion-collection-card:hover .notion-collection-card-cover {
filter: brightness(120%);
} */

.notion-collection-card-body {
padding: 10px;
}

/* only target safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
_::-webkit-full-page-media,
_:future,
:root,
.notion-collection-card-cover {
transition: none 0ms linear;
}
}

.notion-quote {
padding: 0.2em 0.75em;
line-height: 1.5;
font-style: italic;
font-size: 1.2em;
border-left: 4px solid #67bdfc;
}

.notion-h1,
.notion-h2,
.notion-h3 {
Expand All @@ -129,7 +9,21 @@
}

.notion-hr {
margin: 2em 0;
margin: 2px 0;
}

@media only screen and (max-width: 920px) {
.index-page.notion-page {
padding-left: 2vw;
padding-right: 2vw;
}
}

@media only screen and (max-width: 720px) {
.notion-page {
padding-left: 2vw;
padding-right: 2vw;
}
}

@media only screen and (max-width: 600px) {
Expand Down Expand Up @@ -210,7 +104,7 @@
background-size: 0 0.1rem;
}

/* .notion-link:focus,
.notion-link:focus,
.notion-link:hover {
border-bottom-color: transparent;

Expand All @@ -221,7 +115,7 @@

transition-property: background-position, background-size;
transition-duration: 300ms;
} */
}

.notion-red_background,
.notion-pink_background,
Expand All @@ -237,57 +131,75 @@
border-radius: 0.5rem;
border-bottom-left-radius: 0.125rem;
box-decoration-break: clone;

background-color: none;

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

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

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

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

.notion-red_background,
.notion-red_background {
background-image: linear-gradient(
119deg,
var(--bg-color),
#ffc3c3 10.5%,
#fba6a3 85.29%,
var(--bg-color)
);
}
.notion-orange_background {
/* light red */
background-image: linear-gradient(
119deg,
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,
var(--bg-color),
Expand All @@ -298,12 +210,11 @@
}

.notion-brown_background {
/* dark blue */
background-image: linear-gradient(
119deg,
var(--bg-color),
#96b8ec 10.5%,
#a6c3f0 85.29%,
#cab7ae 10.5%,
#b1998d 85.29%,
var(--bg-color)
);
}
Expand All @@ -318,10 +229,11 @@
.dark-mode .notion-orange_background,
.dark-mode .notion-brown_background,
.dark-mode .notion-gray_background {
padding: 0;
/* padding: 0;
margin: 0;
border-radius: 0;
background: none !important;
border-radius: 0; */
color: var(--bg-color);
/* background: none !important; */
}

/* if you don't want rounded page icon images, remove this */
Expand All @@ -335,14 +247,14 @@
}

.notion-header {
background: transparent;
backdrop-filter: blur(8px);
background: hsla(0, 0%, 100%, 0.8);
backdrop-filter: saturate(180%) blur(16px);
}

.dark-mode .notion-header {
background: transparent;
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px);
backdrop-filter: saturate(180%) blur(8px);
}

/* Workaround for Firefox not supporting backdrop-filter yet */
Expand All @@ -352,15 +264,15 @@
}
}

/* .notion-bookmark:hover {
.notion-bookmark:hover {
border-image: linear-gradient(90.68deg, #b439df 0.26%, #e5337e 102.37%);
border-image-slice: 1;
} */
}

.notion-block-ab9a258d6cf444f3bb40dc2600feae91 .notion-column {
padding: 0;
}

.notion-block-260baa77f1e1428b97fb14ac99c7c385 {
display: none;
}
}

1 comment on commit f2b7020

@vercel
Copy link

@vercel vercel bot commented on f2b7020 Mar 25, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

nextjs-notion-starter-kit – ./

nextjs-notion-starter-kit-hanmillee.vercel.app
nextjs-notion-starter-kit-git-main-hanmillee.vercel.app

Please sign in to comment.