content/static: CSS updates to right sidebar

CSS updates are added to right sidebar:

https://photos.app.goo.gl/YYuu8mvNSLP5yxe89

Change-Id: Id9e990ecac7da43d7f3334d1a37b9068f283e25e
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/278754
Trust: Julie Qiu <julie@golang.org>
Run-TryBot: Julie Qiu <julie@golang.org>
Reviewed-by: Jonathan Amsterdam <jba@google.com>
Reviewed-by: Jamal Carvalho <jamal@golang.org>
diff --git a/content/static/css/unit_meta.css b/content/static/css/unit_meta.css
index 48f7846..0c0f889e 100644
--- a/content/static/css/unit_meta.css
+++ b/content/static/css/unit_meta.css
@@ -20,33 +20,33 @@
   margin: 1.125rem 0;
 }
 .UnitMeta-repo {
-  font-size: 0.75rem;
+  font-size: 1rem;
   margin-bottom: 0.5rem;
-  text-transform: uppercase;
 }
 
 .UnitMetaDetails-header {
   border-bottom: 0.0625rem solid var(--gray-8);
   display: flex;
-  font-size: 0.75rem;
+  font-size: 1rem;
+  font-weight: bold;
   justify-content: space-between;
   line-height: 1rem;
   margin-bottom: 0.5rem;
   margin-top: 1.85rem;
   padding-bottom: 0.5rem;
-  text-transform: uppercase;
 }
 .UnitMetaDetails ul {
   list-style: none;
   padding-inline-start: 0;
 }
 .UnitMetaDetails li {
-  font-size: 0.875rem;
+  font-size: 1rem;
   margin-bottom: 0.75rem;
   white-space: nowrap;
 }
 .UnitMetaDetails a {
-  font-size: 0.8125rem;
+  font-size: 1rem;
+  font-weight: normal;
   text-transform: none;
 }
 .UnitMetaDetails-icon {
diff --git a/content/static/html/helpers/_unit_meta.tmpl b/content/static/html/helpers/_unit_meta.tmpl
index cd04dba..11f7809 100644
--- a/content/static/html/helpers/_unit_meta.tmpl
+++ b/content/static/html/helpers/_unit_meta.tmpl
@@ -9,8 +9,7 @@
     {{template "unit_meta_details" .}}
   {{end}}
   <div class="UnitMeta">
-    <div class="UnitMeta-header">Links</div>
-    <div class="UnitMeta-repo">Repository</div>
+    <div class="UnitMeta-header">Repository</div>
     {{if .Details.RepositoryURL}}
       <a href="{{.Details.RepositoryURL}}" title="{{.Details.RepositoryURL}}" target="_blank" rel="noopener">
         {{.Details.RepositoryURL}}
@@ -18,6 +17,7 @@
     {{else}}
       Repository URL not available.
     {{end}}
+    <div class="UnitMeta-header">Links</div>
     {{template "unit_meta_links" .Details.ReadmeLinks}}
     {{template "unit_meta_links" .Details.DocLinks}}
     {{template "unit_meta_links" .Details.ModuleReadmeLinks}}
@@ -26,8 +26,9 @@
 
 {{define "unit_meta_links"}}
   {{range .}}
-    <div class="UnitMeta-repo">{{.Body}}</div>
-    <a href="{{.Href}}" title="{{.Href}}" target="_blank" rel="noopener">{{.Href}}</a>
+    <div class="UnitMeta-repo">
+      <a href="{{.Href}}" title="{{.Href}}" target="_blank" rel="noopener">{{.Body}}</a>
+    </div>
   {{end}}
 {{end}}
 
@@ -52,7 +53,7 @@
 
 {{define "unit_meta_details"}}
   <div class="UnitMetaDetails">
-    <div class="UnitMetaDetails-header">DETAILS<a href="/about#best-practices-h2">Learn more</a></div>
+    <div class="UnitMetaDetails-header">Details<a href="/about#best-practices-h2">Learn more</a></div>
     <ul>
       <li>
         {{template "unit_meta_details_check" .Unit.HasGoMod}}
@@ -76,4 +77,4 @@
       </li>
     </ul>
   </div>
-{{end}}
\ No newline at end of file
+{{end}}
diff --git a/internal/frontend/server_test.go b/internal/frontend/server_test.go
index 285b94c..d14ab30 100644
--- a/internal/frontend/server_test.go
+++ b/internal/frontend/server_test.go
@@ -953,13 +953,10 @@
 	}
 }
 
-func checkLink(n int, title, url, body string) htmlcheck.Checker {
-	// The first div under .UnitMeta is "Links" and the second is the
-	// repository, so div numbers below start with 3. There is no "a" for
-	// "Links", so the "a" numbers are off by one.
-	return in("",
-		in(fmt.Sprintf("div:nth-of-type(%d)", n+2), hasText(title)),
-		in(fmt.Sprintf("a:nth-of-type(%d)", n+1), href(url), hasText(body)))
+func checkLink(n int, title, url string) htmlcheck.Checker {
+	// The first div under .UnitMeta is "Repository", the second is "Links",
+	// and each subsequent div contains a <a> tag with a custom link.
+	return in(fmt.Sprintf("div:nth-of-type(%d) > a", n+2), href(url), hasText(title))
 }
 
 var linksTestCases = []serverTestCase{
@@ -969,8 +966,8 @@
 		wantStatusCode: http.StatusOK,
 		want: in(".UnitMeta",
 			// Module readme links.
-			checkLink(1, "title1", "http://url1", "http://url1"),
-			checkLink(2, "title2", "about:invalid#zGoSafez", "javascript://pwned"),
+			checkLink(1, "title1", "http://url1"),
+			checkLink(2, "title2", "about:invalid#zGoSafez"),
 		),
 	},
 	{
@@ -979,10 +976,10 @@
 		wantStatusCode: http.StatusOK,
 		want: in(".UnitMeta",
 			// Package doc links are first.
-			checkLink(1, "pkg.go.dev", "https://pkg.go.dev", "https://pkg.go.dev"),
+			checkLink(1, "pkg.go.dev", "https://pkg.go.dev"),
 			// Then module readmes.
-			checkLink(2, "title1", "http://url1", "http://url1"),
-			checkLink(3, "title2", "about:invalid#zGoSafez", "javascript://pwned"),
+			checkLink(2, "title1", "http://url1"),
+			checkLink(3, "title2", "about:invalid#zGoSafez"),
 		),
 	},
 	{
@@ -991,12 +988,12 @@
 		wantStatusCode: http.StatusOK,
 		want: in(".UnitMeta",
 			// Package readme links are first.
-			checkLink(1, "pkg title", "http://url2", "http://url2"),
+			checkLink(1, "pkg title", "http://url2"),
 			// Package doc links are second.
-			checkLink(2, "pkg.go.dev", "https://pkg.go.dev", "https://pkg.go.dev"),
+			checkLink(2, "pkg.go.dev", "https://pkg.go.dev"),
 			// Module readme links are third.
-			checkLink(3, "title1", "http://url1", "http://url1"),
-			checkLink(4, "title2", "about:invalid#zGoSafez", "javascript://pwned"),
+			checkLink(3, "title1", "http://url1"),
+			checkLink(4, "title2", "about:invalid#zGoSafez"),
 		),
 	},
 }