content/static: update responsive layout of header and details section
Improves flow of items in the header and makes the content
in the right sidebar visible on smaller screens.
Change-Id: Ia5dd9a978e7f82c3f538bffa265222b3aa883c09
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/284196
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Julie Qiu <julie@golang.org>
diff --git a/content/static/css/unit_details.css b/content/static/css/unit_details.css
index aecabca..0691735 100644
--- a/content/static/css/unit_details.css
+++ b/content/static/css/unit_details.css
@@ -53,7 +53,7 @@
.UnitDetails-outline {
display: none;
height: calc(100vh - 7.8475rem);
- margin-top: 2.5rem;
+ margin-top: 1.5rem;
position: sticky;
top: 4.5rem;
}
@@ -68,16 +68,17 @@
}
@media only screen and (min-width: 64rem) {
.UnitDetails-content {
- margin-top: 2rem;
+ margin-top: 1rem;
}
}
.UnitDetails-meta {
- display: none;
- margin-top: 2rem;
+ order: -1;
}
@media only screen and (min-width: 64rem) {
.UnitDetails-meta {
display: block;
+ margin-top: 2rem;
+ order: initial;
}
}
.UnitDetails-contentEmpty {
diff --git a/content/static/css/unit_fixed_header.css b/content/static/css/unit_fixed_header.css
index aa093c4..75796c8 100644
--- a/content/static/css/unit_fixed_header.css
+++ b/content/static/css/unit_fixed_header.css
@@ -207,12 +207,12 @@
.UnitHeaderFixed-detailItem a > span {
color: var(--gray-4);
}
-.UnitHeaderFixed-detailItem:not(:first-of-type)::before {
+.UnitHeaderFixed-detailItem:not(:last-of-type)::after {
content: '|';
padding: 1rem;
}
@media only screen and (max-width: 52rem) {
- .UnitHeaderFixed-detailItem:not(:first-of-type)::before {
+ .UnitHeaderFixed-detailItem:not(:last-of-type)::after {
padding: 0.5rem;
}
}
diff --git a/content/static/css/unit_header.css b/content/static/css/unit_header.css
index 8518093..69082fb 100644
--- a/content/static/css/unit_header.css
+++ b/content/static/css/unit_header.css
@@ -64,12 +64,12 @@
.UnitHeader-detailItem a > span {
color: var(--gray-4);
}
-.UnitHeader-detailItem:not(:first-of-type)::before {
+.UnitHeader-detailItem:not(:last-of-type)::after {
content: '|';
padding: 1rem;
}
@media only screen and (max-width: 52rem) {
- .UnitHeader-detailItem:not(:last-of-type)::before {
+ .UnitHeader-detailItem:not(:last-of-type)::after {
padding: 0.5rem;
}
}
diff --git a/content/static/css/unit_meta.css b/content/static/css/unit_meta.css
index 6bbbcb8..b830d9a 100644
--- a/content/static/css/unit_meta.css
+++ b/content/static/css/unit_meta.css
@@ -32,9 +32,16 @@
justify-content: space-between;
line-height: 1rem;
margin-bottom: 0.5rem;
- margin-top: 1.85rem;
padding-bottom: 0.5rem;
}
+@media only screen and (min-width: 64rem) {
+ .UnitMetaDetails-header {
+ margin-top: 0.625rem;
+ }
+}
+.UnitMetaDetails .UnitMetaDetails-header > a {
+ font-size: 0.875rem;
+}
.UnitMetaDetails ul {
list-style: none;
padding-inline-start: 0;
@@ -74,7 +81,7 @@
border-radius: 0.25rem;
display: block;
font-size: 0.75rem;
- left: -12rem;
+ left: -6rem;
letter-spacing: 0.01875rem;
line-height: 1rem;
padding: 0.5rem;
@@ -83,18 +90,18 @@
white-space: initial;
width: 12rem;
}
-@media only screen and (min-width: 65rem) {
+@media only screen and (min-width: 64rem) {
.UnitMetaDetails-toggletipBubble {
- left: -10rem;
+ left: -12rem;
}
}
@media only screen and (min-width: 70rem) {
.UnitMetaDetails-toggletipBubble {
- left: -8rem;
+ left: -12rem;
}
}
@media only screen and (min-width: 82rem) {
.UnitMetaDetails-toggletipBubble {
- left: -6rem;
+ left: -8rem;
}
}
