1. Start here
Single Database
2. Setup Instructions
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

‣

Sites > Settings (Gear Icon) > Code

3. Simple Navbar setup

Use the Simple Navbar in Super "Themes"

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

‣

Simple Navbar Setup

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

5. The t-minus 10 checklist:

‣

Checklist

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.

Template Page

‣

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

Portfolio Instructions

‣

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

Post & Video Instructions

‣

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

Media Recs Instructions

‣

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

Downloads Instructions

‣

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

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

1. Start here
Single Database
2. Setup Instructions
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

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

‣

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:

‣

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

‣

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 the Media Recs and Download pages you'll need to use the full You styling sheet found in the "Pro" section. If not, copy below!)

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


/* Options */


/*****************************/
/* 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;
}

/* 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;
}

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

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

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

/* 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;*/
}

/* Subheader on index - uses h1.notion-heading. Replace with #block-[insert your quote block id here] if desired */

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

/*  Index page header - remove if page title is not wanted */

[id*="index"] .notion-header__content.no-cover.no-icon.max-width {
	   /*display: none; */
}

/* Adjust all page titles on main pages. Some pages have media rules */

[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;
}

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

/* Decrease size based on character count */

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

/* Page title h1 sizes */

@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;
	}
}

/* End Options */

Give me the "advanced approach"...

NOTE: If you want to rename your top level pages, you'll need to use this method

‣

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

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


/* Options */


/*****************************/
/* 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;
}

/* 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;
}

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

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

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

/* 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;*/
}

/* Subheader on index - uses h1.notion-heading. Replace with #block-[insert your quote block id here] if desired */

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

/*  Index page header - remove if page title is not wanted */

[id*="index"] .notion-header__content.no-cover.no-icon.max-width {
	   /*display: none; */
}

/* Adjust all page titles on main pages. Some pages have media rules */

[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;
}

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

/* Decrease size based on character count */

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

/* Page title h1 sizes */

@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;
	}
}

/* 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;
  }
}

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. Doesn't effect Posts homepage. Effects articles */


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

.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 */

[id*="recommendations"] .notion-collection-card__cover img {
	border-radius: 0px !important;
	width: 100% !important;
	object-fit: contain !important;
	object-position: top !important;
	padding-top: 5px !important;
}

/* Summary and header */

[id*="recommendations"] .notion-collection-card__content.no-title {
	display: block !important;
	padding-top: 0px !important;
}

[id*="recommendations"] .notion-image.page-width img {
	border-radius: 0!important;
}

[id*="recommendations"] .notion-collection-gallery {
	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 */

[id*="recommendations"] .notion-property.notion-property__text.property-4d757046 {
	font-size: 20px;
	font-weight: 500;
}

/* Summary font size */

[id*="recommendations"] .notion-property.notion-property__text.property-4158617e {
	font-size: 1rem;
}

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

/* Card layout */

[id*="recommendations"] .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;
}

[id*="recommendations"] .notion-collection-card__cover,
[id*="recommendations"] .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;
}

[id*="recommendations"] .notion-collection-card__cover {
	border-radius: 0px !important;
	position: relative!important;
	border: none!important;
	flex: 0 0 150px !important;
	width: 46% !important;
}

[id*="recommendations"] .notion-collection-card__content {
	padding-left: 15px!important;
	position: relative!important;
	flex: 1 !important;
	white-space: nowrap !important;
}

[id*="recommendations"] .notion-collection-card__content span {
	white-space: normal !important;
}

[id*="recommendations"] .notion-property__text {
	margin: 0px !important;
}

[id*="recommendations"] .notion-property.notion-property__text.property-4d757046 {
	/*font-size: 1.5rem !important;*/
	margin-bottom:5px !important;
}

@media (max-width:810px) {
	/* 	Card width */
	[id*="recommendations"] .notion-collection-card {
		width: 90% !important;
	}
}

@media (max-width:480px) {

	/* 	Card width */
	[id*="recommendations"] .notion-collection-card {
		width: 100% !important;
	}
	
	/* Title of media */
	[id*="recommendations"] .notion-property.notion-property__text.property-4d757046 {
	/*font-size: 20px !important;*/
  }
}

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


/* Downloads */


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

[id*="downloads"] .notion-collection-card__content.no-title {
	display: flex !important;
	justify-content: space-between !important;
	padding: 5px 0px;
}

/* Cover */
[id*="downloads"] .notion-collection-gallery.medium img {
    object-position: top !important;
}

/* Downloadable Title */
[id*="downloads"] .notion-property.notion-property__text.property-4d757046 {
    font-size: 1rem;
    font-weight: 500;
    margin-top: 0px;
}

/* Price */
[id*="downloads"] .notion-property.notion-property__number.property-48515d44 {
    font-size: 1.2rem;
    font-weight: 600;
}

@media (max-width:768px) {

	/* Downloadable title */
	[id*="downloads"] .notion-property.notion-property__text.property-4d757046 {
	  font-size: 1rem;
  }
}

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


/* 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;
}

‣

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:

3. Simple Navbar setup

Use the Simple Navbar in Super "Themes"

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

‣

Simple Navbar Setup

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

5. The t-minus 10 checklist:

‣

Checklist

Instructions per page:

Globals Page

‣

Template Page

‣

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

Portfolio Instructions

‣

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

Post & Video Instructions

‣

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

Media Recs Instructions

‣

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

Downloads Instructions

‣

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

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

Setup

1. Start here

Single Database

2. Setup Instructions

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

Give me the "advanced approach"...

3. Simple Navbar setup

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

1. Links

2. Logo

3. Style

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

Latest Posts & Videos

All Posts or All Videos

Media Recs Instructions

Downloads Instructions

CRITICAL

Help & Support

Setup

1. Start here

Single Database

2. Setup Instructions

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

Give me the "advanced approach"...

3. Simple Navbar setup

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

1. Links

2. Logo

3. Style

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

Latest Posts & Videos

All Posts or All Videos

Media Recs Instructions

Downloads Instructions

CRITICAL

Help & Support