Add responsive visibility classes for mobile display of talks and slides (#87)

Co-authored-by: Juliano Costa <[email protected]>

Author: jetzlstorfer

_layouts/event.html

@@ -30,15 +30,17 @@ <h2>Talks</h2>
     <div class="talkdetails">
       <strong>{{ talk.title }}</strong> <span class="label">by {{ talk.speaker }}</span>
       {% if talk.file %}
-        <br><br><object data="{{ talk.file }}" width="100%" height="500" type="application/pdf"></object>
+        <br><br><object data="{{ talk.file }}" width="100%" height="500" type="application/pdf" class="hide-on-mobile"></object>
+        <p><a href="{{ talk.file }}" class="show-on-mobile">📄 Open/Download PDF</a></p>
       {% else %}
         <br><br>The speaker has not provided the slides (yet).
       {% endif %}
       {% if talk.recording %}
         {% assign rec = talk.recording | split: 'v=' %}
         {% assign video_id = rec[1] %} 
         <center>
-        <br><iframe width="560" height="315" src="https://www.youtube.com/embed/{{ video_id }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+        <br><iframe width="560" height="315" src="https://www.youtube.com/embed/{{ video_id }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen class="hide-on-mobile"></iframe>
+            <iframe src="https://www.youtube.com/embed/{{ video_id }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen class="show-on-mobile"></iframe>
         </center>
       {% endif %}
     </div>

assets/style.scss

@@ -1291,3 +1291,15 @@ Modules - reusable parts of our design
   margin: 20px 0;
 }
 
+.hide-on-mobile {
+  display: block;
+  @include mobile {
+    display: none;
+  }
+}
+.show-on-mobile {
+  display: none;
+  @include mobile {
+    display: block;
+  }
+}