index.html
1<!doctype html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>Git Repositories</title>
7 <style>
8
9 :root {
10 --line-height: 1.3rem;
11 --grid-height: 0.65rem;
12 --bg-color: #0d1117;
13 --text-color: #e6edf3;
14 --border: #6a708e;
15 --link-color: #79C0FF;
16 --hover: #ff79c6;
17 --visited: #79C0FF;
18 --white: #f2f2f2;
19 --grey: #414558;
20 --grey-light: #6a708e;
21 --code: #414558;
22 --pre: #252525;
23 }
24 html {
25 background-color: var(--bg-color);
26 color: var(--text-color);
27 font-size: 16px;
28 line-height: var(--line-height);
29 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
30 -webkit-text-size-adjust: 100%;
31 }
32 body {
33 margin: 0 auto;
34 max-width: 900px;
35 padding: 0 var(--grid-height);
36 }
37 *, ::before, ::after { box-sizing: border-box; }
38
39 .site-header {
40 margin: 1rem auto;
41 display: flex;
42 flex-direction: row;
43 align-items: center;
44 gap: 1rem;
45 }
46
47 .site-header__logo {
48 width: 4rem;
49 height: 4rem;
50 flex-shrink: 0;
51 }
52
53 .site-header__content {
54 display: flex;
55 flex-direction: column;
56 justify-content: center;
57 }
58
59 .site-header__title {
60 font-size: 1rem;
61 font-weight: bold;
62 line-height: var(--line-height);
63 text-transform: uppercase;
64 margin: 0;
65 }
66
67 .site-header__desc {
68 font-size: 0.9rem;
69 color: var(--grey-light);
70 margin: 0;
71 line-height: var(--line-height);
72 }
73
74 .repo-grid {
75 display: flex;
76 flex-direction: column;
77 gap: 0.5rem;
78 margin: 1rem 0;
79 }
80
81 .repo-card {
82 display: block;
83 border: 1px solid var(--border);
84 border-radius: 4px;
85 padding: 0.75rem 1rem;
86 background-color: var(--pre);
87 transition: border-color 0.2s ease;
88 text-decoration: none;
89 color: inherit;
90 width: 100%;
91 }
92
93 .repo-card:hover {
94 border-color: var(--link-color);
95 }
96
97 .repo-card__name {
98 font-size: 1rem;
99 font-weight: bold;
100 margin: 0 0 0.25rem 0;
101 text-transform: uppercase;
102 color: var(--link-color);
103 }
104
105 .repo-card__desc {
106 font-size: 0.9rem;
107 color: var(--grey-light);
108 margin: 0 0 var(--grid-height) 0;
109 line-height: var(--line-height);
110 }
111
112 .repo-card__desc:empty {
113 margin: 0;
114 display: none;
115 }
116
117 .repo-card__updated {
118 font-size: 0.8rem;
119 color: var(--grey-light);
120 font-family: monospace;
121 }
122
123 footer {
124 text-align: center;
125 margin: calc(var(--line-height) * 3) 0;
126 color: var(--grey-light);
127 font-size: 0.8rem;
128 }
129
130 @media only screen and (max-width: 40em) {
131 body {
132 padding: 0 var(--grid-height);
133 }
134 .repo-card__updated {
135 display: none;
136 }
137 }
138 </style>
139</head>
140<body>
141 <header class="site-header">
142 <img src="logo.png" class="site-header__logo" alt="Logo" />
143 <div class="site-header__content">
144 <h1 class="site-header__title">Forged In Fire</h1>
145 <p class="site-header__desc">Artisanally handcrafted code with only a little help from AI</p>
146 </div>
147 </header>
148
149 <main>
150 <div class="repo-grid">
151
152 <a href="pgit" class="repo-card">
153 <div class="repo-card__name">pgit</div>
154 <p class="repo-card__desc"></p>
155 <time class="repo-card__updated" data-time="2026-04-15T13:01:28Z">
156 Apr 15, 2026
157 </time>
158 </a>
159
160 </div>
161 </main>
162
163 <footer>
164 <p>Generated with pgit-index</p>
165 </footer>
166
167 <script>
168 (function() {
169 var MINUTE_MS = 60000;
170 var HOUR_MS = 3600000;
171 var DAY_MS = 86400000;
172 var MONTH_MS = 30 * DAY_MS;
173
174 function updateTimes() {
175 var elements = document.querySelectorAll('[data-time]');
176 var now = new Date();
177 var minDiffMs = Infinity;
178
179 elements.forEach(function(el) {
180 var date = new Date(el.getAttribute('data-time'));
181 var diffMs = now - date;
182 if (diffMs < minDiffMs && diffMs >= 0) {
183 minDiffMs = diffMs;
184 }
185 var diffMins = Math.floor(diffMs / MINUTE_MS);
186 var diffHours = Math.floor(diffMs / HOUR_MS);
187 var diffDays = Math.floor(diffMs / DAY_MS);
188 var text;
189 if (diffMins < 1) {
190 text = 'just now';
191 } else if (diffMins < 60) {
192 text = diffMins + ' minute' + (diffMins === 1 ? '' : 's') + ' ago';
193 } else if (diffHours < 24) {
194 text = diffHours + ' hour' + (diffHours === 1 ? '' : 's') + ' ago';
195 } else if (diffDays < 30) {
196 text = diffDays + ' day' + (diffDays === 1 ? '' : 's') + ' ago';
197 } else {
198 return;
199 }
200 el.textContent = text;
201 });
202 return minDiffMs;
203 }
204
205 function scheduleUpdate() {
206 var minDiffMs = updateTimes();
207 var intervalMs;
208 if (minDiffMs < HOUR_MS) {
209 intervalMs = MINUTE_MS;
210 } else if (minDiffMs < DAY_MS) {
211 intervalMs = HOUR_MS;
212 } else if (minDiffMs < MONTH_MS) {
213 intervalMs = DAY_MS;
214 } else {
215 return;
216 }
217 setTimeout(scheduleUpdate, intervalMs);
218 }
219 scheduleUpdate();
220 })();
221 </script>
222</body>
223</html>
