Headers have ids and link to their own id.

5 files changed, 28 insertions, 3 deletions

diff --git a/app/assets/images/icon-link.png b/app/assets/images/icon-link.png
new file mode 100644
index 00000000000..32ade0fe9a3
--- /dev/null
+++ b/app/assets/images/icon-link.png
diff --git a/app/assets/stylesheets/generic/files.scss b/app/assets/stylesheets/generic/files.scss
index 20877507c91..85111a45913 100644
--- a/app/assets/stylesheets/generic/files.scss
+++ b/app/assets/stylesheets/generic/files.scss
@@ -50,7 +50,6 @@
     }
 
     &.wiki {
-      padding: 20px;
       font-size: 14px;
       line-height: 1.6;
 
diff --git a/app/assets/stylesheets/generic/issue_box.scss b/app/assets/stylesheets/generic/issue_box.scss
index afe9c5f8186..c3a39f02513 100644
--- a/app/assets/stylesheets/generic/issue_box.scss
+++ b/app/assets/stylesheets/generic/issue_box.scss
@@ -23,11 +23,12 @@
     line-height: 28px;
     margin: 0;
     color: #444;
+    border-bottom: 1px solid #eee;
   }
 
   .context {
     border: none;
-    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
   }
 
   .description {
@@ -35,7 +36,7 @@
   }
 
   .title, .context, .description {
-    padding: 15px;
+    padding: 15px 15px 15px 30px;
 
     .clearfix {
       margin: 0;
diff --git a/app/assets/stylesheets/generic/typography.scss b/app/assets/stylesheets/generic/typography.scss
index 419a63d4d3a..1a07fde53f1 100644
--- a/app/assets/stylesheets/generic/typography.scss
+++ b/app/assets/stylesheets/generic/typography.scss
@@ -90,6 +90,27 @@ a:focus {
 
   font-size: 14px;
   line-height: 1.6;
+
+  /* Link to current header. */
+  h1, h2, h3, h4, h5, h6 {
+    position: relative;
+    &:hover > :last-child {
+      $size: 16px;
+      position: absolute;
+      right: 100%;
+      top: 50%;
+      margin-top: -$size/2;
+      margin-right: 0px;
+      padding-right: 20px;
+      display: inline-block;
+      width: $size;
+      height: $size;
+      background-image: url("icon-link.png");
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+  }
+
   ul {
     padding: 0;
     margin: 0 0 9px 25px !important;
diff --git a/app/assets/stylesheets/main/mixins.scss b/app/assets/stylesheets/main/mixins.scss
index 4afe61d756c..a7a5ed73abd 100644
--- a/app/assets/stylesheets/main/mixins.scss
+++ b/app/assets/stylesheets/main/mixins.scss
@@ -114,6 +114,10 @@
     font-size: 1.2em;
   }
 
+  // Larger 30px left margin is required for the header link icon.
+  // Use on all markdown including those without header links for uniformity.
+  margin: 20px 20px 20px 30px;
+
   blockquote p {
     color: #888;
     font-size: 14px;