first draft of new commit list

9d00836efbcb6fc1fd915839c975a7728ea1073e

Tucker McKnight <tmcknight@instructure.com> | Sun Mar 08 2026

first draft of new commit list
new-commits-page.html:0
Before
0
After
0
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Design Board</title>
    <link rel="stylesheet" href="css/design-board.css">
  </head>
  <body>
    <div class="container commits-page">
      <div class="row m-2">
        <div class="col">
          <div class="row commit">
            <div class="col">
              <div class="row">
                <div class="col">
                  <span class="date font-monospace">2026-04-01</span>
                  <a href="#" class="commit-msg">Do a thing that fixes a thing</a>
                </div>
              </div>
              <div class="row mt-3">
                <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"></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-3"></div><div class="lang-diff minus-3"></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>
        </div>
      </div>
    </div>
  </body>
</html>
package.json:2
Before
2
After
2
  },
  "scripts": {
    "sass": "npx sass scss/design-board.scss css/design-board.css"
scss/design-board.scss:2
Before
2
$font-family-base: serif;
After
2
// $font-family-base: serif;
scss/design-board.scss:127
Before
127
After
127
// NEW COMMITS PAGE

.commits-page {
  a {
    color: $blue
  }

  .commit {
    border: 1px solid #999;
    padding: 10px 0;
    margin-bottom: 10px;
  }

  .lang-diff {
    height: 1.1rem;
  }

  .language-names {
    font-family: monospace;
    text-align: right;

    div {
      height: 1.1rem;
    }
  }

  .plus-1 {
    background-color: blue;
    width: 80%;
  }
  .minus-1 {
    background-color: navy;
    width: 20%;
  }

  .plus-2 {
    background-color: red;
    width: 50%;
  }
  .minus-2 {
    background-color: darkred;
    width: 30%;
  }

  .plus-3 {
    background-color: green;
    width: 10%;
  }
  .minus-3 {
    background-color: darkgreen;
    width: 5%;
  }

  .plus-4 {
    background-color: lightgray;
    width: 50%;
  }
  .minus-4 {
    background-color: gray;
    width: 35%;
  }
}