@@ -23,7 +23,7 @@ <span class="italic">this repo has no description</span>
             {{ end }}
         </span>
     </section>
-    <section id="repo-links" class="min-h-screen flex flex-col">
+    <section id="repo-links" class="min-h-screen flex flex-col drop-shadow-sm">
         <nav class="w-full mx-auto ml-4">
             <div class="flex z-60">
                 {{ $activeTabStyles := "-mb-px bg-white" }}
@@ -49,7 +49,7 @@ {{ end }}
             </div>
         </nav>
         <section
-            class="bg-white p-6 min-h-[200px] rounded relative z-20 w-full mx-auto"
+            class="bg-white p-6 rounded relative z-20 w-full mx-auto drop-shadow-sm"
         >
             {{ block "repoContent" . }}{{ end }}
         </section>

@@ -1,7 +1,7 @@
 {{ define "layouts/topbar" }}
     {{ $linkstyle := "text-black hover:text-gray-600 no-underline" }}
     <nav
-        class="space-x-4 mb-4 px-6 py-2 rounded bg-white shadow-[0_4px_10px_-1px_rgba(0,0,0,0.1)]"
+        class="space-x-4 mb-4 px-6 py-2 rounded bg-white drop-shadow-sm"
     >
         <div class="container flex justify-between p-0">
             <div id="left-items">

@@ -67,7 +67,7 @@
   {{ $last := sub (len $diff) 1 }}
   {{ range $idx, $hunk := $diff }}
   {{ with $hunk }}
-  <section class="mt-6 border border-gray-200 w-full mx-auto rounded bg-white">
+  <section class="mt-6 border border-gray-200 w-full mx-auto rounded bg-white drop-shadow-sm">
     <div id="file-{{ .Name.New }}">
       <div id="diff-file">
         <details open>
@@ -108,37 +108,39 @@
             </div>
           </summary>
 
-          {{ if .IsDelete }}
-          <p class="text-center text-gray-400 p-4">
-              This file has been deleted in this commit.
-          </p>
-          {{ else }}
-          {{ if .IsBinary }}
+          <div class="transition-all duration-700 ease-in-out">
+            {{ if .IsDelete }}
             <p class="text-center text-gray-400 p-4">
-                This is a binary file and will not be displayed.
+            This file has been deleted in this commit.
             </p>
-          {{ else }}
+            {{ else }}
+            {{ if .IsBinary }}
+            <p class="text-center text-gray-400 p-4">
+            This is a binary file and will not be displayed.
+            </p>
+            {{ else }}
             <pre class="overflow-auto">
-            {{- range .TextFragments -}}
-              <div class="bg-gray-100 text-gray-500 select-none">{{ .Header }}</div>
-              {{- range .Lines -}}
-                  {{- if eq .Op.String "+" -}}
-                  <div class="bg-green-100 text-green-700 p-1"><span class="select-none mx-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
-                  {{- end -}}
+              {{- range .TextFragments -}}
+                <div class="bg-gray-100 text-gray-500 select-none">{{ .Header }}</div>
+                {{- range .Lines -}}
+                    {{- if eq .Op.String "+" -}}
+                    <div class="bg-green-100 text-green-700 p-1"><span class="select-none mx-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
+                    {{- end -}}
 
-                  {{- if eq .Op.String "-" -}}
-                  <div class="bg-red-100 text-red-700 p-1"><span class="select-none mx-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
-                  {{- end -}}
+                    {{- if eq .Op.String "-" -}}
+                    <div class="bg-red-100 text-red-700 p-1"><span class="select-none mx-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
+                    {{- end -}}
 
-                  {{- if eq .Op.String " " -}}
-                  <div class="bg-white text-gray-500 px"><span class="select-none mx-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
-                  {{- end -}}
+                    {{- if eq .Op.String " " -}}
+                    <div class="bg-white text-gray-500 px"><span class="select-none mx-2">{{ .Op.String }}</span><span>{{ .Line }}</span></div>
+                    {{- end -}}
 
+                {{- end -}}
               {{- end -}}
-            {{- end -}}
             </pre>
-          {{- end -}}
-          {{ end }}
+            {{- end -}}
+            {{ end }}
+          </div>
 
         </details>
 

@@ -25,7 +25,7 @@ <section>
         <div class="flex items-center gap-2">
             <div
                 id="state"
-                class="inline-flex items-center px-3 py-1 {{ $bgColor }}"
+                class="inline-flex items-center rounded px-3 py-1 {{ $bgColor }}"
             >
                 <i
                     data-lucide="{{ $icon }}"
@@ -55,7 +55,7 @@ <section id="comments" class="mt-8 space-y-4 relative">
         {{ range $index, $comment := .Comments }}
             <div
                 id="comment-{{ .CommentId }}"
-                class="rounded-sm bg-white p-4 relative"
+                class="rounded bg-white p-4 relative"
             >
                 {{ if eq $index 0 }}
                     <div
@@ -70,7 +70,7 @@ <div class="flex items-center gap-2 mb-2">
                     {{ $owner := index $.DidHandleMap .OwnerDid }}
                     <span class="text-gray-400 text-sm">
                         <a
-                            href="{{ $owner }}"
+                            href="/{{ $owner }}"
                             class="no-underline hover:underline"
                             >{{ $owner }}</a
                         >
@@ -97,7 +97,7 @@ class="mt-8"
         >
             <textarea
                 name="body"
-                class="w-full p-2 border border-gray-200"
+                class="w-full p-2 rounded border border-gray-200"
                 placeholder="Add to the discussion..."
             ></textarea>
             <button type="submit" class="btn mt-2">comment</button>

@@ -40,7 +40,7 @@ <span class="before:content-['·']">
                         opened by
                         {{ $owner := index $.DidHandleMap .OwnerDid }}
                         <a
-                            href="{{ $owner }}"
+                            href="/{{ $owner }}"
                             class="no-underline hover:underline"
                             >{{ $owner }}</a
                         >

@@ -109,7 +109,7 @@ {{ end }}
         </div>
 
         {{ $commits_len := len .Commits }}
-        <div class="flex justify-between mt-4 px-10">
+        <div class="flex justify-end mt-4 gap-2">
             {{ if gt .Page 1 }}
                 <a
                     class="btn flex items-center gap-2 no-underline"

@@ -31,7 +31,7 @@ <div id="repos" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
         {{ range .Repos }}
             <div
                 id="repo-card"
-                class="border border-black p-4 shadow-sm bg-white"
+                class="p-4 drop-shadow-sm rounded bg-white"
             >
                 <div id="repo-card-name" class="font-medium">
                     <a href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}"
@@ -54,7 +54,7 @@ <div id="collaborating" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
         {{ range .CollaboratingRepos }}
             <div
                 id="repo-card"
-                class="border border-black p-4 shadow-sm bg-white"
+                class="p-4 drop-shadow-sm rounded bg-white"
             >
                 <div id="repo-card-name" class="font-medium">
                     <a href="/{{ .Did }}/{{ .Name }}">

@@ -90,11 +90,11 @@ letter-spacing: -0.01em;
         word-spacing: -0.07em;
     }
 
-    a {
-        @apply no-underline text-black hover:underline hover:text-gray-800;
-    }
-
     @layer base {
+        a {
+          @apply no-underline text-black hover:underline hover:text-gray-800;
+        }
+
         label {
             @apply block text-sm text-black;
         }
@@ -112,7 +112,7 @@ @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center
             justify-center bg-transparent px-2 pb-[0.2rem] text-base
             text-gray-900 before:absolute before:inset-0 before:-z-10
             before:block before:rounded-sm before:border before:border-gray-200
-            before:bg-white before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#f5f5f5]
+            before:bg-white before:drop-shadow-sm
             before:content-[''] hover:before:border-gray-300
             hover:before:bg-gray-50
             hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#f5f5f5]