responsive fixes

_includes/program/program-item.html

@@ -3,6 +3,7 @@
 
 <li class="textbox margin-16-bottom">
   <a href="/rf2020/events/{{ event.ref }}.html">{{ event.title_ }}</a>
+  <span class="hide-mobile">
     <span>→</span>
     {% for eventParticipantId in event.participants %}
       {% for participant in site.data.rf2020.participants %}
@@ -11,6 +12,7 @@
         {% endif %}
       {% endfor %}
     {% endfor %}
+  </span>
 
   {% if event.format %}
     <span>[{{ event.format }}]</span>

_layouts/event.html

@@ -31,7 +31,7 @@ lang: en
         {{ page.description | markdownify }}
       </p>
     </div>
-    <div class="flex flex-row flex-justify-space-between">
+    <div class="flex flex-row flex-justify-space-between flex-wrap-m details">
       <div class="post-content inline-block">
         <h3>
           In this {{ page.format }}:
@@ -39,9 +39,7 @@ lang: en
         {% for id in page.participants %}
           {% for participant in site.data.rf2020.participants %}
             {% if participant.id == id %}
-
               <a class="block with-url-arrow" href="/rf2020/participants/{{ participant.ref }}.html">{{ participant.fullname }}</a>
-
             {% endif %}
           {% endfor %}
         {% endfor %}

_sass/layouts/event.scss

@@ -21,5 +21,11 @@
     h3 {
       font-weight: bold;
     }
+
+    .details {
+      div::last-of-type {
+        margin: 0;
+      }
+    }
   }
 }

_sass/layouts/program.scss

@@ -6,6 +6,10 @@
   li {
     display: inline-block;
     margin-right: $size-64;
+
+    @include touch {
+      line-height: 1.5;
+    }
   }
 
   h2 {

_sass/utils/position-utils.scss

@@ -29,4 +29,14 @@
     justify-content: center;
     align-items: center;
   }
+
+  &.flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  &.flex-wrap-m {
+    @include touch {
+      flex-wrap: wrap;
+    }
+  }
 }

_sass/utils/responsive.scss

@@ -56,3 +56,9 @@
     @content;
   }
 }
+
+.hide-mobile {
+  @include touch {
+    display: none;
+  }
+}