mirror of
https://github.com/d0zingcat/nextjs-notion-starter-kit.git
synced 2026-05-23 07:26:44 +00:00
9c8e907cdb
Longer page titles text to overflow off the right side of the screen. This small change will enable users to scroll the header horizontally on mobile devices so they can read the whole page title
386 lines
7.3 KiB
CSS
386 lines
7.3 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;
|
|
}
|
|
|
|
.notion-asset-wrapper-video > div,
|
|
.notion-asset-wrapper-video video {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.notion-header .notion-nav-header {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
overflow-x: 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 {
|
|
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%);
|
|
}
|
|
|
|
.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 {
|
|
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-row {
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
.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 {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0;
|
|
min-height: 23px;
|
|
}
|
|
|
|
.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;
|
|
border-bottom-width: 0.1rem;
|
|
background: transparent;
|
|
background-origin: border-box;
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 100%;
|
|
background-size: 0 0.1rem;
|
|
}
|
|
|
|
.notion-link:focus,
|
|
.notion-link:hover {
|
|
border-bottom-color: transparent;
|
|
|
|
background-image: linear-gradient(90.68deg, #b439df 0.26%, #e5337e 102.37%);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 100%;
|
|
background-size: 100% 0.1rem;
|
|
|
|
transition-property: background-position, background-size;
|
|
transition-duration: 300ms;
|
|
}
|
|
|
|
.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)
|
|
);
|
|
}
|
|
|
|
/* disable highlighting in dark mode */
|
|
.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);
|
|
}
|
|
|
|
/* Workaround for Firefox not supporting backdrop-filter yet */
|
|
@-moz-document url-prefix() {
|
|
.dark-mode .notion-header {
|
|
background: hsla(203, 8%, 20%, 0.8);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|