tangled.org / core
Monorepo for Tangled tangled.org
fork atom

start styleen

oppi.li bf72d556 84f33e91

options
unified split
Changed files
+35 -31
appview
pages
templates
layouts
base.html
footer.html
repobase.html
topbar.html
repo
commit.html
index.html
log.html
input.css
+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 }}
+2 -2
appview/pages/templates/layouts/footer.html
··· 1 1 {{ define "layouts/footer" }} 2 - <div class="w-full p-4 bg-gray-50"> 2 + <div class="w-full p-4 bg-white rounded-t"> 3 3 <div class="container mx-auto text-center text-gray-600 text-sm"> 4 4 tangled 5 5 </div> 6 6 </div> 7 - {{ end }} 7 + {{ end }}
+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
··· 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
··· 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
··· 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
··· 1 1 {{ define "title" }}commits &middot; {{ .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 }}
+1 -1
input.css
··· 91 91 } 92 92 93 93 a { 94 - @apply underline text-black hover:text-gray-800; 94 + @apply no-underline text-black hover:underline hover:text-gray-800; 95 95 } 96 96 97 97 @layer base {