Update guide page formatting

content/guides/_index.md

@@ -6,6 +6,53 @@ page_template = "guide.html"
 
 We currently have three guides:
 
-- [**How to Speedrun**](learn) - an overview of getting started with speedrunning
-- [**Runners Guide**](runner) - our guide for potential runners
-- [**Travel Guide**](travel) - how to get to the University of Warwick & where to stay
+<style>
+    .content {
+        background-color: #2F3338;
+        position: relative;
+        /* margin: 1em; */
+        padding: 1.5em 2em;
+    }
+
+    .content h2 {
+        margin-top: 0;
+    }
+
+    .col-lg-6 {
+        flex-shrink: 1;
+    }
+
+    .stretched-link::after {
+        position: absolute;
+        inset: 0;
+        z-index: 100;
+        content: "";
+    }
+</style>
+
+<div class="row">
+<div class="col-lg-6">
+    <div class="content backing">
+        <h2>How to Speedrun</h2>
+        <p>An overview of getting started with speedrunning</p>
+        <a class="ms-3" href="guides/learn">Read More >>></a>
+    </div>
+</div>
+
+<div class="col-lg-6">
+    <div class="content backing">
+    <h2>Runners Guide</h2>
+    <p>Event & submission details for runners, including a tech guide</p>
+    <a class="ms-3" href="guides/runner">Read More >>></a>
+    </div>
+</div>
+
+<div class="col-lg-6">
+    <div class="content backing">
+    <h2>Travel Guide</h2>
+    <p>How to get to University of Warwick (It's in Coventry!) and where to stay around here</p>
+    <a class="ms-3" href="guides/travel">Read More >>></a>
+    </div>
+</div>
+
+</div>