My own copy of Tangled :)
start styleen
+35
-31
+11
-11
appview/pages/templates/layouts/base.html
+11
-11
appview/pages/templates/layouts/base.html
···
11
11
<link href="/static/tw.css" rel="stylesheet" type="text/css" />
12
12
<title>{{ block "title" . }}tangled{{ end }}</title>
13
13
</head>
14
-
<body class="min-h-screen flex flex-col justify-between">
14
+
<body class="bg-slate-100 min-h-screen flex flex-col justify-between">
15
+
<div class="container mx-auto px-1 pt-4">
15
16
<header>
16
-
{{ block "topbar" . }}
17
-
{{ template "layouts/topbar" . }}
18
-
{{ end }}
17
+
{{ block "topbar" . }}
18
+
{{ template "layouts/topbar" . }}
19
+
{{ end }}
19
20
</header>
20
-
<div class="container mx-auto px-1 flex-grow">
21
-
<main class="content">{{ block "content" . }}{{ end }}</main>
22
-
<script src="/static/lucide.min.js"></script>
23
-
<script>
24
-
lucide.createIcons();
25
-
</script>
26
-
</div>
21
+
<main class="content">{{ block "content" . }}{{ end }}</main>
27
22
<footer class="mt-16 ">
28
23
{{ block "footer" . }}
29
24
{{ template "layouts/footer" . }}
30
25
{{ end }}
31
26
</footer>
27
+
<script src="/static/lucide.min.js"></script>
28
+
<script>
29
+
lucide.createIcons();
30
+
</script>
31
+
</div>
32
32
</body>
33
33
</html>
34
34
{{ end }}
+6
-6
appview/pages/templates/layouts/repobase.html
+6
-6
appview/pages/templates/layouts/repobase.html
···
1
1
{{ define "title" }}{{ .RepoInfo.FullName }}{{ end }}
2
2
3
3
{{ define "content" }}
4
-
<section id="repo-header" class="mb-4">
4
+
<section id="repo-header" class="mb-4 p-2">
5
5
<p class="text-xl">
6
6
<a
7
7
href="/{{ .RepoInfo.OwnerWithAt }}"
···
24
24
</span>
25
25
</section>
26
26
<section id="repo-links" class="min-h-screen flex flex-col">
27
-
<nav class="w-full mx-auto">
28
-
<div class="flex z-60 border-gray-200 border-b">
29
-
{{ $activeTabStyles := "border-gray-200 border-l border-r border-t border-b-0 -mb-px bg-white" }}
27
+
<nav class="w-full mx-auto ml-4">
28
+
<div class="flex z-60">
29
+
{{ $activeTabStyles := "-mb-px bg-white" }}
30
30
{{ $tabs := .RepoInfo.GetTabs }}
31
31
{{ range $item := $tabs }}
32
32
{{ $key := index $item 0 }}
···
37
37
hx-boost="true"
38
38
>
39
39
<div
40
-
class="px-4 py-2 mr-1 text-black min-w-[80px] text-center relative group-hover:bg-gray-200
40
+
class="px-4 py-2 mr-1 text-black min-w-[80px] text-center relative group-hover:bg-gray-200 rounded-t
41
41
{{ if eq $.Active $key }}
42
42
{{ $activeTabStyles }}
43
43
{{ end }}"
···
49
49
</div>
50
50
</nav>
51
51
<section
52
-
class="bg-white p-6 min-h-[200px] border-l border-r border-b border-gray-200 relative z-20 w-full mx-auto"
52
+
class="bg-white p-6 min-h-[200px] rounded relative z-20 w-full mx-auto"
53
53
>
54
54
{{ block "repoContent" . }}{{ end }}
55
55
</section>
+3
-3
appview/pages/templates/layouts/topbar.html
+3
-3
appview/pages/templates/layouts/topbar.html
···
1
1
{{ define "layouts/topbar" }}
2
-
{{ $linkstyle := "text-gray-400 hover:text-gray-900 no-underline" }}
3
-
<nav class="space-x-4 mb-4 py-2 border-b border-gray-200">
2
+
{{ $linkstyle := "text-black hover:text-gray-600 no-underline" }}
3
+
<nav class="space-x-4 mb-4 px-6 py-2 rounded bg-white">
4
4
<div class="container flex justify-between p-0">
5
5
<div id="left-items">
6
6
<a href="/" hx-boost="true" class="{{ $linkstyle }} flex gap-2">
···
17
17
<summary class="{{ $linkstyle }} cursor-pointer list-none">
18
18
{{ didOrHandle .Did .Handle }}
19
19
</summary>
20
-
<div class="absolute flex flex-col right-0 mt-4 p-2 w-48 bg-white border border-gray-200 z-50">
20
+
<div class="absolute flex flex-col right-0 mt-4 p-4 rounded w-48 bg-white border border-gray-200 z-50">
21
21
<a href="/{{ didOrHandle .Did .Handle }}"class="{{ $linkstyle }}">profile</a>
22
22
<a href="/knots"class="{{ $linkstyle }}">knots</a>
23
23
<a href="/settings"class="{{ $linkstyle }}">settings</a>
+5
-5
appview/pages/templates/repo/commit.html
+5
-5
appview/pages/templates/repo/commit.html
···
67
67
{{ $last := sub (len $diff) 1 }}
68
68
{{ range $idx, $hunk := $diff }}
69
69
{{ with $hunk }}
70
-
<section class="mt-4 border border-gray-200 w-full mx-auto">
70
+
<section class="mt-6 border border-gray-200 w-full mx-auto rounded bg-white">
71
71
<div id="file-{{ .Name.New }}">
72
72
<div id="diff-file">
73
73
<details open>
74
74
<summary class="list-none cursor-pointer sticky top-0">
75
-
<div id="diff-file-header" class="border-b cursor-pointer bg-white border-gray-200 flex justify-between">
75
+
<div id="diff-file-header" class="rounded cursor-pointer bg-white flex justify-between">
76
76
<div id="left-side-items" class="p-2">
77
77
{{ if .IsNew }}
78
78
<span class="diff-type p-1 mr-1 font-mono text-sm bg-green-100 rounded text-green-700 select-none">A</span>
···
123
123
<div class="bg-gray-100 text-gray-500 select-none">{{ .Header }}</div>
124
124
{{- range .Lines -}}
125
125
{{- if eq .Op.String "+" -}}
126
-
<div class="bg-green-100 text-green-700 p-1"><span class="select-none mr-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
126
+
<div class="bg-green-100 text-green-700 p-1"><span class="select-none mx-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
127
127
{{- end -}}
128
128
129
129
{{- if eq .Op.String "-" -}}
130
-
<div class="bg-red-100 text-red-700 p-1"><span class="select-none mr-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
130
+
<div class="bg-red-100 text-red-700 p-1"><span class="select-none mx-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
131
131
{{- end -}}
132
132
133
133
{{- if eq .Op.String " " -}}
134
-
<div class="text-gray-500 px"><span class="select-none mr-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
134
+
<div class="bg-white text-gray-500 px"><span class="select-none mx-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
135
135
{{- end -}}
136
136
137
137
{{- end -}}
+2
-2
appview/pages/templates/repo/index.html
+2
-2
appview/pages/templates/repo/index.html
···
177
177
178
178
{{ define "repoAfter" }}
179
179
{{- if .Readme }}
180
-
<section class="mt-4 p-6 border border-gray-200 w-full mx-auto">
180
+
<section class="mt-4 p-6 rounded bg-white w-full mx-auto">
181
181
<article class="readme">
182
182
{{- .Readme -}}
183
183
</article>
···
185
185
{{- end -}}
186
186
187
187
188
-
<section class="mt-4 p-6 border border-gray-200 w-full mx-auto">
188
+
<section class="mt-4 p-6 rounded bg-white w-full mx-auto">
189
189
<strong>clone</strong>
190
190
<pre>
191
191
git clone https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }} </pre
+5
-1
appview/pages/templates/repo/log.html
+5
-1
appview/pages/templates/repo/log.html
···
1
1
{{ define "title" }}commits · {{ .RepoInfo.FullName }}{{ end }}
2
2
3
3
{{ define "repoContent" }}
4
+
<h1>Commits</h1>
5
+
<h1>Commits</h1>
6
+
{{ end }}
4
7
8
+
{{ define "repoAfter" }}
5
9
<main>
6
10
<div id="commit-log" class="flex-1">
7
11
{{ range .Commits }}
···
11
15
data-lucide="git-commit-horizontal"
12
16
></i>
13
17
<div
14
-
class="relative w-full px-4 py-4 mt-5 mx-3 hover:bg-gray-50 border border-gray-200"
18
+
class="relative w-full px-4 py-4 mt-5 hover:bg-gray-50 border border-gray-200 bg-white"
15
19
>
16
20
<div id="commit-message">
17
21
{{ $messageParts := splitN .Message "\n\n" 2 }}