diff --git a/_templates/macros.html b/_templates/macros.html index ee5efb9..dbab38e 100644 --- a/_templates/macros.html +++ b/_templates/macros.html @@ -53,3 +53,40 @@ {%- macro page_link(id, page, site) -%} {{ site[id].title }} {%- endmacro -%} + + +{%- macro youtube_video(video_url, thumbnail, caption="", play_logo="/images/yt-icons/play.svg", yt_logo="/images/yt-icons/yt-logo.svg") -%} + +
+
+
+ +
+ Play video in YouTube +
+ + +
+ +
YouTube logo
+
+ +
+
+ {% if caption != "" %} +
{{ caption }}
+ {% endif %} +
+{%- endmacro -%} diff --git a/css/style.css b/css/style.css index 4205521..27e96cc 100644 --- a/css/style.css +++ b/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; +} +/* ----------------------------------- */ diff --git a/images/news/science-day-2024-arthur-video-thumb.jpg b/images/news/science-day-2024-arthur-video-thumb.jpg new file mode 100644 index 0000000..d42d7ba Binary files /dev/null and b/images/news/science-day-2024-arthur-video-thumb.jpg differ diff --git a/images/news/science-day-2024-yago-video-thumb.jpg b/images/news/science-day-2024-yago-video-thumb.jpg new file mode 100644 index 0000000..9aaede3 Binary files /dev/null and b/images/news/science-day-2024-yago-video-thumb.jpg differ diff --git a/images/yt-icons/play.svg b/images/yt-icons/play.svg new file mode 100644 index 0000000..0445fc0 --- /dev/null +++ b/images/yt-icons/play.svg @@ -0,0 +1,59 @@ + + + +image/svg+xml diff --git a/images/yt-icons/yt-logo.svg b/images/yt-icons/yt-logo.svg new file mode 100644 index 0000000..ee4c0ea --- /dev/null +++ b/images/yt-icons/yt-logo.svg @@ -0,0 +1,86 @@ + + + +image/svg+xml diff --git a/news/science-day-2024.md b/news/science-day-2024.md index af175d2..a6cdcb0 100644 --- a/news/science-day-2024.md +++ b/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." ) }} -
+## 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 [ YagoMCastro/science-day-2024-magali](https://github.com/YagoMCastro/science-day-2024-magali).