application.html.slim

doctype html
html
  head
    meta charset="UTF-8"
    meta name="description" content=""
    meta name="keywords" content=""
    meta name="viewport" content="width=device-width, initial-scale=1.0"
    title
    = stylesheet_link_tag "application"
    = javascript_include_tag "application"
    = csrf_meta_tag
  body
    - flash.each do |name, message|
      div.message class="message--#{name}"= message
    = yield

scaffold.sass

@mixin margin-after($margin: 1rem)
  &:not(:last-child)
    margin-bottom: $margin

html
  font-size: 15px

body
  color: #333
  font-family: Verdana, Arial, sans-serif
  margin: 2rem

a
  color: blue
  text-decoration: inherit

form
  +margin-after

input
  font-family: inherit
  font-size: inherit
  line-height: inherit
  outline: none

p
  strong
    display: inline-block
    margin-right: 1rem

pre
  background-color: #eee
  padding: 1rem

.actions
  +margin-after

.errors
  +margin-after
  background: #f6f6f6
  padding: 1.5rem
  width: 450px

  p
    +margin-after
    font-weight: bold
    margin: 0

  ul
    list-style: square
    margin: 0
    padding-left: 1.5rem

.field
  align-items: center
  +margin-after
  display: flex

  label
    &:first-child
      margin-right: 1rem

  [type=text]
    padding: 0.5rem

.field_with_errors
  [type=text]
    background: #fff3f5
    border: 1px solid #d8000c

.message
  background: #f6f6f6
  border-radius: 3px
  padding: 1rem
  &.message--error
    background: lighten(#ffbaba, 8)
    color: #d8000c
  &.message--notice
    background: #dff2bf
    color: #4f8a10