Merge pull request #128 from chaselgrove/front-page

Update front page rendering
ReproNim · Dec 26, 2024 · bcb1a9a · bcb1a9a
2 parents 3d5dde2 + 7b79b1e
commit bcb1a9a
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 13 deletions.
diff --git a/content/_index.md b/content/_index.md
@@ -3,20 +3,41 @@ title: 'ReproNim: A Center for Reproducible Neuroimaging Computation'
 toc: false
 ---
 
+<style>
+    h2, p { text-align: center; }
+</style>
 
-
-## Vision:
+## Vision
 
 All neuroimaging is reproducible neuroimaging
 
-## Mission:
-
-To deliver effective tools, training and principles to the neuroimaging community to support the entire neuroimaging workflow for rigorous, reproducible and FAIR neuroimaging
-
-
-{{< cards cols="3" >}}
-{{< card link="/resources/getting-started/" title="Getting Started" image="/images/sec-started2.webp" subtitle="Getting Started with ReproNim" >}}
-{{< card link="/resources/tools/" title="Tools" image="/images/tools.webp" subtitle="ReproNim Tools" >}}
-{{< card link="/fellowship/" title="Fellowship" image="/images/sec-fellowship2.webp" subtitle="ReproNim Fellowship Program" >}}
-{{< card link="/about/why/" title="Why" image="/images/sec-why2.webp" subtitle="Why Reproducible Neuroimaging" >}}
-{{< /cards >}}
+## Mission
+
+To deliver effective tools, training, and principles to the neuroimaging community to support the entire neuroimaging workflow for rigorous, reproducible, and FAIR neuroimaging.
+
+{{< rn-buttons >}}
+    {{< rn-button 
+        link="/resources/getting-started/" 
+        title="Getting Started" 
+        image="/images/sec-started2.webp" 
+        subtitle="Getting Started with ReproNim" 
+    >}}
+    {{< rn-button 
+        link="/resources/tools/" 
+        title="Tools" 
+        image="/images/tools.webp" 
+        subtitle="ReproNim Tools" 
+    >}}
+    {{< rn-button 
+        link="/fellowship/" 
+        title="Fellowship" 
+        image="/images/sec-fellowship2.webp" 
+        subtitle="ReproNim Fellowship Program" 
+    >}}
+    {{< rn-button 
+        link="/about/why/" 
+        title="Why" 
+        image="/images/sec-why2.webp" 
+        subtitle="Why Reproducible Neuroimaging" 
+    >}}
+{{< /rn-buttons >}}
diff --git a/layouts/shortcodes/rn-button.html b/layouts/shortcodes/rn-button.html
@@ -0,0 +1,8 @@
+<div class="rn-button">
+    <a href="{{ .Get "link" }}">
+        <img src="{{ .Get "image" }}" alt="A simple icon for {{ .Get "title" }}">
+        <span class="title">{{ .Get "title" }}</span>
+        <br>
+        <span class="subtitle">{{ .Get "subtitle" }}</span>
+    </a>
+</div>
diff --git a/layouts/shortcodes/rn-buttons.html b/layouts/shortcodes/rn-buttons.html
@@ -0,0 +1,36 @@
+<style>
+
+    #rn-buttons {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        margin-top: 1em;
+    }
+
+    .rn-button {
+        flex: 1 1 20%;
+        min-width: 150px;
+        max-width: 300px;
+        margin: 10px;
+        text-align: center;
+        box-sizing: border-box;
+    }
+
+    .rn-button img:hover {
+        border: 1px solid #000;
+    }
+
+    .rn-button a {
+        text-decoration: none;
+        color: #000;
+    }
+
+    .rn-button .title {
+        font-weight: bold;
+    }
+
+</style>
+
+<div id="rn-buttons">
+    {{ .Inner }}
+</div>