PhoenixDivision/cpred
1
0
Fork 0
Code Issues 1 Pull Requests Actions Activity

Enhance character sheet layout with responsive styles and improved data binding
All checks were successful
Deploy Jekyll site to Pages / build (push) Successful in 5m22s
Details

Browse Source
This commit is contained in:
Florian Weber 2025-03-20 12:28:08 +01:00
parent ecf64c679f
commit 7857016243
Signed by: f.weber
GPG Key ID: A1C85EB19014A2D3
2 changed files with 33 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
_layouts/character-sheet.html
View File

@ -4,38 +4,38 @@ layout: page
<div class="row">
{% if page.image %}
<div class="col s6 m4 l1">
<div class="col s6 m4 l1 responsive-img">
<img src="{{ page.image | relative_url }}" />
</div>
{% endif %}
<div class="col {% if page.image %}s6 m8 l11{% else %}s12 m12 l12{% endif %}">
<p>
<strong class="cyberpunk-font-og">Straßenname:</strong>
<span id="streetname" class="cyberpunk-font"></span>
<p class="character-details">
<strong class="cyberpunk-font-og character-details-title">Straßenname:</strong>
<span id="streetname" class="cyberpunk-font character-details-value"></span>
</p>
<p>
<strong class="cyberpunk-font-og">Alter:</strong>
<span id="age" class="cyberpunk-font"></span>
<p class="character-details">
<strong class="cyberpunk-font-og character-details-title">Alter:</strong>
<span id="age" class="cyberpunk-font character-details-value"></span>
</p>
<p>
<strong class="cyberpunk-font-og">Rolle:</strong>
<span id="role" class="cyberpunk-font"></span>
<p class="character-details">
<strong class="cyberpunk-font-og character-details-title">Rolle:</strong>
<span id="role" class="cyberpunk-font character-details-value"></span>
</p>
<p>
<strong class="cyberpunk-font-og">Rollenfähigkeit:</strong>
<span id="role-ability" class="cyberpunk-font"></span>
<p class="character-details">
<strong class="cyberpunk-font-og character-details-title">Rollenfähigkeit:</strong>
<span id="role-ability" class="cyberpunk-font character-details-value"></span>
</p>
<p>
<strong class="cyberpunk-font-og">Unterkunft:</strong>
<span id="housing" class="cyberpunk-font"></span>
<p class="character-details">
<strong class="cyberpunk-font-og character-details-title">Unterkunft:</strong>
<span id="housing" class="cyberpunk-font character-details-value"></span>
</p>
<p>
<strong class="cyberpunk-font-og">Lebensstil:</strong>
<span id="lifestyle" class="cyberpunk-font"></span>
<p class="character-details">
<strong class="cyberpunk-font-og character-details-title">Lebensstil:</strong>
<span id="lifestyle" class="cyberpunk-font character-details-value"></span>
</p>
<p>
<strong class="cyberpunk-font-og">Lebenskosten:</strong>
<span id="costs" class="cyberpunk-font"></span>
<p class="character-details">
<strong class="cyberpunk-font-og character-details-title">Lebenskosten:</strong>
<span id="costs" class="cyberpunk-font character-details-value"></span>
</p>
</div>
</div>
@ -47,7 +47,7 @@ layout: page
.then(character => {
document.getElementById('streetname').innerText = character.handle;
document.getElementById('age').innerText = character.age;
document.getElementById('role').innerText = character.role[0].name + " Rang: " + character.role[0].rank;
document.getElementById('role').innerText = character.roles[0].name + " Rang: " + character.roles[0].rank;
document.getElementById('housing').innerText = character.housing.type;
document.getElementById('lifestyle').innerText = character.lifestyle;
});

10
_sass/_layout.scss
View File

@ -37,6 +37,16 @@ footer {
color: #888;
}
.character-details {
display: flex;
}
.character-details-title {}
.character-details-value {
margin: 0px 0px 0px auto;
}
.mobile-tabs {
display: none;
}