12 files changed,
+1040,
-995
+2,
-4
1@@ -11,14 +11,12 @@
2 {{template "meta" .}}
3
4 <link rel="stylesheet" href="{{.Repo.RootRelative}}vars.css" />
5- <link rel="stylesheet" href="{{.Repo.RootRelative}}smol.css" />
6- <link rel="stylesheet" href="{{.Repo.RootRelative}}main.css" />
7+ <link rel="stylesheet" href="{{.Repo.RootRelative}}pgit.css" />
8 </head>
9 <body>
10 <header>{{template "header" .}}</header>
11- <hr class="my" />
12 <main>{{template "content" .}}</main>
13- <hr class="my" />
14+ <hr />
15 <footer>{{template "footer" .}}</footer>
16 </body>
17 </html>
+19,
-19
1@@ -5,34 +5,34 @@
2 {{end}}
3
4 {{define "content"}}
5- <div class="mb-4">
6- <pre class="white-space-bs font-bold text-lg mb-4 text-transform-none">{{.Commit.Message}}</pre>
7+ <div>
8+ <pre class="commit-message">{{.Commit.Message}}</pre>
9
10- <div class="metadata-grid text-sm mb-4">
11- <div class="meta-label">commit</div>
12- <div class="meta-value mono"><a href="{{.CommitURL}}">{{.CommitID}}</a></div>
13+ <div class="metadata">
14+ <div class="metadata__label">commit</div>
15+ <div class="metadata__value metadata__value--code"><a href="{{.CommitURL}}">{{.CommitID}}</a></div>
16
17- <div class="meta-label">parent</div>
18- <div class="meta-value mono"><a href="{{.ParentURL}}">{{.Parent}}</a></div>
19+ <div class="metadata__label">parent</div>
20+ <div class="metadata__value metadata__value--code"><a href="{{.ParentURL}}">{{.Parent}}</a></div>
21
22- <div class="meta-label">author</div>
23- <div class="meta-value font-bold">{{.Commit.Author.Name}}</div>
24+ <div class="metadata__label">author</div>
25+ <div class="metadata__value font-bold">{{.Commit.Author.Name}}</div>
26
27- <div class="meta-label">date</div>
28- <div class="meta-value">{{.Commit.Author.When}}</div>
29+ <div class="metadata__label">date</div>
30+ <div class="metadata__value">{{.Commit.Author.When}}</div>
31 </div>
32 </div>
33
34- <div class="box mono">
35+ <div class="box file-header">
36 <div>
37 <strong>{{.Diff.NumFiles}}</strong> files changed,
38- <span class="color-green">+{{.Diff.TotalAdditions}}</span>,
39- <span class="color-red">-{{.Diff.TotalDeletions}}</span>
40+ <span class="diff-stat--add">+{{.Diff.TotalAdditions}}</span>,
41+ <span class="diff-stat--del">-{{.Diff.TotalDeletions}}</span>
42 </div>
43
44- <div>
45+ <div class="file-list-summary">
46 {{range .Diff.Files}}
47- <div class="my-sm">
48+ <div class="file-list-summary__item">
49 <span>{{.FileType}}</span>
50 <a href="#diff-{{.Name}}">{{.Name}}</a>
51 </div>
52@@ -41,15 +41,15 @@
53 </div>
54
55 {{range .Diff.Files}}
56- <div id="diff-{{.Name}}" class="flex justify-between mono py diff-file">
57+ <div id="diff-{{.Name}}" class="diff-file__header">
58 <div>
59 <span>{{.FileType}} {{if eq .FileType "R"}}{{.OldName}} => {{end}}</span>
60 <a href="#diff-{{.Name}}">{{.Name}}</a>
61 </div>
62
63 <div>
64- <span class="color-green">+{{.NumAdditions}}</span>,
65- <span class="color-red">-{{.NumDeletions}}</span>
66+ <span class="diff-stat--add">+{{.NumAdditions}}</span>,
67+ <span class="diff-stat--del">-{{.NumDeletions}}</span>
68 </div>
69 </div>
70
+7,
-7
1@@ -5,7 +5,7 @@
2 {{end}}
3
4 {{define "content"}}
5- <div class="text-md text-transform-none">
6+ <div class="breadcrumb">
7 {{range .Item.Crumbs}}
8 <a href="{{.URL}}">{{.Text}}</a> {{if .IsLast}}{{else}}/{{end}}
9 {{end}}
10@@ -13,17 +13,17 @@
11
12 {{if .Repo.HideTreeLastCommit}}
13 {{else}}
14- <div class="box">
15- <div class="flex items-center justify-between">
16- <div class="flex-1">
17+ <div class="box file-header">
18+ <div class="file-header__row">
19+ <div class="file-header__commit">
20 <a href="{{.Item.CommitURL}}">{{.Item.Summary}}</a>
21 </div>
22- <div class="mono">
23+ <div class="file-header__hash">
24 <a href="{{.Item.CommitURL}}">{{.Item.CommitID}}</a>
25 </div>
26 </div>
27
28- <div class="flex items-center">
29+ <div class="file-header__author">
30 <span>{{.Item.Author.Name}}</span>
31 <span> · </span>
32 <span>{{.Item.When}}</span>
33@@ -31,7 +31,7 @@
34 </div>
35 {{end}}
36
37- <h2 class="text-lg text-transform-none">{{.Item.Name}}</h2>
38+ <h2 class="content-heading">{{.Item.Name}}</h2>
39
40 {{.Contents}}
41 {{end }}
1@@ -1,8 +1,8 @@
2 {{define "footer"}}
3 {{if and (eq .Active "summary") .SiteURLs.CloneURL}}
4-<div class="clone-url-container text-left">
5- <div class="clone-url-title">CLONE URL</div>
6- <div class="clone-url-text mono">git clone {{.SiteURLs.CloneURL}}</div>
7+<div class="clone-url">
8+ <div class="clone-url__label">CLONE URL</div>
9+ <div class="clone-url__command">git clone {{.SiteURLs.CloneURL}}</div>
10 </div>
11 {{end}}
12 <div>
+9,
-8
1@@ -1,15 +1,15 @@
2 {{define "header"}}
3-<div class="flex flex-col">
4- <h1 class="text-xl flex gap p-0 mb-0">
5+<div class="site-header">
6+ <h1 class="site-header__title">
7 {{if .SiteURLs.HomeURL}}
8 <a href="{{.SiteURLs.HomeURL}}">repos</a>
9 <span>/</span>
10 {{end}}
11 <span>{{.Repo.RepoName}}</span>
12 </h1>
13- {{if .Repo.Desc}}<div class="font-italic font-grey-light mt">{{.Repo.Desc}}</div>{{end}}
14+ {{if .Repo.Desc}}<div class="site-header__desc">{{.Repo.Desc}}</div>{{end}}
15
16- <nav class="flex items-center nav-menu">
17+ <nav class="nav-menu">
18 {{if eq .Active "summary"}}<span class="active">summary</span>{{else}}<a href="{{.SiteURLs.SummaryURL}}">summary</a>{{end}}
19 {{if eq .Active "refs"}}<span class="active">refs</span>{{else}}<a href="{{.SiteURLs.RefsURL}}">refs</a>{{end}}
20 <span class="font-bold">{{.RevData.Name}}</span>
21@@ -18,13 +18,14 @@
22 </nav>
23
24 {{if and (eq .Active "summary") .LastCommit}}
25- <div class="flex justify-between items-center mt mb text-sm font-grey-light">
26- <div class="flex items-center gap-xs truncate">
27+ <div class="last-commit-bar">
28+ <div class="last-commit-bar__info">
29+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-commit-horizontal-icon lucide-git-commit-horizontal"><circle cx="12" cy="12" r="3"/><line x1="3" x2="9" y1="12" y2="12"/><line x1="15" x2="21" y1="12" y2="12"/></svg>
30 <span class="font-bold">{{.LastCommit.AuthorStr}}</span>
31 <span> · </span>
32- <a href="{{.LastCommit.URL}}" class="link-alt-hover text-transform-none">{{.LastCommit.SummaryStr}}</a>
33+ <a href="{{.LastCommit.URL}}">{{.LastCommit.SummaryStr}}</a>
34 </div>
35- <div class="mono" title="{{.LastCommit.WhenStr}}">
36+ <div class="last-commit-bar__time" title="{{.LastCommit.WhenStr}}">
37 {{.LastCommit.HumanWhenStr}}
38 </div>
39 </div>
+11,
-11
1@@ -4,26 +4,26 @@
2 {{define "meta"}}{{end}}
3
4 {{define "content"}}
5- <div class="group-2">
6- <div><span class="font-bold">({{.NumCommits}})</span> commits</div>
7+ <div class="commit-list">
8+ <div class="commit-list__count"><span class="font-bold">({{.NumCommits}})</span> commits</div>
9 {{range .Logs}}
10- <div class="commit-row py">
11- <div class="flex justify-between items-start mb">
12- <div class="flex-1 mr-4">
13- <pre class="m-0 white-space-bs font-bold text-md text-transform-none">{{.Message}}</pre>
14- <div class="flex items-center gap-xs text-sm font-grey-light mt">
15+ <div class="commit-item">
16+ <div class="commit-item__header">
17+ <div class="commit-item__content">
18+ <pre class="commit-item__message">{{.Message}}</pre>
19+ <div class="commit-item__meta">
20 <span class="font-bold">{{.AuthorStr}}</span>
21 <span> · </span>
22 <span>{{.WhenStr}}</span>
23 </div>
24 </div>
25
26- <div class="flex flex-col items-end gap-xs">
27- <a href="{{.URL}}" class="mono text-sm font-bold commit-hash">{{.ShortID}}</a>
28+ <div class="commit-item__actions">
29+ <a href="{{.URL}}" class="commit-item__hash">{{.ShortID}}</a>
30 {{if .Refs}}
31- <div class="flex gap-xs flex-wrap justify-end mt">
32+ <div class="commit-item__refs">
33 {{range .Refs}}
34- <span class="commit-hash mono text-sm">
35+ <span class="commit-item__ref">
36 {{if .URL}}
37 <a href="{{.URL}}">{{.Refspec}}</a>
38 {{else}}
+1,
-1
1@@ -4,7 +4,7 @@
2 {{define "meta"}}{{end}}
3
4 {{define "content"}}
5- <h2 class="text-lg font-bold">refs</h2>
6+ <h2 class="page-title">refs</h2>
7
8 <ul>
9 {{range .Refs}}
+3,
-1
1@@ -6,5 +6,7 @@
2 {{end}}
3
4 {{define "content"}}
5- {{.Readme}}
6+ <div class="markdown">
7+ {{.Readme}}
8+ </div>
9 {{end}}
+7,
-7
1@@ -5,10 +5,10 @@
2
3 {{define "content"}}
4 <div>
5- <div class="text-md text-transform-none mb">
6+ <div class="breadcrumb">
7 {{range .Tree.Crumbs}}
8 {{if .IsLast}}
9- <span class="font-bold">{{.Text}}</span>
10+ <span class="breadcrumb__current">{{.Text}}</span>
11 {{else}}
12 <a href="{{.URL}}">{{.Text}}</a> {{if .IsLast}}{{else}}/{{end}}
13 {{end}}
14@@ -16,8 +16,8 @@
15 </div>
16
17 {{range .Tree.Items}}
18- <div class="flex justify-between items-center gap-2 p tree-row border-b">
19- <div class="flex-1 tree-path flex items-center gap">
20+ <div class="file-list__row">
21+ <div class="file-list__path">
22 {{if .IsDir}}
23 <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="16" width="16" viewBox="0 0 512 512">
24 <path d="M0 96C0 60.7 28.7 32 64 32H196.1c19.1 0 37.4 7.6 50.9 21.1L289.9 96H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM64 80c-8.8 0-16 7.2-16 16V416c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16H286.6c-10.6 0-20.8-4.2-28.3-11.7L213.1 87c-4.5-4.5-10.6-7-17-7H64z"/>
25@@ -31,14 +31,14 @@
26 <a href="{{.URL}}">{{.Name}}</a>
27 </div>
28
29- <div class="flex items-center gap">
30+ <div class="file-list__meta">
31 {{if $.Repo.HideTreeLastCommit}}
32 {{else}}
33- <div class="flex-1 tree-commit">
34+ <div class="file-list__commit">
35 <a href="{{.CommitURL}}" title="{{.Summary}}">{{.When}}</a>
36 </div>
37 {{end}}
38- <div class="tree-size">
39+ <div class="file-list__size">
40 {{if .IsDir}}
41 {{else}}
42 {{if .IsTextFile}}{{.NumLines}} L{{else}}{{.Size}}{{end}}
+0,
-173
1@@ -1,173 +0,0 @@
2-pre {
3- border: 1px solid var(--border);
4- padding: var(--grid-height);
5-}
6-
7-body {
8- max-width: 900px;
9-}
10-
11-.border-b {
12- border-bottom: 1px solid var(--border);
13-}
14-
15-.border-b:last-child {
16- border-bottom: 0;
17-}
18-
19-.box {
20- margin: 1rem 0;
21- padding: var(--grid-height);
22- border: 1px solid var(--border);
23-}
24-
25-.tree-size {
26- width: 60px;
27- text-align: right;
28-}
29-
30-.tree-path {
31- text-wrap: wrap;
32-}
33-
34-/* Commit Detail */
35-.metadata-grid {
36- display: grid;
37- grid-template-columns: max-content 1fr;
38- gap: 0.5rem 1.5rem;
39- align-items: center;
40- background-color: var(--pre);
41- padding: 1rem;
42- border-radius: 4px;
43- border: 1px solid var(--grey);
44-}
45-
46-.meta-label {
47- color: var(--grey-light);
48- text-align: right;
49- font-weight: 600;
50- text-transform: uppercase;
51- font-size: 0.8rem;
52-}
53-
54-.meta-value {
55- color: var(--text-color);
56-}
57-
58-/* Update existing .diff-file to be more distinct */
59-.diff-file {
60- align-items: center;
61- height: 48px; /* Slightly slimmer */
62- position: sticky;
63- top: 0;
64- left: 0;
65- background-color: var(--bg-color);
66- border-bottom: 2px solid var(--grey);
67- border-top: 1px solid var(--grey);
68- padding: 0 1rem;
69- margin: 2rem 0 0 0;
70- z-index: 10;
71- font-weight: bold;
72-}
73-
74-.white-space-bs {
75- white-space: break-spaces;
76-}
77-
78-.mb-0 {
79- margin-bottom: 0;
80-}
81-
82-@media only screen and (max-width: 900px) {
83- .tree-commit {
84- display: none;
85- }
86-}
87-
88-/* --- High-Contrast UI Updates --- */
89-
90-/* Header & Nav */
91-.nav-menu {
92- gap: 1.5rem;
93- margin: 1rem 0;
94- border-bottom: 1px solid var(--border);
95- padding-bottom: 0.5rem;
96-}
97-
98-.nav-menu a, .nav-menu span.active {
99- color: var(--grey-light);
100- font-weight: 600;
101- text-transform: uppercase;
102- font-size: 0.9rem;
103- text-decoration: none;
104- padding-bottom: 0.4rem;
105- border-bottom: 2px solid transparent;
106- transition: all 0.2s ease;
107-}
108-
109-.nav-menu span.font-bold {
110- color: var(--text-color);
111- font-weight: 600;
112- text-transform: uppercase;
113- font-size: 0.9rem;
114- padding-bottom: 0.4rem;
115- border-bottom: 2px solid transparent;
116-}
117-
118-.nav-menu a:hover, .nav-menu span.active {
119- color: var(--text-color);
120- border-bottom: 2px solid var(--link-color);
121-}
122-
123-/* Commit List */
124-.commit-row {
125- border-bottom: 1px solid var(--grey);
126- transition: background-color 0.2s ease;
127- padding: 1rem 0.5rem;
128- margin: 0 -0.5rem; /* pull out to allow hover background to extend */
129- border-radius: 4px;
130-}
131-
132-.commit-row:hover {
133- background-color: var(--pre);
134-}
135-
136-.commit-row:last-child {
137- border-bottom: none;
138-}
139-
140-.commit-hash {
141- color: var(--text-color);
142-}
143-.commit-hash a {
144- color: inherit;
145- text-decoration: none;
146-}
147-.commit-hash a:hover {
148- text-decoration: underline;
149-}
150-
151-.truncate {
152- overflow: hidden;
153- text-overflow: ellipsis;
154- white-space: nowrap;
155-}
156-
157-/* Clone URL in footer - summary page only */
158-.clone-url-container {
159- text-align: left;
160- margin-bottom: calc(var(--line-height) * 1.5);
161-}
162-
163-.clone-url-title {
164- color: var(--grey-light);
165- font-size: 0.8rem;
166- font-weight: 600;
167- text-transform: uppercase;
168-}
169-
170-.clone-url-text {
171- color: var(--text-color);
172- font-size: 0.9rem;
173-}
174-
+978,
-0
1@@ -0,0 +1,978 @@
2+/* ==== CSS VARIABLES ==== */
3+:root {
4+ --line-height: 1.3rem;
5+ --grid-height: 0.65rem;
6+
7+ /* Dark theme defaults (overridden by vars.css) */
8+ --bg-color: #282a36;
9+ --text-color: #f8f8f2;
10+ --border: #6272a4;
11+ --link-color: #8be9fd;
12+ --hover: #ff79c6;
13+ --visited: #bd93f9;
14+ --white: #f2f2f2;
15+ --white-light: #f2f2f2;
16+ --white-dark: #e8e8e8;
17+ --grey: #414558;
18+ --grey-light: #6a708e;
19+ --code: #414558;
20+ --pre: #252525;
21+ --blockquote: #bd93f9;
22+ --blockquote-bg: #353548;
23+}
24+
25+/* ==== BASE RESET ==== */
26+*,
27+::before,
28+::after {
29+ box-sizing: border-box;
30+}
31+
32+::-moz-focus-inner {
33+ border-style: none;
34+ padding: 0;
35+}
36+
37+:-moz-focusring {
38+ outline: 1px dotted ButtonText;
39+}
40+
41+:-moz-ui-invalid {
42+ box-shadow: none;
43+}
44+
45+html {
46+ background-color: var(--bg-color);
47+ color: var(--text-color);
48+ font-size: 16px;
49+ line-height: var(--line-height);
50+ font-family:
51+ -apple-system,
52+ BlinkMacSystemFont,
53+ "Segoe UI",
54+ Roboto,
55+ Oxygen,
56+ Ubuntu,
57+ Cantarell,
58+ "Fira Sans",
59+ "Droid Sans",
60+ "Helvetica Neue",
61+ Arial,
62+ sans-serif,
63+ "Apple Color Emoji",
64+ "Segoe UI Emoji",
65+ "Segoe UI Symbol";
66+ -webkit-text-size-adjust: 100%;
67+ -moz-tab-size: 4;
68+ tab-size: 4;
69+}
70+
71+body {
72+ margin: 0 auto;
73+ max-width: 900px;
74+}
75+
76+img {
77+ max-width: 100%;
78+ height: auto;
79+}
80+
81+b,
82+strong {
83+ font-weight: bold;
84+}
85+
86+code,
87+kbd,
88+samp,
89+pre {
90+ font-family: monospace;
91+}
92+
93+code,
94+kbd,
95+samp {
96+ border: 2px solid var(--code);
97+}
98+
99+pre>code {
100+ background-color: inherit;
101+ padding: 0;
102+ border: none;
103+ border-radius: 0;
104+}
105+
106+code {
107+ font-size: 90%;
108+ border-radius: 0.3rem;
109+ padding: 0.025rem 0.3rem;
110+}
111+
112+pre {
113+ font-size: 0.8rem;
114+ border-radius: 1px;
115+ padding: var(--line-height);
116+ overflow-x: auto;
117+ background-color: var(--pre);
118+ border: 1px solid var(--border);
119+}
120+
121+small {
122+ font-size: 0.8rem;
123+}
124+
125+h1,
126+h2,
127+h3,
128+h4 {
129+ margin: 0;
130+ padding: 0;
131+ border: 0;
132+ font-style: normal;
133+ font-weight: inherit;
134+ font-size: inherit;
135+ font-family: monospace;
136+}
137+
138+path {
139+ fill: var(--text-color);
140+ stroke: var(--text-color);
141+}
142+
143+hr {
144+ color: inherit;
145+ border: 0;
146+ height: 2px;
147+ background: var(--grey);
148+ margin: calc(var(--grid-height) - 2px) auto;
149+ margin-top: calc(var(--line-height) * 2);
150+}
151+
152+a {
153+ text-decoration: none;
154+ color: var(--link-color);
155+}
156+
157+a:hover,
158+a:visited:hover {
159+ text-decoration: underline;
160+}
161+
162+a:visited {
163+ color: var(--visited);
164+}
165+
166+section {
167+ margin-bottom: 1.4rem;
168+}
169+
170+section:last-child {
171+ margin-bottom: 0;
172+}
173+
174+header {
175+ margin: 1rem auto;
176+}
177+
178+p {
179+ margin-top: var(--line-height);
180+ margin-bottom: var(--line-height);
181+}
182+
183+article {
184+ overflow-wrap: break-word;
185+}
186+
187+blockquote {
188+ border-left: 5px solid var(--blockquote);
189+ background-color: var(--blockquote-bg);
190+ padding: var(--grid-height);
191+ margin: var(--line-height) 0;
192+}
193+
194+blockquote>p {
195+ margin: 0;
196+}
197+
198+blockquote code {
199+ border: 1px solid var(--blockquote);
200+}
201+
202+ul,
203+ol {
204+ padding: 0 15px;
205+ list-style-position: inside;
206+ list-style-type: square;
207+ margin: var(--grid-height) 0;
208+}
209+
210+ol ul,
211+ol ol,
212+ul ol,
213+ul ul {
214+ padding: 0 0 0 var(--line-height);
215+ margin: 0;
216+}
217+
218+li {
219+ margin: var(--grid-height) 0;
220+ padding: 0;
221+}
222+
223+li::marker {
224+ line-height: 0;
225+ color: var(--grey-light);
226+}
227+
228+table {
229+ border-collapse: collapse;
230+ margin: var(--line-height) 0;
231+}
232+
233+th,
234+td {
235+ border: 1px solid var(--white);
236+ padding: var(--grid-height);
237+}
238+
239+footer {
240+ text-align: center;
241+ margin-bottom: calc(var(--line-height) * 3);
242+}
243+
244+dt {
245+ font-weight: bold;
246+}
247+
248+dd {
249+ margin-left: 0;
250+}
251+
252+dd:not(:last-child) {
253+ margin-bottom: 0.5rem;
254+}
255+
256+figure {
257+ margin: 0;
258+}
259+
260+sup {
261+ line-height: 0;
262+}
263+
264+/* ==== LAYOUT PATTERNS ==== */
265+.stack {
266+ display: flex;
267+ flex-direction: column;
268+ gap: var(--grid-height);
269+}
270+
271+.stack--lg {
272+ gap: var(--line-height);
273+}
274+
275+.cluster {
276+ display: flex;
277+ align-items: center;
278+ gap: var(--grid-height);
279+}
280+
281+.cluster--xs {
282+ gap: 0.25rem;
283+}
284+
285+.split {
286+ display: flex;
287+ justify-content: space-between;
288+ align-items: center;
289+}
290+
291+.split--start {
292+ align-items: flex-start;
293+}
294+
295+/* ==== SITE COMPONENTS ==== */
296+
297+/* Site Header */
298+.site-header {
299+ display: flex;
300+ flex-direction: column;
301+}
302+
303+.site-header__title {
304+ font-size: 1rem;
305+ font-weight: bold;
306+ line-height: var(--line-height);
307+ text-transform: uppercase;
308+ display: flex;
309+ gap: var(--grid-height);
310+ padding: 0;
311+ margin: 0;
312+}
313+
314+.site-header__desc {
315+ font-style: italic;
316+ color: var(--grey-light);
317+ margin-top: var(--grid-height);
318+}
319+
320+/* Navigation */
321+.nav-menu {
322+ display: flex;
323+ align-items: center;
324+ gap: 1.5rem;
325+ margin: 1rem 0;
326+ border-bottom: 1px solid var(--border);
327+ padding-bottom: 0.5rem;
328+}
329+
330+.nav-menu a,
331+.nav-menu span.active {
332+ color: var(--grey-light);
333+ font-weight: 600;
334+ text-transform: uppercase;
335+ font-size: 0.9rem;
336+ text-decoration: none;
337+ padding-bottom: 0.4rem;
338+ border-bottom: 2px solid transparent;
339+ transition: all 0.2s ease;
340+}
341+
342+.nav-menu a:hover,
343+.nav-menu span.active {
344+ color: var(--text-color);
345+ border-bottom: 2px solid var(--link-color);
346+}
347+
348+.nav-menu span.font-bold {
349+ color: var(--text-color);
350+ font-weight: 600;
351+ text-transform: uppercase;
352+ font-size: 0.9rem;
353+ padding-bottom: 0.4rem;
354+ border-bottom: 2px solid transparent;
355+}
356+
357+/* Last Commit Bar (summary page) */
358+.last-commit-bar {
359+ display: flex;
360+ justify-content: space-between;
361+ align-items: center;
362+ margin-top: var(--grid-height);
363+ margin-bottom: var(--grid-height);
364+ font-size: 0.8rem;
365+ color: var(--grey-light);
366+}
367+
368+.last-commit-bar__info {
369+ display: flex;
370+ align-items: center;
371+ gap: 0.25rem;
372+ overflow: hidden;
373+ text-overflow: ellipsis;
374+ white-space: nowrap;
375+}
376+
377+.last-commit-bar__info svg {
378+ color: var(--white);
379+}
380+
381+.last-commit-bar__info a {
382+ color: var(--white);
383+}
384+
385+.last-commit-bar__info a:hover {
386+ color: var(--hover);
387+}
388+
389+.last-commit-bar__time {
390+ font-family: monospace;
391+}
392+
393+/* Commit List */
394+.commit-list {
395+ display: flex;
396+ flex-direction: column;
397+ gap: var(--line-height);
398+}
399+
400+.commit-list__count {
401+ margin-bottom: var(--grid-height);
402+}
403+
404+/* Commit Item */
405+.commit-item {
406+ border-bottom: 1px solid var(--grey);
407+ transition: background-color 0.2s ease;
408+ padding: var(--grid-height) 0.5rem;
409+ margin: 0 -0.5rem;
410+ border-radius: 4px;
411+}
412+
413+.commit-item:hover {
414+ background-color: var(--pre);
415+}
416+
417+.commit-item:last-child {
418+ border-bottom: none;
419+}
420+
421+.commit-item__header {
422+ display: flex;
423+ justify-content: space-between;
424+ align-items: flex-start;
425+ margin-bottom: var(--grid-height);
426+}
427+
428+.commit-item__content {
429+ flex: 1;
430+ margin-right: 1rem;
431+}
432+
433+.commit-item__message {
434+ margin: 0;
435+ white-space: break-spaces;
436+ font-weight: bold;
437+ font-size: 1rem;
438+ line-height: var(--line-height);
439+ text-transform: uppercase;
440+}
441+
442+.commit-item__meta {
443+ display: flex;
444+ align-items: center;
445+ gap: 0.25rem;
446+ font-size: 0.8rem;
447+ color: var(--grey-light);
448+ margin-top: var(--grid-height);
449+}
450+
451+.commit-item__actions {
452+ display: flex;
453+ flex-direction: column;
454+ align-items: flex-end;
455+ gap: 0.25rem;
456+}
457+
458+.commit-item__hash {
459+ font-family: monospace;
460+ font-size: 0.8rem;
461+ font-weight: bold;
462+}
463+
464+.commit-item__hash a {
465+ color: var(--text-color);
466+ text-decoration: none;
467+}
468+
469+.commit-item__hash a:hover {
470+ text-decoration: underline;
471+}
472+
473+.commit-item__refs {
474+ display: flex;
475+ gap: 0.25rem;
476+ flex-wrap: wrap;
477+ justify-content: flex-end;
478+ margin-top: var(--grid-height);
479+}
480+
481+.commit-item__ref {
482+ font-family: monospace;
483+ font-size: 0.8rem;
484+}
485+
486+/* Page Title */
487+.page-title {
488+ font-size: 1rem;
489+ font-weight: bold;
490+ line-height: var(--line-height);
491+ margin-top: calc(var(--line-height) * 2);
492+ margin-bottom: var(--line-height);
493+ text-transform: uppercase;
494+ color: var(--white-dark);
495+}
496+
497+/* File List (Tree View) */
498+.file-list__row {
499+ display: flex;
500+ justify-content: space-between;
501+ align-items: center;
502+ gap: var(--line-height);
503+ padding: var(--grid-height);
504+ border-bottom: 1px solid var(--border);
505+}
506+
507+.file-list__row:last-child {
508+ border-bottom: none;
509+}
510+
511+.file-list__path {
512+ flex: 1;
513+ display: flex;
514+ align-items: center;
515+ gap: var(--grid-height);
516+ text-wrap: wrap;
517+}
518+
519+.file-list__meta {
520+ display: flex;
521+ align-items: center;
522+ gap: var(--grid-height);
523+}
524+
525+.file-list__commit {
526+ flex: 1;
527+}
528+
529+.file-list__size {
530+ width: 60px;
531+ text-align: right;
532+}
533+
534+/* Metadata Grid (Commit Detail) */
535+.metadata {
536+ display: grid;
537+ grid-template-columns: max-content 1fr;
538+ gap: 0.5rem 1.5rem;
539+ align-items: center;
540+ background-color: var(--pre);
541+ padding: 1rem;
542+ border-radius: 4px;
543+ border: 1px solid var(--grey);
544+ font-size: 0.8rem;
545+ margin-bottom: calc(var(--line-height) * 2);
546+}
547+
548+.metadata__label {
549+ color: var(--grey-light);
550+ text-align: right;
551+ font-weight: 600;
552+ text-transform: uppercase;
553+ font-size: 0.8rem;
554+}
555+
556+.metadata__value {
557+ color: var(--text-color);
558+}
559+
560+.metadata__value--code {
561+ font-family: monospace;
562+}
563+
564+/* Diff Styles */
565+.diff-file__header {
566+ display: flex;
567+ justify-content: space-between;
568+ align-items: center;
569+ font-family: monospace;
570+ padding: var(--grid-height) 0;
571+ position: sticky;
572+ top: 0;
573+ left: 0;
574+ background-color: var(--bg-color);
575+ border-bottom: 2px solid var(--grey);
576+ border-top: 1px solid var(--grey);
577+ padding: 0 1rem;
578+ margin: 2rem 0 0 0;
579+ z-index: 10;
580+ font-weight: bold;
581+ height: 48px;
582+}
583+
584+.diff-stat--add {
585+ color: #50fa7b;
586+ font-weight: bold;
587+}
588+
589+.diff-stat--del {
590+ color: #ff5555;
591+ font-weight: bold;
592+}
593+
594+/* File Header Box */
595+.file-header {
596+ margin: 1rem 0;
597+ padding: var(--grid-height);
598+ border: 1px solid var(--border);
599+ border-radius: 4px;
600+ font-family: monospace;
601+}
602+
603+.file-header__row {
604+ display: flex;
605+ align-items: center;
606+ justify-content: space-between;
607+}
608+
609+.file-header__commit {
610+ flex: 1;
611+}
612+
613+.file-header__hash {
614+ font-family: monospace;
615+}
616+
617+.file-header__author {
618+ display: flex;
619+ align-items: center;
620+ margin-top: var(--grid-height);
621+}
622+
623+/* Box Component */
624+.box {
625+ margin: 1rem 0;
626+ padding: var(--grid-height);
627+ border: 1px solid var(--border);
628+ border-radius: 4px;
629+}
630+
631+.box__title {
632+ font-size: 1rem;
633+ font-weight: bold;
634+ line-height: var(--line-height);
635+ margin-bottom: var(--grid-height);
636+ text-transform: uppercase;
637+}
638+
639+.box__stats {
640+ margin-top: var(--grid-height);
641+}
642+
643+/* Clone URL */
644+.clone-url {
645+ text-align: left;
646+ margin-bottom: calc(var(--line-height) * 1.5);
647+}
648+
649+.clone-url__label {
650+ color: var(--grey-light);
651+ font-size: 0.8rem;
652+ font-weight: 600;
653+ text-transform: uppercase;
654+}
655+
656+.clone-url__command {
657+ color: var(--text-color);
658+ font-size: 0.9rem;
659+ font-family: monospace;
660+}
661+
662+/* Breadcrumb */
663+.breadcrumb {
664+ font-size: 1rem;
665+ font-weight: bold;
666+ line-height: var(--line-height);
667+ margin-bottom: var(--grid-height);
668+ text-transform: none;
669+}
670+
671+.breadcrumb__current {
672+ font-weight: bold;
673+}
674+
675+/* Content Heading */
676+.content-heading {
677+ font-size: 1rem;
678+ font-weight: bold;
679+ line-height: var(--line-height);
680+ margin-top: var(--line-height);
681+ margin-bottom: var(--line-height);
682+ text-transform: none;
683+ color: var(--white-dark);
684+}
685+
686+/* ==== MARKDOWN CONTENT ==== */
687+.markdown {
688+ overflow-wrap: break-word;
689+}
690+
691+/* Headings */
692+.markdown h1,
693+.markdown h2,
694+.markdown h3,
695+.markdown h4 {
696+ margin: 0;
697+ padding: 0;
698+ font-family: monospace;
699+ font-weight: bold;
700+ line-height: var(--line-height);
701+ text-transform: uppercase;
702+}
703+
704+.markdown h1 {
705+ font-size: var(--line-height);
706+ margin-top: var(--line-height);
707+ margin-bottom: var(--grid-height);
708+}
709+
710+.markdown h2,
711+.markdown h3,
712+.markdown h4 {
713+ font-size: 1rem;
714+ margin-top: var(--line-height);
715+ margin-bottom: var(--line-height);
716+ color: var(--white-dark);
717+}
718+
719+.markdown h1 a,
720+.markdown h2 a,
721+.markdown h3 a,
722+.markdown h4 a {
723+ color: var(--grey-light);
724+ text-decoration: none;
725+}
726+
727+.markdown h1 a:hover,
728+.markdown h2 a:hover,
729+.markdown h3 a:hover,
730+.markdown h4 a:hover {
731+ text-decoration: underline;
732+}
733+
734+/* Code inline */
735+.markdown code {
736+ font-family: monospace;
737+ font-size: 90%;
738+ border: 2px solid var(--code);
739+ border-radius: 0.3rem;
740+ padding: 0.025rem 0.3rem;
741+ background-color: transparent;
742+ text-transform: none;
743+}
744+
745+/* Code blocks */
746+.markdown pre {
747+ font-family: monospace;
748+ font-size: 0.8rem;
749+ border-radius: 1px;
750+ padding: var(--line-height);
751+ overflow-x: auto;
752+ background-color: var(--pre);
753+ border: 1px solid var(--border);
754+}
755+
756+.markdown pre>code {
757+ background-color: inherit;
758+ padding: 0;
759+ border: none;
760+ border-radius: 0;
761+}
762+
763+/* Paragraphs */
764+.markdown p {
765+ margin-top: var(--line-height);
766+ margin-bottom: var(--line-height);
767+}
768+
769+/* Lists */
770+.markdown ul,
771+.markdown ol {
772+ padding: 0 15px;
773+ list-style-position: inside;
774+ list-style-type: square;
775+ margin: var(--grid-height) 0;
776+}
777+
778+.markdown li {
779+ margin: var(--grid-height) 0;
780+ padding: 0;
781+}
782+
783+.markdown li::marker {
784+ line-height: 0;
785+ color: var(--grey-light);
786+}
787+
788+/* Nested lists */
789+.markdown ol ul,
790+.markdown ol ol,
791+.markdown ul ol,
792+.markdown ul ul {
793+ padding: 0 0 0 var(--line-height);
794+ margin: 0;
795+}
796+
797+/* Blockquotes */
798+.markdown blockquote {
799+ border-left: 5px solid var(--blockquote);
800+ background-color: var(--blockquote-bg);
801+ padding: var(--grid-height);
802+ margin: var(--line-height) 0;
803+}
804+
805+.markdown blockquote>p {
806+ margin: 0;
807+}
808+
809+.markdown blockquote code {
810+ border: 1px solid var(--blockquote);
811+}
812+
813+/* Tables */
814+.markdown table {
815+ border-collapse: collapse;
816+ margin: var(--line-height) 0;
817+}
818+
819+.markdown th,
820+.markdown td {
821+ border: 1px solid var(--white);
822+ padding: var(--grid-height);
823+}
824+
825+/* Horizontal rules */
826+.markdown hr {
827+ color: inherit;
828+ border: 0;
829+ height: 2px;
830+ background: var(--grey);
831+ margin: calc(var(--grid-height) - 2px) auto;
832+}
833+
834+/* Images */
835+.markdown img {
836+ max-width: 100%;
837+ height: auto;
838+}
839+
840+/* Strong/Emphasis */
841+.markdown strong {
842+ font-weight: bold;
843+}
844+
845+.markdown em {
846+ font-style: italic;
847+}
848+
849+/* Links */
850+.markdown a {
851+ color: var(--link-color);
852+ text-decoration: none;
853+}
854+
855+.markdown a:hover {
856+ text-decoration: underline;
857+}
858+
859+.markdown a:visited {
860+ color: var(--visited);
861+}
862+
863+/* ==== RESPONSIVE MEDIA QUERIES ==== */
864+
865+@media only screen and (max-width: 40em) {
866+ body {
867+ padding: 0 var(--grid-height);
868+ }
869+
870+ header {
871+ margin: 0;
872+ }
873+
874+ /* Stack navigation on mobile */
875+ .nav-menu {
876+ flex-wrap: wrap;
877+ gap: 0.75rem;
878+ }
879+
880+ /* Commit list adjustments */
881+ .commit-item__header {
882+ flex-direction: column;
883+ gap: var(--grid-height);
884+ }
885+
886+ .commit-item__content {
887+ margin-right: 0;
888+ width: 100%;
889+ }
890+
891+ .commit-item__actions {
892+ align-items: flex-start;
893+ width: 100%;
894+ }
895+
896+ /* File list adjustments */
897+ .file-list__row {
898+ flex-direction: column;
899+ align-items: flex-start;
900+ gap: var(--grid-height);
901+ }
902+
903+ .file-list__path {
904+ width: 100%;
905+ }
906+
907+ .file-list__meta {
908+ width: 100%;
909+ justify-content: space-between;
910+ }
911+
912+ /* Hide tree commit info on small screens */
913+ .file-list__commit {
914+ display: none;
915+ }
916+
917+ /* Metadata grid becomes vertical */
918+ .metadata {
919+ grid-template-columns: 1fr;
920+ gap: 0.25rem;
921+ }
922+
923+ .metadata__label {
924+ text-align: left;
925+ margin-top: 0.5rem;
926+ }
927+
928+ .metadata__label:first-child {
929+ margin-top: 0;
930+ }
931+
932+ /* Diff file header */
933+ .diff-file__header {
934+ flex-direction: column;
935+ align-items: flex-start;
936+ height: auto;
937+ padding: var(--grid-height);
938+ gap: var(--grid-height);
939+ }
940+
941+ /* Last commit bar */
942+ .last-commit-bar {
943+ flex-direction: column;
944+ align-items: flex-start;
945+ gap: var(--grid-height);
946+ }
947+
948+ .last-commit-bar__info {
949+ white-space: normal;
950+ }
951+}
952+
953+@media only screen and (max-width: 900px) {
954+
955+ /* Hide tree commit column on medium screens */
956+ .file-list__commit {
957+ display: none;
958+ }
959+}
960+
961+/* Commit Message (in commit detail page) */
962+.commit-message {
963+ margin: 0;
964+ margin-bottom: calc(var(--line-height) * 2);
965+ white-space: break-spaces;
966+ font-weight: bold;
967+ font-size: 1rem;
968+ line-height: var(--line-height);
969+ text-transform: none;
970+}
971+
972+/* File List Summary (in commit page) */
973+.file-list-summary {
974+ margin-top: var(--grid-height);
975+}
976+
977+.file-list-summary__item {
978+ margin: var(--grid-height) 0;
979+}
+0,
-761
1@@ -1,761 +0,0 @@
2-*,
3-::before,
4-::after {
5- box-sizing: border-box;
6-}
7-
8-::-moz-focus-inner {
9- border-style: none;
10- padding: 0;
11-}
12-:-moz-focusring {
13- outline: 1px dotted ButtonText;
14-}
15-:-moz-ui-invalid {
16- box-shadow: none;
17-}
18-
19-:root {
20- --line-height: 1.3rem;
21- --grid-height: 0.65rem;
22-}
23-
24-@media (prefers-color-scheme: light) {
25- :root {
26- --white: #2e3f53;
27- --white-light: #cfe0f4;
28- --white-dark: #6c6a6a;
29- --code: #52576f;
30- --pre: #e1e7ee;
31- --bg-color: #f4f4f4;
32- --text-color: #24292f;
33- --link-color: #005cc5;
34- --visited: #6f42c1;
35- --blockquote: #005cc5;
36- --blockquote-bg: #cfe0f4;
37- --hover: #c11e7a;
38- --grey: #ccc;
39- --grey-light: #6a708e;
40- }
41-}
42-
43-@media (prefers-color-scheme: dark) {
44- :root {
45- --white: #f2f2f2;
46- --white-light: #f2f2f2;
47- --white-dark: #e8e8e8;
48- --code: #414558;
49- --pre: #252525;
50- --bg-color: #282a36;
51- --text-color: #f2f2f2;
52- --link-color: #8be9fd;
53- --visited: #bd93f9;
54- --blockquote: #bd93f9;
55- --blockquote-bg: #353548;
56- --hover: #ff80bf;
57- --grey: #414558;
58- --grey-light: #6a708e;
59- }
60-}
61-
62-html {
63- background-color: var(--bg-color);
64- color: var(--text-color);
65- font-size: 16px;
66- line-height: var(--line-height);
67- font-family:
68- -apple-system,
69- BlinkMacSystemFont,
70- "Segoe UI",
71- Roboto,
72- Oxygen,
73- Ubuntu,
74- Cantarell,
75- "Fira Sans",
76- "Droid Sans",
77- "Helvetica Neue",
78- Arial,
79- sans-serif,
80- "Apple Color Emoji",
81- "Segoe UI Emoji",
82- "Segoe UI Symbol";
83- -webkit-text-size-adjust: 100%;
84- -moz-tab-size: 4;
85- -o-tab-size: 4;
86- tab-size: 4;
87-}
88-
89-body {
90- margin: 0 auto;
91-}
92-
93-img {
94- max-width: 100%;
95- height: auto;
96-}
97-
98-b,
99-strong {
100- font-weight: bold;
101-}
102-
103-code,
104-kbd,
105-samp,
106-pre {
107- font-family: monospace;
108-}
109-
110-code,
111-kbd,
112-samp {
113- border: 2px solid var(--code);
114-}
115-
116-pre > code {
117- background-color: inherit;
118- padding: 0;
119- border: none;
120- border-radius: 0;
121-}
122-
123-code {
124- font-size: 90%;
125- border-radius: 0.3rem;
126- padding: 0.025rem 0.3rem;
127-}
128-
129-pre {
130- font-size: 0.8rem;
131- border-radius: 1px;
132- padding: var(--line-height);
133- overflow-x: auto;
134- background-color: var(--pre) !important;
135-}
136-
137-small {
138- font-size: 0.8rem;
139-}
140-
141-details {
142- border: 2px solid var(--grey-light);
143- padding: calc(var(--grid-height) - 2px) 1ch;
144- margin-bottom: var(--grid-height);
145-}
146-
147-details[open] summary {
148- margin-bottom: var(--grid-height);
149-}
150-
151-summary {
152- display: list-item;
153- cursor: pointer;
154-}
155-
156-h1,
157-h2,
158-h3,
159-h4 {
160- margin: 0;
161- padding: 0;
162- border: 0;
163- font-style: normal;
164- font-weight: inherit;
165- font-size: inherit;
166- font-family: monospace;
167-}
168-
169-path {
170- fill: var(--text-color);
171- stroke: var(--text-color);
172-}
173-
174-hr {
175- color: inherit;
176- border: 0;
177- height: 2px;
178- background: var(--grey);
179- margin: calc(var(--grid-height) - 2px) auto;
180-}
181-
182-a {
183- text-decoration: none;
184- color: var(--link-color);
185-}
186-
187-a:hover,
188-a:visited:hover {
189- text-decoration: underline;
190-}
191-
192-a:visited {
193- color: var(--visited);
194-}
195-
196-section {
197- margin-bottom: 1.4rem;
198-}
199-
200-section:last-child {
201- margin-bottom: 0;
202-}
203-
204-header {
205- margin: 1rem auto;
206-}
207-
208-p {
209- margin-top: var(--line-height);
210- margin-bottom: var(--line-height);
211-}
212-
213-article {
214- overflow-wrap: break-word;
215-}
216-
217-blockquote {
218- border-left: 5px solid var(--blockquote);
219- background-color: var(--blockquote-bg);
220- padding: var(--grid-height);
221- margin: var(--line-height) 0;
222-}
223-
224-blockquote > p {
225- margin: 0;
226-}
227-
228-blockquote code {
229- border: 1px solid var(--blockquote);
230-}
231-
232-ul,
233-ol {
234- padding: 0 15px;
235- list-style-position: inside;
236- list-style-type: square;
237- margin: var(--grid-height) 0;
238-}
239-
240-ul[style*="list-style-type: none;"] {
241- padding: 0;
242-}
243-
244-ol ul, ol ol, ul ol, ul ul {
245- padding: 0 0 0 var(--line-height);
246- margin: 0;
247-}
248-
249-li {
250- margin: var(--grid-height) 0;
251- padding: 0;
252-}
253-
254-li::marker {
255- line-height: 0;
256- color: var(--grey-light);
257-}
258-
259-li blockquote,
260-li pre {
261- display: inline-block;
262- margin: 0;
263- width: 100%;
264-}
265-
266-li pre {
267- padding: var(--grid-height);
268-}
269-
270-[role="list"] {
271- display: flex;
272- flex-direction: column;
273- gap: var(--grid-height);
274-}
275-
276-[role="list"] [role="list"] {
277- margin-left: 1.3rem;
278-}
279-
280-[role="listitem"] {
281- display: flex;
282- align-items: flex-start;
283- gap: 5px;
284-}
285-
286-[role="listitem"]:has(pre, img, blockquote) {
287- align-items: center;
288-}
289-
290-table {
291- border-collapse: collapse;
292- margin: var(--line-height) 0;
293-}
294-
295-th,
296-td {
297- border: 1px solid var(--white);
298- padding: var(--grid-height);
299-}
300-
301-footer {
302- text-align: center;
303- margin-bottom: calc(var(--line-height) * 3);
304-}
305-
306-dt {
307- font-weight: bold;
308-}
309-
310-dd {
311- margin-left: 0;
312-}
313-
314-dd:not(:last-child) {
315- margin-bottom: 0.5rem;
316-}
317-
318-figure {
319- margin: 0;
320-}
321-
322-sup {
323- line-height: 0;
324-}
325-
326-#toc {
327- margin-top: var(--line-height);
328-}
329-
330-.container {
331- max-width: 50em;
332- width: 100%;
333-}
334-
335-.container-sm {
336- max-width: 40em;
337- width: 100%;
338-}
339-
340-.mono {
341- font-family: monospace;
342-}
343-
344-.link-alt-hover,
345-.link-alt-hover:visited,
346-.link-alt-hover:visited:hover,
347-.link-alt-hover:hover {
348- color: var(--hover);
349- text-decoration: none;
350-}
351-
352-.link-alt-hover:visited:hover,
353-.link-alt-hover:hover {
354- text-decoration: underline;
355-}
356-
357-.link-alt,
358-.link-alt:visited,
359-.link-alt:visited:hover,
360-.link-alt:hover {
361- color: var(--white);
362- text-decoration: none;
363-}
364-
365-.link-alt:visited:hover,
366-.link-alt:hover {
367- text-decoration: underline;
368-}
369-
370-.text-2xl code, .text-xl code, .text-lg code, .text-md code {
371- text-transform: none;
372-}
373-
374-.text-2xl {
375- font-size: var(--line-height);
376- font-weight: bold;
377- line-height: var(--line-height);
378- margin-bottom: var(--grid-height);
379- text-transform: uppercase;
380-}
381-
382-.text-xl, .text-lg, .text-md {
383- font-size: 1rem;
384- font-weight: bold;
385- line-height: var(--line-height);
386- margin-bottom: var(--grid-height);
387- text-transform: uppercase;
388-}
389-
390-.text-sm {
391- font-size: 0.8rem;
392-}
393-
394-.w-full {
395- width: 100%;
396-}
397-
398-.border {
399- border: 2px solid var(--grey-light);
400-}
401-
402-.text-left {
403- text-align: left;
404-}
405-
406-.text-center {
407- text-align: center;
408-}
409-
410-.text-underline {
411- text-decoration: underline;
412- text-decoration-thickness: 2px;
413-}
414-
415-.text-hdr {
416- color: var(--hover);
417-}
418-
419-.font-bold {
420- font-weight: bold;
421-}
422-
423-.font-italic {
424- font-style: italic;
425-}
426-
427-.inline {
428- display: inline;
429-}
430-
431-.inline-block {
432- display: inline-block;
433-}
434-
435-.max-w-half {
436- max-width: 50%;
437-}
438-
439-.flex {
440- display: flex;
441-}
442-
443-.flex-col {
444- flex-direction: column;
445-}
446-
447-.flex-wrap {
448- flex-wrap: wrap;
449-}
450-
451-.items-center {
452- align-items: center;
453-}
454-
455-.m-0 {
456- margin: 0;
457-}
458-
459-.mt-0 {
460- margin-top: 0;
461-}
462-
463-.mt {
464- margin-top: var(--grid-height);
465-}
466-
467-.mt-2 {
468- margin-top: var(--line-height);
469-}
470-
471-.mt-4 {
472- margin-top: calc(var(--line-height) * 2);
473-}
474-
475-.mb {
476- margin-bottom: var(--grid-height);
477-}
478-
479-.mb-2 {
480- margin-bottom: var(--line-height);
481-}
482-
483-.mb-4 {
484- margin-bottom: calc(var(--line-height) * 2);
485-}
486-
487-.mr {
488- margin-right: 0.5rem;
489-}
490-
491-.ml {
492- margin-left: 0.5rem;
493-}
494-
495-.my {
496- margin-top: var(--grid-height);
497- margin-bottom: var(--grid-height);
498-}
499-
500-.my-2 {
501- margin-top: var(--line-height);
502- margin-bottom: var(--line-height);
503-}
504-
505-.my-4 {
506- margin-top: calc(var(--line-height) * 2);
507- margin-bottom: calc(var(--line-height) * 2);
508-}
509-
510-.p-0 {
511- padding: 0;
512-}
513-
514-.px {
515- padding-left: 0.5rem;
516- padding-right: 0.5rem;
517-}
518-
519-.px-4 {
520- padding-left: 2rem;
521- padding-right: 2rem;
522-}
523-
524-.py {
525- padding-top: var(--grid-height);
526- padding-bottom: var(--grid-height);
527-}
528-
529-.py-4 {
530- padding-top: calc(var(--line-height) * 2);
531- padding-bottom: calc(var(--line-height) * 2);
532-}
533-
534-.justify-between {
535- justify-content: space-between;
536-}
537-
538-.justify-center {
539- justify-content: center;
540-}
541-
542-.gap {
543- gap: var(--grid-height);
544-}
545-
546-.gap-2 {
547- gap: var(--line-height);
548-}
549-
550-.group {
551- display: flex;
552- flex-direction: column;
553- gap: var(--grid-height);
554-}
555-
556-.group-2 {
557- display: flex;
558- flex-direction: column;
559- gap: var(--line-height);
560-}
561-
562-.group-h {
563- display: flex;
564- gap: var(--grid-height);
565- align-items: center;
566-}
567-
568-.flex-1 {
569- flex: 1;
570-}
571-
572-.items-end {
573- align-items: end;
574-}
575-
576-.items-start {
577- align-items: start;
578-}
579-
580-.justify-end {
581- justify-content: end;
582-}
583-
584-.font-grey-light {
585- color: var(--grey-light);
586-}
587-
588-.hidden {
589- display: none;
590-}
591-
592-.align-right {
593- text-align: right;
594-}
595-
596-.text-transform-none {
597- text-transform: none;
598-}
599-
600-/* ==== MARKDOWN ==== */
601-
602-.md h1,
603-.md h2,
604-.md h3,
605-.md h4 {
606- padding: 0;
607- margin: 0;
608- /* margin: 1.5rem 0 0.9rem 0; */
609- font-weight: bold;
610-}
611-
612-.md h1 a,
613-.md h2 a,
614-.md h3 a,
615-.md h4 a {
616- color: var(--grey-light);
617- text-decoration: none;
618-}
619-
620-h1 code, h2 code, h3 code, h4 code {
621- text-transform: none;
622-}
623-
624-.md h1 {
625- font-size: 1rem;
626- line-height: var(--line-height);
627- margin-top: calc(var(--line-height) * 2);
628- margin-bottom: var(--grid-height);
629- text-transform: uppercase;
630-}
631-
632-.md h2, .md h3, .md h4 {
633- font-size: 1rem;
634- line-height: var(--line-height);
635- margin-top: calc(var(--line-height) * 2);
636- margin-bottom: var(--line-height);
637- text-transform: uppercase;
638- color: var(--white-dark);
639-}
640-
641-/* ==== HELPERS ==== */
642-
643-.logo-header {
644- line-height: 1;
645- display: inline-block;
646- background-color: #ff79c6;
647- background-image: linear-gradient(to right, #ff5555, #ff79c6, #f8f859);
648- color: transparent;
649- background-clip: text;
650- border: 3px solid #ff79c6;
651- padding: 8px 10px 10px 10px;
652- border-radius: 10px;
653- background-size: 100%;
654- margin: 0;
655- -webkit-background-clip: text;
656- -moz-background-clip: text;
657- -webkit-text-fill-color: transparent;
658- -moz-text-fill-color: transparent;
659-}
660-
661-.btn {
662- border: 2px solid var(--link-color);
663- color: var(--link-color);
664- padding: 0.4rem 1rem;
665- font-weight: bold;
666- display: inline-block;
667-}
668-
669-.btn-link,
670-.btn-link:visited {
671- border: 2px solid var(--link-color);
672- color: var(--link-color);
673- padding: var(--grid-height);
674- text-decoration: none;
675- font-weight: bold;
676- display: inline-block;
677-}
678-
679-.box {
680- border: 2px solid var(--grey-light);
681- padding: var(--grid-height);
682-}
683-
684-.box-sm {
685- border: 2px solid var(--grey-light);
686- padding: var(--grid-height);
687-}
688-
689-.box-alert {
690- border: 2px solid var(--hover);
691- padding: var(--line-height);
692-}
693-
694-.box-sm-alert {
695- border: 2px solid var(--hover);
696- padding: var(--grid-height);
697-}
698-
699-.list-none {
700- list-style-type: none;
701-}
702-
703-.list-square {
704- list-style-type: square;
705-}
706-
707-.list-disc {
708- list-style-type: disc;
709-}
710-
711-.list-decimal {
712- list-style-type: decimal;
713-}
714-
715-.pill {
716- border: 1px solid var(--link-color);
717- color: var(--link-color);
718-}
719-
720-.pill-alert {
721- border: 1px solid var(--hover);
722- color: var(--hover);
723-}
724-
725-.pill-info {
726- border: 1px solid var(--visited);
727- color: var(--visited);
728-}
729-
730-@media only screen and (max-width: 40em) {
731- body {
732- padding: 0 var(--grid-height);
733- }
734-
735- header {
736- margin: 0;
737- }
738-
739- .flex-collapse {
740- flex-direction: column;
741- }
742-}
743-
744-#debug {
745- position: relative;
746-}
747-
748-#debug .debug-grid {
749- width: 100%;
750- height: 100%;
751- position: absolute;
752- top: 0;
753- left: 0;
754- right: 0;
755- bottom: 0;
756- z-index: -1;
757- background-image:
758- repeating-linear-gradient(var(--code) 0 1px, transparent 1px 100%),
759- repeating-linear-gradient(90deg, var(--code) 0 1px, transparent 1px 100%);
760- background-size: 1ch var(--grid-height);
761- margin: 0;
762-}