From 73003b5b1712f3ee2b51df58882d2d68afd49535 Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Mon, 26 Sep 2022 10:48:56 +0200
Subject: [PATCH] Add hover link to contact element

---
 src/page/contact/contact.html.ts              |  5 ++++-
 src/page/contact/contact.scss                 | 10 +++++++---
 .../timeline-element/timeline-element.html.ts |  4 ++--
 .../timeline-element/timeline-element.scss    | 17 +----------------
 src/style/mixins.scss                         | 19 +++++++++++++++++++
 5 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/page/contact/contact.html.ts b/src/page/contact/contact.html.ts
index c565a88..c18e5f8 100644
--- a/src/page/contact/contact.html.ts
+++ b/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('')}
diff --git a/src/page/contact/contact.scss b/src/page/contact/contact.scss
index 15c1ea0..fc7310a 100644
--- a/src/page/contact/contact.scss
+++ b/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;
   }
 
diff --git a/src/page/timeline-element/timeline-element.html.ts b/src/page/timeline-element/timeline-element.html.ts
index f2c9443..f35bd7d 100644
--- a/src/page/timeline-element/timeline-element.html.ts
+++ b/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>
 `;
diff --git a/src/page/timeline-element/timeline-element.scss b/src/page/timeline-element/timeline-element.scss
index 1856604..763e772 100644
--- a/src/page/timeline-element/timeline-element.scss
+++ b/src/page/timeline-element/timeline-element.scss
@@ -113,22 +113,7 @@
 
         > a {
           @include sub-title-font();
-          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;
-          }
+          @include title-fragment-link();
         }
       }
 
diff --git a/src/style/mixins.scss b/src/style/mixins.scss
index 9e438b0..dc59aca 100644
--- a/src/style/mixins.scss
+++ b/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;