Easy Blog

Created
Apr 15, 2021 11:09 PM
 
notion image

Check out the demo.

Find the template Here.

 
This template was created by Zack.

How to use this Template

  1. Click the template link above.
  1. Duplicate the template in the top right corner.
  1. Use your new Notion Url for the page in the Potion Dashboard when setting up the site.
  1. After creating the site, in the Potion dashboard under Snippet Injection, copy and paste the following code 👇
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital@0;1&display=swap" rel="stylesheet">

<style>

    * {
        text-decoration: none !important;
        outline: none !important;
    }
   .notion {
        --transition: all .4s cubic-bezier(0.8,0.04,0.4,1) !important;
        --font-serif: 'Space Mono', serif !important;
        --color-text-default-light: #808c99 !important;
        --color-border-default: #e9e8ed !important;
        --color-bg-default: #f5f7fa !important;
        --color-text-gray: #808c99 !important;
        --color-border: #bcbec8 !important;
    }
    :root {
        --bg-color: #f5f7fa;
        font-family: var(--font-serif) !important;
    }
    .notion.notion-app {
        font-family: var(--font-serif) !important;
    }
    .notion-cursor-listener {
       color: var(--color-text-default);
       background: var(--color-bg-default);
       fill: currentColor;
     }
    .notion-collection-header,
    .notion-property-title-icon-wrapper,
    .notion-callout-icon,
    .notion-header-title {
        display: none !important;
    }

    iframe {
        background: none !important;
    }

    .max-width {
        max-width: 1000px !important;
    }

    .notion-page {
        padding-bottom: 50px !important;
    }

    .notion-header-cover.no-cover {
        max-height: 180px !important;
        height: 180px !important;
    }

    .notion-text-content {
        padding: 0 2px 24px !important;
        font-size: 18px !important;
        line-height: 2 !important;
    }

    .notion-h1 {
        color: var(--color-text-default-light) !important;
        font-weight: 300 !important;
        font-size: 16px !important;
    }

    .notion-h2 {
        font-family: var(--font-serif) !important;
        line-height: 1.6 !important;
        font-weight: 300 !important;
        font-size: 48px !important;
        max-width: 90% !important;
    }

    .notion-gallery-grid {
        border: 1px solid var(--color-border) !important;
        grid-template-columns: 1fr !important;
        margin: 80px auto 0 !important;
        position: relative !important;
        grid-gap: 0 !important;
        padding: 0 !important;
        z-index: 2 !important;
    }

    .notion-gallery-grid:last-child {
        border-bottom: none !important;
    }

    .notion-collection-card {
        border-bottom: 1px solid var(--color-border) !important;
        box-shadow: 0 40px 80px -20px rgba(0,0,0,0) !important;
        transition: var(--transition) !important;
        padding: 40px 80px 40px 40px !important;
        position: relative !important;
        border-radius: 0 !important;
        box-shadow: none !important;
       background: var(--color-bg-default);
    }

    .notion-collection-card:hover {
        box-shadow: 0 40px 80px -20px rgba(0,0,0,0.1) !important;
        background: var(--color-border-default) !important;
    }

    .notion-collection-card-property {
        min-height: auto !important;
    }

    .notion-property-title {
        font-family: var(--font-serif) !important;
        padding: 0 10px 10px 10px !important;
        font-size: 30px !important;
    }

    .notion-property-file {
        justify-content: center !important;
        pointer-events: none !important;
        align-items: center !important;
        position: absolute !important;
        display: flex !important;
        padding: 54px !important;
        height: 100% !important;
        right: 0 !important;
        top: 0 !important;
    }

    .notion-property-file div {
        overflow: visible !important;
    }

    .notion-property-file img {
        transition: var(--transition) !important;
        opacity: 0.2 !important;
    }

    .notion-collection-card:hover .notion-property-file img {
        transform: scale(0.8) translateX(40px) translateY(-40px) !important;
        opacity: 1 !important;
    }

    .notion-embed {
        margin: -40px auto !important;
    }

    .notion-collection-list {
        border: 1px solid var(--color-border) !important;
        align-items: center !important;
        flex-direction: row !important;
        overflow: visible !important;
        grid-gap: 0 !important;
        padding: 0 !important;
    }

    .notion-collection-list-item {
        border-right: 1px solid var(--color-border) !important;
        transition: var(--transition) !important;
        justify-content: center !important;
        position: relative !important;
        border-radius: 0 !important;
        padding: 30px !important;
        margin: 0 !important;
    }

    .notion-collection-list-item:last-child {
        border: none !important;
    }

    .notion-collection-list-item:hover {
        box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1) !important;
        background: var(--color-border-default) !important;
        color: var(--color-text-default) !important;
    }

    .notion-collection-list-item a {
        transition: var(--transition) !important;
        justify-content: center !important;
        align-items: center !important;
        position: absolute !important;
        display: flex !important;
        border: none !important;
        height: 100% !important;
        width: 100% !important;
        opacity: 1 !important;
        left: 0 !important;
        top: 0 !important;
    }

    .notion-collection-list-item a:hover {
        color: var(--color-text-default) !important;
    }

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

    @media (max-width: 600px) {

        .notion-h2 {
            font-size: 40px !important;
        }

        .notion-gallery-grid {
            margin: 40px auto 0 !important;
        }

        .notion-collection-card {
            padding: 40px 24px !important;
        }

        .notion-property-title {
            font-size: 24px !important;
        }

        .notion-property-file {
            display: none !important;
        }

        .notion-embed {
            margin: -60px auto !important;
        }

        .notion-collection-list {
            flex-direction: column !important;
        }

        .notion-collection-list-item {
            border-bottom: 1px solid var(--color-border) !important;
            border-right: none !important;
        }

    }

</style>