tonoïd

tonoïd

Template instructions (start here)

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!

  1. Duplicate this template to your own Notion workspace
  2. Create your site on Super and use your newly created page as the Notion URL
  3. Add your code to your Super settings: Sites > Settings (Gear Icon) > Code
  4. Under the Head tab, add the following code:
    <!-- Product Theme styles -->
    
    <link rel="stylesheet" href="https://mattdowney.github.io/folio/style.css">
    
    <!-- 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) -->
    Under the Body tab, add the following code:
    <!-- 
    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>
  5. Set up your pages on Super
  6. Sync URLs

    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.

    image
  7. Before you launch, have a look at our checklist:
  8. Checklist
    Change the links in the Footer database
    Update your favicon in Super

The Microstartup studio

Building online businesses inspired from our idea box

Projects Database

Latest from the blog

Blog Database

Footer

RowFooter rows
1
Home ‎/‎ About ‎/‎ Projects ‎/‎ Blog ‎/‎ Contact
Hide all of your pages in this toggle menu, only you will see it