Add hover link to contact element

src/page/contact/contact.html.ts

@@ -14,7 +14,10 @@ export const Contact = ({
   lastEditText: string;
 }): html => `
   <section id="contact">
-    <h2>${title}</h2>
+    
+  <h2>
+    <a href="#contact">${title}</a>
+  </h2>
 
     <div class="links">
       ${links.join('')}

src/page/contact/contact.scss

@@ -2,14 +2,18 @@
 
 #contact {
   text-align: center;
-  margin-top: var(--large-margin);
+  margin: var(--large-margin) auto 0 auto;
 
   > h2 {
-    @include title-font();
+    margin-bottom: var(--normal-margin);
+
+    > a {
+      @include title-font();
+      @include title-fragment-link();
+    }
   }
 
   > .links {
-    margin: var(--normal-margin) 0 0 var(--normal-margin);
     display: inline-block;
   }
 

src/page/timeline-element/timeline-element.html.ts

@@ -8,7 +8,7 @@ export const generate = (
   { date, title, description, more, links }: TimelineElementParameters,
   showMore: string
 ): html => `
-  <article id="${titleToFragment(title).replace('#', '')}" class="timeline-element">
+  <section id="${titleToFragment(title).replace('#', '')}" class="timeline-element">
     <div class="line-container">
       <div class="line"></div>
       <p class="date">${date}</p>
@@ -44,5 +44,5 @@ export const generate = (
         </div>
       </div>
     </div>
-  </article>
+  </section>
 `;

src/page/timeline-element/timeline-element.scss

@@ -113,22 +113,7 @@
 
         > a {
           @include sub-title-font();
-          text-decoration: none;
+          @include title-fragment-link();
-          position: relative;
-
-          &:before {
-            content: '#';
-            position: absolute;
-            left: -0.5ch;
-            top: 0;
-            opacity: 0;
-            transform: translateX(-100%);
-            transition: opacity var(--transition-time);
-          }
-
-          &:hover:before {
-            opacity: 0.5;
-          }
         }
       }
 

src/style/mixins.scss

@@ -36,6 +36,25 @@ $breakpoint-width: 925px !default;
   }
 }
 
+@mixin title-fragment-link() {
+  text-decoration: none;
+  position: relative;
+
+  &:before {
+    content: '#';
+    position: absolute;
+    left: -0.5ch;
+    top: 0;
+    opacity: 0;
+    transform: translateX(-100%);
+    transition: opacity var(--transition-time);
+  }
+
+  &:hover:before {
+    opacity: 0.5;
+  }
+}
+
 @mixin center-children() {
   display: flex;
   align-items: center;