- 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!

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:

"I don't wont to really worry about custom code" approach:
<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/styles.css">
<!-- 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>© 2021 </span><span><a class="notion-link link" href="/">yoursite</a></span></span>
</div>
</div>
</div>
/*****************************/
/* 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"...
/*****************************/
/* 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;
}
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

Sites > Settings (Gear Icon) > Themes > Custom Navbar
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
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:
- 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!
5. The t-minus 10 checklist:
Instructions per page:
Globals Page
Use it for global page elements like backlinks, footers, menus, etc.

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!

Template Page
- All callouts except for the yellow and gray look like this:
Portfolio Instructions

- Type: Portfolio
- Type: Sometimes Feature is also a type which means it serves to the home page as a "Featured" project.
- 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.

Post & Video Instructions
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
Media Recs Instructions

- 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
- 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

CRITICAL
- Home
- About
- Portfolio
- Posts
- Recommendations
- Downloads
Help & Support
For any questions please reach out! eric.michael.day@gmail.com & @ericday