Wrap clicked/targeted reflist item in red highlight frame

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%;
       }

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}`}

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);