content/static: simplify and update target behavior to match godoc
Anchor link targets were given artificial height with a negative
margin to make their content appear below the fixed header. When
attempting to highlight links this caused a large area above the
identifiers to be yellow as well as the text. A new CSS feature,
scroll marging, is used instead.
Highlights do not appear on consts, vars, and fields because their
targets contain no content. A separate change will address this
issue.
Change-Id: I795919cf29ebfa5c127dc1993458beba5b2ad9ba
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/283952
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/sidenav.css b/content/static/css/sidenav.css
index 01ddb6f..cda762b 100644
--- a/content/static/css/sidenav.css
+++ b/content/static/css/sidenav.css
@@ -8,12 +8,6 @@
* Styling the sidenav.
*/
-.DetailsContent :target::before {
- height: calc(var(--header-height) + 3.75rem);
- margin-top: calc(
- -1 * (var(--header-height) + 3.75rem)
- ); /* Move hidden anchor content for deep linking with a sticky header. */
-}
.Documentation-nav,
.Documentation-index,
.DocNav,
@@ -100,12 +94,6 @@
color: var(--gray-3);
}
@media only screen and (min-width: 52rem) {
- .DetailsContent :target::before {
- height: calc(var(--header-height) + 0.75rem);
- margin-top: calc(
- -1 * (var(--header-height) + 0.75rem)
- ); /* Move hidden anchor content for deep linking with a sticky header. */
- }
.Documentation {
column-gap: 2rem;
display: grid;
diff --git a/content/static/css/stylesheet.css b/content/static/css/stylesheet.css
index 3e087dc..d3cf587 100644
--- a/content/static/css/stylesheet.css
+++ b/content/static/css/stylesheet.css
@@ -784,16 +784,6 @@
.Site--wide .DetailsContent {
max-width: none;
}
-.DetailsContent :target::before {
- content: ' ';
- display: block;
- height: calc(var(--header-height) + 0.75rem);
- margin-top: calc(
- -1 * (var(--header-height) + 0.75rem)
- ); /* Move hidden anchor content for deep linking with a sticky header. */
- pointer-events: none;
- visibility: hidden;
-}
.CopyToClipboardButton {
background-color: transparent;
diff --git a/content/static/css/unit_details.css b/content/static/css/unit_details.css
index 78a1782..948fc8d 100644
--- a/content/static/css/unit_details.css
+++ b/content/static/css/unit_details.css
@@ -45,6 +45,17 @@
justify-content: center;
}
}
+.UnitDetails :target {
+ scroll-margin-top: calc(var(--header-height) + 3.75rem);
+}
+@media only screen and (min-width: 52rem) {
+ .UnitDetails :target {
+ scroll-margin-top: calc(var(--header-height) + 0.75rem);
+ }
+}
+.UnitDetails :target:not(h2) {
+ background-color: var(--yellow);
+}
.UnitDetails-outline {
display: none;
height: calc(100vh - 7.8475rem);
@@ -75,25 +86,6 @@
display: block;
}
}
-.UnitDetails-content :target::before {
- content: '';
- display: block;
- position: relative;
- width: 0;
- height: calc(var(--header-height) + 3.75rem);
- margin-top: calc(
- -1 * (var(--header-height) + 3.75rem)
- ); /* Move hidden anchor content for deep linking with a sticky header. */
-}
-@media only screen and (min-width: 52rem) {
- .UnitDetails-content :target::before {
- height: calc(var(--header-height) + 0.75rem);
- margin-top: calc(
- -1 * (var(--header-height) + 0.75rem)
- ); /* Move hidden anchor content for deep linking with a sticky header. */
- }
-}
-
.UnitDetails-contentEmpty {
background-color: var(--gray-10);
color: var(--gray-2);
@@ -101,7 +93,6 @@
padding-top: 1rem;
text-align: center;
}
-
.UnitDetails-contentEmpty img {
height: 7.8125rem;
width: auto;
diff --git a/content/static/css/unit_readme.css b/content/static/css/unit_readme.css
index 7a523bb..418b3d8 100644
--- a/content/static/css/unit_readme.css
+++ b/content/static/css/unit_readme.css
@@ -15,6 +15,7 @@
}
.UnitReadme-title img {
margin-right: 1rem;
+ vertical-align: bottom;
}
.UnitReadme-content {
position: relative;
@@ -47,6 +48,7 @@
}
.UnitReadme--expanded .UnitReadme-content {
max-height: initial;
+ overflow: initial;
}
.UnitReadme--expanded .UnitReadme-fadeOut {
display: none;
diff --git a/content/static/html/helpers/_unit_directories.tmpl b/content/static/html/helpers/_unit_directories.tmpl
index 72274c4..06d2c05 100644
--- a/content/static/html/helpers/_unit_directories.tmpl
+++ b/content/static/html/helpers/_unit_directories.tmpl
@@ -5,8 +5,8 @@
-->
{{define "unit_directories"}}
- <div class="UnitDirectories js-unitDirectories" id="section-directories">
- <h2 class="UnitDirectories-title">
+ <div class="UnitDirectories js-unitDirectories">
+ <h2 class="UnitDirectories-title" id="section-directories">
<img height="25px" width="20px" src="/static/img/pkg-icon-folder_20x16.svg" alt="">Directories
</h2>
<div class="UnitDirectories-expandButton js-expandAllDirectories">
diff --git a/content/static/html/helpers/_unit_doc.tmpl b/content/static/html/helpers/_unit_doc.tmpl
index 2b015d5..6a46f3b 100644
--- a/content/static/html/helpers/_unit_doc.tmpl
+++ b/content/static/html/helpers/_unit_doc.tmpl
@@ -5,8 +5,8 @@
-->
{{define "unit_doc"}}
- <div class="UnitDoc" id="section-documentation">
- <h2 class="UnitDoc-title">
+ <div class="UnitDoc">
+ <h2 class="UnitDoc-title" id="section-documentation">
<img height="25px" width="20px" src="/static/img/pkg-icon-doc_20x12.svg" alt="">Documentation
</h2>
<div class="Documentation js-documentation">
diff --git a/content/static/html/helpers/_unit_files.tmpl b/content/static/html/helpers/_unit_files.tmpl
index fdf4e73..568c06f 100644
--- a/content/static/html/helpers/_unit_files.tmpl
+++ b/content/static/html/helpers/_unit_files.tmpl
@@ -5,8 +5,8 @@
-->
{{define "unit_files"}}
- <div class="UnitFiles js-unitFiles" id="section-sourcefiles">
- <h2 class="UnitFiles-title">
+ <div class="UnitFiles js-unitFiles">
+ <h2 class="UnitFiles-title" id="section-sourcefiles">
<img height="16px" width="12px" src="/static/img/pkg-icon-file_16x12.svg" alt="">Source Files
</h2>
<div class="UnitFiles-titleLink">
diff --git a/content/static/html/helpers/_unit_readme.tmpl b/content/static/html/helpers/_unit_readme.tmpl
index 22f0828..07f209f 100644
--- a/content/static/html/helpers/_unit_readme.tmpl
+++ b/content/static/html/helpers/_unit_readme.tmpl
@@ -5,8 +5,8 @@
-->
{{define "unit_readme"}}
- <div class="UnitReadme {{if .ExpandReadme}}UnitReadme--expanded{{end}} js-readme" id="section-readme">
- <h2 class="UnitReadme-title">
+ <div class="UnitReadme {{if .ExpandReadme}}UnitReadme--expanded{{end}} js-readme">
+ <h2 class="UnitReadme-title" id="section-readme">
<img height="25px" width="20px" src="/static/img/pkg-icon-readme_20x16.svg" alt="">README
</h2>
{{if .Readme.String }}
