style updates and selected state

Author: Adam Argyle

app/css/index.css

@@ -64,6 +64,7 @@ nav {
     font-size: 2.5rem;
     font-weight: lighter;
     text-decoration: underline;
+    text-decoration-color: var(--white);
   }
 
   @media (max-width: 720px) {
@@ -78,7 +79,7 @@ nav {
     & > select {
       font-size: 1.5rem;
       border: none;
-      background: white;
+      background: var(--white);
     }
   }
 
@@ -140,6 +141,14 @@ dl {
       block-size: .75em;
       inline-size: .75em;
     }
+
+    &[selected] > a {
+      text-decoration-color: deeppink;
+    }
+
+    &:not([selected]) > a {
+      text-decoration: none;
+    }
   }
 }
 

app/index.html

@@ -83,7 +83,7 @@ <h3>Circles</h3>
       <dl>
         <dt>Entrances</dt>
         <dd><a href="#">in:circle:top-right</a></dd>
-        <dd><a href="#" autofocus>in:circle:top-left</a></dd>
+        <dd selected><a href="#" autofocus>in:circle:top-left</a></dd>
         <dd><a href="#">in:circle:bottom-right</a></dd>
         <dd><a href="#">in:circle:bottom-left</a></dd>
 

app/js/index.js

@@ -2,8 +2,12 @@ import $ from 'blingblingjs'
 
 const $demo = $('section')
 
+const [selected] = $('dd').filter(d => 
+  d.textContent === 'in:circle:top-left')
+
 const state = {
-  transition: 'in:circle:top-left'
+  transition: 'in:circle:top-left',
+  selected,
 }
 
 const update = transition => {
@@ -28,7 +32,12 @@ $demo.on('click', e => {
 })
 
 $('dd').on('click', e => {
-  let transition = e.target.textContent
+  let transition = e.currentTarget.textContent
+
+  state.selected.removeAttribute('selected')
+  e.currentTarget.setAttribute('selected', true)
+  state.selected = e.currentTarget
+
   update(transition)
 })