Decorate your Sinatra app with CSS

Introduction

Previous article-Qiita dominated the taste, so I tried coloring only the chot with CSS.

Completion screen

heroku app

Last reflection

err.or

app.rb:2:in `require': cannot load such file -- sinatra/reloader (LoadError)

It was just that sinatra-contrib became group: development. CSS It's not cool to line up in a row, so I decided to display only the company name and click the route name to display it.

style.css

.btm {
    transition: 0.2s;
    height: 0;
    overflow: hidden;
    padding: 0 10px;
}
.container input:checked + .btm {
    height: auto;
    padding: 0 10px 10px 10px;
    background-color: lightsalmon;
}

I think it's hidden because height is 0 ~~ Result all right ~~

Summary

• First app fix
• Become familiar with CSS

Referenced site

• [CSS] Show / hide block elements with CSS only *
• [For beginners] How to get Ruby delayed railway line name --Qiita *