diff --git a/src/page/timeline/timeline-element/timeline-element.html.ts b/src/page/timeline/timeline-element/timeline-element.html.ts index f3aa807..fbbf865 100644 --- a/src/page/timeline/timeline-element/timeline-element.html.ts +++ b/src/page/timeline/timeline-element/timeline-element.html.ts @@ -6,8 +6,10 @@ import { html } from '../../../types/html'; export const generate = ( { date, title, more }: TimelineElement, showMore: string -): html => ` -
+): html => { + const id = titleToFragment(title); + return ` +

${date}

@@ -15,7 +17,7 @@ export const generate = (
-

${title}

+

${title}

${more ? '
' : ''}
@@ -33,3 +35,7 @@ export const generate = (
`; +}; + +const titleToFragment = (title: string): string => + encodeURIComponent(title.toLocaleLowerCase().replace(/\W+/g, '-')); diff --git a/src/page/timeline/timeline-element/timeline-element.scss b/src/page/timeline/timeline-element/timeline-element.scss index f04defb..aee7123 100644 --- a/src/page/timeline/timeline-element/timeline-element.scss +++ b/src/page/timeline/timeline-element/timeline-element.scss @@ -108,8 +108,24 @@ margin-top: var(--small-margin); } - h2 { + h2 > 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; + } } & > p {