index.haml

%html
  %script(src="https://code.jquery.com/jquery-1.11.3.min.js")
  %script(src="js/app.js")
  %head
    %title Thornwatch Dice Roller
    %link{ rel:"icon", type:"image/png", href:"images/favicon-32x32.png", sizes:"32x32"}
    %link{ rel:"icon", type:"image/png", href:"images/favicon-16x16.png", sizes:"16x16"}
    :css
      @import 'https://fonts.googleapis.com/css?family=Yatra+One';
      @import 'https://fonts.googleapis.com/css?family=Cinzel';
    %link(rel="stylesheet" href="css/styles.css")
    / from https://github.com/daneden/animate.css:
    %link(rel="stylesheet" href="css/animate.min.css")
  %body
    .logo_box
      %img.logo.blue_boxed{src:'images/logo.svg'}
    .action_box.blue_boxed
      .chooser.visible
        %table.action_table
          %tr
            %td
              %button.die_button.regular_die{id:'regular1'} Regular die
            %td
              %button.die_button.regular_die{id:'regular2'} Regular die
          %tr
            %td
              %button.die_button.regular_die{id:'regular3'} Regular die
            %td
              %button.die_button.regular_die{id:'regular4'} Regular die
          %tr
            %td
              %button.die_button.hero_die{id:'hero1'} Hero die
            %td
              %button.die_button.hero_die{id:'hero2'} Hero die
      .results.hidden
        %table.action_table#results_table
    .button_box.blue_boxed
      %button.big_button.visible.roll_button
        Roll!
      %button.big_button.hidden.return_button Roll again!
      %button.tooltip#tooltip.hidden.bottom You must select some dice before rolling!