just stick with the one orange design

0eb88cf4e86cb89dcf05b564c03be741ab71ebda

Tucker McKnight <tmcknight@instructure.com> | Mon Oct 27 2025

just stick with the one orange design
index.html:5
Before
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>UI Experiment</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <div class="container">
      <div class="bg-body-secondary py-4 px-5 shadow">
        <div class="row">
          <div class="col-12">
            <span>&larr; <a href="#" class="text-black">All repositories</a></span>
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-md-6">
            <h1 class="display-4"><em>eleventy-plugin-repoviewer</em></h1>
            <p>An 11ty static site generator plugin for displaying a git repository. The description field of your repository is shown here. Lorem ipsum dolor sit amet.</p>
          </div>
After
4
5
6
7
8
9
10
11
12
13
14




15
16
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>UI Experiment</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <link rel="stylesheet" href="main3.css">
  </head>
  <body>
    <div class="container">
      <div class="bg-body-secondary py-4 px-5 shadow">
        <div class="row">
          <div class="col-12 col-md-6">
            <span>&larr; <a href="#" class="text-black">All repositories</a></span>
⁣
⁣
⁣
⁣
            <h1 class="display-4"><em>eleventy-plugin-repoviewer</em></h1>
            <p>An 11ty static site generator plugin for displaying a git repository. The description field of your repository is shown here. Lorem ipsum dolor sit amet.</p>
          </div>
index.html:37
Before
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

































61
62
                    <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: #89E683; width: 33%;" class="language-percent"></div>
                    <div style="background: #DBE0AA; width: 17%;" class="language-percent"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row flex-grow-1 align-items-end align-content-center">
              <div class="col-12 col-lg-6 my-1">
                <button class="btn btn-primary btn-lg shadow-sm w-100">Clone</button>
              </div>
              <div class="col-12 col-lg-6 my-1">
                <button class="btn btn-secondary btn-lg shadow-sm w-100">Branches</button>
              </div>
            </div>
          </div>
        </div>
        <div class="row>
          <div class="col-12">
            <p class="f-sm mb-0 text-light font-monospace">Last commit: 2025-10-04 <a href="#" class="text-light">ebfc34</a>: Do some UI things</p>
          </div>
        </div>
      </div>
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
    </div>
  </body>
</html>
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
                    <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>
            </div>
            <div class="row flex-grow-1 align-items-end align-content-center">
              <div class="col-auto my-1">
                <button class="btn btn-outline-secondary btn-lg w-100">Branch (main)</button>
	      </div>
              <div class="col-12 col-md my-1">
                <button class="btn btn-primary btn-lg shadow-sm w-100">Clone</button>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <p class="f-sm mb-0 text-light font-monospace">Last commit: 2025-10-04 <a href="#" class="text-light">ebfc34</a>: Do some UI things</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <nav class="navbar navbar-expand">
            <div class="container-fluid">
                <ul class="navbar-nav my-2">
                  <li class="nav-item mx-2">
                    <a class="nav-link btn btn-secondary px-3 active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item mx-2">
                    <a class="nav-link" href="#">Files</a>
                  </li>
                  <li class="nav-item mx-2">
                    <a class="nav-link" href="#">Changes</a>
                  </li>
                  <li class="nav-item mx-2">
                    <a class="nav-link" href="#">Branches</a>
                  </li>
                  <li class="nav-item mx-2">
                    <a class="nav-link" href="#">Tags</a>
                  </li>
                </ul>
            </div>
          </nav>
          <div class="container px-3">
            <div class="row">
              <div class="col-12">
                <h1>Readme</h1>
                <p>Readme.md content goes here</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
index3.html:1
Before
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>UI Experiment</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <link rel="stylesheet" href="main3.css">
  </head>
  <body>
    <div class="container">
      <div class="bg-body-secondary py-4 px-5 shadow">
        <div class="row">
          <div class="col-12 col-md-6">
            <span>&larr; <a href="#" class="text-black">All repositories</a></span>
            <h1 class="display-4"><em>eleventy-plugin-repoviewer</em></h1>
            <p>An 11ty static site generator plugin for displaying a git repository. The description field of your repository is shown here. Lorem ipsum dolor sit amet.</p>
          </div>
          <div class="col-12 col-md-6 d-flex flex-column">
            <div class="row flex-grow-1 mb-4 mb-md-0 align-items-center">
              <div class="col-12">
                <div class="row">
                  <div class="col-12 language-percentages">
                    <span style="width: 25%;" class="language-name text-light font-monospace">HTML</span>
                    <span style="width: 15%;" class="language-name text-light font-monospace">CSS</span>
                    <span style="width: 10%;" class="language-name text-light font-monospace">Rust</span>
                    <span style="width: 33%;" class="language-name text-light font-monospace">Typescript</span>
                    <span style="width: 17%;" class="language-name text-light font-monospace">Bash</span>
                  </div>
                </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>
            </div>
            <div class="row flex-grow-1 align-items-end align-content-center">
              <div class="col-auto my-1">
                <button class="btn btn-outline-secondary btn-lg w-100">Branch (main)</button>
	      </div>
              <div class="col-12 col-md my-1">
                <button class="btn btn-primary btn-lg shadow-sm w-100">Clone</button>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <p class="f-sm mb-0 text-light font-monospace">Last commit: 2025-10-04 <a href="#" class="text-light">ebfc34</a>: Do some UI things</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <nav class="navbar navbar-expand">
            <div class="container-fluid">
                <ul class="navbar-nav my-2">
                  <li class="nav-item mx-2">
                    <a class="nav-link btn btn-secondary px-3 active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item mx-2">
                    <a class="nav-link" href="#">Files</a>
                  </li>
                  <li class="nav-item mx-2">
                    <a class="nav-link" href="#">Changes</a>
                  </li>
                  <li class="nav-item mx-2">
                    <a class="nav-link" href="#">Branches</a>
                  </li>
                  <li class="nav-item mx-2">
                    <a class="nav-link" href="#">Tags</a>
                  </li>
                </ul>
            </div>
          </nav>
          <div class="container px-3">
            <div class="row">
              <div class="col-12">
                <h1>Readme</h1>
                <p>Readme.md content goes here</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
After



























































































⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣