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):

Erin Lindford

Product Engineer

erinlindford@example.com

(555) 765-4321

Creating full-width content

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

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>