theme

Writing content

Check in this post a few tips to use Bento better :)

Hiding design elements

You can hide elements shown in the single page. Check this example - from the about page:

hideMetadata = "true"
hideAuthorBio = "true"
hideComments = "true"
hideSuggestions = "true"
  • hideMetadata hides the date about the page title
  • hideAuthorBio hides the avatar / author bio
  • hideComments hides Disqus comments
  • hideSuggestions hides previous/next posts

Using TailwindCSS

Using the Bento theme, you can use TailwindCSS to create custom designs.

Inside a markdown file, add any TailwindCSS class and they will be rendered according to the framework. Example (from their website):

Creating full-width content

Use the .full-width class in elements you want to take the whole viewport width. Example:

Vancouver

Code:

<div class="full-width">
  <img src="/images/vancouver.jpg" alt="Vancouver" />
</div>

This will also work for embedded content. Check the example, embedding codepen:

<div class="full-width">
  <iframe src="https://codepen.io/leonardofaria/pen/yLLZNrw" class="w-full h-screen"></iframe>
</div>

Avatar photo Bento is a doggo who likes to code. Follow him on Twitter Twitter Tweet

Interactions