cleanUrl: /lab
share: true

<style>
.notion-collection_view-block {
    width: inherit !important;
}

:root .width {
    max-width: 100% !important;
    width: 1728px; !important;
}

@media (max-width: 1919px) {
	width: 1376px; !important;
}

@media (max-width: 1440px) {
	width: 1024px; !important;
}

@media (max-width: 1056px) {
	width: calc(100% - 2rem); !important;
}

h1 {
    width: inherit !important;
}
</style>

<!-- template/templates.html -->
<style>
/* 카드 */
    .notion-collection-item {
        transition: 200ms;
    }

    .notion-collection-item>a {
        border: 0;
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.0) !important;
        border-radius: 10px !important;
    }

    .notion-collection-item>a>div:hover {
        background: #ffffff !important;
    }

    .notion-collection-item:hover {
        /*   transform: scale(1.05) !important; */
        /*   box-shadow: 0px 3px 6px #00000018 !important; */
        background: #ffffff !important;
    }

    /* 이미지 */
    .notion-collection-item>a>div>div:nth-child(1)>div>div>div {
        border-radius: 4px;
        /*     position: relative; */
    }

    .notion-collection-item>a>div>div:nth-child(1)>div>div>div:before {
        border-radius: 4px;
        position: absolute;
        bottom: 0;
        content: " ";
        width: 100%;
        height: 90px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
        opacity: 0.1;
        transition: 200ms;
    }

    .item-hover:before {
        opacity: 1 !important;
    }

    /* .notion-collection-item > a > div > div:nth-child(1) > div > div > div:hover:before {
        opacity: 1;
    } */

    /* 아이템 제목 */
    .notion-collection-item>a>div>div:nth-child(2) {
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-top: 5px;
        padding-bottom: 0px !important;
    }

    .notion-collection-item>a>div>div:nth-child(2)>div {
        font-size: 21px !important;
        font-weight: 700 !important;
    }

    .notion-collection-item>a>div>div:nth-child(2) .notion-record-icon {
        /*   display: none !important; */
        height: 23px !important;
        width: 23px !important;
        margin-top: 6px !important;
    }

    /* 태그 칸 (제목 아래) */
    .notion-collection-item>a>div>div:nth-child(3) {
        padding-left: 15px !important;
    }

    /* 태그 */
    .notion-collection-item>a>div>div:nth-child(3)>div:nth-child(1)>div>div {
        padding-left: 0 !important;
        padding-right: 0 !important;
        background: #ffffff00 !important;
        color: rgba(0, 0, 0, 0.4) !important;
        font-size: 15px !important;
    }

    /* 내용 */
    .notion-collection-item>a>div>div:nth-child(3)>div:nth-child(3) {
        margin-top: -24px !important;
    }

    /* 카드 소개 내용 */
    .notion-collection-item>a>div>div:nth-child(3)>div:nth-child(2) span {
        z-index: 99999;
        font-size: 15px !important;
        color: #ffffff !important;
        white-space: normal !important;
        word-break: break-all !important;
        line-height: 170% !important;
        margin-top: -210px !important;
        font-weight: bolder;
        transition: 200ms;
        opacity: 0;
        padding-left: 5px;
    }

    .notion-collection-item>a> {
        opacity: 1;
    }

    .notion-collection-item>a>div>div:nth-child(3)>div:nth-child(2) span:before {
        content: ""
    }
</style>
<script>
      let items = document.querySelectorAll('.notion-collection-item');
      items.forEach((e) => {
          e.addEventListener("mouseover", (ee) => {
              let item = e.querySelector('a > div > div:nth-child(3) > div:nth-child(2) span');
              let item2 = e.querySelector('a > div > div:nth-child(1) > div > div > div');
              item.style.opacity = "1";
              item2.classList.add('item-hover');
          })

          e.addEventListener("mouseout", (ee) => {
              let item = e.querySelector('a > div > div:nth-child(3) > div:nth-child(2) span');
              let item2 = e.querySelector('a > div > div:nth-child(1) > div > div > div');
              item.style.opacity = "";
              item2.classList.remove('item-hover');
          });
      });
          // let uploadTempalateBtn = document.createElement('a');
          // uploadTempalateBtn.classList.add('searchBox');
          // uploadTempalateBtn.setAttribute("href", "<https://www.notion-tools.com/templates/upload>")
          // uploadTempalateBtn.innerHTML = '템플릿 업로드';
          // let searchBox = document.querySelector('.notion-page-content >.notion-collection_view-block > div:first-child > div:first-child > div:first-child > div:nth-child(2)');
          // searchBox.appendChild(uploadTempalateBtn);
</script>

포스트