update style for mobile

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} />

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);
+  }
+}

src/style.js

@@ -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%',
-  },
-}