Tucker McKnight <tmcknight@instructure.com> | Sun Mar 08 2026
add colors to language bar chart
10
10
<!-- A COMMIT -->54
54
<!-- A COMMIT -->
<div class="row commit">
<div class="col-auto d-flex flex-column justify-content-evenly">
<div class="row">
<div class="col">
<span class="date font-monospace">2026-04-01</span>
</div>
</div>
<div class="row">
<div class="col">
<span class="bg-danger badge rounded-pill">v1.2</span>
</div>
</div>
</div>
<div class="col d-flex flex-column justify-content-evenly">
<div class="row">
<a href="#" class="commit-msg">Do a thing that fixes a thing</a>
</div>
<div class="row">
<div class="col">
<span class="author">Tucker McKnight</span>
<span class="bg-primary badge rounded-pill"">tuckerm.us</span>
<span class="copy-sha m-2">
<span class="sha font-monospace">123abc</span>
<a href="#">Copy</a>
</span>
</div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col-auto language-names pe-1">
<div>js</div>
<div>css</div>
<div>md</div>
<div>other</div>
</div>
<div class="col ps-0">
<div class="flex-grow-1 d-flex">
<div class="lang-diff plus-1">+510</div><div class="lang-diff minus-1">-245</div>
</div>
<div class="flex-grow-1 d-flex">
<div class="lang-diff plus-2 text-white">+314</div><div class="lang-diff minus-2 text-white">-275</div>
</div>
<div class="flex-grow-1 d-flex">
<div class="lang-diff plus-3 text-white">+45</div><div class="lang-diff minus-3 text-white">-20</div>
</div>
<div class="flex-grow-1 d-flex">
<div class="lang-diff plus-4 text-white">+890</div><div class="lang-diff minus-4 text-white">-789</div>
</div>
</div>
</div>
</div>
</div>
<!-- A COMMIT -->
<div class="row commit">
<div class="col-auto d-flex flex-column justify-content-evenly">
<div class="row">
<div class="col">
<span class="date font-monospace">2026-04-01</span>
</div>
</div>
</div>
<div class="col d-flex flex-column justify-content-evenly">
<div class="row">
<a href="#" class="commit-msg">Do a thing that fixes a thing</a>
</div>
<div class="row">
<div class="col">
<span class="author">Tucker McKnight</span>
<span class="bg-primary badge rounded-pill"">tuckerm.us</span>
<span class="copy-sha m-2">
<span class="sha font-monospace">123abc</span>
<a href="#">Copy</a>
</span>
</div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col-auto language-names pe-1">
<div>js</div>
<div>css</div>
<div>other</div>
</div>
<div class="col ps-0">
<div class="flex-grow-1 d-flex">
<div class="lang-diff plus-1"></div><div class="lang-diff minus-1"></div>
</div>
<div class="flex-grow-1 d-flex">
<div class="lang-diff plus-2"></div><div class="lang-diff minus-2"></div>
</div>
<div class="flex-grow-1 d-flex">
<div class="lang-diff plus-4"></div><div class="lang-diff minus-4"></div>
</div>
</div>
</div>
</div>
</div>
16
16
$new-magenta: #FF549B;142
142
font-size: 0.75rem;
font-size: 0.85rem;154 155 156 157 158 159 160 161
background-color: blue;
background-color: navy;
background-color: red;
background-color: darkred;
background-color: green;
background-color: darkgreen;
background-color: lightgray;
background-color: gray;154 155 156 157 158 159 160 161
background-color: $teal;
background-color: color.adjust($teal, $lightness: -25%);
background-color: $new-magenta;
background-color: color.adjust($new-magenta, $lightness: -25%);
background-color: $purple;
background-color: color.adjust($purple, $lightness: -25%);
text-shadow: 0 0 3px color.adjust($purple, $lightness: -25%), 0 0 2px color.adjust($purple, $lightness: -25%);
background-color: $lightblue;
background-color: color.adjust($lightblue, $lightness: -25%);