The Sky is the Limit Blog

The Sky is the Limit Blog

Created
Mar 12, 2021 09:09 AM
notion image

Check out the demo.

Find the template Here.

 
This template was created by Ben Mann.

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 👇
<style>
    html, body, .notion.notion-app.light-mode {
        background-color: #E3E8EB;
        overflow-x: hidden;
    }
    
    .notion-viewport {
      padding: 0;
    }
    
    .notion-header {
        display: none;
    }
    
    html::-webkit-scrollbar {
        position: absolute;
        top: 0;
        right: 0;
        width: .6rem;
        height: .6rem;
        background-color: #333;
    }
    html::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }
    html::-webkit-scrollbar-corner {
        background-color: transparent;
    }
    
    html::-webkit-scrollbar-thumb {
        height: .6rem;
        background-clip: padding-box;
        border-radius: 0;
        background-color: #FF8566;
    }
    
    .notion-page {
      width: 920px;
    }
    
    .notion-page-scroller {
      background-image: linear-gradient(to bottom, rgba(227,232,235,0), rgba(227,232,235,0) calc(100% - 30rem), #e3e8eb calc(100% - 30rem), rgba(227,232,235,0) 100%);
    }
    
    .notion-page-scroller:before {
      content: "";
      position: absolute;
      top: calc(30vh - 260px);
      left: 0;
      height: 260px;
      width: 100vw;
      background: linear-gradient(rgba(227, 232, 235, 0), rgba(227, 232, 235, 1));
    }
    
    .notion-title {
      text-transform: uppercase;
      font-weight: 900;
      background-image: linear-gradient(to top, #FF8566 40%, rgba(227,232,235,0) 40%);
      display: inline;
      width: auto;
    }
    
    .notion-collection-header {
      display: none;
    }
    
    .notion-gallery-grid {
      border-top: none;
    }
    
    .notion-gallery-view a {
      box-shadow: none;
      background: transparent;
    }
    
    .notion-gallery-view .notion-property.notion-property-title {
      font-size: 1.25rem;
      text-transform: uppercase;
      font-weight: 700;
      background-image: linear-gradient(to top, #fff 40%, rgba(227,232,235,0) 40%);
    }
    
    
    .notion-blank,
    .notion-page-icon,
    .notion-collection-column-title {
      display: none !important;
    }
    
    .notion-property-created_time {
      background-color: #333;
      color: #fff;
      font-family: monospace;
      padding: 4px;
    }
    
    .notion-collection-row {
      border: none;
      margin-bottom: 0;
    }
    
    .notion-text {
      margin: 25px 0;
      font-family: monospace;
      font-size: 1.25rem;
    }
    
    .notion-page-content-inner > div:first-of-type {
      font-weight: 700;
    }
    
    .notion-frame {
      padding-top: 0;
      padding-bottom: 400px;
    }
    
    .notion-frame:after {
      content: "";
      position: absolute;
      bottom: 0;
      width: 100vw;
      height: 400px;
      background-image: url('https://fiftyseven.degree/assets/images/fog/trees-desktop.jpg');
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
    }
    
    .notion-collection-card-property .notion-page-title-text {
      font-weight: 700;
      letter-spacing: 1.5px;
    }
    
    .notion-collection-row-value {
      transform: rotate(-90deg);
      transform-origin: center;
      position: absolute;
      left: -150px;
      top: 255px;
    }

</style>