Hi, I’m Drew Long, UX Researcher/Designer and former educator. I create research-informed experiences that solve real problems.
‣
- Duplicate this template to your Notion workspace
- Create a site using Super, using your newly created page as the Notion URL.
- Add the settings below to your Super site settings:
‣
The fonts used in the demo are: PS Fournier: Light Reason New: Regular and Medium You’ll need to add these fonts to a new web project in your Adobe Typekit account and paste the unique ID into the code below.
If you want to use your own fonts you can find and replace all instances of the mentioned font names in the CSS below.
/* The names of the font families in the code below in case you want to quickly find and replace them with your own fonts */
psfournier-std
reason-new‣
Paste the code below into the ‘Snippet Injection’ field in your Super site settings.
<!-- Typekit: Update the link below with your Typekit ID -->
<link rel="stylesheet" href="https://use.typekit.net/gnx8fcu.css">
<!-- Favicon: Having a custom nav breaks the Favicon that you can upload in the Super settings. To change it, update the link here -->
<link rel="icon" href="https://s3.amazonaws.com/super-notion/images/8a28f49c-9631-4450-89f2-b87a3a60099e.png">
<!-- Meta Description: Having a custom nav breaks the site description that you can edit in the Super settings. To change it, update the text here -->
<meta property="og:description" content="Cy, a minimal portfolio template built on Notion and powered by Super.">
<!-- Share image: Having a custom nav breaks the site share image that you can edit in the Super settings. To include one add a url to your iimage in between the quotes like this > content="[here]" and write an alt description too -->
<meta property="og:image" content="">
<meta property="og:image:alt" content="">
<style>
/* --- Change default colors --- */
:root {
--color-bg-default: #F9F6F0 !important;
--color-text-default: #4B5673 !important;
--color-text-default-light: #4B5673 !important;
--color-text-gray: #959BA9 !important;
}
/* --- TYPOGRAPHY --- */
/* Increase base font size for large screens */
@media screen and (min-width: 50em) {
html {
font-size: 18px !important;
}
}
body {
font-family: reason-new, sans-serif !important;
/* Make the text nice and crisp */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Improve kerning for good measure */
text-rendering: optimizeLegibility;
}
/* Styling for page names */
.notion-header__title {
font-weight: 700 !important;
font-size: 0.75rem !important;
line-height: 1.25 !important;
min-height: auto !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
padding: 0 !important;
}
.notion-header__content>div {
margin-bottom: 0px !important;
}
.notion-header {
margin-bottom: 0px !important;
padding-top: 32px !important;
}
@media screen and (min-width:680px) {
.notion-header {
padding-top: 80px !important;
}
}
/* Adjust line-height and letter-spacing for body copy */
.notion-semantic-string {
line-height: 1.7 !important;
letter-spacing: -0.01em !important;
}
/* --- Heading styles --- */
/* H1 */
h1.notion-heading, .notion-page__properties .notion-property__text {
font-family: psfournier-std, serif !important;
font-weight: 200 !important;
font-size: 1.875rem !important;
}
h1.notion-heading .notion-semantic-string, .notion-property__text .notion-semantic-string {
line-height: 1.27 !important;
letter-spacing: -0.03em !important;
}
@media screen and (min-width: 50em) {
h1.notion-heading, .notion-page__properties .notion-property__text .notion-semantic-string {
font-size: 2.55rem !important;
}
}
/* H2 */
h2.notion-heading {
font-family: psfournier-std, serif !important;
font-weight: 200 !important;
letter-spacing: -0.01em !important;
}
/* H3 */
h3.notion-heading {
font-weight: 500 !important;
margin-bottom: 0.25em !important;
}
/* Remove padding */
.notion-heading {
padding: 0 !important;
}
/* Adjust line height for H2 and H3 */
.notion-heading .notion-semantic-string {
line-height: 1.3 !important;
}
/* Ensure opacity remains at 1 when a heading is a link */
.notion-heading .notion-semantic-string .link {
opacity: 1 !important;
}
.notion-text__content {
padding: 8px 0 !important;
}
/* --- NAVIGATION --- */
/* Hide the Notion nav bar */
.notion-navbar {
display: none !important;
}
/* Custom nav styling (see HTML at bottom of code) */
.nav {
align-items: flex-start;
padding: 25px;
display: flex;
position: static;
z-index: 9999;
height: 110px;
width: 100%;
flex-direction: column;
justify-content: space-between;
}
@media screen and (min-width: 30em) {
.nav {
align-items: center;
padding: 0 25px;
height: 64px;
flex-direction: row;
}
}
.nav .right, .nav .left {
display: flex;
margin-bottom: 0.25em;
}
.nav .right {
margin-right: -20px;
}
.nav-link {
transition: all .3s ease-in-out;
justify-content: center;
align-items: center;
padding: 0 20px 0 0;
display: flex;
height: 100%;
font-size: 18px;
font-weight: 500;
color: var(--color-text-default);
letter-spacing: -0.01em;
text-decoration: none;
}
/* --- CONTENT STYLING --- */
/* --- Adjust the max width of pages --- */
.super-content.max-width, .notion-header__content.max-width {
max-width: 1080px!important;
}
/* --- Remove bottom page padding and adjust page padding for smaller screens --- */
.super-content {
padding-bottom: 40px !important;
}
@media screen and (min-width: 415px) and (max-width: 800px) {
.super-content, .notion-header__content {
padding-left: 46px !important;
padding-right: 46px !important;
}
}
/* --- Remove additional spacing on mobile that is created by column layout on desktop --- */
@media screen and (max-width:680px) {
.notion-column {
padding: 0px!important;
}
}
/* --- Control heading spacing in column layout --- */
.notion-column>.notion-heading {
margin-top: 7px !important;
}
.notion-header__icon-wrapper {
padding: 2px!important;
bottom: 8px!important;
}
/* --- Adjust quote styling so it can be used as a standfirst --- */
.notion-quote {
border-left: 0px!important;
padding: 0!important;
margin: .5rem 0 1rem!important;
}
/* --- Change handling of full width images --- */
.notion-image.full-width img {
object-fit: fill!important;
height: auto!important;
}
/* --- Change Image caption alignment --- */
.notion-image.page-width>figcaption, .notion-image.full-width>figcaption {
text-align: center!important;
}
/* --- PROJECTS LISTING --- */
/* Remove header of the gallery table */
.notion-collection__header {
display: none !important;
}
/* Adjust spacing of gallery grid */
.notion-collection-gallery {
grid-gap: 46px !important;
gap: 46px !important;
grid-row-gap: 66px !important;
border-top: none !important;
}
/* Stop card from breaking out of layout on screens smaller than 370px */
@media screen and (max-width:370px) {
.notion-collection-gallery {
display: block !important;
}
.notion-collection-gallery > a {
display: block !important;
margin-bottom: 44px !important;
}
}
/* Override default card styling */
.notion-collection-card {
border-radius: 0 !important;
box-shadow: none !important;
}
.notion-collection-card:hover {
background: transparent !important;
}
.notion-collection-card__cover.large, .notion-collection-card__cover.large>div, .notion-collection-card__cover.large img, .notion-collection-card__cover.medium, .notion-collection-card__cover.medium>div, .notion-collection-card__cover.medium img {
height: auto !important;
max-height: none !important;
}
.notion-collection-card__cover.large>div {
position: relative !important;
}
.notion-collection-card__cover {
height: auto !important;
min-height: none !important;
border-bottom: none !important;
}
.notion-collection-card__cover img {
position: relative !important;
height: auto !important;
width: 100% !important;
border-radius: 0 !important;
object-fit: contain !important;
object-position: initial !important;
padding-bottom: 0 !important;
}
.notion-collection-card__content {
padding-bottom: 0 !important;
padding-left: 0 !important;
font-size: 1em !important;
overflow: hidden;
}
/* Hides page title */
.notion-property__title {
display: none !important;
}
/* Display text property as a heading */
.notion-collection-card__property .notion-semantic-string {
display: block !important;
margin: 0.6em 0 0.4em !important;
font-family: psfournier-std, serif !important;
font-weight: 200 !important;
font-size: 27px !important;
line-height: 1.3 !important;
letter-spacing: -0.01em !important;
white-space: normal !important;
}
/* Add underline to title on hover of project card */
.notion-collection-gallery > a .notion-collection-card__property .notion-semantic-string span {
border-bottom: 1px solid transparent !important;
transition: border-color .2s ease-in;
}
.notion-collection-gallery > a:hover .notion-collection-card__property .notion-semantic-string span {
border-bottom: 1px solid var(--color-text-default) !important;
}
/* Increase spacing between project meta data */
.notion-collection-card__property {
margin: 3px 0 !important;
}
/* Stop the tags from truncating */
.notion-property__select {
display: inline !important;
white-space: normal !important;
overflow: auto !important;
}
/* Adjust pill styling */
.notion-pill {
font-size: 18px !important;
border-radius: 0px !important;
line-height: 24px !important;
margin: 2px 0 !important;
padding: 0 !important;
display: inline !important;
white-space: normal !important;
text-overflow: initial !important;
}
/* Adds comma before each item */
.notion-pill::before {
content: ", ";
white-space: pre;
}
/* Removes comma before first item */
.notion-pill.first::before {
content: "";
}
/* Make all but the default colour display as a lighter colour */
.pill-default {
background: none !important;
}
.pill-gray, .pill-brown, .pill-orange, .pill-yellow, .pill-green, .pill-blue, .pill-purple, .pill-pink, .pill-red {
background: none !important;
color: var(--color-text-gray) !important;
}
/* --- PROJECT PAGE --- */
/* Hide cover image from page headers */
.notion-header__cover {
display: none !important;
}
.notion-header__content.no-icon.has-cover .notion-header__title-wrapper {
margin-top: 0 !important;
}
/* Amend the display of properties to act as header and meta data */
/* Adjust spacing between header text elements */
.notion-page__properties {
margin: 16px 0 0 0;
}
@media screen and (min-width:680px) {
.notion-page__properties {
margin: 30px 0 60px 0;
}
}
.notion-property__text .notion-semantic-string {
margin-bottom: 16px;
}
/* Display as single column */
.notion-page__property {
grid-template-columns: 1fr !important;
}
/* Remove default styling of properties */
.notion-page__properties .notion-property {
border-radius: 0 !important;
padding: 0 !important;
}
@media screen and (min-width: 50em) {
.notion-page__properties .notion-property {
font-size: 18px !important;
}
}
/* Hide property name */
.notion-page__property-name {
display: none !important;
}
/* Hide divider */
.notion-page__properties .notion-divider {
display: none;
}
/* --- MISC --- */
/* Hide notion toggle - a hack to hide child pages, drag them into a toggle and they'll disappear */
.notion-toggle {
display: none !important;
}
/* --- PAGE LOAD ANIMATION --- */
body {
-webkit-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
-moz-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
-o-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
-ms-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
</style>
<!-- CUSTOM NAVIGATION -->
<nav class="nav">
<div class="left">
<a class="nav-link" href="/">Cy</a>
</div>
<div class="right">
<a class="nav-link" href="/projects">Projects</a>
<a class="nav-link" href="/about">About</a>
<a class="nav-link" href="https://medium.com/">Writing</a> <!-- External links can be included in the navigation also -->
</div>
</nav>4. Make sure you’ve done these things before you go live
‣
Change all links in the footer and copy-paste the new footer to every page and project.
Check the favicon, update if necessary in the snippet code.
Amend the meta description in the snippet code.
Check that all navigation labels and links are correct and that they point to the right pages. Note, they do not automatically update when you amend page names or add new pages. The default ‘Writing’ link goes to Medium.com so that needs to updated or removed too.
Add pretty links for your pages and projects into Super’s pretty URL settings.
‣
‣
Can’t believe I’ve made a product that requires a change log. But here goes.
‣
Super released a new feature that enabled page properties to be displayed. This is the meta data on database pages. In the original version of this template we used those properties to drive the content that displayed in the gallery views (projects grid) but then we had to duplicate the title and disciplines on the content of the page to get it to display on the project page.
This new version does away with that duplication. Now you can simply manage the title and disciplines within the page properties and they will display automatically on the project page.
If you haven’t used the template yet, just refer the to the instructions above as normal.
If you have an existing site read on: 1. Update your site on Super
2. Update your snippet using the code in the instructions
3. Set ‘Show or Hide page properties’ to ‘Show’
4. Remove the titles and disciplines from the body of each project
5. Hide the other properties from the page.
‣
- From any project page click the three dots icon.
- Click Customise page
- Set the visibility of each property to the options shown below.
6. Check it all looks good and let me know if you have any issues.
Research projects
UX Projects
Gone but not forgotten—Visit these archived projects.
Made with Super.so + Notion.so + Cy template
‣
