notion.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-viewport {
  padding: 0px;
}

.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 {
  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;
  overflow: visible;
  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-toggle {
  padding: 5px 0.8rem;
}

.notion-header .breadcrumbs ::-webkit-scrollbar {
  width: 0; /* Remove scrollbar space */
  background: transparent; /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
.notion-header .breadcrumbs ::-webkit-scrollbar-thumb {
  background: #810101;
}

.notion-header .breadcrumbs {
  overflow-y: auto;
}

.notion-quote {
  /* padding: 0.2em 0.75em 0.2em 1.25em; */
  padding: 0.4em 0.8em !important;
  font-size: 1.1em;
  background-color: rgb(0 0 0 / 15%);
  border-left: 0px;
  border-radius: 0.5em !important;
  /* border-bottom-left-radius: 0.75em !important; */
  /* text-indent: 1em; */
  width: auto;
  margin: 0px !important;
}

.dark-mode .notion-quote {
  /* color: var(--bg-color); */
  background-color: rgb(0 0 0 / 15%);
}

.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;
  }
}

@media only screen and (max-width: 400px) {
  .notion-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 10vmin;
    gap: 10vmin;
  }
}

.notion .notion-page-icon-cover {
  margin-left: auto;
  margin-right: auto;
}

.notion-title {
  display: block;
  text-align: center;
}

.notion-collection-column-title {
  display: none !important;
}

.notion-collection-row-property .notion-property {
  display: flex;
  justify-content: center;
}

.notion-collection-row-value {
  padding: 0;
}

.notion-table-of-contents-item-body {
  border-bottom: 0px;
}

.notion-page-cover {
  margin-top: 1rem;
  max-width: 1250px;
  border-radius: 0.75em;
}

@media only screen and (max-width: 1200px) {
  .notion-page-cover {
    border-radius: 0;
  }
}

.notion-page-title-text {
  border-bottom: 0px;
}

.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 {
  border-width: 3px;
  border-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #a7805b 10%, #a7805b 90%, rgba(255, 255, 255, 0) 100%);
  border-image-slice: 2;
  position: relative;
  transition: unset;
  opacity: 1;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.notion-link .dark-mode {
  border-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #a7805b 10%, #a7805b 90%, rgba(255, 255, 255, 0) 100%);
}

.notion-link:hover {
  border-width: 3px;
  border-image: linear-gradient(90deg, #a7805b 0%, #a7805b 100%);
  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;
  /* margin: 0; */
  border-radius: 0.25rem;
  /* border-bottom-left-radius: 0.125rem; */
  box-decoration-break: clone;

  background-color: none;

  /* --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
  /* box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); */

  /* light yellow */
  color: #2f3437;
  background-image: linear-gradient(119deg, var(--bg-color), #fff697 0%, #fdf59d 100%, var(--bg-color));
}

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

.notion-gray_background {
  /* gray */
  background-image: linear-gradient(119deg, var(--bg-color), rgb(220, 220, 220) 0%, rgb(220, 220, 220) 100%, var(--bg-color));
}

.dark-mode .notion-gray_background {
  /* gray */
  color: #fff;
  background-image: linear-gradient(119deg, var(--bg-color), rgb(80, 80, 80) 0%, rgb(80, 80, 80) 100%, var(--bg-color));
}

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

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

.notion-teal_background {
  /* light green */
  background-image: linear-gradient(119deg, var(--bg-color), #d4eabc 0%, #d2eabc 100%, var(--bg-color));
}

.notion-brown_background {
  /* dark blue */
  background-image: linear-gradient(119deg, var(--bg-color), #96b8ec 0%, #a6c3f0 100%, 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; */
  backdrop-filter: opacity(60%);
  /* background: none !important; */
  background-color: var(--bg-color);
  --tw-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.notion-block-f382a57807bc40779860eb079d0144f2 .lazy-image-wrapper {
  border-radius: 16px;
}

/* if you don't want rounded page images, remove this */
.notion-page-icon-wrapper img.notion-page-icon {
  border-radius: 50%;
  box-shadow: 0 8px 40px 0 rgb(0 0 0 / 21%);
}

.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) brightness(60%);
}

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