<!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: #288DF9; 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">Branch (main) ▼</button>
</div>
<div class="col 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>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="container px-4">
<h1>Readme File Here</h1>
<p>The repo's readme.md is printed out here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis sed quam sit amet tincidunt. Vivamus condimentum ac est nec fringilla. Mauris accumsan hendrerit pellentesque. Nullam iaculis vitae neque vel venenatis.
<p>Integer non ligula est. Sed sit amet dui sed eros hendrerit lobortis et in eros. Donec ut sem ut dolor iaculis porttitor. Morbi nunc lectus, facilisis in risus sed, <code>vestibulum</code> volutpat mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra:</p>
<ul>
<li>per inceptos himenaeos.</li>
<li>Aenean ultricies sollicitudin <code>imperdiet.</code></li>
<li>Suspendisse nec felis quis lectus hendrerit tempus.</li>
</ul>
<p>Sed eu orci vulputate, hendrerit est at, lacinia est. Donec volutpat ipsum vel mauris fermentum pharetra. Ut pellentesque sem ut diam tincidunt malesuada. Vivamus a scelerisque mauris. Mauris blandit sit amet mi convallis facilisis.</p>
<h2>Vivamus non diam felis</h2>
Morbi tempor, <code>arcu eget dapibus posuere</code>, purus nunc pulvinar nulla, in congue felis ante vel neque. Curabitur facilisis convallis est et hendrerit. Vivamus eget rhoncus orci. Integer ut tristique ligula. Donec risus erat, fringilla aliquet quam at, commodo facilisis tellus. Mauris egestas erat dui, eget venenatis tortor viverra a. Donec sit amet nulla in orci efficitur maximus porta aliquet magna. Etiam eget pretium erat, ut porttitor libero. Etiam consectetur nulla auctor consequat gravida.
91B7F5
</div>
</div>
</body>
</html>