Some style changes

868131125b6ebbe06b95de57c89334042bbc22a5

Tucker McKnight <tmcknight@instructure.com> | Thu Feb 05 2026

Some style changes

- Go with a sans-serif font after all; makes everything visually fit
  together more nicely
- Add a gap between the columns in the language graph
- Remove the underline on the bezeled directory links -- it looks
  different with the sans-serif font
- Make spacing more consistent with the toggle switches on markdown
  file pages
js_templates/file.ts:23
Before
22
23
24
25
26
27
28
29
30
        ])
      )
    ),
    m('div', {class: "row my-1"},
      m('div', {class: "col"},
        m('h3', [
          m('span', {class: "bezel-gray px-1"},
            m('a', {href: `${data.reposPath}/${data.fileInfo.repoName}/branches/${data.fileInfo.branchName}/files`}, './')
          ),
          data.fileInfo.file.split('/').map((dir, index, arr) => {
After
22
23
24
25
26
27
28
29
30
        ])
      )
    ),
    m('div', {class: "directory-buttons row my-2"},
      m('div', {class: "col"},
        m('h3', [
          m('span', {class: "bezel-gray p-1"},
            m('a', {href: `${data.reposPath}/${data.fileInfo.repoName}/branches/${data.fileInfo.branchName}/files`}, './')
          ),
          data.fileInfo.file.split('/').map((dir, index, arr) => {
js_templates/file.ts:34
Before
33
34
35
36
37
38
39
40
              return m('span', {class: "px-2"}, dir)
            }
            else {
              return m('span', {class: "bezel-gray px-1"}, [
                m('a', {
                  href: `${data.reposPath}/${data.fileInfo.repoName}/branches/${data.fileInfo.branchName}/files/${arr.slice(0, index + 1).map((part) => slugify(part)).join('/')}.html`}, dir)
              ])
            }
          })
After
33
34
35
36
37
38
39
40
              return m('span', {class: "px-2"}, dir)
            }
            else {
              return m('span', {class: "bezel-gray p-1"}, [
                m('a', {
                  href: `${data.reposPath}/${data.fileInfo.repoName}/branches/${data.fileInfo.branchName}/files/${arr.slice(0, index + 1).map((part) => slugify(part)).join('/')}.html`}, `${dir}/`)
              ])
            }
          })
js_templates/file.ts:64
Before
63
64
65
66
67
68
69
70
71
72
73
74
75
76
        )
      )
    : [
        m('div', {class: "row"},
          m('div', {class: "col"},
            m('p', m('a', {
              href: `${data.reposPath}/${slugify(data.fileInfo.repoName)}/branches/${slugify(data.fileInfo.branchName)}/raw/${data.fileInfo.file.split('.').map(filePart => slugify(filePart)).join('.')}`}, 'View raw file'))
          )
        ),
        (data.fileInfo.file.endsWith(".md") ?
          [
            m('div', {class: "row"},
              m('div', {class: "col"},
                m('div', {class: "form-check form-switch"}, [
                  m('input', {
After
63
64
65
66
67
68
69
70
71
72
73
74
75
76
        )
      )
    : [
        m('div', {class: "row my-3"},
          m('div', {class: "col"},
            m('span', m('a', {
              href: `${data.reposPath}/${slugify(data.fileInfo.repoName)}/branches/${slugify(data.fileInfo.branchName)}/raw/${data.fileInfo.file.split('.').map(filePart => slugify(filePart)).join('.')}`}, 'View raw file'))
          )
        ),
        (data.fileInfo.file.endsWith(".md") ?
          [
            m('div', {class: "row my-2"},
              m('div', {class: "col"},
                m('div', {class: "form-check form-switch"}, [
                  m('input', {
js_templates/file.ts:89
Before
88
89
90
91
92
93
                ])
              )
            ),
            m('div', {class: "row rendered-content py-4"},
              m('div', {class: "col"},
                m.trust(await renderContentIfAvailable(await getFileContents(
                  data.fileInfo.repoName,
After
88
89
90
91
92
93
                ])
              )
            ),
            m('div', {class: "row rendered-content"},
              m('div', {class: "col"},
                m.trust(await renderContentIfAvailable(await getFileContents(
                  data.fileInfo.repoName,
js_templates/file.ts:102
Before
101
102
103
104
105
106
        : null),
        m('div', {class: `row code-content ${data.fileInfo.file.endsWith('.md') ? 'd-none' : ''}`},
          m('div', {class: "col"}, [
            m('div', {class: "row py-2"},
              m('div', {class: "col-auto"},
                m('div', {class: "form-check form-switch"}, [
                  m('input', {class: "form-check-input", type: "checkbox", role: "switch", id: "showLastTouch"}),
After
101
102
103
104
105
106
        : null),
        m('div', {class: `row code-content ${data.fileInfo.file.endsWith('.md') ? 'd-none' : ''}`},
          m('div', {class: "col"}, [
            m('div', {class: "row"},
              m('div', {class: "col-auto"},
                m('div', {class: "form-check form-switch"}, [
                  m('input', {class: "form-check-input", type: "checkbox", role: "switch", id: "showLastTouch"}),
js_templates/files.ts:18
Before
17
18
19
20
21
22
        ])
      )
    ]),
    m('div', {class: "row my-1"},
      m('div', {class: "col"},
        m('h3', './')
      )
After
17
18
19
20
21
22
        ])
      )
    ]),
    m('div', {class: "row my-2"},
      m('div', {class: "col"},
        m('h3', './')
      )
js_templates/index.ts:69
Before
68
69
70
71
72
73
                      m('div', {class: "card-footer"}, [
                        m('a', {
                          href: `${data.reposPath}/${slugify(repo.name)}/branches/${repo.defaultBranch}`,
                          class: "mx-1 my-2 btn btn-primary text-white"
                        }, 'Go to site'),
                        m('button', {
                          class: "mx-1 my-2 btn btn-outline-secondary shadow-none dropdown-toggle clone-popover-btn",
After
68
69
70
71
72
73
                      m('div', {class: "card-footer"}, [
                        m('a', {
                          href: `${data.reposPath}/${slugify(repo.name)}/branches/${repo.defaultBranch}`,
                          class: "ms-0 me-2 my-2 btn btn-primary text-white"
                        }, 'Go to site'),
                        m('button', {
                          class: "mx-1 my-2 btn btn-outline-secondary shadow-none dropdown-toggle clone-popover-btn",
js_templates/repo.ts:55
Before
54
55
56
57
58
59
60
61
62
63
64
65
                m('em', repo.name)
              ),
              repo.description
                ? m('p', {class: "text-white fs-4"}, repo.description)
                : null
            ]),
            m('div', {class: "col-12 col-xl-6 d-flex flex-column justify-content-around"}, [
              m('div', {class: "row flex-grow-1 align-items-stretch language-percent-row"}, [
                m('div', {class: "col-12 d-flex align-items-stretch"}, [
                  m('div', {class: "d-flex flex-grow-1 flex-nowrap"}, topLanguagePercentages.map((percentTuple) => {
                    return m('div', {class: 'language-col flex-grow-1 overflow-hidden'}, [
                      m('div', {class: "language-name text-light font-monospace"}, percentTuple[0]),
                      m('div', {class: "language-percent", style: `flex-grow: ${percentTuple[1] / largestPercent};`})
After
54
55
56
57
58
59
60
61
62
63
64
65
                m('em', repo.name)
              ),
              repo.description
                ? m('p', {class: "text-white fs-4 fw-light"}, repo.description)
                : null
            ]),
            m('div', {class: "col-12 col-xl-6 d-flex flex-column justify-content-around"}, [
              m('div', {class: "row flex-grow-1 align-items-stretch language-percent-row"}, [
                m('div', {class: "col-12 d-flex align-items-stretch"}, [
                  m('div', {class: "language-cols d-flex flex-grow-1 flex-nowrap"}, topLanguagePercentages.map((percentTuple) => {
                    return m('div', {class: 'language-col flex-grow-1 overflow-hidden'}, [
                      m('div', {class: "language-name text-light font-monospace"}, percentTuple[0]),
                      m('div', {class: "language-percent", style: `flex-grow: ${percentTuple[1] / largestPercent};`})
scss/design-board.scss:2
Before
1
2
3
4
5
6
7

$body-color: #262626;

$font-family-base: serif;

$border-radius: 0;
$border-radius-sm: 0;
$border-radius-lg: 0;
After
1
2
3


4
5

$body-color: #262626;

⁣
⁣
$border-radius: 0;
$border-radius-sm: 0;
$border-radius-lg: 0;
scss/design-board.scss:148
Before
147
148
149



150
151
152
153
154

155
156
.language-percentages {
  font-size: 0;
}
⁣
⁣
⁣
.language-col {
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-height: 4rem;
⁣
  flex-basis: 0;
}
.language-percent {
After
147
148
149
150
151
152
153
154
155
156
157
158
159
160
.language-percentages {
  font-size: 0;
}
.language-cols {
  margin: 0 -6px;
}
.language-col {
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-height: 4rem;
  margin: 0 6px;
  flex-basis: 0;
}
.language-percent {
scss/design-board.scss:264
Before
263
264






.commit-hash {
  word-break: break-all; /* for mobile widths, allow SHA to wrap */
⁣
⁣
⁣
⁣
⁣
⁣
}
After
263
264
265
266
267
268
269
270
.commit-hash {
  word-break: break-all; /* for mobile widths, allow SHA to wrap */
}

/* file page */

.directory-buttons a {
  text-decoration: none;
}