Move heading anchors 50px up to avoid nav bar
Fixes #447. We do this by moving the actual anchored element up in the page without moving the actual text. (Apple uses a similar trick in their framed docs.) Now this looks a bit sillier on smaller screens but it's better overall.
Ben Alpert committed
Oct 27, 2013 at 16:47 UTC
25ba629098497bfa4ac7ce62f6c5f02ca4e5fad3
2 files changed
+15
-7
docs/_css/react.scss
+14
-6
@@ -15,6 +15,7 @@ $contentPadding: 20px;
15
$columnWidth: 280px;
16
$columnGutter: 40px;
17
$twoColumnWidth: 2 * $columnWidth + $columnGutter;
18
+$navHeight: 50px;
19
20
21
@@ -42,7 +43,7 @@ html {
43
44
45
.container {
45
- padding-top: 50px;
46
+ padding-top: $navHeight;
47
min-width: $contentWidth + (2 * $contentPadding);
48
}
49
@@ -81,7 +82,7 @@ li {
82
color: $lightTextColor;
83
position: fixed;
84
top: 0;
84
- height: 50px;
85
+ height: $navHeight;
86
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
87
width: 100%;
88
z-index: 100;
@@ -103,9 +104,9 @@ li {
104
padding: 0 8px;
105
text-transform: uppercase;
106
letter-spacing: 1px;
106
- line-height: 50px;
107
+ line-height: $navHeight;
108
display: inline-block;
108
- height: 50px;
109
+ height: $navHeight;
110
color: $mediumTextColor;
111
112
&:hover {
@@ -123,7 +124,7 @@ li {
124
.nav-home {
125
color: #00d8ff;
126
font-size: 24px;
126
- line-height: 50px;
127
+ line-height: $navHeight;
128
}
129
130
.nav-logo {
@@ -392,8 +393,15 @@ section.black content {
393
}
394
395
h1, h2, h3, h4, h5, h6 {
395
- a {
396
+ &.anchor {
397
+ position: relative;
398
+ top: -$navHeight;
399
+ }
400
+
401
+ > a {
402
color: $darkTextColor;
403
+ position: relative;
404
+ top: $navHeight;
405
406
&:hover {
407
text-decoration: underline;
docs/_plugins/header_links.rb
+1
-1
@@ -11,7 +11,7 @@ class Redcarpet::Render::HTML
11
.gsub(/\s+/, "-")
12
.gsub(/[^A-Za-z0-9\-_.]/, "")
13
14
- return "<h#{level} id=\"#{clean_title}\"><a href=\"##{clean_title}\">#{title}</a></h#{level}>"
14
+ return "<h#{level} id=\"#{clean_title}\" class=\"anchor\"><a href=\"##{clean_title}\">#{title}</a></h#{level}>"
15
end
16
end
17