adds table-container to colors, functions, mixins, and variables tables

This commit is contained in:
Spencer Kordecki
2018-10-02 22:52:12 -04:00
committed by Jeremy Thomas
parent a531ea2758
commit 57808aebab
4 changed files with 333 additions and 321 deletions

View File

@@ -39,54 +39,56 @@ shades:
</p>
</div>
<table class="table">
<thead>
<tr>
<th>Color</th>
<th>Variable</th>
<th>Value</th>
<th>Computed value</th>
<th>Invert value</th>
<th>Computed invert value</th>
</tr>
</thead>
<tbody>
{% for color in page.colors %}
{% assign derivedColor = site.data.colors.derived | where: "id", color | first %}
{% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %}
<div class="table-container">
<table class="table">
<thead>
<tr>
<td>
<strong>{{ derivedColor.id | capitalize }}</strong>
</td>
<td>
<code>${{ derivedColor.id }}</code>
</td>
<td>
<code>${{ initialColor.id }}</code>
</td>
<td>
{% include elements/color-square.html value=initialColor.value %}
</td>
{% if derivedColor.invertValue %}
<td>
<code>{{ derivedColor.invertValue }}</code>
</td>
<td>
{% include elements/color-square.html value=derivedColor.invertValue %}
</td>
{% elsif derivedColor.invertId %}
{% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %}
<td>
<code>${{ derivedColor.invertId }}</code>
</td>
<td>
{% include elements/color-square.html value=invertColor.value %}
</td>
{% endif %}
<th>Color</th>
<th>Variable</th>
<th>Value</th>
<th>Computed value</th>
<th>Invert value</th>
<th>Computed invert value</th>
</tr>
{% endfor %}
</tbody>
</table>
</thead>
<tbody>
{% for color in page.colors %}
{% assign derivedColor = site.data.colors.derived | where: "id", color | first %}
{% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %}
<tr>
<td>
<strong>{{ derivedColor.id | capitalize }}</strong>
</td>
<td>
<code>${{ derivedColor.id }}</code>
</td>
<td>
<code>${{ initialColor.id }}</code>
</td>
<td>
{% include elements/color-square.html value=initialColor.value %}
</td>
{% if derivedColor.invertValue %}
<td>
<code>{{ derivedColor.invertValue }}</code>
</td>
<td>
{% include elements/color-square.html value=derivedColor.invertValue %}
</td>
{% elsif derivedColor.invertId %}
{% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %}
<td>
<code>${{ derivedColor.invertId }}</code>
</td>
<td>
{% include elements/color-square.html value=invertColor.value %}
</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="content">
<p>
@@ -94,28 +96,30 @@ shades:
</p>
</div>
<table class="table">
<thead>
<tr>
<th>Color</th>
<th>Variable</th>
<th>Value</th>
</tr>
</thead>
<tbody>
{% for shade in page.shades %}
{% assign initial_shade = site.data.colors.initial | where: "id", shade | first %}
<div class="table-container">
<table class="table">
<thead>
<tr>
<td>
<strong>{{ initial_shade.name | capitalize }}</strong>
</td>
<td>
<code>${{ initial_shade.id }}</code>
</td>
<td>
{% include elements/color-square.html value=initial_shade.value %}
</td>
<th>Color</th>
<th>Variable</th>
<th>Value</th>
</tr>
{% endfor %}
</tbody>
</table>
</thead>
<tbody>
{% for shade in page.shades %}
{% assign initial_shade = site.data.colors.initial | where: "id", shade | first %}
<tr>
<td>
<strong>{{ initial_shade.name | capitalize }}</strong>
</td>
<td>
<code>${{ initial_shade.id }}</code>
</td>
<td>
{% include elements/color-square.html value=initial_shade.value %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>