center stuff and make a lil ticket button 💁‍

src/css/blog.scss

@@ -7,6 +7,7 @@
 .post-list {
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
 }
 
 .post {

src/css/events.scss

@@ -6,11 +6,12 @@
 .event-list {
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
 }
 
 .event {
   width: $width-xs;
-  margin: 0 2.4rem 1.2rem 0;
+  margin: 0 3.2rem 1.2rem 0;
   position: relative;
 
   padding-bottom: 1.6rem;
@@ -58,7 +59,7 @@
   }
 
   &_text {
-    padding: 4rem 0 2rem;
+    padding: 4rem 2rem 2rem 0;
   }
 
   h1 {
@@ -68,4 +69,26 @@
   .venue {
     margin-bottom: 1rem;
   }
+
+  .ticket-url {
+    display: inline-block;
+    background: $color-yellow;
+    color: $color-black;
+    margin: 1rem 0;
+    padding: 0.6rem 1.4rem;
+    text-decoration: none;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    font-weight: 500;
+
+    transition: background .2s ease-in-out;
+
+    &:hover {
+      background: $color-orange;
+    }
+  }
+
+  .facebook-url {
+    display: block;
+  }
 }

src/css/page.scss

@@ -1,8 +1,9 @@
 .section-title {
-  margin-bottom: 1.6rem;
+  margin-bottom: 4rem;
   font-weight: 700;
 
   font-size: 2rem;
+  text-align: center;
 }
 
 .page {

src/templates/event.js

@@ -50,9 +50,7 @@ export const EventTemplate = ({
               Pris: {formatPrices(priceRegular, priceStudent)}
           </div>
           {ticketUrl &&
-            <div className="tickets">
-              Kjøp billett: {ticketUrl}
-            </div>
+            <a className="ticket-url" href={ticketUrl}>Kjøp billetter</a>
           }
           {facebookUrl &&
             <a className="facebook-url" href={facebookUrl}>Se Facebook-event</a>