‣
First of all, thanks for purchasing Folio — I'm thrilled! If you have any questions as you go through the setup process, please don't hesitate to shoot me an email. Let's get started!
⚡️UPDATES⚡️
‣
I've added the ability to choose between both dark and light versions of the template. Check out the Head tab section below to see how to use activate it.
‣
- When you create the link in Notion, make the text a link first and then make it bold. Depending on the container, this should trigger the large black button instead of a text link.
- If that doesn’t work, do the opposite — make the text bold first and then make it a link. Again, it depends on the container you’re in sometimes (and honestly it’s just sometimes Notion and Super being weird together).
- Duplicate this template to your own Notion workspace
- Create your site on Super and use your newly created page as the Notion URL
- Add your code to your Super settings: Sites > Settings (Gear Icon) > Code
- Set up your pages on Super
- Before you launch, have a look at this checklist:
‣
<!-- Product Theme styles -->
<link rel="stylesheet" href="https://mattdowney.github.io/folio/style.css">
<!-- Light Theme -->
<!-- Remove this HTML comment to use the light theme
<link rel="stylesheet" href="https://mattdowney.github.io/folio/light-styles.css">
Remove this HTML comment to use the light theme -->
<!-- jQuery v3.2.1 -->
<script type='text/javascript' src='https://code.jquery.com/jquery-3.2.1.min.js' id='script-name-js'></script>
<!-- Product Theme javascript -->
<script defer="defer" async src="https://mattdowney.github.io/folio/site-min.js"></script>
<!-- Add Analytics here (optional) -->
Here's a short video showing how to activate the light theme:
‣
<!--
Desktop navigation
Important: Make sure to swap out the img link to your logo and update the pixel width accordingly
-->
<nav class="desktop-nav">
<div class="left">
<a href="/">
<img style="width: 65px; height: auto;" src="https://mattdowney.github.io/folio/img/img-logo.svg" />
</a>
</div>
<div class="right">
<a class="nav-link-1" href="/about/">About</a>
<a class="nav-link-2" href="/projects/">Projects</a>
<a class="nav-link-3" href="/blog/">Blog</a>
<a class="nav-link-4" href="mailto:hey@mattdowney.co">Contact</a>
</div>
</nav>
<!--
Mobile navigation
Important: Make sure to swap out the img link to your logo and update the pixel width accordingly
-->
<div class="mobile-nav">
<div class="left">
<a href="/">
<img src="https://mattdowney.github.io/folio/img/img-logo.svg" />
</a>
</div>
<div class="right">
<input id="nav" type="checkbox" />
<label for="nav">
<span></span>
<span></span>
<span></span>
</label>
<nav>
<ul>
<li><a class="nav-link-1" href="/about/">About</a></li>
<li><a class="nav-link-2" href="/projects/">Projects</a></li>
<li><a class="nav-link-3" href="/blog/">Blog</a></li>
<li><a class="nav-link-4" href="mailto:hey@mattdowney.co">Contact</a></li>
</ul>
</nav>
</div>
</div>
‣
You can use Sync URLs if you like, but we find that adding pages manually to Super is a much more reliable way to handle page integration. This may change in the future, but we recommend doing this for now.
‣
Change the links in the Footer database
Update your favicon in Super
Hi! I am Navpreet Singh. I am a brand designer from Toronto, ON, focused on branding, websites, and digital media.
Mellow Craft Brewery
Mellow Craft Brewery
Mellow craft brewery is a passion-driven company that crafts premium beers as unique and refreshing as the region they’re from.
BrandingPackaging
Inside Wood Identity
Inside Wood Identity
"Inside Wood" is an apparel company with a focus on a minimal approach.
BrandingPackaging
Goose Estate
Goose Estate
Goose Estate is a service that helps people find a rental of their choice in the Greater Toronto Area.
BrandingUIWebsite
Joint Jelly
Joint Jelly
Joint Jelly is an Ice Cream outlet. The project was to create a custom lettering identity design for the brand.
BrandingPackaging