From 6d5f1d403210548941d5178037d36cc04da28741 Mon Sep 17 00:00:00 2001
From: Minna Heim <91681064+minnaheim@users.noreply.github.com>
Date: Fri, 18 Oct 2024 13:13:22 +0200
Subject: [PATCH] added links to slides1,2

---
 .gitignore                        |   3 +
 src/components/SpeedSection.astro | 475 ++++++++++++++++--------------
 2 files changed, 254 insertions(+), 224 deletions(-)

diff --git a/.gitignore b/.gitignore
index 7329a85..28dcce4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,3 +18,6 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+
+# .vscode 
+/.vscode
diff --git a/src/components/SpeedSection.astro b/src/components/SpeedSection.astro
index bb5e491..c3a96d9 100644
--- a/src/components/SpeedSection.astro
+++ b/src/components/SpeedSection.astro
@@ -1,256 +1,283 @@
 ---
 import { cn } from "@lib/utils";
 import Container from "./Container.astro";
-import {progress} from "@tailus/themer-progress"
+import { progress } from "@tailus/themer-progress";
 ---
 
 <section>
+    <!-- styling start - underline when hovering - currently only underlined when clicking, not when hovering?-->
+    <style>
+        a:hover {
+            text-decoration: underline;
+        }
+    </style>
+    <!-- styling end -->
     <Container>
         <!-- big heading -->
         <div class="text-center">
-            <h2 class="text-3xl text-gray-950 dark:text-white font-semibold md:text-4xl">Course Schedule</h2>
-            <p class="mt-4 text-gray-600 dark:text-gray-400">H4Sci is organized in four blocks of two half-day sessions.</p>
+            <h2
+                class="text-3xl text-gray-950 dark:text-white font-semibold md:text-4xl"
+            >
+                Course Schedule
+            </h2>
+            <p class="mt-4 text-gray-600 dark:text-gray-400">
+                H4Sci is organized in four blocks of two half-day sessions.
+            </p>
         </div>
         <!-- small heading -->
         <div class="mt-12 gap-4 sm:gap-12 max-w-3xl w-full mx-auto">
             <div>
-                <h2 class="text-gray-950 dark:text-white text-2xl font-semibold">Block 1 - Getting Started </h2>
+                <h2
+                    class="text-gray-950 dark:text-white text-2xl font-semibold"
+                >
+                    Block 1 - Getting Started
+                </h2>
             </div>
-        <div class="m-12 max-w-3xl w-full mx-auto">
-                    <!-- table start -->
-                    <div class="relative overflow-x-auto">
-                        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-                            <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-[--card-dark-bg] bdark:text-gray-400">
-                                <tr>
-                                    <th scope="col" class="px-6 py-3">
-                                        Session
-                                    </th>
-                                    <th scope="col" class="px-6 py-3">
-                                       
-                                    </th>
-                                    <th scope="col" class="px-6 py-3">
-                                        
-                                    </th>
-                                    <th scope="col" class="px-6 py-3">
-                                        
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-                                    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                                        The Big Picture 
-                                    </th>
-                                    <td class="px-6 py-4">
-                                        Thursday, September 26
-                                    </td>
-                                    <td class="px-6 py-4">
-                                        10:00 - 1:00 p.m.
-                                    </td>
-                                    <td class="px-6 py-4">
-                                    
-                                    </td>
-                                </tr>
-                                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-                                    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                                        Git & Workflow
-                                    </th>
-                                    <td class="px-6 py-4">
-                                        Friday, September 27
-                                    </td>
-                                    <td class="px-6 py-4">
-                                        10:00 - 2:00 p.m.
-                                    </td>
-                                    <td class="px-6 py-4">
-                                        
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
+            <div class="m-12 max-w-3xl w-full mx-auto">
+                <!-- table start -->
+                <div class="relative overflow-x-auto">
+                    <table
+                        class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
+                    >
+                        <thead
+                            class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-[--card-dark-bg] bdark:text-gray-400"
+                        >
+                            <tr>
+                                <th scope="col" class="px-6 py-3"> Session </th>
+                                <th scope="col" class="px-6 py-3"> </th>
+                                <th scope="col" class="px-6 py-3"> </th>
+                                <th scope="col" class="px-6 py-3"> </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr
+                                class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
+                            >
+                                <th
+                                    scope="row"
+                                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+                                >
+                                    The Big Picture
+                                </th>
+                                <td class="px-6 py-4">
+                                    Thursday, September 26
+                                </td>
+                                <td class="px-6 py-4"> 10:00 - 1:00 p.m. </td>
+                                <td class="px-6 py-4">
+                                    <a
+                                        href="https://h4sci.github.io/h4sci-course/block_1_session_1_classopen.html"
+                                        target="_blank">Slides</a
+                                    ></td
+                                >
+                            </tr>
+                            <tr
+                                class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
+                            >
+                                <th
+                                    scope="row"
+                                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+                                >
+                                    Git & Workflow
+                                </th>
+                                <td class="px-6 py-4">
+                                    Friday, September 27
+                                </td>
+                                <td class="px-6 py-4"> 10:00 - 2:00 p.m. </td>
+                                <td class="px-6 py-4">
+                                    <a
+                                        href="https://h4sci.github.io/h4sci-course/block_1_session_2_big_picture.html#/title-slide"
+                                        target="_blank">Slides</a
+                                    ></td
+                                >
+                            </tr>
+                        </tbody>
+                    </table>
                 </div>
-                <!-- table end -->
             </div>
+            <!-- table end -->
+        </div>
         <!-- small heading -->
         <div class="mt-12 gap-4 sm:gap-12 max-w-3xl w-full mx-auto">
             <div>
-                <h2 class="text-gray-950 dark:text-white text-2xl font-semibold">Block 2 - Programming </h2>
+                <h2
+                    class="text-gray-950 dark:text-white text-2xl font-semibold"
+                >
+                    Block 2 - Programming
+                </h2>
             </div>
             <!-- leave the card -->
             <div class="m-12 max-w-3xl w-full mx-auto">
-                        <!-- table start -->
-                        <div class="relative overflow-x-auto">
-                            <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-                                <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400">
-                                    <tr>
-                                        <th scope="col" class="px-6 py-3">
-                                            Session
-                                        </th>
-                                        <th scope="col" class="px-6 py-3">
-                                           
-                                        </th>
-                                        <th scope="col" class="px-6 py-3">
-                                            
-                                        </th>
-                                        <th scope="col" class="px-6 py-3">
-                                            
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-                                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                                            Programming 101
-                                        </th>
-                                        <td class="px-6 py-4">
-                                            Thursday, October 24
-                                        </td>
-                                        <td class="px-6 py-4">
-                                            10:00 - 1:00 p.m.
-                                        </td>
-                                        <td class="px-6 py-4">
-                                        
-                                        </td>
-                                    </tr>
-                                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-                                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                                            Programming with Data
-                                        </th>
-                                        <td class="px-6 py-4">
-                                            Friday, October 25
-                                        </td>
-                                        <td class="px-6 py-4">
-                                            10:00 - 2:00 p.m.
-                                        </td>
-                                        <td class="px-6 py-4">
-                                            
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                    <!-- table end -->
+                <!-- table start -->
+                <div class="relative overflow-x-auto">
+                    <table
+                        class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
+                    >
+                        <thead
+                            class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400"
+                        >
+                            <tr>
+                                <th scope="col" class="px-6 py-3"> Session </th>
+                                <th scope="col" class="px-6 py-3"> </th>
+                                <th scope="col" class="px-6 py-3"> </th>
+                                <th scope="col" class="px-6 py-3"> </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr
+                                class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
+                            >
+                                <th
+                                    scope="row"
+                                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+                                >
+                                    Programming 101
+                                </th>
+                                <td class="px-6 py-4">
+                                    Thursday, October 24
+                                </td>
+                                <td class="px-6 py-4"> 10:00 - 1:00 p.m. </td>
+                                <td class="px-6 py-4"> </td>
+                            </tr>
+                            <tr
+                                class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
+                            >
+                                <th
+                                    scope="row"
+                                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+                                >
+                                    Programming with Data
+                                </th>
+                                <td class="px-6 py-4"> Friday, October 25 </td>
+                                <td class="px-6 py-4"> 10:00 - 2:00 p.m. </td>
+                                <td class="px-6 py-4"> </td>
+                            </tr>
+                        </tbody>
+                    </table>
                 </div>
+            </div>
+            <!-- table end -->
+        </div>
         <!-- small heading -->
         <div class="mt-12 gap-4 sm:gap-12 max-w-3xl w-full mx-auto">
             <div>
-                <h2 class="text-gray-950 dark:text-white text-2xl font-semibold">Block 3 - Infrastructure </h2>
+                <h2
+                    class="text-gray-950 dark:text-white text-2xl font-semibold"
+                >
+                    Block 3 - Infrastructure
+                </h2>
+            </div>
+            <!-- leave the card -->
+            <div class="m-12 max-w-3xl w-full mx-auto">
+                <!-- table start -->
+                <div class="relative overflow-x-auto">
+                    <table
+                        class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
+                    >
+                        <thead
+                            class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400"
+                        >
+                            <tr>
+                                <th scope="col" class="px-6 py-3"> Session </th>
+                                <th scope="col" class="px-6 py-3"> </th>
+                                <th scope="col" class="px-6 py-3"> </th>
+                                <th scope="col" class="px-6 py-3"> </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr
+                                class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
+                            >
+                                <th
+                                    scope="row"
+                                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+                                >
+                                    A Glimpse of DevOps
+                                </th>
+                                <td class="px-6 py-4">
+                                    Thursday, November 21
+                                </td>
+                                <td class="px-6 py-4"> 10:00 - 1:00 p.m. </td>
+                                <td class="px-6 py-4"> </td>
+                            </tr>
+                            <tr
+                                class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
+                            >
+                                <th
+                                    scope="row"
+                                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+                                >
+                                    Infrastructure for Team Projects
+                                </th>
+                                <td class="px-6 py-4"> Friday, November 22 </td>
+                                <td class="px-6 py-4"> 10:00 - 2:00 p.m. </td>
+                                <td class="px-6 py-4"> </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
             </div>
-                <!-- leave the card -->
-                <div class="m-12 max-w-3xl w-full mx-auto">
-                            <!-- table start -->
-                            <div class="relative overflow-x-auto">
-                                <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-                                    <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400">
-                                        <tr>
-                                            <th scope="col" class="px-6 py-3">
-                                                Session
-                                            </th>
-                                            <th scope="col" class="px-6 py-3">
-                                            </th>
-                                            <th scope="col" class="px-6 py-3">
-                                                
-                                            </th>
-                                            <th scope="col" class="px-6 py-3">
-                                                
-                                            </th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-                                            <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                                                A Glimpse of DevOps
-                                            </th>
-                                            <td class="px-6 py-4">
-                                                Thursday, November 21
-                                            </td>
-                                            <td class="px-6 py-4">
-                                                10:00 - 1:00 p.m.
-                                            </td>
-                                            <td class="px-6 py-4">
-                                            
-                                            </td>
-                                        </tr>
-                                        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-                                            <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                                                Infrastructure for Team Projects
-                                            </th>
-                                            <td class="px-6 py-4">
-                                                Friday, November 22
-                                            </td>
-                                            <td class="px-6 py-4">
-                                                10:00 - 2:00 p.m.
-                                            </td>
-                                            <td class="px-6 py-4">
-                                                
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                        </div>
-                        <!-- table end -->
-                    </div>
+            <!-- table end -->
+        </div>
         <!-- small heading -->
         <div class="mt-12 gap-4 sm:gap-12 max-w-3xl w-full mx-auto">
             <div>
-                <h2 class="text-gray-950 dark:text-white text-2xl font-semibold">Block 4 - Teamwork </h2>
+                <h2
+                    class="text-gray-950 dark:text-white text-2xl font-semibold"
+                >
+                    Block 4 - Teamwork
+                </h2>
             </div>
-                    <!-- leave the card -->
-                    <div class="m-12 max-w-3xl w-full mx-auto">
-                                <!-- table start -->
-                                <div class="relative overflow-x-auto">
-                                    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-                                        <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400">
-                                            <tr>
-                                                <th scope="col" class="px-6 py-3">
-                                                    Session
-                                                </th>
-                                                <th scope="col" class="px-6 py-3">
-                                                </th>
-                                                <th scope="col" class="px-6 py-3">
-                                                    
-                                                </th>
-                                                <th scope="col" class="px-6 py-3">
-                                                    
-                                                </th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-                                                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                                                    Team Project Coaching
-                                                </th>
-                                                <td class="px-6 py-4">
-                                                    Thursday, December 5
-                                                </td>
-                                                <td class="px-6 py-4">
-                                                    10:00 - 1:00 p.m.
-                                                </td>
-                                                <td class="px-6 py-4">
-                                                
-                                                </td>
-                                            </tr>
-                                            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-                                                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                                                    Team Project Coaching
-                                                </th>
-                                                <td class="px-6 py-4">
-                                                    Friday, December 6
-                                                </td>
-                                                <td class="px-6 py-4">
-                                                   10:00 - 2:00 p.m.
-                                                </td>
-                                                <td class="px-6 py-4">
-                                                    
-                                                </td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </div>
-                            </div>
-                            <!-- table end -->
-                        </div>
+            <!-- leave the card -->
+            <div class="m-12 max-w-3xl w-full mx-auto">
+                <!-- table start -->
+                <div class="relative overflow-x-auto">
+                    <table
+                        class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
+                    >
+                        <thead
+                            class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400"
+                        >
+                            <tr>
+                                <th scope="col" class="px-6 py-3"> Session </th>
+                                <th scope="col" class="px-6 py-3"> </th>
+                                <th scope="col" class="px-6 py-3"> </th>
+                                <th scope="col" class="px-6 py-3"> </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr
+                                class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
+                            >
+                                <th
+                                    scope="row"
+                                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+                                >
+                                    Team Project Coaching
+                                </th>
+                                <td class="px-6 py-4">
+                                    Thursday, December 5
+                                </td>
+                                <td class="px-6 py-4"> 10:00 - 1:00 p.m. </td>
+                                <td class="px-6 py-4"> </td>
+                            </tr>
+                            <tr
+                                class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
+                            >
+                                <th
+                                    scope="row"
+                                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+                                >
+                                    Team Project Coaching
+                                </th>
+                                <td class="px-6 py-4"> Friday, December 6 </td>
+                                <td class="px-6 py-4"> 10:00 - 2:00 p.m. </td>
+                                <td class="px-6 py-4"> </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <!-- table end -->
+        </div>
     </Container>
-</section>
\ No newline at end of file
+</section>