Branch

just stick with the one orange design

Sun Oct 26 2025

Tucker McKnight <tmcknight@instructure.com>


    

  

  

    

      
0eb88cf4e86cb89dcf05b564c03be741ab71ebda

    

  





  

    

      Side-by-side
      

        
      

      Stacked
    

  

  

  
  
    

      index.html:5
      

        

          Before
          

            

              5
6
7
8
9
10

            

            

              
    <link rel="stylesheet" href="main.css">
        <div class="row">
          <div class="col-12">
            <span>&larr; <a href="#" class="text-black">All repositories</a></span>
          </div>
        </div>

            

          

        

        

          After
          

            

              5
6

            

            

              
    <link rel="stylesheet" href="main3.css">
            <span>&larr; <a href="#" class="text-black">All repositories</a></span>

            

          

        

      

    

  
    

      index.html:37
      

        

          Before
          

            

              37
38
39
40
41
42
43

            

            

              
                    <div style="background: #89E683; width: 33%;" class="language-percent"></div>
                    <div style="background: #DBE0AA; width: 17%;" class="language-percent"></div>
              <div class="col-12 col-lg-6 my-1">
              <div class="col-12 col-lg-6 my-1">
                <button class="btn btn-secondary btn-lg shadow-sm w-100">Branches</button>
              </div>
        <div class="row>

            

          

        

        

          After
          

            

              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

            

            

              
                    <div style="background: #DBE0AA; width: 33%;" class="language-percent"></div>
                    <div style="background: #91B7F5; width: 17%;" class="language-percent"></div>
              <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">
        <div class="row">
      <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&quot;&gt;
              <div class="col-12">
                <h1>Readme</h1>
                <p>Readme.md content goes here</p>
              </div>
            </div>
          </div>
        </div>
      </div>

            

          

        

      

    

  
    

      index3.html:1
      

        

          Before
          

            

              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
92
93

            

            

              
<!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
          

            

              1