Em — Blog Template

Hi, I’m Em, a beautiful website template for your thoughts & ideas.

Instructions
  1. Duplicate this template to your Notion workspace
  2. Create a site using Super, using your newly created page as the Notion URL.
  3. Add the optional settings below to your Super site settings:
  4. Fonts
    • Space Grotesk
    • Cormorant Garamond (added in the code)
    Code
    <style>
    
        @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300&display=swap');
    
        * {
            text-decoration: none !important;
            outline: none !important;
        }
    
        :root {
            --transition: all .4s cubic-bezier(0.8,0.04,0.4,1) !important;
            --font-serif: 'Cormorant Garamond', serif !important;
            --color-text-default-light: #808c99 !important;
            --color-border-default: #dbdfe9 !important;
            --color-bg-default: #d3d7e3 !important;
            --color-text-gray: #808c99 !important;
            --color-border: #bcbec8 !important;
        }
    
        .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;
        }
    
        .super-content {
            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;
        }
    
        h1 {
            color: var(--color-text-default-light) !important;
            font-weight: 300 !important;
            font-size: 16px !important;
        }
    
        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-collection-gallery {
            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-collection-gallery: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;
        }
    
        .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) {
    
            h2 {
                font-size: 40px !important;
            }
    
            .notion-collection-gallery {
                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>
    
    Paste into the snippet injection box in your Super site settings

    Minified Code
    <style>@import url(https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300&display=swap);*{text-decoration:none!important;outline:0!important}:root{--transition:all .4s cubic-bezier(0.8,0.04,0.4,1)!important;--font-serif:'Cormorant Garamond',serif!important;--color-text-default-light:#808c99!important;--color-border-default:#dbdfe9!important;--color-bg-default:#d3d7e3!important;--color-text-gray:#808c99!important;--color-border:#bcbec8!important}.notion-callout__icon,.notion-collection__header,.notion-header__title,.notion-property__title__icon-wrapper{display:none!important}iframe{background:0 0!important}.max-width{max-width:1000px!important}.super-content{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}h1{color:var(--color-text-default-light)!important;font-weight:300!important;font-size:16px!important}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-collection-gallery{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-collection-gallery:last-child{border-bottom:none!important}.notion-collection-card{border-bottom:1px solid var(--color-border)!important;box-shadow:0 40px 80px -20px transparent!important;transition:var(--transition)!important;padding:40px 80px 40px 40px!important;position:relative!important;border-radius:0!important;box-shadow:none!important}.notion-collection-card:hover{box-shadow:0 40px 80px -20px rgba(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:.2!important}.notion-collection-card:hover .notion-property__file img{transform:scale(.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,.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){h2{font-size:40px!important}.notion-collection-gallery{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}}#block-bcdb396c1ef74989bef292d6fce94b5e .notion-caption{display:none!important}#block-a8b0bf8feea54452ba1127b8b9af89e1 a{font-size:14px!important;position:fixed!important;z-index:9999!important;border:none!important;right:22px!important;top:14px!important}#block-9e1ece37b4bf4f6f866972a1bdbcb023 p{text-align:center!important;font-size:14px!important}#block-87d80f4e17d34ba3b8d3d64b10314b69{display:none!important}</style>
    Paste into the snippet injection box in your Super site settings

This is an iframe block using a hosted form from Flodesk. Replace with your own!

Crafted with Notion & Super. See our other templates here.