Some style changes; add syntax highlighting JS and branch dropdown

1a4fbe8feab150a334e1cefb04fa6136fcb4cea3

Tucker McKnight <tucker@pangolin.lan> | Mon Dec 08 2025

Some style changes; add syntax highlighting JS and branch dropdown
js_templates/repo.ts:24
Before
23
24
25

26
27
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>${repo.name}</title>
          <link rel="stylesheet" href="/css/design-board.css">
⁣
        </head>
        <body>
          <div class="container">
After
23
24
25
26
27
28
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>${repo.name}</title>
          <link rel="stylesheet" href="/css/design-board.css">
          <link href="https://unpkg.com/prismjs@1.20.0/themes/prism.css" rel="stylesheet" />
        </head>
        <body>
          <div class="container">
js_templates/repo.ts:37
Before
36
37
38













39
40
41
42
43
44
45
46
47
                    <li class="nav-item">
                      <a class="nav-link" href="#">${repo.name}</a>
                    </li>
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
                  </ul>
                </nav>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <nav class="navbar navbar-expand justify-content-center">
                  <ul class="navbar-nav flex-wrap">
                    <li class="nav-item">
                      <a class="nav-link active" aria-current="page" href="${nav.repoCurrentBranchHome()}">Home</a>
After
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
                    <li class="nav-item">
                      <a class="nav-link" href="#">${repo.name}</a>
                    </li>
                    <li class="nav-item">
                      <span class="nav-link d-inline-block">Branch:</span>
                      <div class="dropdown-center d-inline-block">
                        <button class="branches nav-link d-inline-block btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                          main
                        </button>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Action</a></li>
                          <li><a class="dropdown-item" href="#">Another action</a></li>
                          <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                      </div>
                    </li>
                  </ul>
                </nav>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <nav class="navbar navbar-expand">
                  <ul class="navbar-nav flex-wrap">
                    <li class="nav-item">
                      <a class="nav-link active" aria-current="page" href="${nav.repoCurrentBranchHome()}">Home</a>
js_templates/repo.ts:87
Before
86
87
88
89
90
91
92
93
94
95
                          </div>
                          <div class="row">
                            <div class="col-12 language-percentages">
                              <div style="background: #DBE0AA; width: 25%;" class="language-percent"></div>
                              <div style="background: #91B7F5; width: 15%;" class="language-percent"></div>
                              <div style="background: #E0473B; width: 10%;" class="language-percent"></div>
                              <div style="background: #DBE0AA; width: 33%;" class="language-percent"></div>
                              <div style="background: #91B7F5; width: 17%;" class="language-percent"></div>
                            </div>
                          </div>
                        </div>
After
86
87
88
89
90
91
92
93
94
95
                          </div>
                          <div class="row">
                            <div class="col-12 language-percentages">
                              <div style="background: #E273FA; width: 25%;" class="language-percent"></div>
                              <div style="background: #852CDF; width: 15%;" class="language-percent"></div>
                              <div style="background: #E273FA; width: 10%;" class="language-percent"></div>
                              <div style="background: #852CDF; width: 33%;" class="language-percent"></div>
                              <div style="background: #E273FA; width: 17%;" class="language-percent"></div>
                            </div>
                          </div>
                        </div>
js_templates/repo.ts:124
Before
123
124
125

126
127
            </div>

          </div>
⁣
        </body>
      </html>
      `
After
123
124
125
126
127
128
            </div>

          </div>
          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
        </body>
      </html>
      `
scss/design-board.scss:10
Before
9
10
11
12
13
14
15
16

17
18

$enable-transitions: false;

$gray: #EFF2E4;
$blue: #7388FA;
$lightblue: #73B2FA;
$purple: #B673FA;
$magenta: #E273FA;
⁣
$teal: #80F8D4;

$body-bg: $gray;
After
9
10
11
12
13
14
15
16
17
18
19

$enable-transitions: false;

$gray: #EFF2E4; /* this is... not gray? */
$blue: #7388FA;
$lightblue: #73B2FA;
$purple: #852cdf;
$lilac: #E273FA;
$magenta: #FF549B;
$teal: #80F8D4;

$body-bg: $gray;
scss/design-board.scss:79
Before
78
79
80
81
82
83
}

a {
  color: $teal;
}
.btn {
  font-family: sans-serif;
After
78
79
80
81
82
83
}

a {
  color: $blue;
}
.btn {
  font-family: sans-serif;
scss/design-board.scss:104
Before
103
104
105
106
107
108
109
110
111
112
  font-family: sans-serif;
}
.nav-item a {
  color: $lightblue;
}

.navbar-nav .nav-link.active {
  background-color: $lightblue;
  color: white;
}
After
103
104
105
106
107
108
109
110
111
112
  font-family: sans-serif;
}
.nav-item a {
  color: $blue;
}

.navbar-nav .nav-link.active {
  background-color: $blue;
  color: white;
}
scss/design-board.scss:134
Before
133
134




  display: inline-block;
  font-size: 1rem;
⁣
⁣
⁣
⁣
}
After
133
134
135
136
137
138
  display: inline-block;
  font-size: 1rem;
}

.branches, .branches:hover {
  border: 1px solid $body-color;
}