From 49f0f243f5f3724190bf3d2bfb46831ed27d4c29 Mon Sep 17 00:00:00 2001
From: hanmillee <94hanmil@gmail.com>
Date: Sun, 26 Mar 2023 00:37:12 +0900
Subject: [PATCH] tmp css

---
 styles/custom/index.scss  |  10 -
 styles/custom/notion.scss | 698 --------------------------------------
 styles/custom/vars.scss   | 140 --------
 styles/global.css         |  44 ---
 styles/notion.css         | 114 +++++++
 styles/prism-theme.css    | 131 -------
 6 files changed, 114 insertions(+), 1023 deletions(-)
 delete mode 100644 styles/custom/index.scss
 delete mode 100644 styles/custom/notion.scss
 delete mode 100644 styles/custom/vars.scss
 delete mode 100644 styles/global.css
 delete mode 100644 styles/prism-theme.css

diff --git a/styles/custom/index.scss b/styles/custom/index.scss
deleted file mode 100644
index c406fb768f..0000000000
--- a/styles/custom/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// 해당 import문의 순서를 변경하면 스타일이 제대로 적용되지 않습니다.
-@import 'react-notion-x/styles.css';
-@import 'katex/dist/katex.min.css';
-@import 'prismjs/themes/prism-coy.css';
-@import 'styles/global.css';
-@import 'styles/notion.css';
-@import 'styles/prism-theme.css';
-
-@import './vars.scss';
-@import './notion.scss';
diff --git a/styles/custom/notion.scss b/styles/custom/notion.scss
deleted file mode 100644
index cb1bd4e541..0000000000
--- a/styles/custom/notion.scss
+++ /dev/null
@@ -1,698 +0,0 @@
-// 스크롤 스타일 제거
-::-webkit-scrollbar {
-  display: none;
-}
-
-// 반응형 처리
-@media only screen and (max-width: 1500px) {
-  :root {
-    --notion-page-left-right-padding: 8vw;
-    --notion-page-fullwith-left-right-padding: 8vw;
-  }
-}
-
-@media only screen and (max-width: 720px) {
-  :root {
-    --base-font-size: 0.95rem;
-  }
-}
-
-/**
- * ================ 전체적인 레이아웃 구성 관련 ================
- */
-body {
-  font-size: 16px;
-  transition-duration: 250ms;
-  transition-property: background-color, color;
-  -webkit-font-smoothing: antialiased;
-
-  .notion {
-    font-size: var(--base-font-size);
-    transition-duration: 250ms;
-    transition-property: background-color, color;
-  }
-
-  .notion-page {
-    padding-left: var(--notion-page-left-right-padding);
-    padding-right: var(--notion-page-left-right-padding);
-  }
-
-  .notion-full-width {
-    padding-left: var(--notion-page-fullwith-left-right-padding);
-    padding-right: var(--notion-page-fullwith-left-right-padding);
-
-    .notion-title {
-      text-align: left;
-    }
-
-    .notion-page-icon-hero {
-      left: var(--notion-fullwith-page-left-right-padding);
-    }
-  }
-
-  // 헤더
-  .notion-header {
-    position: fixed;
-    transition-duration: 250ms;
-    transition-property: background-color, color;
-
-    .notion-nav-header {
-      max-width: var(--notion-max-width);
-    }
-  }
-
-  // 다크모드 아닐때
-  &:not(.dark-mode) {
-    // 글 목록을 가지고 있는 페이지라면 배경 색 변경
-    .hasCollectionView {
-      --bg-color: #f2f3f7;
-    }
-  }
-}
-
-/**
- * ================ notion 페이지 관련 스타일 ================
- */
-.notion {
-  // 페이지
-  .notion-page {
-    line-height: 1.6;
-  }
-
-  // 페이지 제목
-  .notion-title {
-    text-align: left;
-    font-size: 2em;
-  }
-
-  // 페이지 메인 이미지 (커버 이미지)
-  .notion-page-cover-wrapper,
-  .notion-page-cover-wrapper span,
-  .notion-page-cover-wrapper img {
-    max-width: 100% !important;
-    border-radius: 0;
-    height: calc(30vh + var(--notion-header-height)) !important;
-    min-height: calc(30vh + var(--notion-header-height)) !important;
-    max-height: calc(30vh + var(--notion-header-height)) !important;
-  }
-
-  // 페이지 메인 이미지 (커버 이미지) 없을 때
-  .notion-page-no-cover {
-    margin-top: 130px !important;
-  }
-
-  // 페이지 아이콘
-  .notion-page-icon-hero {
-    margin-left: 0 !important;
-    left: var(--notion-page-left-right-padding);
-  }
-
-  // 페이지 속성들
-  .notion-collection-page-properties {
-    .notion-collection-row {
-      margin-bottom: 5rem;
-      border-bottom: none;
-      padding-bottom: 0;
-      padding: 0;
-    }
-
-    .notion-collection-row-body {
-      flex-wrap: wrap;
-      flex-direction: row;
-      gap: 0;
-    }
-
-    .notion-collection-row-property {
-      margin-bottom: 0.5rem;
-
-      + .notion-collection-row-property {
-        &::before {
-          content: '';
-          width: 1px;
-          height: 10px;
-          background-color: var(--fg-color);
-          opacity: 0.35;
-          margin: 0 0.5rem;
-        }
-      }
-    }
-
-    @media (max-width: 768px) {
-      .notion-collection-property-type-multi_select {
-        width: 100%;
-
-        &::before {
-          display: none;
-        }
-
-        .notion-property {
-          justify-content: flex-start;
-        }
-      }
-    }
-
-    .notion-collection-row-value {
-      min-height: auto;
-    }
-
-    .notion-property-select-item,
-    .notion-property-multi_select-item {
-      background-color: transparent !important;
-      padding: 0;
-    }
-
-    .notion-property-multi_select-item {
-      opacity: 0.7;
-
-      &::before {
-        content: '#';
-      }
-    }
-  }
-
-  // 페이지 우측 사이드
-  .notion-aside {
-    width: var(--notion-aside-width);
-    margin-left: var(--notion-aside-space-width);
-    flex: none;
-
-    // 우측 사이드 목차
-    .notion-contentPosition {
-      width: 100%;
-
-      .item {
-        display: block;
-        position: relative;
-        padding: 0.1rem 1.3rem 0.1rem 1rem;
-
-        .text {
-          opacity: 0.5;
-          font-size: 0.9rem;
-          transition: 250ms opacity;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        &.level1 {
-          padding-left: calc(1.3rem + 1rem);
-
-          .text {
-            font-size: 0.85rem;
-          }
-        }
-
-        &.level2 {
-          padding-left: calc(1.3rem + 2rem);
-
-          .text {
-            font-size: 0.8rem;
-          }
-        }
-
-        &.active {
-          .text {
-            opacity: 1;
-          }
-        }
-
-        &::before {
-          content: '';
-          height: 100%;
-          position: absolute;
-          left: 0;
-          top: 0;
-          border-right: 1px solid var(--fg-color);
-          z-index: 1;
-          opacity: 0.2;
-        }
-
-        .activeLine {
-          position: absolute;
-          background-color: var(--primary-color);
-          width: 1px;
-          height: 100%;
-          top: 0;
-          left: 0;
-          z-index: 2;
-
-          &::before {
-            content: '';
-            position: absolute;
-            width: 5px;
-            height: 5px;
-            border-radius: 50%;
-            background-color: var(--primary-color);
-            left: 0.5rem;
-            top: 50%;
-            transform: translateY(-50%);
-          }
-        }
-      }
-
-      &.alignRight {
-        .item {
-          text-align: right;
-          padding: 0.3rem 1rem 0.3rem 1.3rem;
-
-          &.level1 {
-            padding-left: 0;
-            padding-right: calc(1.3rem + 1rem);
-          }
-
-          &.level2 {
-            padding-left: 0;
-            padding-right: calc(1.3rem + 2rem);
-          }
-
-          &::before {
-            right: 0;
-            left: auto;
-          }
-
-          .activeLine {
-            right: 0;
-            left: auto;
-
-            &::before {
-              left: auto;
-              right: 0.5rem;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // 메인 페이지인 경우
-  &.indexPage {
-    .notion-nav-header {
-      & > .breadcrumbs:first-child {
-        visibility: hidden;
-      }
-    }
-
-    .notion-aside {
-      display: none;
-    }
-  }
-
-  // 메인페이지가 아닌 모든 페이지
-  &.childPage {
-    .notion-page-icon-hero.notion-page-icon-image span,
-    .notion-page-icon-hero.notion-page-icon-image img {
-      border-radius: 0;
-    }
-
-    .notion-page-icon-hero.notion-page-icon-image {
-      box-shadow: none;
-      border-radius: 0;
-    }
-  }
-}
-
-/**
- * ================ notion 페이지 - 기본 블럭 스타일 (본문 내용) ================
- */
-.notion {
-  // 제목1 ~ 제목3
-  .notion {
-    &-h1 {
-      font-size: 1.7rem;
-
-      &::after {
-        content: '';
-        display: block;
-        height: 2px;
-        width: 4rem;
-        background-color: var(--fg-color);
-        margin-top: 0.5rem;
-        border-radius: 5px;
-      }
-    }
-
-    &-h2 {
-      font-size: 1.4rem;
-      margin-top: 2rem;
-    }
-
-    &-h3 {
-      font-size: 1.2rem;
-    }
-  }
-
-  // 일반 본문
-  .notion-text {
-    padding: 0.2em 2px;
-  }
-
-  // 리스트
-  .notion-list {
-    li {
-      padding: 3.5px 0;
-      padding-left: 0.2rem;
-
-      &::marker {
-        font-weight: 400;
-      }
-    }
-  }
-
-  // 인라인코드
-  .notion-inline-code {
-    font-weight: 400;
-    font-family: var(--notion-font);
-    letter-spacing: 0;
-    background-color: transparent !important;
-    position: relative;
-    z-index: 0;
-    background-color: var(--fg-color-lighten) !important;
-    transition: 250ms background-color;
-  }
-
-  // 코드
-  .notion-code {
-    .notion-code-copy {
-      top: 0.7rem;
-
-      .notion-code-copy-button {
-        display: block;
-      }
-    }
-  }
-
-  // 구분선
-  .notion-hr {
-    margin: 6px 0;
-  }
-
-  // 콜아웃
-  .notion-callout {
-    border-radius: 8px;
-
-    .notion-page-icon-inline {
-      margin-right: 1rem;
-      transform: translateY(1px);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .notion-inline-code {
-      background-color: var(--fg-color-1) !important;
-    }
-
-    &.warning {
-      background-color: var(--notion-yellow_background);
-      border-color: var(--notion-yellow);
-    }
-
-    &.error {
-      background-color: var(--notion-red_background);
-      border-color: var(--notion-red);
-    }
-
-    &.info {
-      background-color: var(--notion-teal_background);
-      border-color: var(--notion-teal);
-    }
-  }
-
-  // 인용
-  .notion-quote {
-    font-style: normal;
-    font-size: var(--base-font-size);
-    border-color: var(--primary-color);
-    padding: 1rem 1rem 1rem 2rem;
-    position: relative;
-    background-color: var(--fg-color-lighten);
-    transition: 250ms background-color;
-  }
-
-  // 체크박스 (할일)
-  .notion-property-checkbox {
-    &-unchecked {
-      border-radius: 2px;
-    }
-
-    &-checked {
-      border-radius: 2px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      svg {
-        width: 10px;
-        height: 10px;
-        top: initial;
-        left: initial;
-      }
-    }
-  }
-
-  // 파일 첨부 - 아이콘
-  .notion-file-icon {
-    fill: var(--fg-color);
-  }
-
-  // 페이지 링크 스타일
-  .notion-page-title-text {
-    border-bottom: none;
-  }
-
-  // 링크
-  .notion-link:focus,
-  .notion-link:hover {
-    border-bottom-color: transparent;
-
-    background-image: linear-gradient(
-      90.68deg,
-      var(--primary-color) 0.26%,
-      var(--primary-gradient-end-color) 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-bookmark {
-    transition: 250ms border-color;
-
-    &:hover {
-      border-color: var(--primary-color);
-    }
-
-    .notion-bookmark-link-icon img {
-      display: block;
-    }
-
-    .notion-bookmark-link-text {
-      max-width: 30rem;
-    }
-  }
-
-  // 아이콘 (페이지 아이콘, 콜아웃 아이콘)
-  .notion-page-icon {
-    font-family: 'Tossface';
-  }
-
-  // 테이블
-  .notion-simple-table-wrap {
-    max-width: 100%;
-    overflow-x: auto;
-
-    td {
-      border-color: var(--fg-color-lighten);
-    }
-
-    tr:first-child td {
-      background-color: var(--fg-color-lighten);
-    }
-  }
-}
-
-/**
- * ================ notion 페이지 - 커스텀 블럭 스타일 ================
- */
-.notion {
-  // 유저 프로필
-  .notion-user-container {
-    display: flex;
-    align-items: center;
-
-    .notion-user {
-      margin-right: 0.3rem;
-    }
-  }
-
-  // 데이터베이스 - 갤러리뷰
-  .postList {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: 0.5rem;
-
-    > a {
-      background-color: var(--notion-card-background-color);
-      box-shadow: 10px 20px 20px 0 rgb(92 95 112 / 8%);
-      width: calc(25% - 30px * 3 / 4);
-      margin-bottom: 30px;
-      transition: 250ms transform, 250ms background-color;
-
-      &:hover {
-        transform: translateY(-8px);
-      }
-
-      @media (min-width: 1431px) {
-        &:not(:nth-child(4n)) {
-          margin-right: calc(30px);
-        }
-      }
-
-      @media (max-width: 1430px) and (min-width: 1051px) {
-        width: calc(33.33% - (30px * 2) / 3);
-
-        &:not(:nth-child(3n)) {
-          margin-right: calc(30px);
-        }
-      }
-
-      @media (max-width: 1050px) and (min-width: 761px) {
-        width: calc(50% - 30px / 2);
-
-        &:not(:nth-child(2n)) {
-          margin-right: calc(30px);
-        }
-      }
-
-      @media (max-width: 760px) {
-        width: 100%;
-      }
-
-      .notion-collection-card-cover {
-        border-radius: 0;
-        border-top-left-radius: 12px;
-        border-top-right-radius: 12px;
-        box-shadow: none;
-
-        img {
-          border-radius: 0;
-        }
-      }
-
-      .notion-collection-card-property {
-        padding: 0;
-      }
-
-      .notion-property-select-item {
-        margin-bottom: 0.3rem;
-      }
-
-      .notion-property-multi_select-item {
-        &::before {
-          content: '#';
-        }
-      }
-
-      .notion-collection-card-body {
-        display: block;
-        padding: 1rem 1.3rem 1rem;
-
-        .notion-page-icon-image {
-          display: none;
-        }
-
-        .notion-page-title-text {
-          font-size: 1rem;
-          font-weight: 600;
-          margin-bottom: 0.5rem;
-        }
-
-        .notion-property-title {
-          width: 100%;
-          display: block;
-        }
-
-        .notion-property-select {
-          margin-right: 6px;
-        }
-
-        .notion-collection-card-property:last-child {
-          overflow: initial;
-
-          .notion-property-created_time {
-            display: block;
-            width: calc(100% + 1.3rem * 2);
-            margin-left: -1.3rem;
-            padding-left: 1.3rem;
-            padding-top: 1rem;
-            margin-top: 0.9rem;
-            border-top: 1px solid var(--line-color);
-            display: block;
-            opacity: 0.7;
-            line-height: 1;
-          }
-        }
-
-        .notion-collection-card-property:nth-child(2) {
-          height: 85px;
-
-          .notion-property-text {
-            width: 100%;
-            white-space: initial;
-            color: #7a7c85;
-            font-size: 13px;
-            overflow: hidden;
-            display: -webkit-box;
-            -webkit-line-clamp: 3;
-            -webkit-box-orient: vertical;
-            text-overflow: ellipsis;
-          }
-        }
-      }
-    }
-  }
-}
-
-/**
- * ================ 다크모드 처리 ================
- */
-.dark-mode {
-  background-color: var(--bg-color);
-
-  // 헤더
-  .notion-header {
-    .breadcrumb {
-      text-shadow: 0 0 3px black;
-    }
-  }
-
-  // 검색
-  .notion-search {
-    color: var(--fg-color);
-    caret-color: var(--fg-color);
-    background-color: var(--bg-color-1);
-
-    input {
-      color: var(--fg-color);
-      caret-color: var(--fg-color);
-      background-color: transparent;
-
-      &::placeholder {
-        color: var(--fg-color-5);
-      }
-    }
-
-    .noResults {
-      color: var(--fg-color-5);
-    }
-
-    .noResultsDetail {
-      color: var(--fg-color-5);
-      opacity: 0.6;
-    }
-  }
-}
diff --git a/styles/custom/vars.scss b/styles/custom/vars.scss
deleted file mode 100644
index 684216c751..0000000000
--- a/styles/custom/vars.scss
+++ /dev/null
@@ -1,140 +0,0 @@
-// vars
-:root {
-  --notion-font: 'SpoqaHanSansNeo', 'Tossface';
-
-  --base-font-size: 1.125rem;
-
-  --primary-color: #daaa52;
-  --primary-gradient-end-color: #8763ff;
-
-  --line-color: rgba(55, 53, 47, 0.1);
-
-  --fg-color: rgb(55, 53, 47);
-  --fg-color-0: rgba(55, 53, 47, 0.09);
-  --fg-color-1: rgba(55, 53, 47, 0.16);
-  --fg-color-2: rgba(55, 53, 47, 0.4);
-  --fg-color-3: rgba(55, 53, 47, 0.6);
-  --fg-color-4: #000;
-  --fg-color-5: rgba(55, 53, 47, 0.024);
-  --fg-color-6: rgba(55, 53, 47, 0.8);
-  --fg-color-icon: var(--fg-color);
-  --fg-color-lighten: #eff3f7;
-
-  --bg-color: #ffffff;
-  --bg-color-0: rgba(135, 131, 120, 0.15);
-  --bg-color-1: rgb(247, 246, 243);
-  --bg-color-2: rgba(135, 131, 120, 0.15);
-
-  --select-color-0: var(--primary-color);
-  --select-color-1: var(--primary-color);
-  --select-color-2: #d9eff8;
-
-  --notion-red: rgb(224, 62, 62);
-  --notion-pink: rgb(173, 26, 114);
-  --notion-blue: rgb(11, 110, 153);
-  --notion-purple: rgb(105, 64, 165);
-  --notion-teal: rgb(77, 100, 97);
-  --notion-yellow: rgb(223, 171, 1);
-  --notion-orange: rgb(217, 115, 13);
-  --notion-brown: rgb(100, 71, 58);
-  --notion-gray: rgb(155, 154, 151);
-
-  --notion-red_background: rgb(251, 228, 228);
-  --notion-pink_background: rgb(244, 223, 235);
-  --notion-blue_background: rgb(221, 235, 241);
-  --notion-purple_background: rgb(234, 228, 242);
-  --notion-teal_background: rgb(221, 237, 234);
-  --notion-yellow_background: rgb(251, 243, 219);
-  --notion-orange_background: rgb(250, 235, 221);
-  --notion-brown_background: rgb(233, 229, 227);
-  --notion-gray_background: rgb(235, 236, 237);
-
-  --notion-red_background_co: rgba(251, 228, 228, 0.3);
-  --notion-pink_background_co: rgba(244, 223, 235, 0.3);
-  --notion-blue_background_co: rgba(221, 235, 241, 0.3);
-  --notion-purple_background_co: rgba(234, 228, 242, 0.3);
-  --notion-teal_background_co: rgba(221, 237, 234, 0.3);
-  --notion-yellow_background_co: rgba(251, 243, 219, 0.3);
-  --notion-orange_background_co: rgba(250, 235, 221, 0.3);
-  --notion-brown_background_co: rgba(233, 229, 227, 0.3);
-  --notion-gray_background_co: rgba(235, 236, 237, 0.3);
-
-  --notion-item-blue: rgba(0, 120, 223, 0.2);
-  --notion-item-orange: rgba(245, 93, 0, 0.2);
-  --notion-item-green: rgba(0, 135, 107, 0.2);
-  --notion-item-pink: rgba(221, 0, 129, 0.2);
-  --notion-item-brown: rgba(140, 46, 0, 0.2);
-  --notion-item-red: rgba(255, 0, 26, 0.2);
-  --notion-item-yellow: rgba(233, 168, 0, 0.2);
-  --notion-item-default: rgba(206, 205, 202, 0.5);
-  --notion-item-purple: rgba(103, 36, 222, 0.2);
-  --notion-item-gray: rgba(155, 154, 151, 0.4);
-
-  --notion-card-background-color: #ffffff;
-
-  --notion-max-width: 1400px;
-  --notion-header-height: 54px;
-
-  --notion-page-left-right-padding: calc(min(16px, 8vw));
-  --notion-page-fullwith-left-right-padding: calc(min(96px, 8vw));
-
-  --notion-aside-width: 300px;
-  --notion-aside-space-width: 5rem;
-
-  --notion-page-content-inner-width: calc(
-    var(--notion-max-width) - var(--notion-aside-width) - var(--notion-aside-space-width)
-  );
-}
-
-// dark-mode vars
-.dark-mode {
-  --line-color: rgba(255, 255, 255, 0.1);
-
-  --fg-color: rgba(255, 255, 255, 0.9);
-  --fg-color-0: var(--fg-color);
-  --fg-color-1: var(--fg-color);
-  --fg-color-2: var(--fg-color);
-  --fg-color-3: var(--fg-color);
-  --fg-color-4: var(--fg-color);
-  --fg-color-5: rgba(255, 255, 255, 0.7);
-  --fg-color-6: #fff;
-  --fg-color-icon: #fff;
-  --fg-color-lighten: #333339;
-
-  --bg-color: #1a1b1e;
-  --bg-color-0: rgb(71, 76, 80);
-  --bg-color-1: rgb(63, 68, 71);
-  --bg-color-2: rgba(135, 131, 120, 0.15);
-
-  --notion-red: rgb(255, 115, 105);
-  --notion-pink: rgb(226, 85, 161);
-  --notion-blue: rgb(82, 156, 202);
-  --notion-purple: rgb(154, 109, 215);
-  --notion-teal: rgb(77, 171, 154);
-  --notion-yellow: rgb(255, 220, 73);
-  --notion-orange: rgb(255, 163, 68);
-  --notion-brown: rgb(147, 114, 100);
-  --notion-gray: rgba(151, 154, 155, 0.95);
-
-  --notion-red_background: rgb(89, 65, 65);
-  --notion-pink_background: rgb(83, 59, 76);
-  --notion-blue_background: rgb(54, 73, 84);
-  --notion-purple_background: rgb(68, 63, 87);
-  --notion-teal_background: rgb(53, 76, 75);
-  --notion-yellow_background: rgb(89, 86, 59);
-  --notion-orange_background: rgb(89, 74, 58);
-  --notion-brown_background: rgb(67, 64, 64);
-  --notion-gray_background: rgb(69, 75, 78);
-
-  --notion-red_background_co: rgba(89, 65, 65, 0.3);
-  --notion-pink_background_co: rgba(83, 59, 76, 0.3);
-  --notion-blue_background_co: rgba(120, 162, 187, 0.3);
-  --notion-purple_background_co: rgba(68, 63, 87, 0.3);
-  --notion-teal_background_co: rgba(53, 76, 75, 0.3);
-  --notion-yellow_background_co: rgba(89, 86, 59, 0.3);
-  --notion-orange_background_co: rgba(89, 74, 58, 0.3);
-  --notion-brown_background_co: rgba(67, 64, 64, 0.3);
-  --notion-gray_background_co: rgba(69, 75, 78, 0.3);
-
-  --notion-card-background-color: #2b2c31;
-}
diff --git a/styles/global.css b/styles/global.css
deleted file mode 100644
index 386d3be9f2..0000000000
--- a/styles/global.css
+++ /dev/null
@@ -1,44 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-body,
-html {
-  padding: 0;
-  margin: 0;
-}
-
-body {
-  --notion-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-    'Droid Sans', 'Helvetica Neue', 'Noto Sans', sans-serif;
-  font-family: var(--notion-font);
-  overflow-x: hidden;
-}
-
-.utterances {
-  max-width: 100% !important;
-}
-
-.static-tweet blockquote {
-  margin: 0;
-  margin-block-start: 0;
-  margin-block-end: 0;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-}
-
-.static-tweet-emoji {
-  height: 1.2em !important;
-  width: 1.2em !important;
-}
-
-.searchInput {
-  color: var(--fg-color);
-  caret-color: var(--fg-color);
-}
diff --git a/styles/notion.css b/styles/notion.css
index e14d9c606c..9b99b3c0a0 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -1,3 +1,117 @@
+:root {
+  --notion-font: 'SpoqaHanSansNeo', 'Tossface';
+  --base-font-size: 1.125rem;
+  --primary-color: #daaa52;
+  --primary-gradient-end-color: #8763ff;
+  --line-color: rgba(55, 53, 47, 0.1);
+  --fg-color: #37352f;
+  --fg-color-0: rgba(55, 53, 47, 0.09);
+  --fg-color-1: rgba(55, 53, 47, 0.16);
+  --fg-color-2: rgba(55, 53, 47, 0.4);
+  --fg-color-3: rgba(55, 53, 47, 0.6);
+  --fg-color-4: #000;
+  --fg-color-5: rgba(55, 53, 47, 0.024);
+  --fg-color-6: rgba(55, 53, 47, 0.8);
+  --fg-color-icon: var(--fg-color);
+  --fg-color-lighten: #eff3f7;
+  --bg-color: #fff;
+  --bg-color-0: rgba(135, 131, 120, 0.15);
+  --bg-color-1: #f7f6f3;
+  --bg-color-2: rgba(135, 131, 120, 0.15);
+  --select-color-0: var(--primary-color);
+  --select-color-1: var(--primary-color);
+  --select-color-2: #d9eff8;
+  --notion-red: #e03e3e;
+  --notion-pink: #ad1a72;
+  --notion-blue: #0b6e99;
+  --notion-purple: #6940a5;
+  --notion-teal: #4d6461;
+  --notion-yellow: #dfab01;
+  --notion-orange: #d9730d;
+  --notion-brown: #64473a;
+  --notion-gray: #9b9a97;
+  --notion-red_background: #fbe4e4;
+  --notion-pink_background: #f4dfeb;
+  --notion-blue_background: #ddebf1;
+  --notion-purple_background: #eae4f2;
+  --notion-teal_background: #ddedea;
+  --notion-yellow_background: #fbf3db;
+  --notion-orange_background: #faebdd;
+  --notion-brown_background: #e9e5e3;
+  --notion-gray_background: #ebeced;
+  --notion-red_background_co: rgba(251, 228, 228, 0.3);
+  --notion-pink_background_co: rgba(244, 223, 235, 0.3);
+  --notion-blue_background_co: rgba(221, 235, 241, 0.3);
+  --notion-purple_background_co: rgba(234, 228, 242, 0.3);
+  --notion-teal_background_co: rgba(221, 237, 234, 0.3);
+  --notion-yellow_background_co: rgba(251, 243, 219, 0.3);
+  --notion-orange_background_co: rgba(250, 235, 221, 0.3);
+  --notion-brown_background_co: rgba(233, 229, 227, 0.3);
+  --notion-gray_background_co: rgba(235, 236, 237, 0.3);
+  --notion-item-blue: rgba(0, 120, 223, 0.2);
+  --notion-item-orange: rgba(245, 93, 0, 0.2);
+  --notion-item-green: rgba(0, 135, 107, 0.2);
+  --notion-item-pink: rgba(221, 0, 129, 0.2);
+  --notion-item-brown: rgba(140, 46, 0, 0.2);
+  --notion-item-red: rgba(255, 0, 26, 0.2);
+  --notion-item-yellow: rgba(233, 168, 0, 0.2);
+  --notion-item-default: rgba(206, 205, 202, 0.5);
+  --notion-item-purple: rgba(103, 36, 222, 0.2);
+  --notion-item-gray: rgba(155, 154, 151, 0.4);
+  --notion-card-background-color: #fff;
+  --notion-max-width: 1400px;
+  --notion-header-height: 54px;
+  --notion-page-left-right-padding: calc(min(16px, 8vw));
+  --notion-page-fullwith-left-right-padding: calc(min(96px, 8vw));
+  --notion-aside-width: 300px;
+  --notion-aside-space-width: 5rem;
+  --notion-page-content-inner-width: calc(var(--notion-max-width) - var(--notion-aside-width) - var(--notion-aside-space-width));
+}
+.dark-mode {
+  --line-color: rgba(255, 255, 255, 0.1);
+  --fg-color: rgba(255, 255, 255, 0.9);
+  --fg-color-0: var(--fg-color);
+  --fg-color-1: var(--fg-color);
+  --fg-color-2: var(--fg-color);
+  --fg-color-3: var(--fg-color);
+  --fg-color-4: var(--fg-color);
+  --fg-color-5: rgba(255, 255, 255, 0.7);
+  --fg-color-6: #fff;
+  --fg-color-icon: #fff;
+  --fg-color-lighten: #333339;
+  --bg-color: #1a1b1e;
+  --bg-color-0: #474c50;
+  --bg-color-1: #3f4447;
+  --bg-color-2: rgba(135, 131, 120, 0.15);
+  --notion-red: #ff7369;
+  --notion-pink: #e255a1;
+  --notion-blue: #529cca;
+  --notion-purple: #9a6dd7;
+  --notion-teal: #4dab9a;
+  --notion-yellow: #ffdc49;
+  --notion-orange: #ffa344;
+  --notion-brown: #937264;
+  --notion-gray: rgba(151, 154, 155, 0.95);
+  --notion-red_background: #594141;
+  --notion-pink_background: #533b4c;
+  --notion-blue_background: #364954;
+  --notion-purple_background: #443f57;
+  --notion-teal_background: #354c4b;
+  --notion-yellow_background: #59563b;
+  --notion-orange_background: #594a3a;
+  --notion-brown_background: #434040;
+  --notion-gray_background: #454b4e;
+  --notion-red_background_co: rgba(89, 65, 65, 0.3);
+  --notion-pink_background_co: rgba(83, 59, 76, 0.3);
+  --notion-blue_background_co: rgba(120, 162, 187, 0.3);
+  --notion-purple_background_co: rgba(68, 63, 87, 0.3);
+  --notion-teal_background_co: rgba(53, 76, 75, 0.3);
+  --notion-yellow_background_co: rgba(89, 86, 59, 0.3);
+  --notion-orange_background_co: rgba(89, 74, 58, 0.3);
+  --notion-brown_background_co: rgba(67, 64, 64, 0.3);
+  --notion-gray_background_co: rgba(69, 75, 78, 0.3);
+  --notion-card-background-color: #2b2c31;
+}
 ::-webkit-scrollbar {
   display: none;
 }
diff --git a/styles/prism-theme.css b/styles/prism-theme.css
deleted file mode 100644
index 7f256b0313..0000000000
--- a/styles/prism-theme.css
+++ /dev/null
@@ -1,131 +0,0 @@
-/* prism theme adjustments */
-
-.notion-code {
-  background-color: rgba(249, 250, 251, 1);
-  border: 1px solid rgba(229, 231, 235, 1);
-  border-radius: 0.375rem;
-  padding: 1.5em !important;
-}
-
-.dark-mode .notion-code {
-  background-color: rgba(17, 24, 39, 1);
-  border-color: rgba(55, 65, 81, 1);
-}
-.notion code {
-  color: rgba(31, 41, 55, 1);
-  border: 0 none !important;
-  box-shadow: none !important;
-  background: none !important;
-  padding: 0 !important;
-}
-.dark-mode .notion code {
-  color: rgba(229, 231, 235, 1);
-}
-
-.dark-mode .notion .notion-inline-code {
-  background: rgb(71, 76, 80) !important;
-  color: #ff4081;
-  padding: 0.2em 0.4em !important;
-}
-
-.notion .notion-inline-code {
-  color: #ff4081;
-  background: rgba(127, 122, 107, 0.1) !important;
-  padding: 0.2em 0.4em !important;
-}
-
-.token.cdata,
-.token.doctype,
-.token.prolog {
-  color: rgba(55, 65, 81, 1);
-}
-.token.comment {
-  color: #5b9b4c;
-}
-.dark-mode .token.cdata,
-.dark-mode .token.doctype,
-.dark-mode .token.prolog {
-  color: rgba(209, 213, 219, 1);
-}
-.token.punctuation {
-  color: rgba(55, 65, 81, 1);
-}
-.dark-mode .token.punctuation {
-  color: rgba(209, 213, 219, 1);
-}
-.token.boolean,
-.token.constant,
-.token.deleted,
-.token.number,
-.token.property,
-.token.symbol,
-.token.tag {
-  color: rgba(16, 185, 129, 1);
-}
-.token.attr-name,
-.token.builtin,
-.token.char,
-.token.inserted,
-.token.selector,
-.token.string {
-  color: rgba(139, 92, 246, 1);
-}
-.language-css .token.string,
-.style .token.string,
-.token.entity,
-.token.operator,
-.token.url {
-  color: rgba(245, 158, 11, 1);
-}
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: rgba(59, 130, 246, 1);
-}
-.token.class-name,
-.token.function {
-  color: rgba(236, 72, 153, 1);
-}
-.token.important,
-.token.regex,
-.token.variable {
-  color: rgba(245, 158, 11, 1);
-}
-code[class*='language-'],
-pre[class*='language-'] {
-  color: rgba(31, 41, 55, 1);
-}
-
-pre[class*='language-']:after,
-pre[class*='language-']:before {
-  box-shadow: none !important;
-  -webkit-box-shadow: none !important;
-}
-.dark-mode code[class*='language-'],
-.dark-mode pre[class*='language-'] {
-  color: rgba(249, 250, 251, 1);
-}
-pre::-webkit-scrollbar {
-  display: none;
-}
-pre {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-.token.operator,
-.token.entity,
-.token.url,
-.token.variable {
-  background: none;
-}
-
-pre[class*='language-'] > code {
-  border-left: 0 none !important;
-  box-shadow: none !important;
-  background: none !important;
-}
-
-pre[class*='language-']:before,
-pre[class*='language-']:after {
-  display: none !important;
-}