improve timeline styles to match
Changed files
@@ -9,7 +9,7 @@ content="width=device-width, initial-scale=1.0"/><script src="/static/htmx.min.js"></script><link href="/static/tw.css" rel="stylesheet" type="text/css" />- <title>{{ block "title" . }}tangled{{ end }}</title>+ <title>{{ block "title" . }}{{ end }} · tangled</title></head><body class="bg-slate-100"><div class="container mx-auto px-1 pt-4 min-h-screen flex flex-col">
@@ -1,7 +1,7 @@{{ define "title" }}{{ .RepoInfo.FullName }}{{ end }}{{ define "content" }}- <section id="repo-header" class="mb-4 p-2">+ <section id="repo-header" class="mb-4 py-2 px-6"><p class="text-lg"><a href="/{{ .RepoInfo.OwnerWithAt }}">{{ .RepoInfo.OwnerWithAt }}</a><span class="select-none">/</span>
@@ -39,7 +39,7 @@ </div><div class="diff-stat"><br>- <strong class="text-sm uppercase mb-4">Affected files</strong>+ <strong class="text-sm uppercase mb-4">Changed files</strong>{{ range $diff }}<ul>{{ if .IsDelete }}
@@ -4,14 +4,10 @@ {{ .RepoInfo.FullName }}{{ end }}{{ define "repoContent" }}- <div class="flex items-center justify-between">- <h1>- {{ .Issue.Title }}- <span class="text-gray-400">#{{ .Issue.IssueId }}</span>- </h1>-- <time class="text-sm">{{ .Issue.Created | timeFmt }}</time>- </div>+ <h1>+ {{ .Issue.Title }}+ <span class="text-gray-400">#{{ .Issue.IssueId }}</span>+ </h1>{{ $bgColor := "bg-gray-800" }}{{ $icon := "ban" }}@@ -39,6 +35,8 @@ {{ $owner := didOrHandle .Issue.OwnerDid .IssueOwnerHandle }}<a href="/{{ $owner }}" class="no-underline hover:underline">{{ $owner }}</a>+ <span class="px-1 select-none before:content-['\00B7']"></span>+ <time>{{ .Issue.Created | timeFmt }}</time></span></div>@@ -66,15 +64,16 @@ <divclass="absolute left-8 -top-4 w-px h-4 bg-gray-300"></div>{{ end }}- <div class="flex items-center gap-2 mb-2">+ <div class="flex items-center gap-2 mb-2 text-gray-400">{{ $owner := index $.DidHandleMap .OwnerDid }}- <span class="text-gray-400 text-sm">+ <span class="text-sm"><ahref="/{{ $owner }}"class="no-underline hover:underline">{{ $owner }}</a></span>+ <span class="px-1 select-none before:content-['\00B7']"></span><ahref="#{{ .CommentId }}"class="text-gray-500 text-sm hover:text-gray-500 hover:underline no-underline"
@@ -82,7 +82,7 @@ </div></div></div>- <div class="text-xs text-gray-500 mt-3">+ <div class="text-sm text-gray-500 mt-3"><span class="font-mono"><ahref="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash.String }}"
@@ -1,47 +1,38 @@-{{ define "title" }}Timeline{{ end }}+{{ define "title" }}timeline{{ end }}{{ define "content" }}- <h1>Timeline</h1>+<div class="p-6">+ <p class="text-xl font-bold">Timeline</p>+</div>- {{ range .Timeline }}- <div class="relative- px-4- py-2- border-l- border-black- before:content-['']- before:absolute- before:w-1- before:h-1- before:bg-black- before:rounded-full- before:left-[-2.2px]- before:top-1/2- before:-translate-y-1/2- ">- {{ if .Repo }}- {{ $userHandle := index $.DidHandleMap .Repo.Did }}- <div class="flex items-center">- <p class="text-gray-600">- <a href="/{{ $userHandle }}" class="no-underline hover:underline">{{ $userHandle }}</a>- created- <a href="/{{ $userHandle }}/{{ .Repo.Name }}" class="no-underline hover:underline">{{ .Repo.Name }}</a>- <time class="text-gray-700">{{ .Repo.Created | timeFmt }}</time>- </p>- </div>- {{ else if .Follow }}- {{ $userHandle := index $.DidHandleMap .Follow.UserDid }}- {{ $subjectHandle := index $.DidHandleMap .Follow.SubjectDid }}- <div class="flex items-center">- <p class="text-gray-600">- <a href="/{{ $userHandle }}" class="no-underline hover:underline">{{ $userHandle }}</a>- followed- <a href="/{{ $subjectHandle }}" class="no-underline hover:underline">{{ $subjectHandle }}</a>- <time class="text-gray-700">{{ .Follow.FollowedAt | timeFmt }}</time>- </p>- </div>- {{ end }}- </div>+<div class="flex flex-col gap-3 relative">+ <div class="absolute left-8 top-0 bottom-0 w-px bg-gray-300"></div>+ {{ range .Timeline }}+ <div class="px-6 py-2 bg-white rounded drop-shadow-sm w-fit">+ {{ if .Repo }}+ {{ $userHandle := index $.DidHandleMap .Repo.Did }}+ <div class="flex items-center">+ <p class="text-gray-600">+ <a href="/{{ $userHandle }}" class="no-underline hover:underline">{{ $userHandle }}</a>+ created+ <a href="/{{ $userHandle }}/{{ .Repo.Name }}" class="no-underline hover:underline">{{ .Repo.Name }}</a>+ <time class="text-gray-700">{{ .Repo.Created | timeFmt }}</time>+ </p>+ </div>+ {{ else if .Follow }}+ {{ $userHandle := index $.DidHandleMap .Follow.UserDid }}+ {{ $subjectHandle := index $.DidHandleMap .Follow.SubjectDid }}+ <div class="flex items-center">+ <p class="text-gray-600">+ <a href="/{{ $userHandle }}" class="no-underline hover:underline">{{ $userHandle }}</a>+ followed+ <a href="/{{ $subjectHandle }}" class="no-underline hover:underline">{{ $subjectHandle }}</a>+ <time class="text-gray-700">{{ .Follow.FollowedAt | timeFmt }}</time>+ </p>+ </div>{{ end }}+ </div>+ {{ end }}+</div>{{ end }}
@@ -1,75 +1,76 @@{{ define "title" }}{{ or .UserHandle .UserDid }}{{ end }}{{ define "content" }}- <div class="flex">- <h1 class="pb-1">- {{ didOrHandle .UserDid .UserHandle }}- </h1>- {{ if ne .FollowStatus.String "IsSelf" }}- <button id="followBtn"++ <div class="flex">+ <h1 class="pb-1 px-6">+ {{ didOrHandle .UserDid .UserHandle }}+ </h1>+ {{ if ne .FollowStatus.String "IsSelf" }}+ <button id="followBtn"class="btn mt-2"{{ if eq .FollowStatus.String "IsNotFollowing" }}- hx-post="/follow?subject={{.UserDid}}"+ hx-post="/follow?subject={{.UserDid}}"{{ else }}- hx-delete="/follow?subject={{.UserDid}}"+ hx-delete="/follow?subject={{.UserDid}}"{{ end }}hx-trigger="click"hx-target="#followBtn"hx-swap="outerHTML">- {{ if eq .FollowStatus.String "IsNotFollowing" }}Follow{{ else }}Unfollow{{ end }}- </button>+ {{ if eq .FollowStatus.String "IsNotFollowing" }}Follow{{ else }}Unfollow{{ end }}+ </button>{{ end }}- </div>- <div class="text-sm mb-4">- <span>{{ .ProfileStats.Followers }} followers</span>- <div class="inline-block px-1 select-none after:content-['·']"></div>- <span>{{ .ProfileStats.Following }} following</span>- </div>- <p class="text-sm font-bold py-2">REPOS</p>- <div id="repos" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">- {{ range .Repos }}+ </div>+ <div class="text-sm mb-4 px-6">+ <span>{{ .ProfileStats.Followers }} followers</span>+ <div class="inline-block px-1 select-none after:content-['·']"></div>+ <span>{{ .ProfileStats.Following }} following</span>+ </div>+ <p class="text-sm font-bold py-2 px-6">REPOS</p>+ <div id="repos" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">+ {{ range .Repos }}+ <div+ id="repo-card"+ class="py-4 px-6 drop-shadow-sm rounded bg-white"+ >+ <div id="repo-card-name" class="font-medium">+ <a href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}"+ >{{ .Name }}</a+ >+ </div><div- id="repo-card"- class="p-4 drop-shadow-sm rounded bg-white"- >- <div id="repo-card-name" class="font-medium">- <a href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}"- >{{ .Name }}</a- >- </div>- <div- id="repo-knot-name"- class="text-gray-600 text-sm font-mono"+ id="repo-knot-name"+ class="text-gray-600 text-sm font-mono">- {{ .Knot }}- </div>+ {{ .Knot }}</div>- {{ else }}- <p>This user does not have any repos yet.</p>- {{ end }}</div>- <p class="text-sm font-bold py-2">COLLABORATING ON</p>- <div id="collaborating" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">- {{ range .CollaboratingRepos }}- <div- id="repo-card"- class="p-4 drop-shadow-sm rounded bg-white"+ {{ else }}+ <p class="px-6">This user does not have any repos yet.</p>+ {{ end }}+ </div>+ <p class="text-sm font-bold py-2 px-6">COLLABORATING ON</p>+ <div id="collaborating" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">+ {{ range .CollaboratingRepos }}+ <div+ id="repo-card"+ class="py-4 px-6 drop-shadow-sm rounded bg-white"+ >+ <div id="repo-card-name" class="font-medium">+ <a href="/{{ .Did }}/{{ .Name }}">+ @{{ .Did }}/{{ .Name }}+ </a>+ </div>+ <div+ id="repo-knot-name"+ class="text-gray-600 text-sm font-mono">- <div id="repo-card-name" class="font-medium">- <a href="/{{ .Did }}/{{ .Name }}">- @{{ .Did }}/{{ .Name }}- </a>- </div>- <div- id="repo-knot-name"- class="text-gray-600 text-sm font-mono"- >- {{ .Knot }}- </div>- </div>- {{ else }}- <p>This user is not collaborating.</p>- {{ end }}+ {{ .Knot }}+ </div></div>+ {{ else }}+ <p class="px-6">This user is not collaborating.</p>+ {{ end }}+ </div>{{ end }}
MODIFIED
input.css
MODIFIED
input.css
@@ -19,6 +19,9 @@ src: url("/static/fonts/iAWriterQuattroS-Bold.ttf") format("truetype");font-weight: bold;font-style: normal;font-display: swap;+ font-feature-settings:+ "calt" 1,+ "kern" 1;}@font-face {font-family: "iA Writer Quattro S";@@ -26,6 +29,9 @@ src: url("/static/fonts/iAWriterQuattroS-Italic.ttf") format("truetype");font-weight: normal;font-style: italic;font-display: swap;+ font-feature-settings:+ "calt" 1,+ "kern" 1;}@font-face {font-family: "iA Writer Quattro S";@@ -34,6 +40,9 @@ format("truetype");font-weight: bold;font-style: italic;font-display: swap;+ font-feature-settings:+ "calt" 1,+ "kern" 1;}@font-face {@@ -42,6 +51,9 @@ src: url("/static/fonts/iAWriterMonoS-Regular.ttf") format("truetype");font-weight: normal;font-style: normal;font-display: swap;+ font-feature-settings:+ "calt" 1,+ "kern" 1;}@font-face {font-family: "iA Writer Mono S";@@ -49,6 +61,9 @@ src: url("/static/fonts/iAWriterMonoS-Bold.ttf") format("truetype");font-weight: bold;font-style: normal;font-display: swap;+ font-feature-settings:+ "calt" 1,+ "kern" 1;}@font-face {font-family: "iA Writer Mono S";@@ -56,6 +71,9 @@ src: url("/static/fonts/iAWriterMonoS-Italic.ttf") format("truetype");font-weight: normal;font-style: italic;font-display: swap;+ font-feature-settings:+ "calt" 1,+ "kern" 1;}@font-face {font-family: "iA Writer Mono S";@@ -64,6 +82,9 @@ format("truetype");font-weight: bold;font-style: italic;font-display: swap;+ font-feature-settings:+ "calt" 1,+ "kern" 1;}@font-face {@@ -71,6 +92,9 @@ font-family: "Inter";font-style: normal;font-weight: 400;font-display: swap;+ font-feature-settings:+ "calt" 1,+ "kern" 1;}h1 {@apply text-2xl;