Add macro for YouTube videos (#53)

Add macro for YouTube videos. This macro creates a simple `figure` tag
with a thumbnail of the video that mimics the iframe that YouTube
creates when inserting their videos. We do this to avoid having Google
trackers in our website. Update news about Yago's and Arthur's talk

_templates/macros.html

@@ -53,3 +53,40 @@
 {%- macro page_link(id, page, site) -%}
   <a href="{{ site[id].path|relative_to(page.path) }}">{{ site[id].title }}</a>
 {%- endmacro -%}
+
+
+{%- macro youtube_video(video_url, thumbnail, caption="", play_logo="/images/yt-icons/play.svg", yt_logo="/images/yt-icons/yt-logo.svg") -%}
+  <!-- Thumbnail of Youtube video without tracking-->
+  <figure>
+  <div class="ratio ratio-16x9">
+    <div class="yt" style='background-image: url("{{ thumbnail }}")'>
+      <a
+        href="{{ video_url }}"
+        aria-label="Watch on YouTube"
+        target="_blank"
+        rel="noopener noreferrer"
+        title="Watch on YouTube"
+      >
+        <div class="play-button">
+          <img src="{{ play_logo }}" alt="Play video in YouTube">
+        </div>
+      </a>
+      <a
+        href="{{ video_url }}"
+        aria-label="Watch on YouTube"
+        target="_blank"
+        rel="noopener noreferrer"
+        title="Watch on YouTube"
+      >
+        <div class="watch-on-yt">
+          <div aria-hidden="true">Watch on</div>
+          <div><img src="{{ yt_logo }}" alt="YouTube logo"></div>
+        </div>
+      </a>
+    </div>
+  </div>
+  {% if caption != "" %}
+  <figcaption>{{ caption }}</figcaption>
+  {% endif %}
+  </figure>
+{%- endmacro -%}

css/style.css

@@ -424,3 +424,105 @@ blockquote > * + *, figure > * + *, .callout > * + * {
 .text-muted a:hover {
   color: var(--color-primary);
 }
+
+
+/* Create thumbnail for youtube videos */
+/* ----------------------------------- */
+
+.ratio {
+  position: relative;
+  width: 100%;
+}
+.ratio::before {
+  display: block;
+  padding-top: var(--bs-aspect-ratio);
+  content: "";
+}
+.ratio > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ratio-1x1 {
+  --bs-aspect-ratio: 100%;
+}
+
+.ratio-4x3 {
+  --bs-aspect-ratio: 75%;
+}
+
+.ratio-16x9 {
+  --bs-aspect-ratio: 56.25%;
+}
+
+.ratio-21x9 {
+  --bs-aspect-ratio: 42.8571428571%;
+}
+
+.yt {
+  background-size: cover;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+}
+
+.yt a {
+  text-decoration: none;
+  color: #fff;
+}
+
+.yt a:hover {
+  text-decoration: none;
+  color: #fff;
+}
+
+.play-button {
+  width: 68px;
+  height: 48px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -34px;
+  margin-top: -32px;
+  background-color: rgba(23, 23, 23, 0.8);
+  border-radius: 10px;
+  display: flex;
+}
+
+.play-button:hover {
+  background-color: rgba(255, 0, 0, 1);
+}
+
+.play-button img {
+  width: 25%;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.watch-on-yt {
+  background-color: rgba(23, 23, 23, 0.8);
+  position: absolute;
+  left: 0px;
+  top: auto;
+  bottom: 5px;
+  height: 48px;
+  width: auto;
+  padding: 10px 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--size-0);
+  line-height: var(--size-0);
+}
+
+.watch-on-yt img {
+  height: var(--size-0);
+  width: auto;
+  margin-left: 0.5rem;
+  padding-bottom: 1px;
+}
+/* ----------------------------------- */

news/science-day-2024.md

@@ -1,7 +1,7 @@
 ---
 title: "IAG | Science Day 2024"
 date: 2024-09-23
-author: Yago Moreira Castro 
+author: Yago Moreira Castro
 ---
 
 {%- import "macros.html" as macros %}
@@ -10,15 +10,32 @@ author: Yago Moreira Castro
 
 **This month**, [Arthur Siqueira de Macêdo](../team#arthursmacedo) and I had the opportunity to present our MSc projects at the **IAG | Science Day**. This event gathers members of the IAG for **5-minute presentations**, where researchers give concise summaries of their work to a broad audience from our institute. It was a **challenging** but interesting experience, as we’re not used to delivering such brief presentations, but it pushed us to communicate our ideas **clearly and efficiently**.
 
-The links to our presentations are listed below:
+{{ macros.figure("../images/news/science-day-2024-arthur.jpg", caption="Arthur presenting his MSc project at IAG | Science Day 2024", alt="Presenter (light-skinned male in a white t-shirt) next to presentation screen with a slide containing a diagram about aeromagnetic surveys. Also seen are the backs of the heads of 7 audience members." ) }}
 
-* [Integração de dados aerogeofísicos em escala continental (Arthur's presentation)](https://www.youtube.com/live/5ZxFyw3ZN6s?si=BqXHaO90SEd1-OFi&t=4639)
-* [Magali (Yago's presentation)](https://www.youtube.com/live/5ZxFyw3ZN6s?si=sdQxzEzJsymJTcFI&t=3367)
+{{ macros.figure("../images/news/science-day-2024-yago.jpg", caption="Yago presenting his MSc project at IAG | Science Day 2024", alt="Presenter (light-skinned male in a green shirt) next to presentation screen with a slide containing a Magali`s logo (a watermelon-like figure in which its seeds resemble magnetic dipoles, followed by the project's name). Also seen are the backs of the heads of 3 audience members." ) }}
 
-<br>
+## Watch the talks
 
-{{ macros.figure("../images/news/science-day-2024-arthur.jpg", caption="Arthur presenting his MSc project at IAG | Science Day 2024", alt="Presenter (light-skinned male in a white t-shirt) next to presentation screen with a slide containing a diagram about aeromagnetic surveys. Also seen are the backs of the heads of 7 audience members." ) }}
 
-{{ macros.figure("../images/news/science-day-2024-yago.jpg", caption="Yago presenting his MSc project at IAG | Science Day 2024", alt="Presenter (light-skinned male in a green shirt) next to presentation screen with a slide containing a Magali`s logo (a watermelon-like figure in which its seeds resemble magnetic dipoles, followed by the project's name). Also seen are the backs of the heads of 3 audience members." ) }}
+{{
+macros.youtube_video(
+  "https://www.youtube.com/live/5ZxFyw3ZN6s?si=BqXHaO90SEd1-OFi&t=4639",
+  "../images/news/science-day-2024-arthur-video-thumb.jpg",
+  caption="Integração de dados aerogeofísicos em escala continental. Arthur Siqueira de Macêdo."
+)
+}}
+
+### [Magali (Yago's presentation)](https://www.youtube.com/live/5ZxFyw3ZN6s?si=sdQxzEzJsymJTcFI&t=3367)
+
+{{
+macros.youtube_video(
+  "https://www.youtube.com/live/5ZxFyw3ZN6s?si=sdQxzEzJsymJTcFI&t=3367",
+  "../images/news/science-day-2024-yago-video-thumb.jpg",
+  caption="Magalí: Modelling and inversion of magnetic microscopy data. Moreira Castro."
+)
+}}
+
+
+## Get the slides
 
 My presentation is released under a Creative Commons Attribution 4.0 International License and is available in the GitHub repository [<i class="fab fa-github" aria-hidden="true"></i> YagoMCastro/science-day-2024-magali](https://github.com/YagoMCastro/science-day-2024-magali).