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
After
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;
}