[RUBY] Decorate your Sinatra app with CSS

Introduction

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

Completion screen

20200907A.png 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

Referenced site

Recommended Posts

Decorate your Sinatra app with CSS
Sinatra app with ActiveRecord died in Passenger 6.0.5
Practice making a simple chat app with Docker + Sinatra
Automate your work with Rake
Tune your query with EXPLAIN