From 065466864e6b89f7262d9f7f3d9e6b82fe0a7bbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rgen=20Sverre=20Lien=20Sell=C3=A6g?=
 <jorgen@guut.org>
Date: Wed, 3 Jun 2020 14:08:38 +0200
Subject: [PATCH] update style for mobile

---
 src/Events.js | 10 +++++-----
 src/style.css | 28 ++++++++++++++++++++++++++++
 src/style.js  | 22 ----------------------
 3 files changed, 33 insertions(+), 27 deletions(-)
 delete mode 100644 src/style.js

diff --git a/src/Events.js b/src/Events.js
index f52cf29..ff80a3a 100644
--- a/src/Events.js
+++ b/src/Events.js
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'preact/hooks'
-import style from './style.js'
 
 const endpoint = 'https://kultar.sout.no/events/'
+
 const fetch_options = {}
 
 function Link(props) {
@@ -80,7 +80,7 @@ function EventImage({ images }) {
   const { square = null } = images
   return (
     <img
-      style={style.EventImage}
+      className="event-image"
       src={`https://kultar.sout.no/events/${square}`}
     />
   )
@@ -90,7 +90,7 @@ function EventCard({ event }) {
   const { name, location, date, ticket_url, event_id } = event
   const { start: start_date } = date
   return (
-    <span style={style.EventCard}>
+    <span className="event-card">
       <h3>{name}</h3>
       <Time date={new Date(start_date)} />
       <Links ticket_url={ticket_url} event_id={event_id} />
@@ -104,7 +104,7 @@ function Event({ event, index }) {
   const { images } = event
 
   return (
-    <div style={style.Event}>
+    <div className="event">
       <EventImage images={images} />
       <EventCard event={event} />
     </div>
@@ -129,7 +129,7 @@ export default function Events() {
   }
 
   return (
-    <div style={style.Events}>
+    <div>
       {events.map((event, index) => (
         <>
           <Event event={event} index={index} />
diff --git a/src/style.css b/src/style.css
index 68197c1..b3bc2ac 100644
--- a/src/style.css
+++ b/src/style.css
@@ -26,3 +26,31 @@ hr {
   height: 0;
   width: '100%';
 }
+
+@media only screen and (min-width: 481px) {
+  .event {
+    display: flex;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    padding-top: 4px;
+  }
+  .event-image {
+    width: 168px;
+    height: 168px;
+    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
+  }
+  .event-card {
+    padding-left: 8px;
+  }
+}
+
+@media only screen and (min-width: 320px) and (max-width: 480px) {
+  .event {
+    display: flex;
+    flex-direction: column;
+  }
+  .event-image {
+    width: 100%;
+    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
+  }
+}
diff --git a/src/style.js b/src/style.js
deleted file mode 100644
index 0c29969..0000000
--- a/src/style.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export default {
-  Events: {},
-  Event: {
-    display: 'flex',
-    'border-top': '1px solid rgba(0, 0, 0, 0.1)',
-    'border-bottom': '1px solid rgba(255, 255, 255, 0.3)',
-    'padding-top': '4px',
-  },
-  EventImage: {
-    width: '168px',
-    height: '168px',
-    'box-shadow': '1px 1px 3px 0px rgba(0,0,0,0.75)',
-  },
-  EventCard: {
-    'padding-left': '8px',
-  },
-  hr: {
-    border: 0,
-    height: 0,
-    width: '100%',
-  },
-}