1. Start here
Single Database
2. Setup Instructions
Code
3. Simple Navbar setup
Sites > Settings (Gear Icon) > Themes > Custom Navbar
4. Set up your pages in Super
5. The t-minus 10 checklist:
Instructions per page:
Globals Page
Template Page
Portfolio Instructions
Post & Video Instructions
Media Recs Instructions
Downloads Instructions
CRITICAL
Help & Support

1. Start here

First off, thank you for purchasing my template You! If you have questions as you setup the site, please don't hesitate to email me or DM me on Twitter. Let's do this!

Single Database

What's super cool about the You template and unlike any other templates out there... You can control all of your content from a SINGLE DATABASE. There aren't databases buried on individual pages.

If you're familiar with Notion or other database software this should be a breeze. If you're newer to the Notion and Super family, don't worry, there are more instructions below!

Single Notion Content Database

2. Setup Instructions

Duplicate this template to your own Notion workspace
Create your site on Super and use your newly created main page as the Notion URL
Now let's add "You" in your site's Super dashboard:

Notion page & Super dashboard

Code

‣

Sites > Settings (Gear Icon) > Code

"I don't wont to really worry about custom code" approach:

‣

Under the Head tab, add the following code if you'd like to use existing CSS stylesheet:

<meta http-equiv="refresh" content="1440">

<script src="https://ericmday.github.io/you/ct.js"></script>

<script src="https://gumroad.com/js/gumroad.js"></script>

<link rel="stylesheet" href="https://ericmday.github.io/you/you.css">

‣

Under the Body tab, add the following code for the footer & replace href with your social handles. Use the Super Icons as needed:

<!-- Custom Footer - Replace social links, if you have "Newletter" enabled in CSS, replace link below  -->
<div class="footer super-content max-width">
   <div class="footer-copy">
      <div class="footer-line social-icons">
         <span><a href="#" target="" class="nav-link"><img src="https://super.so/icon/dark/twitter.svg"/></a></span>
         <span><a href="#" target="" class="nav-link"><img src="https://super.so/icon/dark/instagram.svg"/></a></span>
         <span><a href="#" target="" class="nav-link"><img src="https://super.so/icon/dark/mail.svg"/></a></span>
      </div>
      
      <div class="newsletter">
        <div class="newsletter-heading">
           <p>Subscribe to my newsletter</p>
        </div>
        <div class="newsletter-subheading">
           <p>Updates about new projects, posts, and other cool content not found on my site.</p>
        </div>
          <button class="button-subscribe"><a href="#" target="_blank">Subscribe <img src="https://super.so/icon/dark/arrow-right.svg"/></a></button>
      </div>
      <!-- Enter your site content -->
      <div class="footer-copyright">
         <span class="notion-semantic-string"><span>&copy 2021 </span><span><a class="notion-link link" href="/">yoursite</a></span></span>
      </div>
   </div>
</div>

‣

Under the CSS tab, add the following below. (Note: There are CSS "Options" that enable and disable elements on the page. If you want to rename pages, see the note below 👇👇)

NOTE: If you want to rename your top level pages, you'll need to replace the id of pages with [id*=”yourprettyurl”] so if you rename Recommendations to Recipes, your CSS should look like this: [id*=”recipes”]

/*****************************/


/* Options */


/*****************************/

/* Custom Gradient */ 
body {
  height: 100%;
  overflow: auto;
	background: linear-gradient(165deg, #f8f8f8 30%, #FFF 0%);
}

/* Must enable in Themes in Super first - Enabled */
.super-navbar.simple {
  background-color:transparent !important;
}

/* Remove logo replacement text in Super navbar */
.super-navbar__logo-text {
	display: none;
}

/* Size all page titles on main pages. Change to your pretty URLs */

[id*="about"] h1.notion-header__title,
[id*="portfolio"] h1.notion-header__title,
[id*="posts"] h1.notion-header__title,
[id*="recommendations"] h1.notion-header__title,
[id*="downloads"] h1.notion-header__title,
[id*="index"] h1.notion-header__title{
	font-size: 4em !important;
}

/* Home page subheader */

[id*="index"] h1.notion-heading {
	font-weight: 400 !important;
	margin-top: 0px !important;
	margin-left: 5px !important;
	padding:0px !important;
}

/* Decrease size for smaller screens */

@media (max-width:749px) {
	[id*="index"] h1.notion-header__title {
		font-size: 3em !important;
	}
	
	[id*="index"] .notion-heading {
	  padding-left:0px;
	}
}

/* Page title h1 sizes for smaller screens */

@media (max-width:414px) {
	[id*="about"] h1.notion-header__title,
	[id*="portfolio"] h1.notion-header__title,
	[id*="posts"] h1.notion-header__title,
	[id*="recommendations"] h1.notion-header__title,
	[id*="downloads"] h1.notion-header__title {
		font-size: 2.5rem !important;
	}
}

/* Enable pointer-events to generate affliate links using super:so Link property in Notion */ 

[id*="recommendations"] .notion-collection-card {
    pointer-events: none !important;
}

/* Custom Footer in <body> - Disabled */

.footer {
   display:none; 
}

/* Newsletter in Footer - Enabled */

.newsletter {
  /*display:none;*/
}

/* Table-based Footer - Enabled */

.notion-collection-table__wrapper {
	 /*display:none;*/
}

/* Hide Notion Toggle - hack to hide content on pages. Drag into toggle. */
/* If you want to use toggles, replace .notion-toggle with #block-[your block id] */

.notion-toggle {
	display: none !important;
}

/* Currently Baby Yoda 😀 - if you want a custom photo to replace "Content" database, insert below. Check out [insert_your_domain]/content to preview */

#page-content h1:after {
  /*content:url('enteryoururlhere')!important;*/
}

/* End Options */

Give me the "advanced approach"...

‣

All CSS from stylesheet if you don't want to use the provided one.

/*****************************/


/* Options */


/*****************************/

/* Custom Gradient */ 
body {
  height: 100%;
  overflow: auto;
	background: linear-gradient(165deg, #f8f8f8 30%, #FFF 0%);
}

/* Must enable in Themes in Super first - Enabled */
.super-navbar.simple {
  background-color:transparent !important;
}

/* Remove logo replacement text in Super navbar */
.super-navbar__logo-text {
	display: none;
}

/* Size all page titles on main pages. Change to your pretty URLs */

[id*="about"] h1.notion-header__title,
[id*="portfolio"] h1.notion-header__title,
[id*="posts"] h1.notion-header__title,
[id*="recommendations"] h1.notion-header__title,
[id*="downloads"] h1.notion-header__title,
[id*="index"] h1.notion-header__title{
	font-size: 4em !important;
}

/* Home page subheader */

[id*="index"] h1.notion-heading {
	font-weight: 400 !important;
	margin-top: 0px !important;
	margin-left: 5px !important;
	padding:0px !important;
}

/* Decrease size for smaller screens */

@media (max-width:749px) {
	[id*="index"] h1.notion-header__title {
		font-size: 3em !important;
	}
	
	[id*="index"] .notion-heading {
	  padding-left:0px;
	}
}

/* Page title h1 sizes for smaller screens */

@media (max-width:414px) {
	[id*="about"] h1.notion-header__title,
	[id*="portfolio"] h1.notion-header__title,
	[id*="posts"] h1.notion-header__title,
	[id*="recommendations"] h1.notion-header__title,
	[id*="downloads"] h1.notion-header__title {
		font-size: 2.5rem !important;
	}
}

/* Enable pointer-events to generate affliate links using super:so Link property in Notion */ 

[id*="recommendations"] .notion-collection-card {
    pointer-events: none !important;
}

/* Custom Footer in <body> - Disabled */

.footer {
   display:none; 
}

/* Newsletter in Footer - Enabled */

.newsletter {
  /*display:none;*/
}

/* Table-based Footer - Enabled */

.notion-collection-table__wrapper {
	 /*display:none;*/
}

/* Hide Notion Toggle - hack to hide content on pages. Drag into toggle. */
/* If you want to use toggles, replace .notion-toggle with #block-[your block id] */

.notion-toggle {
	display: none !important;
}

/* Currently Baby Yoda 😀 - if you want a custom photo to replace "Content" database, insert below. Check out [insert_your_domain]/content to preview */

#page-content h1:after {
  /*content:url('enteryoururlhere')!important;*/
}

/* End Options */

* {
	-webkit-font-smoothing: antialiased !important;
	text-rendering: optimizeSpeed !important;
	outline: none !important;
	border: none !important;
}

html, body {
  overflow-x: hidden!important;
} 

@media only screen and (max-width:900px) {
   body {
 	background-image:none !important;
   }
}

/* Custom gradient in Options */

body {
/* 	background: linear-gradient(165deg, #FAFAFA 30%, #FFF 0%); */
}

:root {
	--transition: all .2s ease-in-out!important;
	--transition-alt: all 0.8s cubic-bezier(0.2, 1, 0.2, 1) !important;
	--color-text-gray: #808c99!important;
	--rounded: 8px!important;
}

@media (max-width: 900px) {
    :root {
        --column-spacing: 30px !important;
        --navbar-height-scrolled: 80px !important;
        --padding-right: calc(env(safe-area-inset-right) + 20px) !important;
        --padding-left: calc(env(safe-area-inset-left) + 20px) !important;
        --padding-iphone-left: 20px !important;
        --padding-iphone-right: 20px !important;
    }
}

html {
	min-height: 100%;
	position: relative;
}

.super-content.max-width {
	max-width: 1000px !important;
	margin-bottom: min(200px,20%) !important;
}

.footer.super-content.max-width {
    margin-bottom:0px !important;
}

div img {
  object-fit:cover !important;
}

@media (max-width: 900px) { 
    .super-content {
        padding-right: var(--padding-right) !important;
        padding-left: var(--padding-left) !important;
        max-width: 1600px !important;
        margin: 0 auto !important;
  }

  .notion-header__content {
        padding-right: var(--padding-right) !important;
        padding-left: var(--padding-left) !important;
        max-width: 1600px !important;
        margin: 0 auto !important;
  }
}

  @media (min-device-width:320px) and (max-device-width:768px) {
    .super-content {
        padding-right: var(--padding-iphone-right) !important;
        padding-left: var(--padding-iphone-left) !important;
        max-width: 1600px !important;
        margin: 0 auto !important;
  }

  .notion-header__content {
        padding-right: var(--padding-iphone-right) !important;
        padding-left: var(--padding-iphone-left) !important;
        max-width: 1600px !important;
        margin: 0 auto !important;
  }
}


@media (max-width:480px) {
  .super-content.max-width {
	  margin-bottom: 0px;
	  padding-bottom: 30vh !important;
  }
    .super-content {
        padding-right: var(--padding-right) !important;
        padding-left: var(--padding-left) !important;
  }

  .notion-header__content {
        padding-right: var(--padding-right) !important;
        padding-left: var(--padding-left) !important;
  }
}

h1.notion-header__title {
	padding: 0px;
}

h2 {
	font-weight: 700 !important;
}

.notion-header__content.no-cover.no-icon.max-width,
.notion-header__content.has-cover.no-icon.max-width {
	max-width: 1000px;
}

.notion-page__icon {
	display: none !important;
}

.notion-divider {
	border-bottom: 1px solid rgb(55 53 47 / 18%) !important;
}

.notion-page__title .notion-semantic-string {
	border-bottom: none !important;
}

.notion-image.page-width>div {
	height: auto !important;
}

/* Child page headers - do not touch */

h1.notion-header__title {
	font-size: 2em !important;
}

/* Adjust headers on pages */

.notion-header__icon-wrapper.no-cover.has-icon-image {
	position: relative !important;
	margin-left: 0px !important;
	padding-left: 0px !important;
}

.notion-header__icon-wrapper.has-icon-image {
	margin: 0 auto !important;
	position: relative !important;
}

.notion-header__icon-wrapper.no-cover.has-icon-image {
	top: 0px;
}

.notion-header__cover.no-cover {
	display: none !important;
}

.notion-header__cover {
	display: none !important;
}

/* Hide breadcrumb and Notion navbar */

a.notion-link.notion-breadcrumb__item,
span.notion-breadcrumb__divider {
	display: none;
}

.notion-navbar {
	margin-bottom: 20px;
	background-color: transparent !important;
	display: none;
}

/*****************************/


/* Custom Super Navbar "Simple" */
/* Enable from "Themes" in Super menu */


/*****************************/

.super-navbar.simple {
  /* Instructions in options */ 	
}

.super-navbar__content {
	padding-right: 0px !important;
}

.super-navbar__item {
	display: block !important;
	padding-right: 5px !important;
}

.super-navbar__item {
	font-size: 16px;
	color: black !important;
	font-weight: 400;
}

@media (min-width:999px) {
	.super-navbar.simple {
		width: 1000px !important;
		padding-left: calc(env(safe-area-inset-left) + 96px) !important;
		padding-right: calc(env(safe-area-inset-right) + 96px) !important;
		margin: auto !important;
	}
}

@media (min-width:861px) {
	.super-navbar.simple {
		padding-left: calc(env(safe-area-inset-left) + 96px) !important;
		padding-right: calc(env(safe-area-inset-right) + 96px) !important;
		margin: 0px auto !important;
	}
	
	a.notion-link.super-navbar__item::after {
		content: '';
		display: block !important;
		width: 0;
		height: 2px;
		background: gray;
		transition: width .3s;
	}
	a.notion-link.super-navbar__item:hover::after {
		width: 100%;
		transition: width .3s;
	}
}

/*****************************/


/* Index Page */


/*****************************/

.notion-header {
	margin: 200px 0 10px 0 !important;
}

@media only screen and (max-width:900px) {
	.notion-header {
	margin-top:100px !important;
	}
}

.notion-navbar,
.notion-collection__header,
.notion-property__title__icon-wrapper,
.notion-header__cover.no-cover {
	display: none !important;
}

/*****************************/


/* Global Gallery */


/* Effects index, portfolio, posts, recommendations, downloads */


/*****************************/

.notion-collection__header,
.notion-collection-card__content,
.notion-property__title__icon-wrapper {
	display: none !important;
}

.notion-collection-card .notion-property__title {
  padding-left:0px !important;
  font-size:1em !important;
  padding-top:10px !important;
  color: var(--color-text-default);
}

.notion-collection-gallery {
	grid-gap:10px 40px !important;
	border: none !important;
	grid-template-columns: repeat(auto-fill, minmax(var(--collection-card-cover-size-medium), 1fr))!important;
}

.notion-collection-gallery {
	border-top: 0px !important;
}

.notion-collection-card {
	transition: all .3s ease !important;
	box-shadow: none !important;
	background:transparent !important;
}

.notion-collection-card:hover {
	/*transform: scale(0.98) !important;*/
	background: none !important;
}

 .notion-collection-gallery .notion-collection-card img {
  /*transform: scale(1) !important;*/
  /*transition: all 0.6s ease-in-out !important;*/
}
 .notion-collection-gallery .notion-collection-card:hover {
  cursor: pointer;
  /*transition: all 0.5s ease-in-out !important;*/
}
.notion-collection-gallery .notion-collection-card:hover img {
  /*transform: scale(1.1) !important;*/
}

.notion-collection-card__cover,
.notion-collection-card__cover span,
.notion-collection-card__cover img {
	border-radius: 8px !important;
	max-height: 200px !important;
	overflow: hidden !important;
	height: 200px !important;
	border: none !important;
}

@media (max-width:768px) {
	.notion-collection-card__cover,
	.notion-collection-card__cover span,
	.notion-collection-card__cover img {
		height: 250px !important;
	}
}


/*****************************/


/* Image fade in animation */


/*****************************/

.notion-collection-card {
	-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;
	}
}

/*****************************/


/* Callout */


/*****************************/

.notion-callout {
  padding: 30px 20px;
  border-radius:10px;
 }

.notion-callout:is(.bg-brown-light, .bg-orange-light, .bg-blue-light, .bg-green-light, .bg-purple-light, .bg-pink-light, .bg-red-light) {
	background-color: var(--background-color-callouts) !important;
	border:1px solid #37352f !important;
}

/*****************************/


/* Quote */


/*****************************/

.notion-quote {
	border-left: 2px solid black !important;
	margin-left:3px;
}

/*****************************/


/* Global Post Lists */


/*****************************/

.notion-collection-list {
	display: block !important;
	max-width: 100% !important;
	border-top: 0 !important;
}

/* Set spacing between posts */

.notion-collection-list__item {
	padding: 0 !important;
	margin: 1em 0 3em 0 !important;
	border-radius: 0 !important;
	display: block !important;
}

@media screen and (min-width: 32em) {
	.notion-collection-list__item {
		margin: 0.5em 0 2em 0 !important;
	}
}

@media screen and (max-width:414px) {
  .notion-collection-list__item {
		margin: 1em 0 2em 0 !important;
	}
}

.notion-collection-list__item:last-child {
	/*margin-bottom: 2em !important;*/
}

/* Hover styles for listing of posts */

.notion-collection-list__item:hover {
	background-color: transparent !important;
}

.notion-collection-list__item:hover .property-4d757046 .notion-semantic-string {
	/*border-bottom: 1px solid var(--color-text-gray) !important;*/
}

.notion-collection-list__item	.property-4d757046 {
  display:inline-block !important;
}

@media only screen and (min-width:750px) {

.notion-collection-list__item	.property-4d757046 span.notion-semantic-string span::after {
		/*content: '';*/
		/*display: block !important;*/
		/*width: 0;*/
		/*height: 2px;*/
		/*background: gray;*/
		/*transition: width .3s;*/
	}
	.notion-collection-list__item:hover .property-4d757046 span.notion-semantic-string span::after {
		/*width: 100%;*/
		/*transition: width .3s;*/
	}
}
/* Restyle meta data of each article in the list */

.notion-collection-list__item-property {
	padding: 0 !important;
}

.notion-collection-list__item-property .notion-semantic-string {
	white-space: normal !important;
}

.notion-collection-list__item-content,
.notion-collection-list__item-property .notion-property__select {
	display: block !important;
}

.notion-property__title {
	display: block !important;
}

/* Hides icon */

.notion-property__title .notion-property__title__icon-wrapper {
	display: none !important;
}

/* Hides post Name property */

.notion-collection-list__item .notion-property__title .notion-semantic-string {
	display: none !important;
	margin-left:0px;
}

/* Resets font size of excerpt */

.notion-collection-list__item-property .notion-property__text .notion-semantic-string {
	font-size: 1rem !important;
	line-height: 1.7 !important;
}

/* Resets font size of date */

.notion-collection-list__item-property .notion-property__date {
	font-size: 1rem !important;
}

/* Resets spacing and padding on date */

.notion-collection-list__item-property .notion-property__date .notion-semantic-string {
	min-height: auto !important;
	padding: 0 !important;
}

/* Set color and size of date */

.notion-collection-list__item-property .notion-property__date .notion-semantic-string .date {
	color: var(--color-text-gray) !important;
	font-size: 0.875rem !important;
}

/* Styles for title */

.notion-collection-list__item-property .property-4d757046 {
	margin: 0.5em 0 !important;
}

.notion-collection-list__item-property .property-4d757046 .notion-semantic-string {
	font-weight: 500 !important;
	font-size: 1.875rem !important;
	letter-spacing: -0.01em !important;
	line-height: 1.25 !important;
	border-bottom: 1px solid transparent !important;
	transition: border-color .2s ease-in;
}

@media screen and (min-width: 32em) {
	.notion-collection-list__item-property .property-4d757046 .notion-semantic-string {
		font-size: 1.5rem !important;
		line-height: 1.15 !important;
	}
}

@media screen and (max-width:414px) {
	.notion-collection-list__item-property .property-4d757046 .notion-semantic-string {
		font-size: 1.5rem !important;
	}
}

/*****************************/


/* Table Footer */

/* Credit to Sam Judge. Footer makes use of the standard table view consider whether you’ll need this feature for other aspects of your site before implementing the footer in this way */


/*****************************/

/* Add dividing border */

.notion-collection-table__wrapper {
	border-top: 1px solid rgba(55, 53, 47, .09) !important;
	padding-top: 1em !important;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: white;
	text-align: center;
	margin-top: 100%;
	padding: 10px 2px 10px 2px;
}

/* Reset font size */

.notion-collection-table {
	font-size: .8rem !important;
	margin-top: 5px !important;
}

/* Hide header row */

.notion-collection-table th {
	display: none !important;
}

/* Remove borders of cells */

.notion-collection-table td {
	border: 0 !important;
	padding: 6px 0 !important;
}

/* Hide title column */

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

/* Reinstate usual styling of links */

.notion-collection-table td .notion-semantic-string .link {
	opacity: .7 !important;
	transition: opacity .1s ease-in;
}

.notion-collection-table td .notion-semantic-string .link:hover {
	opacity: 1 !important;
}

/* Don’t truncate content on small screens */

.notion-collection-table__cell .notion-semantic-string {
	white-space: normal !important;
}

/*****************************/


/* Recommendations */


/*****************************/

/* Cover */

.notion-collection-card__cover.large img {
	border-radius: 0px !important;
	width: 100% !important;
	object-fit: contain !important;
	object-position: top !important;
	padding-top: 5px !important;
}

/* Summary and header */

.notion-collection-gallery.large .notion-collection-card__content.no-title {
	display: block !important;
	padding-top: 0px !important;
}

.notion-collection-gallery.large .notion-image.page-width img {
	border-radius: 0!important;
}

.notion-collection-gallery.large {
	display: flex;
	border: none !important;
	padding: 0!important;
	padding-top: 16px !important;
	justify-content: space-between;
	flex-wrap: wrap;
	grid-gap:40px !important;
}

/* Header font size */

.notion-collection-gallery.large .notion-property.notion-property__text.property-4d757046 {
	font-size: 20px;
	font-weight: 500;
}

/* Summary font size */

.notion-collection-gallery.large .notion-property.notion-property__text.property-4158617e {
	font-size: 1rem;
}

table.notion-collection-table .property-4158617e {
	font-size: inherit !important;
}

/* Card layout */

.notion-collection-gallery.large .notion-collection-card {
	position: relative !important;
	box-shadow: none!important;
	display: flex!important;
	border: none!important;
	transform: scale(1) !important;
	background: none !important;
	filter: grayscale(0) !important;
	flex-wrap: wrap;
	justify-content: space-between !important;
	width: 46% !important;
}

.notion-collection-gallery.large .notion-collection-card__cover,
.notion-collection-gallery.large .notion-collection-card__cover span {
	width: auto;
	margin: 0 !important;
	max-height: 250px !important;
	object-position: top !important;
	height: 250px !important;
	border-radius: 0px !important;
}

.notion-collection-gallery.large .notion-collection-card__cover {
	border-radius: 0px !important;
	position: relative!important;
	border: none!important;
	flex: 0 0 150px !important;
	width: 46% !important;
}

.notion-collection-gallery.large .notion-collection-card__content {
	padding-left: 15px!important;
	position: relative!important;
	flex: 1 !important;
	white-space: nowrap !important;
}

.notion-collection-gallery.large .notion-collection-card__content span {
	white-space: normal !important;
}

.notion-collection-gallery.large .notion-property__text {
	margin: 0px !important;
}

.notion-collection-gallery.large .notion-property.notion-property__text.property-4d757046 {
	/*font-size: 1.5rem !important;*/
	margin-bottom:5px !important;
}

@media (max-width:810px) {
	/* 	Card width */
	.notion-collection-gallery.large .notion-collection-card {
		width: 90% !important;
	}
}

@media (max-width:480px) {

	/* 	Card width */
	.notion-collection-gallery.large .notion-collection-card {
		width: 100% !important;
	}
	
	/* Title of media */
	.notion-collection-gallery.large .notion-property.notion-property__text.property-4d757046 {
	/*font-size: 20px !important;*/
  }
}

/*****************************/


/* Downloads */


/*****************************/

.notion-collection-gallery.small .notion-collection-card__content.no-title {
	display: flex !important;
	justify-content: space-between !important;
	padding: 5px 0px;
}

/* Cover */
.notion-collection-gallery.small img {
    object-position: top !important;
}

/* Downloadable Title */
.notion-collection-gallery.small .notion-property.notion-property__text.property-4d757046 {
    font-size: 1rem;
    font-weight: 500;
    margin-top: 0px;
}

/* Price */
.notion-collection-gallery.small .notion-property.notion-property__number.property-48515d44 {
    font-size: 1.2rem;
    font-weight: 600;
}

@media (max-width:768px) {

	/* Downloadable title */
	
	.notion-collection-gallery.small {
	  /*grid-gap:40px !important;*/
	}
	
	.notion-collection-gallery.small .notion-property.notion-property__text.property-4d757046 {
	  font-size: 1rem;
  }
  
  .notion-collection-gallery.small .notion-collection-card__content.no-title {
	display: block !important;
	/*justify-content: space-between !important;*/
	/*padding: 5px 0px;*/
	margin-bottom:20px !important;
  }
}
  

/*****************************/


/* Custom footer html injection in Super body injection */


/*****************************/

.footer {
	padding-bottom: 0px !important;
}

.footer-copy {
	margin-bottom: 30px;
	font-size: .8rem !important;
	position: absolute;
	bottom: 0px;
	max-width: 808px;
}

.footer-line {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}

.social-icons a.nav-link {
	padding-left: 0px;
}

.footer .nav-link {
	color: var(--color-text-default);
	transition: var(--transition);
	text-decoration: none;
	padding: 12px 20px;
	font-size: 16px;
}

.footer .nav-link:hover {
	opacity: 0.6;
}

.newsletter {
	margin-bottom: 20px;
}

@media (max-width:414px) {
	.footer.super-content.max-width {
	    padding-bottom: 0 !important;
    	    margin-bottom:0px !important;
	}
}

/*****************************/


/* Signup form - controlled in Custom Footer injected in Super <body>. */ 
/* Replace href in <body> */


/*****************************/

.newsletter-heading {
	font-size: 1rem !important;
	font-weight: 500;
	margin-top: 10px;
	margin-bottom: 10px;
}

.newsletter-subheading {
	margin-bottom: 10px;
	width: 300px
}

.notion-header__content.has-icon-image {
	max-width: 1000px;
	margin-bottom: -30px !important;
}

button.button-subscribe {
	height: 36px;
	font-size: 12px;
	padding-left: 15px;
	border: solid 1px black !important;
	width:auto;
	border-radius:10px;
	transform: translateX(0);
	transition: all .2s ease-out;
	background-color: transparent;
	font-family: Poppins, sans-serif;
	padding-right:10px;
	display:inline-block;
}

button.button-subscribe:hover {
	transform: translateX(5px);
	transition: all .2s ease-out;
	backface-visibility: hidden;
	-webkit-font-smoothing: subpixel-antialiased
}

.button-subscribe a {
  color:black !important;
  text-decoration: none;
  font-weight:500;
}

.button-subscribe img {
    vertical-align: text-bottom;
    width: 15px;
}

/* Misc */

#page-content h1 {
	visibility: hidden;
	position: relative;
	width: auto;
	font-size:1.5em !important;
}

#page-content h1:before {
  content:'We\'re not sure where it is...' !important;
  color:black !important;
  visibility: visible;
  font-weight:200;
  font-size: .9em;
}

#page-content h1:after {
	visibility: visible;
	position: relative;
	float:left;
	/*content: 'The requested url was not found on this server.';*/
	content:url('https://c.tenor.com/lnzb_NOYs1cAAAAC/baby-yoda.gif');
	white-space: pre-wrap;
	font-weight:300;
	font-size: .9em !important;
	width:100%;
	overflow-x:hidden;
	display:inline-block;
	padding-top:20px;
	height:90vh;
}

#page-content .notion-collection-table__wrapper {
	display: none;
}

#page-content picture {
	position: relative;
	visibility: hidden;
	width: 100%;
}

#page-content picture:after {
  visibility: visible;
	position: relative;
	content:"Page Not Found";
	font-size: 3em !important;
	font-weight:600;
}

.notion-header__title-wrapper {
  display:block !important;
}

#page-content img.notion-header__icon {
  display:none;
}
.notion-header__content.no-cover.has-icon-image {
  margin:0 auto;
}

@media (max-width:414px) {
   #page-content h1:after {
      zoom:70% !important;  
   }

   #page-content h1:before {
     font-size: .7em;
   }

   #page-content picture:after {
     font-size: 2em !important;
   }
   #page-content .notion-header__title-wrapper {
     margin-top: 0px !important;
   }
 }

 /*****************************/


 /* Synched Global Blocks page @ [insert_your_domain]/global-blocks */


 /*****************************/

/* Gray callout link animation */
.notion-callout.bg-gray-light p.notion-callout__content::after {
    content:'';
    display: block;
    width: 0;
    height: 2px;
    background: gray;
    -webkit-transition: width .3s;
    transition: width .3s;
}

.notion-callout.bg-gray-light p.notion-callout__content:hover::after {
    width: 100%;
    -webkit-transition: width .3s;
    transition: width .3s;
    overflow:visible;
}

/* Link rules - Anything in gray callout on Globals page */
.notion-callout.bg-gray-light {
    width:fit-content;
    height: fit-content;
    padding: 10px 18px 5px 0px;
    background-color: transparent;
    color: black !important;
    text-align: center;
    font-weight: 400;
    -webkit-transition: ease-out 0.4s;
    -moz-transition: ease-out 0.4s;
    transition: ease-out 0.4s;
    border-radius:0px;
}

.notion-callout.bg-gray-light:hover {
    /*padding-left:8px;*/
    /*font-weight:400;*/
}

/* Yellow callout is styled but isn't a synced global block */

.notion-callout.bg-yellow-light p.notion-callout__content::after {
    content:'';
    display: block;
    width: 0;
    height: 2px;
    background: gray;
    -webkit-transition: width .3s;
    transition: width .3s;
}

.notion-callout.bg-yellow-light p.notion-callout__content:hover::after {
    width: 100%;
    -webkit-transition: width .3s;
    transition: width .3s;
    overflow:visible;
}

.notion-callout.bg-yellow-light {
    width:fit-content;
    height: fit-content;
    padding: 10px 18px 5px 8px;
    background-color: transparent;
    color: black !important;
    text-align: center;
    font-weight: 400;
    -webkit-transition: ease-out 0.4s;
    -moz-transition: ease-out 0.4s;
    transition: ease-out 0.4s;
    border-radius:0px;
}

.notion-callout.bg-yellow-light:hover {
    padding-left:15px;
    font-weight:400;
}

.notion-collection-card:hover, .notion-collection-list__item:hover {
    background:transparent;
    transform: translatey(-5px);
    transition:all 300ms ease-in-out;
}

.notion-collection-card, .notion-collection-list__item {
    /*background:transparent;*/
    transform: translatey(0px);
    transition:all 300ms ease-in-out;
}

‣

Custom Script that scrubs links to your Content directory so the average person can't find it. It's currently in "Head" tab as a script file ct.js. If you don't care about this, feel free to delete the ct.js file:

window.onload = function() {
    document.querySelector("a[href='/content']").remove();
    document.querySelector(".notion-navbar").remove();
    document.querySelector("#page-content .notion-collection-table__wrapper").remove();
};

3. Simple Navbar setup

Use the Simple Navbar in Super "Themes"

Sites > Settings (Gear Icon) > Themes > Custom Navbar

‣

Simple Navbar Setup

1. Links

Add your desired links. The You template has 6 primary pages and you can add all 6 of those, only a few, or some of your own!

2. Logo

You doesn't use a Logo so leave that set as default. The Logo hasn't been styled in CSS
Set Font size to 16px

3. Style

Leave all the defaults alone, but my default height is 61px, and I don't have Visible on scroll? enabled
Add a CTA if you'd like

4. Set up your pages in Super

Create the following pretty links for the pages: Home, About, Portfolio, Posts, Recommendations, Downloads in Super

‣

To Sync or not to Sync... URLs

The You template relies on one central database to power your pages called Content. Based on the Status & Type properties on a database entry, you can display it on the relevant page. i.e. Post type filters to the Post page and will only display if status is Live.

Because of the way You is structured, this Content database is really easy to use control your content. However, be aware that you can use Sync URLs but all of your pages will have the link "yoursite/content/page-name". If you change the database name from "Content" to something else, the new slug will be "yoursite/[new database name]/page-name".

I recommend avoid displaying the database in the page slug so you can have your content as yoursite/page-name:

Create pretty pages for your top level and sub level pages

Disable "Sync URLs"
If the site has already sync'd, you'll need to manually delete the pages in Super, which will not affect your Notion database
Re-add the Notion page (the default link from the Notion share dialog) to Super with your desired pretty link
Voila!

Hopefully there will be a way to easily circumvent a database, but until that time this is the best option!

5. The t-minus 10 checklist:

‣

Checklist

Sync your pages and/or add your pretty URLs

Change the Social Links & Newsletter in the Custom Footer (if you're using it)

Add the links in the footer in the Content database (even if you're using the custom footer)

Update your favicon in Super

Add all the custom code to the Global Site Code header, body, and css

Instructions per page:

Globals Page

‣

Notion has a recent(ish) feature that let's you sync blocks across all pages. The Globals page is where all of the synced blocks are housed. It's an easy way to control content if you needed to update a link or add some new content to multiple pages.

Use it for global page elements like backlinks, footers, menus, etc.

Global blocks in action in Notion

The You template leverages the gray and yellow callouts for custom link animation. Feel free to add your own global blocks to this page if you'd like!

The Globals page in the You template

Template Page

‣

You can use Super's code editor to style elements on the template page if you'd like to.

All callouts except for the yellow and gray look like this:

🔥

Super cool

Portfolio Instructions

‣

Portfolio pieces are served from the CONTENT DATABASE, based on a few properties:

Make a portfolio post!

Type: Portfolio
Type: Sometimes Feature is also a type which means it serves to the home page as a "Featured" project.

Display a featured project on the Home page

Status: Live - a project (or any entry) marked as Draft will not serve to a page.
Order: 1 to whatever - this gallery is sorted by Order which means the project with Order 1 is served first, then 2, and so on.

NOTE: Gallery images are from the hero cover photo in a post. Don't forget to replace the placeholder image.

Post & Video Instructions

‣

Latest Posts & Videos, All Posts, and All Videos are served from the CONTENT DATABASE, based on a few properties:

Post setup. Don't forget to fill in all fields

Latest Posts & Videos

Type: Post or Video plus Feature As a Feature post or video, it also serves to the home page as a Latest Post or Latest Video. Consider only having 1-3 Feature at a time to avoid cluttering the page.
Status: Live - a post or video marked as Draft will not serve to this page or the home page.

All Posts or All Videos

Type: Post or Video
Status: Live

Note: Make sure to replace the text in the properties: Title, Excerpt, and Published Date so Post display correctly like this:

Media Recs Instructions

‣

Media Recs are served from the CONTENT DATABASE, based on a few properties:

Media Rec page

Type: Media
Status: Live
Title: Put the title of the piece of media
Excerpt: A 1-2 sentence summary of what it is and what you liked.
(Optional) super:Link URL property - use this Notion property to attach an affiliate link (or link) to the content. You can comment out "pointer events" in the CSS options in the CSS tab so it looks like the below:

/* Enable pointer-events to generate affliate links using super:so Link property in Notion */ 

[id*="media-recs"] .notion-collection-card {
/* pointer-events: none !important; */
    cursor: default !important;
}

If you enable pointer-events and DO NOT have a link in the super:so url field, Super/Notion will open a blank page for the Media Recommendation. You can use that to summarize or provide your thoughts on the content. Note the below Media Recommendation gallery's photo is from the Post Content NOT the Post Cover.

Downloads Instructions

‣

Downloads are served from the CONTENT DATABASE, based on a few properties:

Type: Download
Status: Live - a Download (or any entry) marked as Draft will not serve to a page.
Price: Make that money
Super:link - TBD whether or not you want to use this, but it's easiest if you have a Super:link set for product purchase. If it's a Gumroad product, the gumroad.js is in the <head> tab so the user clicks generates a purchase modal.

You can link to Gumroad or Flurly (or wherever) via the callout button below or through the super:link property field

Again - If the super:link is active, your product's page won't be viewable and instead the user will be sent directly to the purchasing site. If you don't want that and want to use you product page to really "sell" your product, you can! Just use the "Buy Me" callout to insert a link to your product

Gallery images are from the Download content image NOT the Hero cover image

CRITICAL

YOU MUST CREATE THE FOLLOWING PRETTY LINKS IN SUPER. IF YOU WANT TO RENAME THE SLUGS, YOU NEED TO EDIT THE FULL CSS FILE:

Home
About
Portfolio
Posts
Recommendations
Downloads

Help & Support

For any questions please reach out! eric.michael.day@gmail.com & @ericday