UX Cabin

UX Cabin

We create world class web and native apps

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 settings below to your Super site settings:
  4. Fonts

    The fonts used in the demo are: PS Fournier: Light Reason New: Regular and Medium You’ll need to add these fonts to a new web project in your Adobe Typekit account and paste the unique ID into the code below.

    If you want to use your own fonts you can find and replace all instances of the mentioned font names in the CSS below.

    /* The names of the font families in the code below in case you want to quickly find and replace them with your own fonts */
    psfournier-std
    reason-new
    

    Code

    Paste the code below into the ‘Snippet Injection’ field in your Super site settings.

    <!-- Typekit: Update the link below with your Typekit ID -->
    <link rel="stylesheet" href="https://use.typekit.net/gnx8fcu.css">
    
    <!-- Favicon: Having a custom nav breaks the Favicon that you can upload in the Super settings. To change it, update the link here -->
    <link rel="icon" href="https://s3.amazonaws.com/super-notion/images/8a28f49c-9631-4450-89f2-b87a3a60099e.png">
    
    <!-- Meta Description: Having a custom nav breaks the site description that you can edit in the Super settings. To change it, update the text here -->
    <meta property="og:description" content="Cy, a minimal portfolio template built on Notion and powered by Super.">
    
    <!-- Share image: Having a custom nav breaks the site share image that you can edit in the Super settings. To include one add a url to your iimage in between the quotes like this > content="[here]" and write an alt description too -->
    <meta property="og:image" content="">
    <meta property="og:image:alt" content="">
    
    <style>
    /* --- Change default colors --- */
    :root {
      --color-bg-default: #F9F6F0 !important;
      --color-text-default: #4B5673 !important;
      --color-text-default-light: #4B5673 !important;
      --color-text-gray: #959BA9 !important;
    }
    
    /* --- TYPOGRAPHY --- */
    
    /* Increase base font size for large screens */
    @media screen and (min-width: 50em) {
      html {
        font-size: 18px !important;
      }
    }
    
    body {
      font-family: reason-new, sans-serif !important;
    
      /* Make the text nice and crisp */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    
      /* Improve kerning for good measure */
      text-rendering: optimizeLegibility;
    }
    
    /* Styling for page names */
    .notion-header__title {
      font-weight: 700 !important;
      font-size: 0.75rem !important;
      line-height: 1.25 !important;
      min-height: auto !important;
      text-transform: uppercase !important;
      letter-spacing: 0.1em !important;
    }
    .notion-header__content>div {
      margin-bottom: 0px !important;
    }
    .notion-header {
      margin-bottom: 0px !important;
      padding-top: 5em !important;
    }
    
    /* Adjust line-height and letter-spacing for body copy */
    .notion-semantic-string {
      line-height: 1.7 !important;
      letter-spacing: -0.01em !important;
    }
    
    /* --- Heading styles --- */
    
    /* H1 */
    h1.notion-heading {
      font-family: psfournier-std, serif !important;
      font-weight: 200 !important;
    }
    @media screen and (min-width: 50em) {
      h1.notion-heading {
        font-size: 2.5em !important;
      }
    }
    h1.notion-heading .notion-semantic-string {
      line-height: 1.27 !important;
      letter-spacing: -0.03em !important;
    }
    
    /* H2 */
    h2.notion-heading {
      font-family: psfournier-std, serif !important;
      font-weight: 200 !important;
      letter-spacing: -0.01em !important;
    }
    
    /* H3 */
    h3.notion-heading {
      font-weight: 500 !important;
      margin-bottom: 0.25em !important;
    }
    
    /* Adjust line height for H2 and H3 */
    .notion-heading .notion-semantic-string {
      line-height: 1.3 !important;
    }
    
    /* Ensure opacity remains at 1 when a heading is a link */
    .notion-heading .notion-semantic-string .link {
      opacity: 1 !important;
    }
    
    .notion-text__content {
      padding-top: 8px !important;
      padding-bottom: 8px !important;
    }
    
    /* --- NAVIGATION --- */
    
    /* Hide the Notion nav bar */
    .notion-navbar {
      display: none !important;
    }
    
    /* Custom nav styling (see HTML at bottom of code) */
    .nav {
      align-items: flex-start;
      padding: 25px;
      display: flex;
      position: static;
      z-index: 9999;
      height: 110px;
      width: 100%;
      flex-direction: column;
      justify-content: space-between;
    }
    @media screen and (min-width: 30em) {
      .nav {
        align-items: center;
        padding: 0 25px;
        height: 64px;
        flex-direction: row;
      }
    }
    .nav .right, .nav .left {
      display: flex;
      margin-bottom: 0.25em;
    }
    .nav .right {
      margin-right: -20px;
    }
    .nav-link {
      transition: all .3s ease-in-out;
      justify-content: center;
      align-items: center;
      padding: 0 20px 0 0;
      display: flex;
      height: 100%;
      font-size: 18px;
      font-weight: 500;
      color: var(--color-text-default);
      letter-spacing: -0.01em;
      text-decoration: none;
    }
    
    /* --- CONTENT STYLING --- */
    
    /* --- Adjust the max width of pages --- */
    .super-content.max-width, .notion-header__content.max-width {
      max-width: 1080px!important;
    }
    
    /* --- Remove bottom page padding and adjust page padding for smaller screens --- */
    .super-content {
      padding-bottom: 40px !important;
    }
    @media screen and (min-width: 415px) and (max-width: 800px) {
      .super-content, .notion-header__content {
        padding-left: 46px !important;
        padding-right: 46px !important;
      }
    }
    
    /* --- Remove additional spacing on mobile that is created by column layout on desktop --- */
    @media screen and (max-width:680px) {
      .notion-column {
        padding: 0px!important;
      }
    }
    
    /* --- Control heading spacing in column layout --- */
    .notion-column>.notion-heading {
      margin-top: 2px !important;
    }
    
    .notion-header__icon-wrapper {
      padding: 2px!important;
      bottom: 8px!important;
    }
    
    /* --- Adjust quote styling so it can be used as a standfirst --- */
    .notion-quote {
      border-left: 0px!important;
      padding: 0!important;
      margin: .5rem 0 1rem!important;
    }
    
    /* --- Change handling of full width images --- */
    .notion-image.full-width img {
      object-fit: fill!important;
      height: auto!important;
    }
    
    /* --- Change Image caption alignment --- */
    .notion-image.page-width>figcaption, .notion-image.full-width>figcaption {
      text-align: center!important;
    }
    
    /* --- PROJECTS LISTING --- */
    
    /* Remove header of the gallery table */
    .notion-collection__header {
      display: none !important;
    }
    /* Adjust spacing of gallery grid */
    .notion-collection-gallery {
      grid-gap: 46px !important;
      gap: 46px !important;
      grid-row-gap: 66px !important;
      border-top: none !important;
    }
    /* Stop card from breaking out of layout on screens smaller than 370px */
    @media screen and (max-width:370px) {
      .notion-collection-gallery {
        display: block !important;
      }
      .notion-collection-gallery > a {
        display: block !important;
        margin-bottom: 44px !important;
      }
    }
    /* Override default card styling */
    .notion-collection-card {
      border-radius: none !important;
      box-shadow: none !important;
    }
    .notion-collection-card:hover {
      background: transparent !important;
    }
    .notion-collection-card__cover.large, .notion-collection-card__cover.large>div, .notion-collection-card__cover.large img, .notion-collection-card__cover.medium, .notion-collection-card__cover.medium>div, .notion-collection-card__cover.medium img {
      height: auto !important;
      max-height: none !important;
    }
    .notion-collection-card__cover.large>div {
      position: relative !important;
    }
    .notion-collection-card__cover {
      height: auto !important;
      min-height: none !important;
      border-bottom: none !important;
    }
    .notion-collection-card__cover img {
      position: relative !important;
      height: auto !important;
      width: 100% !important;
      border-radius: 0  !important;
      object-fit: contain !important;
      object-position: initial !important;
      padding-bottom: 0  !important;
    }
    .notion-collection-card__content {
      padding-bottom: 0 !important;
      padding-left: 0 !important;
      font-size: 1em !important;
      overflow: hidden;
    }
    /* Hides page title */
    .notion-property__title {
      display: none !important;
    }
    /* Display text property as a heading */
    .notion-collection-card__property .notion-semantic-string {
      display: block !important;
      margin: 0.6em 0 0.4em !important;
      font-family: psfournier-std, serif !important;
      font-weight: 200 !important;
      font-size: 27px !important;
      line-height: 1.3 !important;
      letter-spacing: -0.01em !important;
      white-space: normal !important;
    }
    /* Add underline to title on hover of project card */
    .notion-collection-gallery > a .notion-collection-card__property .notion-semantic-string span {
      border-bottom: 1px solid transparent !important;
      transition: border-color .2s ease-in;
    }
    .notion-collection-gallery > a:hover .notion-collection-card__property .notion-semantic-string span {
      border-bottom: 1px solid var(--color-text-default) !important;
    }
    /* Increase spacing between project meta data */
    .notion-collection-card__property {
      margin: 3px 0 !important;
    }
    /* Stop the tags from truncating */
    .notion-property__select {
      display: inline !important;
      white-space: normal !important;
      overflow: auto !important;
    }
    /* Adjust pill styling */
    .notion-pill {
      font-size: 18px !important;
      border-radius: 0px !important;
      line-height: 24px !important;
      margin: 2px 0 !important;
      padding: 0 !important;
      display: inline !important;
      white-space: normal !important;
      text-overflow: initial !important;
    }
    /* Adds comma before each item */
    .notion-pill::before {
      content: ", ";
      white-space: pre;
    }
    /* Removes comma before first item */
    .notion-pill.first::before {
      content: "";
    }
    /* Make all but the default colour display as a lighter colour */
    .pill-default {
      background: none !important;
    }
    .pill-gray, .pill-brown, .pill-orange, .pill-yellow, .pill-green, .pill-blue, .pill-purple, .pill-pink, .pill-red {
      background: none !important;
      color: var(--color-text-gray) !important;
    }
    
    /* --- PROJECTS PAGE --- */
    
    /* Hide cover image from page headers */
    .notion-header__cover {
      display: none !important;
    }
    
    /* --- MISC --- */
    /* Hide notion toggle - a hack to hide child pages, drag them into a toggle and they'll disappear */
    .notion-toggle {
      display: none !important;
    }
    
    /* --- PAGE LOAD ANIMATION --- */
    body {
      -webkit-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
    animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
      -moz-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
      -o-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
      -ms-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
    }
    @keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }
    @-moz-keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }
    @-webkit-keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }
    @-o-keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }
    @-ms-keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }
    </style>
    
    <!-- CUSTOM NAVIGATION -->
    <nav class="nav">
      <div class="left">
        <a class="nav-link" href="/">Cy</a>
      </div>
      <div class="right">
        <a class="nav-link" href="/projects">Projects</a>
        <a class="nav-link" href="/about">About</a>
        <a class="nav-link" href="https://medium.com/">Writing</a> <!-- External links can be included in the navigation also -->
      </div>
    </nav>
    

4. Make sure you’ve done these things before you go live

Go live checklist
Change all links in the footer and copy-paste the new footer to every page and project.
Check the favicon, update if necessary in the snippet code.
Amend the meta description in the snippet code.
Check that all navigation labels and links are correct and that they point to the right pages. Note, they do not automatically update when you amend page names or add new pages. The default ‘Writing’ link goes to Medium.com so that needs to updated or removed too.
Add pretty links for your pages and projects into Super’s pretty URL settings.
Example of pretty links and url structure
image

Hide your pages in this toggle menu, only you will see it