From 03b93820b96da1a21b78c1641336235497b3db71 Mon Sep 17 00:00:00 2001
From: Milos Lajtman <milos.lajtman@edocu.com>
Date: Sat, 19 Oct 2019 14:55:43 +0200
Subject: [PATCH] Wrap clicked/targeted reflist item in red highlight frame

---
 src/components/contentWrapper.js |  2 +-
 src/components/reflist.js        | 14 +++++++++++---
 src/utils/colors.js              |  4 +++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/contentWrapper.js b/src/components/contentWrapper.js
index c003bb9..0be24a6 100644
--- a/src/components/contentWrapper.js
+++ b/src/components/contentWrapper.js
@@ -7,7 +7,7 @@ const ContentWrapper = ({ children, style }) => (
     css={css`
       max-width: 850px;
       width: 80%;
-      margin: 0 auto;
+      margin: 0 auto 2em;
       @media (max-width: 700px) {
         width: 90%;
       }
diff --git a/src/components/reflist.js b/src/components/reflist.js
index 17ffea1..07760a9 100644
--- a/src/components/reflist.js
+++ b/src/components/reflist.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { css } from '@emotion/core';
+import { redExtraLight, redLight } from '../utils/colors';
 
 export const citations = [
   {
@@ -79,10 +80,17 @@ const RefList = () => (
     {citations.map(x => (
       <li
         css={css`
-          text-indent: -2rem;
-          margin-left: 2rem;
-          padding-bottom: 1.5rem;
+          text-indent: -1.5rem;
           word-break: break-all;
+          padding: 0.5rem 1rem 0.5rem 2.5rem;
+          margin: 0 -1rem 0.5rem;
+
+          :target {
+            border: 1px solid ${redLight}44;
+            border-radius: 10px;
+            background-color: ${redExtraLight};
+            box-shadow: rgba(00, 00, 00, 0.2) 0px 2px 12px 0px;
+          }
         `}
         key={x.name}
         id={`ref-${x.name}`}
diff --git a/src/utils/colors.js b/src/utils/colors.js
index 36d37ad..aa916d1 100644
--- a/src/utils/colors.js
+++ b/src/utils/colors.js
@@ -1,4 +1,6 @@
-import { darken, saturate } from 'unitransform';
+import { darken, lighten, saturate, desaturate } from 'unitransform';
 
 export const red = `#c10000`;
 export const redDark = saturate(darken(red, 12), 5);
+export const redLight = desaturate(lighten(red, 24), 10);
+export const redExtraLight = desaturate(lighten(red, 52), 25);