app/views/layouts/application.html.erb
<!DOCTYPE html>
<html lang="en">
<head>
<title>Swedish Birds</title>
<%= favicon_link_tag %>
<!-- Icons for mobile/tablets -->
<!-- iOS -->
<%= favicon_link_tag 'green_owl_120.png', rel: 'apple-touch-icon', type: 'image/png' %>
<%= favicon_link_tag 'green_owl_152.png', rel: 'apple-touch-icon', type: 'image/png', sizes:'152x152' %>
<%= favicon_link_tag 'green_owl_167.png', rel: 'apple-touch-icon', type: 'image/png', sizes:'167x167' %>
<%= favicon_link_tag 'green_owl_180.png', rel: 'apple-touch-icon', type: 'image/png', sizes:'180x180' %>
<!-- Android -->
<%= favicon_link_tag 'green_owl_128.png', rel: 'icon', type: 'image/png', sizes:'128x128' %>
<%= favicon_link_tag 'green_owl_192.png', rel: 'icon', type: 'image/png', sizes:'192x192' %>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="A lifetime checklist for birds in Europe. Population data shown for Sweden.">
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application', defer: true %>
</head>
<body>
<div id="modal-container">
</div>
<div id="page-container">
<div id="navbar-container">
</div>
<div id="content-container">
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-12 col-lg-8">
<%= yield %>
</div>
</div>
</div>
</div>
<div>
<%= render "shared/footer" %>
</div>
</div>
</body>
</html>