<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fbda6c36-204f-404b-a248-ca836d037f19/Layout.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fbda6c36-204f-404b-a248-ca836d037f19/Layout.png" width="40px" /> INSTALLATION GUIDE

• Open the page and duplicate the template to your own Notion workspace.

  Watashi Classic

• Copy the line of code

  <link href="<https://yusuf-github.github.io/watashi-classic/style.css>" rel="stylesheet" />
  

• Head over to your site on Super, and click on Code.

• Paste the copied code into the Head section of your page on Super.

• Then, click save.

• Now you are free to edit the contents of your newly designed site!

• Check out the TIPS & EXTRAS section below for more exciting stuff. </aside>

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fbda6c36-204f-404b-a248-ca836d037f19/Layout.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fbda6c36-204f-404b-a248-ca836d037f19/Layout.png" width="40px" /> HOW TO USE

I have customized certain blocks to fit the overall design, so these points are important for you to know.

Heading #1

• This block translates to a button, so if you need a button on your page, use this block.
• You can customize the button color using Notion's own color background selections.

Heading #2

• This block translates to a centered text at a smaller font size.

Heading #3

• Normal-sized heading. I personally use this as titles for the floating blocks.

Callout

• This block translates to floating blocks.
• This is the primary block to create the floating blocks on your page.
• My suggestion is to not use a Callout block within a callout block — it'll look weird.

Blank Block

• In between each Callout blocks, apply a single blank block to increase the spacing between them.
• In case you'd like to center a Callout block, add a blank block to each side, and adjust the width accordingly by dragging the sides.

Toggle Background Orange Block

• Navigate
• This specific block will create a navigation system on your page.
• Make sure to select the background color Orange for the toggle list.
• Inside the toggle content, you will need to add a link that reference to a specific block on your page. Here's how:

  • Get the ID of the specific block on your page.

    CleanShot 2021-08-29 at 17.57.18.mp4

  • Append the '#' symbol and block ID to your site's URL like so:

    **https://yoursite.com#blockID**

    Or if your site is like mine, where I have created a nested page:

    **https://yusuf.is/who#blockID**

  • Copy the whole URL, and add it as a link to the text inside the toggle content. View the example toggle content above.

  • Voila! And that's it. I know it takes a bit of work to do this, but it's all thanks to Notion's flexibility that we're able to hack things together and create wonderful stuff. </aside>

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/37d44808-e639-4c5c-85cf-980ee2afc2b7/Lightbulb.svg" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/37d44808-e639-4c5c-85cf-980ee2afc2b7/Lightbulb.svg" width="40px" /> TIPS & EXTRAS

Increasing Floating Block's width

• You can increase the maximum width of the floating blocks (see Watashi Business demo page) by toggling the full width switch on your page in Notion.

Hide/Show Navigation Bar

• By default, the navigation bar is hidden. To show it, copy the code below, and paste it in the CSS section of your page in Super.

  .notion-navbar {
    display: flex !important;
  }
  

Hide/Show Callout Icons

• By default, the Callout icons are visible. To hide them, copy the code below, and paste it in the CSS section of your page in Super.

  .notion-callout__icon {
  	display: none !important;
  }
  

Waving Animation for Callout Icons

• Copy the code below, and paste it in the CSS section of your page in Super. Remember to click on save.

  .notion-callout__icon {
      animation-name: wave-animation;
      animation-duration: 2.5s;
      animation-iteration-count: infinite;
      transform-origin: 70% 70%;
      display: inline-block;
  }
  
  @keyframes wave-animation {
      0% { transform: rotate(  0.0deg) }
     10% { transform: rotate(-10.0deg) }
     20% { transform: rotate( 12.0deg) }
     30% { transform: rotate(-10.0deg) }
     40% { transform: rotate(  9.0deg) }
     50% { transform: rotate(  0.0deg) }
    100% { transform: rotate(  0.0deg) }
  }
  

</aside>