Skip to content

Instantly share code, notes, and snippets.

@georgestephanis

georgestephanis/datasheets.html

Last active April 11, 2023 14:42
Show Gist options
  • Save georgestephanis/fca93e5a09df44eaf40a03e81c5ee8fb to your computer and use it in GitHub Desktop.
Save georgestephanis/fca93e5a09df44eaf40a03e81c5ee8fb to your computer and use it in GitHub Desktop.
Download ZIP
An initial attempt at creating a css framework for rendering 40k 10th ed datasheets in credit-card sized references.
Raw
datasheets.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>40k Datacard Testing</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="datacard">
<header>
<h2>Terminator Squad</h2>
<dl class="statline">
<div>
<dt><abbr title="Movement">M</abbr></dt>
<dd>5"</dd>
</div>
<div>
<dt><abbr title="Toughness">T</abbr></dt>
<dd>5"</dd>
</div>
<div>
<dt><abbr title="Saving Throw">SV</abbr></dt>
<dd>2+</dd>
</div>
<div>
<dt><abbr title="Wounds">W</abbr></dt>
<dd>3</dd>
</div>
<div>
<dt><abbr title="Leadership">LD</abbr></dt>
<dd>6+</dd>
</div>
<div>
<dt><abbr title="Objective Control">OC</abbr></dt>
<dd>1</dd>
</div>
</dl>
</header>
<section class="card-body">
<div class="weapon-profiles">
<table>
<thead>
<tr>
<th scope="col">Ranged Weapons</th>
<th scope="col">Range</th>
<th scope="col"><abbr title="Attacks">A</abbr></th>
<th scope="col"><abbr title="Ballistic Skill">BS</abbr></th>
<th scope="col"><abbr title="Strength">S</abbr></th>
<th scope="col"><abbr title="Armor Penetration">AP</abbr></th>
<th scope="col"><abbr title="Damage">D</abbr></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Assault Cannon <span class="weapon-type">Devastating wounds</span></th>
<td>24"</td>
<td>6</td>
<td>3+</td>
<td>6</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<th scope="row">Cyclone missile &mdash; frag <span class="weapon-type">Blast</span></th>
<td>36"</td>
<td>2D6</td>
<td>3+</td>
<td>4</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<th scope="row">Cyclone missile &mdash; krak</th>
<td>36"</td>
<td>2</td>
<td>3+</td>
<td>9</td>
<td>-2</td>
<td>D6</td>
</tr>
<tr>
<th scope="row">Heavy flamer <span class="weapon-type">Ignores cover, Torrent</span></th>
<td>12"</td>
<td>D6</td>
<td>N/A</td>
<td>5</td>
<td>-1</td>
<td>1</td>
</tr>
<tr>
<th scope="row">Storm bolter <span class="weapon-type">Rapid Fire 2</span></th>
<td>24"</td>
<td>2</td>
<td>3+</td>
<td>4</td>
<td>0</td>
<td>1</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th scope="col">Melee Weapons</th>
<th scope="col">Range</th>
<th scope="col"><abbr title="Attacks">A</abbr></th>
<th scope="col"><abbr title="Weapon Skill">WS</abbr></th>
<th scope="col"><abbr title="Strength">S</abbr></th>
<th scope="col"><abbr title="Armor Penetration">AP</abbr></th>
<th scope="col"><abbr title="Damage">D</abbr></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Chainfist <span class="weapon-type">Anti-vehicle 3+</span></th>
<td>Melee</td>
<td>3</td>
<td>4+</td>
<td>8</td>
<td>-2</td>
<td>2</td>
</tr>
<tr>
<th scope="row">Power fist</th>
<td>Melee</td>
<td>3</td>
<td>3+</td>
<td>8</td>
<td>-2</td>
<td>2</td>
</tr>
<tr>
<th scope="row">Power weapon</th>
<td>Melee</td>
<td>4</td>
<td>3+</td>
<td>5</td>
<td>-2</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class="abilities">
<h4>Abilities</h4>
<ul>
<li>Core: <strong>Deep Strike</strong></li>
<li>Faction: <strong>Oath of Moment</strong></li>
<li><strong>Teleport Homer:</strong> (Details)</li>
<li><strong>Fury of the Fist:</strong> (Details)</li>
<li><strong>Invulnerable Save:</strong> 4+</li>
</ul>
</div>
</section>
<footer>
<small>Keywords: Infantry, Imperium, Terminator, Terminator Squad</small>
</footer>
</div>
</body>
</html>
Raw
style.css
html,
body {
background: #444;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif;
}
* {
box-sizing: border-box;
}
.datacard {
/*
transform: scale(2);
transform-origin: top left;
*/
background: #ccc;
padding: 9pt;
outline: 1pt solid #000;
border-radius: 9pt;
width: 3.375in;
height: 2.125in;
font-size: 5pt;
overflow: hidden;
}
.datacard header {
padding: 4pt 9pt;
width: 3.375in;
height: 48pt;
background-color: #526765;
margin-top: -9pt;
margin-left: -9pt;
font-size: 9pt;
}
.datacard header h2 {
margin: 0;
color: #fff;
text-transform: uppercase;
font-weight: 900;
}
.datacard dl.statline {
display: flex;
justify-content: start;
margin: 0;
font-weight: 700;
}
.datacard dl.statline > div {
margin-right: 9pt;
}
.datacard dl.statline dt {
color: #fff;
text-align: center;
width: 15pt;
font-size: 5pt;
}
.datacard dl.statline dd {
display: flex;
justify-content: center;
align-items: center;
margin: 2pt 0 0;
width: 15pt;
height: 15pt;
background: #fff;
color: #293332;
border: 1pt solid #aaa;
border-radius: 3pt 0 3pt 0;
}
.datacard .card-body {
display: flex;
gap: 3pt;
justify-content: space-between;
}
.datacard .weapon-profiles {
padding: 3pt 0;
font-size: 4pt;
}
.datacard .weapon-profiles table {
border-spacing: 0;
width: 100%;
}
.datacard .weapon-profiles table thead {
background-color: #526765;
color: #fff;
}
.datacard .weapon-profiles table thead th {
text-transform: uppercase;
padding: 2pt 1pt;
width: 10pt;
font-size: 5pt;
}
.datacard .weapon-profiles table th:first-child {
text-align: left;
width: auto;
}
.datacard .weapon-profiles table tbody th,
.datacard .weapon-profiles table tbody td {
padding: 1pt;
}
.datacard .weapon-profiles table td {
text-align: center;
}
.datacard .weapon-profiles table tbody th .weapon-type {
font-size: 3pt;
color: #526765;
}
.datacard .weapon-profiles table tbody th .weapon-type::before {
content: '(';
}
.datacard .weapon-profiles table tbody th .weapon-type::after {
content: ')';
}
.datacard .weapon-profiles table tbody tr:nth-child(even) {
background-color: rgba( 0, 0, 0, 0.1 );
}
.datacard .abilities {
padding: 3pt 0;
}
.datacard .abilities h4 {
background-color: #526765;
color: #fff;
text-transform: uppercase;
padding: 2pt 1pt;
margin: 0;
font-size: 5pt;
}
.datacard .abilities ul {
list-style: none;
padding-left: 0;
margin: 0;
}
@georgestephanis
Copy link
Author

The purpose of this making the reference cards credit-card sized is I already have a card punch that does credit-card size.

https://www.amazon.com/gp/product/B0024DCH8E/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment