From 60e0818b6d018380f3db71f31a2291af98c36453 Mon Sep 17 00:00:00 2001
From: Florian Weber <f.weber@solarlux.com>
Date: Thu, 20 Mar 2025 13:27:27 +0100
Subject: [PATCH] Enhance character profile component with responsive image
 handling and navigation button

---
 _includes/character-profile.html       | 11 ++++++++++-
 _layouts/character-sheet.html          |  2 +-
 _pages/characters.md                   |  4 ++--
 assets/game-data/characters/chase.json |  8 +++++++-
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/_includes/character-profile.html b/_includes/character-profile.html
index cfe61b4..805453e 100644
--- a/_includes/character-profile.html
+++ b/_includes/character-profile.html
@@ -1,9 +1,18 @@
 <div class="cyber-tile cyber-tile-big {{ include.bg_color }} {{ include.fg_color }} {{ include.class }}" style="min-height: auto;">
-  {% if include.image %}<img src="{{ include.image | relative_url }}" alt="Character Picture">{% endif %}
+  {% if include.image %}
+  <img class="responsive-img" src="{{ include.image | relative_url }}" alt="Character Picture">
+  {% endif %}
   <p><span class="cyberpunk-font">Name:</span>&nbsp;&nbsp;<span id="name"></span></p>
   <p><span class="cyberpunk-font">Handle:</span>&nbsp;&nbsp;<span id="streetname"></span></p>
   <p><span class="cyberpunk-font">Role:</span>&nbsp;&nbsp;<span id="role"></span></p>
   <p><span class="cyberpunk-font">Age:</span>&nbsp;&nbsp;<span id="age"></span></p>
+  {% if include.page %}
+  <button class="cyber-button bg-red fg-white" onclick="window.location.href='{{ include.page | relative_url }}'">
+    Mehr zu {{ include.name }}
+    <span class="glitchtext">$_glitch;</span>
+    <span class="tag">NETR</span>
+  </button>
+  {% endif %}
 </div>
 <script>
   fetch("{{ include.datasource | relative_url }}")
diff --git a/_layouts/character-sheet.html b/_layouts/character-sheet.html
index cd6cd29..7094f20 100644
--- a/_layouts/character-sheet.html
+++ b/_layouts/character-sheet.html
@@ -5,7 +5,7 @@ layout: page
 <div class="row">
   {% if page.image %}
   <div class="col s6 m4 l1 responsive-img">
-    <img src="{{ page.image | relative_url }}" />
+    <img class="responsive-img" src="{{ page.image | relative_url }}" alt="Picture of {{ page.title }}" />
   </div>
   {% endif %}
   <div class="bg-dark fg-yellow cyber-tile col {% if page.image %}s6 m8 l11{% else %}s12 m12 l12{% endif %}">
diff --git a/_pages/characters.md b/_pages/characters.md
index 1c1c291..c51d38c 100644
--- a/_pages/characters.md
+++ b/_pages/characters.md
@@ -8,10 +8,10 @@ weigth: 3
 
 <div class="row" style="column-gap: 5px;">
   <div class="col s12 m6">
-    {% include character-profile.html image="/assets/img/Netrunner.png" datasource="/assets/game-data/characters/chase.json" bg_color="bg-red" fg_color="fg-dark" %}
+    {% include character-profile.html page="/characters/chase" image="/assets/img/Netrunner.png" datasource="/assets/game-data/characters/chase.json" bg_color="bg-red" fg_color="fg-dark" %}
   </div>
   <div class="col s12 m6">
-    {% include character-profile.html image="/assets/img/Tech.png" datasource="/assets/game-data/characters/carver.json" bg_color="bg-red" fg_color="fg-purple" %}
+    {% include character-profile.html page="/characters/crash" image="/assets/img/Tech.png" datasource="/assets/game-data/characters/carver.json" bg_color="bg-red" fg_color="fg-purple" %}
   </div>
 </div>
 
diff --git a/assets/game-data/characters/chase.json b/assets/game-data/characters/chase.json
index 591a423..8c07884 100644
--- a/assets/game-data/characters/chase.json
+++ b/assets/game-data/characters/chase.json
@@ -2,7 +2,13 @@
   "name": "Chase Révolte",
   "handle": null,
   "age": 23,
-  "roles": [{ "name": "Netrunner", "rank": 4, "main": true }],
+  "roles": [
+    {
+      "name": "Netrunner",
+      "rank": 4,
+      "main": true
+    }
+  ],
   "attributes": {
     "int": 6,
     "ref": 8,