Mon Oct 13 2025
Tucker McKnight <tucker@pangolin.lan>
5486fec3732731698ba427d31932448d43259353
0
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
92
93
94
95
96
97
98
99
100
101
102
103
<!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="main2.css">
</head>
<body>
<div class="container">
<div class="bg-body-secondary py-3 px-5 mb-3 shadow">
<div class="row">
<div class="col-12">
<span>← <a href="#" class="text-black">All repositories</a></span>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<h1 class="display-5"><em>eleventy-plugin-repoviewer</em></h1>
<p>An 11ty static site generator plugin for displaying a git repository.</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-12 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, make the header area more compact.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg mb-2">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item mx-3">
<a class="btn btn-secondary" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="#">Files</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="#">Commits</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="#">Branches</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="#">Tags</a>
</li>
</ul>
<button class="btn btn-outline-secondary">Branches (current: main) ▼</button>
</div>
</div>
</nav>
</div>
</div>
</div>
<!-- end of top area containers -->
<div class="container px-4">
<h1>Readme File Here</h1>
<p>The repo's readme.md is printed out here.</p>
<p>Installation instructions:</p>
<p>Clone this repo at <code>https://myblog.com/projects/thisthing.git</code>. Then,</p>
<ol>
<li>Do the thing</li>
<li>Check if it worked</li>
</ol>
</div>
</div>
</body>
</html>0
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
:root {
--bs-body-font-family: serif;
--bs-body-bg: #DBE0AA;
--bs-light-rgb: 233,234,222;
--bs-secondary-bg-rgb: 227,129,79;
/* --bs-secondary-bg-rgb: 103,121,245; blue */
}
.btn {
--bs-btn-bg: #89E683;
--bs-btn-border-color: #89E683;
--bs-btn-color: black;
--bs-border-radius-lg: 1rem;
}
.btn-secondary {
--bs-btn-bg: #91B7F5;
--bs-btn-border-color: #91B7F5;
}
.btn-outline-secondary {
--bs-btn-bg: none;
--bs-btn-border-color: #333;
--bs-btn-color: #333;
}
.language-percentages {
font-size: 0;
}
.language-name {
display: inline-block;
font-size: 0.8rem;
}
.language-percent {
display: inline-block;
margin: 0;
padding: 0;
height: 0.5rem;
}