mirror of
https://github.com/d0zingcat/nextjs-notion-starter-kit.git
synced 2026-05-13 15:09:47 +00:00
349 lines
6.6 KiB
CSS
349 lines
6.6 KiB
CSS
/**
|
|
* 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 {
|
|
--notion-max-width: 720px;
|
|
--notion-header-height: 54px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* <-- Fix embedded video's size overflows its container */
|
|
.notion-asset-wrapper-video > div,
|
|
.notion-asset-wrapper-video video {
|
|
width: 100% !important;
|
|
}
|
|
/* Fix embedded video's size overflows its container --> */
|
|
|
|
.notion-header .nav-header {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.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 {
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.notion-collection-card {
|
|
overflow: visible;
|
|
}
|
|
|
|
.notion-collection-card-cover {
|
|
border-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%);
|
|
}
|
|
|
|
/* 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;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.notion-h1,
|
|
.notion-h2,
|
|
.notion-h3 {
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
.notion-callout {
|
|
margin: 0.75em 0;
|
|
}
|
|
|
|
.notion-hr {
|
|
margin: 2em 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) {
|
|
.notion-search-button {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.notion .notion-page-icon-cover {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.notion-title {
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
.notion-collection-page-properties .notion-collection-column-title {
|
|
display: none;
|
|
}
|
|
|
|
.notion-collection-row-property .notion-property {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.notion-collection-row-value {
|
|
padding: 0;
|
|
}
|
|
|
|
.notion-page-cover-wrapper,
|
|
.notion-page-cover-wrapper span,
|
|
.notion-page-cover-wrapper img {
|
|
max-width: 1200px !important;
|
|
border-radius: 24px;
|
|
}
|
|
|
|
.notion-page-cover-wrapper {
|
|
box-shadow: 2px 2px 8px 4px rgba(15, 15, 15, 0.1);
|
|
}
|
|
|
|
@media only screen and (max-width: 1200px) {
|
|
.notion-page-cover-wrapper,
|
|
.notion-page-cover-wrapper span,
|
|
.notion-page-cover-wrapper img {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
.notion-block-ab9a258d6cf444f3bb40dc2600feae91 .notion-page-link {
|
|
justify-content: center;
|
|
padding: 2em;
|
|
}
|
|
|
|
.notion-code {
|
|
background: rgba(249, 250, 251, 1);
|
|
border: 1px solid rgba(229, 231, 235, 1);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.notion-link {
|
|
position: relative;
|
|
transition: unset;
|
|
opacity: 1;
|
|
}
|
|
|
|
.notion-link:hover {
|
|
border-width: 0;
|
|
border-bottom-width: 3px;
|
|
border-image: linear-gradient(90.68deg, #b439df 0.26%, #e5337e 102.37%);
|
|
border-image-slice: 1;
|
|
}
|
|
|
|
.notion-red_background,
|
|
.notion-pink_background,
|
|
.notion-blue_background,
|
|
.notion-purple_background,
|
|
.notion-teal_background,
|
|
.notion-yellow_background,
|
|
.notion-orange_background,
|
|
.notion-brown_background,
|
|
.notion-gray_background {
|
|
padding: 0 0.5rem;
|
|
margin: 0 -0.5rem 0 -0.25rem;
|
|
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%,
|
|
var(--bg-color)
|
|
);
|
|
}
|
|
|
|
.notion-purple_background,
|
|
.notion-pink_background {
|
|
/* light pink */
|
|
background-image: linear-gradient(
|
|
119deg,
|
|
var(--bg-color),
|
|
#f5b8d1 10.5%,
|
|
#f9bcd3 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%,
|
|
var(--bg-color)
|
|
);
|
|
}
|
|
|
|
.notion-red_background,
|
|
.notion-orange_background {
|
|
/* light red */
|
|
background-image: linear-gradient(
|
|
119deg,
|
|
var(--bg-color),
|
|
#f5c4ff 10.5%,
|
|
#e7a8fc 85.29%,
|
|
var(--bg-color)
|
|
);
|
|
}
|
|
|
|
.notion-teal_background {
|
|
/* light green */
|
|
background-image: linear-gradient(
|
|
119deg,
|
|
var(--bg-color),
|
|
#d4eabc 10.5%,
|
|
#d2eabc 85.29%,
|
|
var(--bg-color)
|
|
);
|
|
}
|
|
|
|
.notion-brown_background {
|
|
/* dark blue */
|
|
background-image: linear-gradient(
|
|
119deg,
|
|
var(--bg-color),
|
|
#96b8ec 10.5%,
|
|
#a6c3f0 85.29%,
|
|
var(--bg-color)
|
|
);
|
|
}
|
|
|
|
.dark-mode .notion-red_background,
|
|
.dark-mode .notion-pink_background,
|
|
.dark-mode .notion-blue_background,
|
|
.dark-mode .notion-purple_background,
|
|
.dark-mode .notion-teal_background,
|
|
.dark-mode .notion-yellow_background,
|
|
.dark-mode .notion-orange_background,
|
|
.dark-mode .notion-brown_background,
|
|
.dark-mode .notion-gray_background {
|
|
padding: 0;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
background: none !important;
|
|
}
|
|
|
|
/* if you don't want rounded page icon images, remove this */
|
|
.notion-page-icon-hero.notion-page-icon-image {
|
|
border-radius: 50%;
|
|
box-shadow: 0 8px 40px 0 rgb(0 0 0 / 21%);
|
|
}
|
|
.notion-page-icon-hero.notion-page-icon-image span,
|
|
.notion-page-icon-hero.notion-page-icon-image img {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.notion-header {
|
|
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: saturate(180%) blur(8px);
|
|
}
|
|
|
|
.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;
|
|
}
|