Responsive performances.

assets/css/app.scss

@@ -2,6 +2,7 @@
 @import './layout.scss';
 @import './pages/index.scss';
 @import './pages/form.scss';
+@import './pages/performance.scss';
 /* Alerts and form errors */
 .alert {
   padding: 15px;

assets/css/pages/performance.scss

@@ -0,0 +1,14 @@
+section.text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 80%;
+  max-width: 1000px;
+  background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #d5caf2);
+  text-align: center;
+
+  p {
+    padding: 0px 20px;
+    max-width: 56%;
+  }
+}

lib/runosaari_web/templates/performance/index.html.eex

@@ -1,9 +1,8 @@
 <h1 id="calendar-start">Ohjelma</h1>
-
+<section class=text>
 <%= for performance <- @performances do %>
-    <article>
   <h2><%= performance.name %></h2>
   <p><%= performance.desc %></p>
-    </article>
 <% end %>
+</section>
 <span><%= link "Hallinta", to: Routes.admin_performance_path(@conn, :admin) %></span>