content/static: responsive design updates

Adjusts layout of header detail items for mobile display sizes.
Removes the vertical bars after each item and lays the items out
vertically.

Change-Id: Ifba829524d0d30a2c6e5a29a5c7c179a91cdd584
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/288152
Reviewed-by: Julie Qiu <julie@golang.org>
Trust: Jamal Carvalho <jamal@golang.org>

content/static/css/unit_header.css

@@ -42,13 +42,15 @@
   margin-top: 0.625rem;
 }
 .UnitHeader-detail {
-  align-items: center;
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   white-space: nowrap;
 }
 @media only screen and (min-width: 64rem) {
   .UnitHeader-detail {
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: wrap;
     margin-bottom: 0.5rem;
   }
 }
@@ -61,12 +63,17 @@
   margin-right: 0.5rem;
   vertical-align: middle;
 }
+.UnitHeader-scaleIcon img {
+  margin-right: 0.75rem;
+}
 .UnitHeader-detailItem a > span {
   color: var(--gray-4);
 }
-.UnitHeader-detailItem:not(:last-of-type)::after {
-  content: '|';
-  padding: 1rem;
+@media only screen and (min-width: 64rem) {
+  .UnitHeader-detailItem:not(:last-of-type)::after {
+    content: '|';
+    padding: 1rem;
+  }
 }
 @media only screen and (max-width: 52rem) {
   .UnitHeader-detailItem:not(:last-of-type)::after {

content/static/css/unit_meta.css

@@ -25,7 +25,6 @@
 }
 
 .UnitMetaDetails-header {
-  border-bottom: 0.0625rem solid var(--gray-8);
   display: flex;
   font-size: 1rem;
   font-weight: bold;
@@ -36,6 +35,7 @@
 }
 @media only screen and (min-width: 64rem) {
   .UnitMetaDetails-header {
+    border-bottom: 0.0625rem solid var(--gray-8);
     margin-top: 0.625rem;
   }
 }

content/static/html/helpers/_unit_header.tmpl

@@ -78,7 +78,7 @@
             <img height="16px" width="16px" src="/static/img/pkg-icon-circularArrows_16x16.svg" alt="">
             {{.Details.CommitTime}}
           </span>
-          <span class="UnitHeader-detailItem" data-test-id="UnitHeader-licenses">
+          <span class="UnitHeader-detailItem UnitHeader-scaleIcon" data-test-id="UnitHeader-licenses">
             <img height="16px" width="16px" src="/static/img/pkg-icon-scale_16x16.svg" alt="">
             {{- if .Details.Licenses -}}
               {{- if .Unit.IsRedistributable -}}