Easy Blog

Check out the demo.

Find the template Here.

How to use this Template

1. Click the template link above.

2. Duplicate the template in the top right corner.

3. Use your new Notion Url for the page in the Potion Dashboard when setting up the site.

4. 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>