Move Hackathon Guide and Presentation Slides to top of Quick Path as Event cards

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: jaymoore-research

docs/index.md

@@ -17,6 +17,24 @@ description: Build AI-powered bioinformatics skills at Imperial College London.
 
 <div class="tutorial-cards">
 
+<a class="tutorial-card" href="hackathon/">
+  <div class="tutorial-card__header">
+    <span class="difficulty-badge difficulty-badge--event">Event</span>
+    <span class="time-estimate">5 min</span>
+  </div>
+  <h3 class="tutorial-card__title">Hackathon Guide</h3>
+  <p class="tutorial-card__desc">Full timetable, tracks, judging criteria, and project ideas.</p>
+</a>
+
+<a class="tutorial-card" href="hackathon/presentation/">
+  <div class="tutorial-card__header">
+    <span class="difficulty-badge difficulty-badge--event">Event</span>
+    <span class="time-estimate">10 min</span>
+  </div>
+  <h3 class="tutorial-card__title">Presentation Slides</h3>
+  <p class="tutorial-card__desc">Intro slides covering ClawBio, SKILL.md, and what to build today.</p>
+</a>
+
 <a class="tutorial-card" href="hackathon/setup/">
   <div class="tutorial-card__header">
     <span class="difficulty-badge difficulty-badge--beginner">Beginner</span>
@@ -68,24 +86,6 @@ description: Build AI-powered bioinformatics skills at Imperial College London.
   <p class="tutorial-card__desc">Use Claude Code and AI coding assistants to build skills faster.</p>
 </a>
 
-<a class="tutorial-card" href="hackathon/">
-  <div class="tutorial-card__header">
-    <span class="difficulty-badge difficulty-badge--beginner">Beginner</span>
-    <span class="time-estimate">5 min</span>
-  </div>
-  <h3 class="tutorial-card__title">Hackathon Guide</h3>
-  <p class="tutorial-card__desc">Full timetable, tracks, judging criteria, and project ideas.</p>
-</a>
-
-<a class="tutorial-card" href="hackathon/presentation/">
-  <div class="tutorial-card__header">
-    <span class="difficulty-badge difficulty-badge--beginner">Beginner</span>
-    <span class="time-estimate">10 min</span>
-  </div>
-  <h3 class="tutorial-card__title">Presentation Slides</h3>
-  <p class="tutorial-card__desc">Intro slides covering ClawBio, SKILL.md, and what to build today.</p>
-</a>
-
 </div>
 
 ---

docs/stylesheets/clawbio.css

@@ -632,6 +632,11 @@
   background: rgba(248, 81, 73, 0.15);
 }
 
+.difficulty-badge--event {
+  color: #a5d6ff;
+  background: rgba(165, 214, 255, 0.15);
+}
+
 /* Light theme badge overrides */
 [data-md-color-scheme="default"] .difficulty-badge--beginner {
   color: #16a34a;
@@ -648,6 +653,11 @@
   background: #fee2e2;
 }
 
+[data-md-color-scheme="default"] .difficulty-badge--event {
+  color: #2563eb;
+  background: #dbeafe;
+}
+
 /* ============================================================
    Time Estimate
    ============================================================ */
@@ -659,6 +669,28 @@
   margin-left: 0.5rem;
 }
 
+/* ============================================================
+   Video Embeds (responsive 16:9)
+   ============================================================ */
+
+.video-embed {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  height: 0;
+  overflow: hidden;
+  margin-bottom: 1.5rem;
+  border-radius: 8px;
+}
+
+.video-embed iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+}
+
 /* ============================================================
    Responsive: single column below 480px
    ============================================================ */