Watashi Original

Welcome

Thank you for purchasing this theme and template. The installation guide is just a scroll down away.

Contact me

Wherever possible, please reach out to me first for template-related support before reaching out to the Super team. They already got a lot on their hands. Note that I’m currently at a GMT+8 timezone, so I might be asleep when I got your message, but I’ll make sure to reply to you as soon as I can.

DM me on Twitter (@yusufgiftworks)
Email me at [email protected]

Extras

Here are some products and services that might be of use to you when creating your sites:

Illustrations and icons
- Craftwork Design
- Streamline
Tutorials
- How to create a membership site with Notion+Super

<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 Original
Select a theme, open toggle, and copy the line of code.
- Watashi Original Light Theme
- Watashi Original Dark Theme
- Watashi Original System Theme
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>

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>