diff --git a/assets/css/custom.scss b/assets/css/custom.scss index 225f340..25161b5 100644 --- a/assets/css/custom.scss +++ b/assets/css/custom.scss @@ -342,3 +342,115 @@ h1 { border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } + +// sia2024 + +.bg-gray-light { + background-color: #f7f7f7; +} + +.container-lg { + max-width: 1200px; + margin: 0 auto; +} + +.p-responsive { + padding: 0 1rem; +} + +.py-5 { + padding-top: 3rem; + padding-bottom: 3rem; +} + +.py-md-6 { + padding-top: 4.5rem; + padding-bottom: 4.5rem; +} + +.text-center { + text-align: center; +} + +.alt-h2 { + font-size: 2rem; + margin-bottom: 1rem; +} + +.video-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 20px; + justify-content: center; +} + +.video-thumbnail { + position: relative; + width: 100%; + cursor: pointer; +} + +.video-thumbnail img { + width: 100%; + height: auto; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.video-thumbnail .play-button { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: rgba(0, 0, 0, 0.5); + border-radius: 50%; + width: 60px; + height: 60px; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; +} + +.video-thumbnail:hover .play-button { + opacity: 1; +} + +.video-thumbnail .play-button::before { + content: ''; + border-style: solid; + border-width: 12px 0 12px 20px; + border-color: transparent transparent transparent white; +} + +.logo-grid { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; +} + +.logo-grid img { + max-width: 100px; + height: auto; +} + +.media-grid { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; +} + +.media-grid a { + display: block; + text-decoration: none; +} + +.media-grid img { + max-width: 100%; + height: auto; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} diff --git a/assets/js/sia2024-video.js b/assets/js/sia2024-video.js new file mode 100644 index 0000000..b2d6c5b --- /dev/null +++ b/assets/js/sia2024-video.js @@ -0,0 +1,12 @@ +document.addEventListener('DOMContentLoaded', function() { + const videoThumbnails = document.querySelectorAll('.video-thumbnail'); + + videoThumbnails.forEach(thumbnail => { + thumbnail.addEventListener('click', function() { + const videoId = thumbnail.getAttribute('data-video-id'); + const videoUrl = `https://www.youtube.com/watch?v=${videoId}`; + window.open(videoUrl, '_blank'); + }); + }); + }); + \ No newline at end of file diff --git a/sia2024.md b/sia2024.md index 94c9bc5..28126ad 100644 --- a/sia2024.md +++ b/sia2024.md @@ -5,6 +5,39 @@ description: Retour sur la première mondiale au SIA 2024 permalink: /sia2024/ --- + + + Les sujets + Pour plus de vidéos, visitez notre page dédiée : Vidéos GAIA + + + + + + + + + + + + + + + + + + + + + + + + + + Les participants et contributeurs + + + Retour sur la première mondiale au SIA 2024 @@ -30,3 +63,5 @@ permalink: /sia2024/ + +
Pour plus de vidéos, visitez notre page dédiée : Vidéos GAIA