media queries & ordinals

assets/style/pages/index/_events.scss

@@ -77,6 +77,7 @@
     }
 
     .event {
+      grid-template-columns: 3fr 2fr;
       grid-column: 1;
       padding: .5rem 1rem;
 
@@ -89,6 +90,7 @@
       .info {
         grid-column: 1;
         grid-row: 1/4;
+        min-width: 0;
   
         h5 {
           font-size: 1rem;
@@ -96,7 +98,7 @@
         }
 
         .location {
-          width: 80%;
+          width: 95%;
           text-overflow: ellipsis;
           overflow: hidden; 
           white-space: nowrap;

components/event/Date.vue

@@ -19,5 +19,5 @@
 </script>
 
 <template>
-  <h4>Date: {{ data.date }}{{ data.ordinal }} at {{ data.time }}</h4>
+  <h4>Date: {{ data.date }} · {{ data.time }}</h4>
 </template>

components/index/Events.vue

@@ -25,7 +25,8 @@
         <p class="location">{{ event.location }}</p>
         <p>{{ event.date }} · {{ event.time }}</p>
       </div>
-      <NuxtLink v-bind:class="(event.meetup)?'attend both':'attend bottom'" class="attend" v-if="!event.past" :href="'/login?action=attend&?ref=' + event.slug" >Attend event</NuxtLink>
+      <NuxtLink v-bind:class="(event.meetup)?'attend both':'attend bottom'" class="attend" 
+        v-if="!event.past" :href="'/login?action=attend&?ref=' + event.slug" >Attend event</NuxtLink>
       <NuxtLink class="meetup bottom" v-if="event.meetup" target="_BLANK"
         :to="'https://www.meetup.com/capitalregionbitcoinnetwork/events/' + event.meetup + '/'">Meetup.com</NuxtLink>
     </div>

pages/event/[slug].vue

@@ -28,7 +28,6 @@
 
   let date = parseISO(data.value.date)
   data.value.date = format(date, 'EEE, MMMM d')
-  data.value.ordinal = nth(getDay(date) - 1)
 
 </script>
 
@@ -38,7 +37,7 @@
       <h3>{{ data.title }}</h3>
       <h4>Location: {{ data.location}}</h4>
       <h4>Address: {{ data.address }}</h4>
-      <h4>Date: {{ data.date }}{{ data.ordinal }} at {{ data.time }}</h4>
+      <h4>Date: {{ data.date }} · {{ data.time }}</h4>
       <!-- <EventDate :date="data.date" :time="data.time" /> -->
     </div>
   </div>