content/static: responsive layout fixes
Adds minor fixes for responsive layout to
follow updated rules in styleguide.
Change-Id: I6f2cb51a2350473199adc6b4974635c3d3b16ae5
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/257139
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/stylesheet.css b/content/static/css/stylesheet.css
index 1c30953..94f668a 100644
--- a/content/static/css/stylesheet.css
+++ b/content/static/css/stylesheet.css
@@ -116,6 +116,9 @@
flex: 1;
padding: 0 1rem;
}
+.Site--redesign .Site-content {
+ padding: 0;
+}
.Site-footer {
margin-top: 5rem;
}
@@ -123,6 +126,9 @@
.Site-content {
padding: 0 1.5rem;
}
+ .Site--redesign .Site-content {
+ padding: 0;
+ }
}
.FeedbackButton {
@@ -168,6 +174,9 @@
.Site--wide .Banner-inner {
max-width: none;
}
+.Site--redesign .Banner-inner {
+ max-width: 98rem;
+}
.Banner-message {
color: #fff;
margin-right: 1.25rem;
@@ -191,6 +200,9 @@
.Site--wide .Header {
max-width: none;
}
+.Site--redesign .Header {
+ max-width: 98rem;
+}
.Site-header {
background: var(--turq-dark);
box-shadow: 0 0.0625rem 0.125rem rgba(171, 171, 171, 0.3);
@@ -590,6 +602,7 @@
.NotFound-gopher,
.SearchResults-emptyContentGopher {
display: block;
+ height: 15rem;
margin: auto;
padding: 1.25rem 0;
width: 15rem;
diff --git a/content/static/css/unit.css b/content/static/css/unit.css
new file mode 100644
index 0000000..2667c7c
--- /dev/null
+++ b/content/static/css/unit.css
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2020 The Go Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+@import './unit_header.css';
+@import './unit_fixed_header.css';
+
+.Unit-content {
+ margin: auto;
+ max-width: 98rem;
+ min-height: 32rem;
+ padding: 0 1rem;
+}
+@media only screen and (min-width: 57.7rem) {
+ .Unit-content {
+ padding: 0 1.5rem;
+ }
+}
+.Unit-content > div,
+section {
+ margin-top: 2rem;
+ max-width: 60rem;
+}
diff --git a/content/static/css/unit_details.css b/content/static/css/unit_details.css
index ab7a90d..85d8858 100644
--- a/content/static/css/unit_details.css
+++ b/content/static/css/unit_details.css
@@ -4,8 +4,6 @@
* license that can be found in the LICENSE file.
*/
-@import './unit_header.css';
-@import './unit_fixed_header.css';
@import './unit_readme.css';
@import './unit_doc.css';
@import './unit_directories.css';
@@ -16,7 +14,16 @@
column-gap: 2rem;
display: grid;
grid-template-columns: minmax(0, auto);
+ margin: auto;
margin-top: 1rem;
+ max-width: 98rem;
+ min-height: 32rem;
+ padding: 0.5rem 1rem;
+}
+@media only screen and (min-width: 57.7rem) {
+ .UnitDetails {
+ padding: 0.5rem 1.5rem;
+ }
}
@media only screen and (min-width: 52rem) {
.UnitDetails {
diff --git a/content/static/css/unit_fixed_header.css b/content/static/css/unit_fixed_header.css
index 85ec74e..75a47d7 100644
--- a/content/static/css/unit_fixed_header.css
+++ b/content/static/css/unit_fixed_header.css
@@ -28,8 +28,8 @@
padding: 0 0.5rem;
position: relative;
}
-.Site--wide .UnitFixedHeader-container {
- max-width: none;
+.UnitFixedHeader-container {
+ max-width: 98rem;
}
.UnitFixedHeader-logoLink {
margin-right: 1rem;
@@ -146,7 +146,7 @@
top: 1.125rem;
width: 1.5rem;
}
-@media only screen and (min-width: 64rem) {
+@media only screen and (min-width: 80rem) {
.UnitFixedHeader-overflowContainer {
display: none;
}
@@ -188,6 +188,7 @@
display: flex;
flex-wrap: wrap;
margin-left: auto;
+ margin-right: 2rem;
white-space: nowrap;
}
.UnitHeaderFixed-detailItem {
diff --git a/content/static/css/unit_header.css b/content/static/css/unit_header.css
index f4d5d23..9bdb392 100644
--- a/content/static/css/unit_header.css
+++ b/content/static/css/unit_header.css
@@ -6,23 +6,20 @@
.UnitHeader {
border-bottom: 0.0625rem solid var(--gray-8);
- margin-left: -1.5rem;
- padding: 0.5rem 1.5rem 0.5rem 1.5rem;
- width: 100vw;
+ padding: 0.5rem 1rem;
}
-@media only screen and (max-width: 52rem) {
+@media only screen and (min-width: 57.7rem) {
.UnitHeader {
- margin-left: -1rem;
- padding-left: 1rem;
- width: 100vw;
+ border-bottom: 0.0625rem solid var(--gray-8);
+ padding: 0.5rem 1.5rem;
}
}
.UnitHeader-container {
margin: auto;
- max-width: 93.5rem;
+ max-width: 95rem;
}
.UnitHeader-breadcrumb {
- margin-top: 1.1rem;
+ margin-top: 0.5rem;
}
.UnitHeader-breadcrumbItem {
color: var(--gray-4);
diff --git a/content/static/html/base.tmpl b/content/static/html/base.tmpl
index 52d2a1f..ac012f7 100644
--- a/content/static/html/base.tmpl
+++ b/content/static/html/base.tmpl
@@ -21,7 +21,7 @@
<link href="/third_party/dialog-polyfill/dialog-polyfill.css?version={{.AppVersionLabel}}" rel="stylesheet">
<title>{{if .HTMLTitle}}{{.HTMLTitle}} · {{end}}pkg.go.dev</title>
{{block "pre_content" .}}{{end}}
-<body class="Site{{if .AllowWideContent}} Site--wide{{end}}">
+<body class="Site{{if .AllowWideContent}} Site--wide{{end}}{{if (.Experiments.IsActive "unit-page")}} Site--redesign{{end}}">
<header class="Site-header Site-header--dark">
<div class="Banner">
<div class="Banner-inner">
diff --git a/content/static/html/helpers/_unit_header.tmpl b/content/static/html/helpers/_unit_header.tmpl
index 9f40c92..99c58a5 100644
--- a/content/static/html/helpers/_unit_header.tmpl
+++ b/content/static/html/helpers/_unit_header.tmpl
@@ -66,5 +66,6 @@
{{end}}
</div>
</div>
+ <div class="UnitHeader-divider"></div>
</header>
{{end}}
diff --git a/content/static/html/pages/unit.tmpl b/content/static/html/pages/unit.tmpl
index e49d48d..66b2ab6 100644
--- a/content/static/html/pages/unit.tmpl
+++ b/content/static/html/pages/unit.tmpl
@@ -5,6 +5,7 @@
-->
{{define "pre_content"}}
+ <link href="/static/css/unit.css?version={{.AppVersionLabel}}" rel="stylesheet">
{{block "unit_pre_content" .}}{{end}}
{{end}}
diff --git a/content/static/html/pages/unit_importedby.tmpl b/content/static/html/pages/unit_importedby.tmpl
index f98359f..3453bb6 100644
--- a/content/static/html/pages/unit_importedby.tmpl
+++ b/content/static/html/pages/unit_importedby.tmpl
@@ -4,11 +4,8 @@
license that can be found in the LICENSE file.
-->
-{{define "unit_pre_content"}}
- <link href="/static/css/unit_header.css?version={{.AppVersionLabel}}" rel="stylesheet">
- <link href="/static/css/unit_fixed_header.css?version={{.AppVersionLabel}}" rel="stylesheet">
-{{end}}
-
{{define "unit_content"}}
- {{block "importedby" .PackageDetails}}{{end}}
+ <div class="Unit-content">
+ {{block "importedby" .PackageDetails}}{{end}}
+ </div>
{{end}}
diff --git a/content/static/html/pages/unit_imports.tmpl b/content/static/html/pages/unit_imports.tmpl
index b472735..8095f23 100644
--- a/content/static/html/pages/unit_imports.tmpl
+++ b/content/static/html/pages/unit_imports.tmpl
@@ -4,11 +4,8 @@
license that can be found in the LICENSE file.
-->
-{{define "unit_pre_content"}}
- <link href="/static/css/unit_header.css?version={{.AppVersionLabel}}" rel="stylesheet">
- <link href="/static/css/unit_fixed_header.css?version={{.AppVersionLabel}}" rel="stylesheet">
-{{end}}
-
{{define "unit_content"}}
- {{block "imports" .PackageDetails}}{{end}}
+ <div class="Unit-content">
+ {{block "imports" .PackageDetails}}{{end}}
+ </div>
{{end}}
diff --git a/content/static/html/pages/unit_licenses.tmpl b/content/static/html/pages/unit_licenses.tmpl
index 269cb63..ea7248d 100644
--- a/content/static/html/pages/unit_licenses.tmpl
+++ b/content/static/html/pages/unit_licenses.tmpl
@@ -4,11 +4,8 @@
license that can be found in the LICENSE file.
-->
-{{define "unit_pre_content"}}
- <link href="/static/css/unit_header.css?version={{.AppVersionLabel}}" rel="stylesheet">
- <link href="/static/css/unit_fixed_header.css?version={{.AppVersionLabel}}" rel="stylesheet">
-{{end}}
-
{{define "unit_content"}}
- {{block "licenses" .PackageDetails}}{{end}}
+ <div class="Unit-content">
+ {{block "licenses" .PackageDetails}}{{end}}
+ </div>
{{end}}
diff --git a/content/static/html/pages/unit_versions.tmpl b/content/static/html/pages/unit_versions.tmpl
index f8741dd..6b0cfa2 100644
--- a/content/static/html/pages/unit_versions.tmpl
+++ b/content/static/html/pages/unit_versions.tmpl
@@ -4,11 +4,8 @@
license that can be found in the LICENSE file.
-->
-{{define "unit_pre_content"}}
- <link href="/static/css/unit_header.css?version={{.AppVersionLabel}}" rel="stylesheet">
- <link href="/static/css/unit_fixed_header.css?version={{.AppVersionLabel}}" rel="stylesheet">
-{{end}}
-
{{define "unit_content"}}
- {{block "versions" .PackageDetails}}{{end}}
+ <div class="Unit-content">
+ {{block "versions" .PackageDetails}}{{end}}
+ </div>
{{end}}
