From 4f9deea5f4d1ffa821c93f21837567d00aeb7c0a Mon Sep 17 00:00:00 2001
From: Adam Argyle <atom@argyleink.com>
Date: Mon, 26 Nov 2018 11:32:10 -0800
Subject: [PATCH] more nudging and prep for release

---
 app/demo/artboard.css |  16 +++++--
 app/demo/index.css    |   7 +--
 app/demo/shapes.css   |   1 +
 app/index.html        | 109 ++++++++++++++++++++++++------------------
 4 files changed, 79 insertions(+), 54 deletions(-)

diff --git a/app/demo/artboard.css b/app/demo/artboard.css
index ad480987..de3cf4b6 100644
--- a/app/demo/artboard.css
+++ b/app/demo/artboard.css
@@ -52,10 +52,18 @@
     }
   }
 
-  & .tip {
-    margin-top: 0;
-    margin-bottom: 0;
-    font-size: 0.9rem;
+  & .tips {
+    display: grid;
+    grid-gap: 0.5rem;
+    border: 1px solid var(--darkest-grey);
+    border-radius: 1rem;
+    padding: 0.5rem 0.75rem;
+
+    & > p {
+      margin-top: 0;
+      margin-bottom: 0;
+      font-size: 0.8rem;  
+    }
   }
 
   & > [grid][vertically-aligned] {
diff --git a/app/demo/index.css b/app/demo/index.css
index 0180689e..143e382b 100644
--- a/app/demo/index.css
+++ b/app/demo/index.css
@@ -145,7 +145,7 @@ img {
       display: grid;
       grid-auto-flow: column;
       align-items: center;
-      justify-content: right;
+      justify-content: space-between;
       grid-gap: 0.5rem;
     }
   }
@@ -192,11 +192,12 @@ img {
 
 kbd {
   font-weight: bold;
+  font-size: 1rem;
   background: var(--lighter-grey);
   border-radius: 0.5rem;
-  padding: 0.1em 0.6em 0.4em;
+  padding: 0.1em 0.6em 0.2em;
   position: relative;
-  bottom: 0.2em;
+  bottom: 0.05em;
 }
 
 .key {
diff --git a/app/demo/shapes.css b/app/demo/shapes.css
index db9a97ca..a8a43751 100644
--- a/app/demo/shapes.css
+++ b/app/demo/shapes.css
@@ -28,6 +28,7 @@
   &.google-yellow   { background-color: #F4B400; width: 15vw; height: 15vw; }
   &.google-red      { background-color: #DB4437; width: 15vw; height: 15vw; }
   &.google-green    { background-color: #0F9D58; width: 15vw; height: 15vw; }
+  &.shadow-circle   { background-color: white; box-shadow: 0 10px 30px 2px hsla(0,0%,0%,20%); } 
 }
 
 [round-icon] {
diff --git a/app/index.html b/app/index.html
index 9ecf02db..61475f83 100644
--- a/app/index.html
+++ b/app/index.html
@@ -116,9 +116,9 @@ <h2 class="You_did_it!"><b class="You_did_it!">Click</b> Me 😏</h2>
 
       <article span2x1 class="artboard" padded grid vertically-distributed="between">
         <label>Keyboard Nav</label>
-        <div>
-          <p class="tip">💡 <kbd>Tab</kbd> & <kbd>Shift + Tab</kbd> traverse laterally</p>
-          <p class="tip">💡 <kbd>Enter</kbd> & <kbd>Shift + Enter</kbd> traverse lineage</p>
+        <div class="tips">
+          <p> <kbd>Tab</kbd> & <kbd>Shift + Tab</kbd> traverse laterally</p>
+          <p> <kbd>Enter</kbd> & <kbd>Shift + Enter</kbd> traverse lineage</p>
         </div>
         <div grid horizontally-distributed="between" vertically-aligned="center">
           <div class="outlined-square" grid horizontally-distributed="around" vertically-aligned="center">
@@ -139,10 +139,10 @@ <h2 class="You_did_it!"><b class="You_did_it!">Click</b> Me 😏</h2>
 
       <article span2x1 select-multiple padded class="artboard" grid vertically-distributed="between">
         <label class="Learn_to_select_multiple_items_👇">Select Multiple</label>
-        <div>
-          <p class="tip">💡 Hold <kbd>shift</kbd> to manually multi-select</p>
-          <p class="tip">💡 Press <kbd>cmd+e</kbd> to expand your selection</p>
-          <p class="tip">💡 Press <kbd>cmd+shift+e</kbd> to expand to all matches</p>
+        <div class="tips">
+          <p> Hold <kbd>shift</kbd> to manually multi-select</p>
+          <p> Press <kbd>cmd+e</kbd> to expand your selection</p>
+          <p> Press <kbd>cmd+shift+e</kbd> to expand to all matches</p>
         </div>
         <div grid vertically-aligned="center">
           <span class="tip">try here 👉</span>
@@ -165,8 +165,8 @@ <h2 class="You_did_it!"><b class="You_did_it!">Click</b> Me 😏</h2>
 
       <article span1x2 padded class="artboard" grid="rows" horizontally-distributed="between">
         <label>Margin Tool</label>
-        <div>
-          <p class="tip">💡 Hotkey <kbd>m</kbd></p>
+        <div class="tips">
+          <p> Hotkey <kbd>m</kbd></p>
         </div>
         <div fit-height grid vertically-aligned="center" horizontally-aligned="center">
           <nav margin>
@@ -189,8 +189,8 @@ <h2 class="Press_the_delete_key!">Ad</h2>
 
       <article span1x1 padded class="artboard" grid="rows" horizontally-distributed="between">
         <label>Guides</label>
-        <div>
-          <p class="tip">💡 Redlines & distance coming soon!</p>
+        <div class="tips">
+          <p> Redlines & distance coming soon!</p>
         </div> 
         <div fit-height grid vertically-aligned="center" horizontally-aligned="center">
           <h3>Am I in the center?<span class="👾_wtf_is_this? delete_it!">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></h3>
@@ -225,8 +225,8 @@ <h2>BUT<br>
 
       <article span1x1 padded class="artboard" grid="rows" vertically-distributed="between">
         <label class="Learn_to_multiply_items_👇">Duplicate</label>
-        <div>
-          <p class="tip">💡 Press <kbd>cmd+d</kbd></p>
+        <div class="tips">
+          <p> Press <kbd>cmd+d</kbd></p>
         </div> 
         <div fit-height grid vertically-aligned="center" horizontally-aligned="center" horizontally-distributed="around">
           <button class="mdc-button mdc-button--raised" style="margin-bottom:0.5rem;">Submit</button>
@@ -235,9 +235,9 @@ <h2>BUT<br>
 
       <article copy_paste padded span2x1 class="artboard" grid vertically-aligned="center" vertically-distributed="between">
         <label>Copy/Paste Elements</label>
-        <div>
-          <p class="tip">💡 Copy the circle <b>from the left box</b> and paste it <b>in the right box</b></p>
-          <p class="tip">💡 Works across tabs!</b></p>
+        <div class="tips">
+          <p> Copy the circle <b>from the left box</b> and paste it <b>in the right box</b></p>
+          <p> Works across tabs!</b></p>
         </div>
         <div grid horizontally-distributed="around" vertically-aligned="center">
           <div class="outlined-square" grid horizontally-distributed="around" vertically-aligned="center">
@@ -250,10 +250,10 @@ <h2>BUT<br>
 
       <article span2x1 class="artboard" padded grid="rows" vertically-distributed="equal">
         <label>Copy/Paste Styles</label>
-        <div>
-          <p class="tip">💡 Copy styles with <kbd>cmd+opt+c</kbd></p>
-          <p class="tip">💡 Paste copied styles with <kbd>cmd+opt+v</kbd></p>
-          <p class="tip">💡 <b>For fun:</b> copy the styles of a dark artboard and paste it over some light artboards</p>
+        <div class="tips">
+          <p> Copy styles with <kbd>cmd+opt+c</kbd></p>
+          <p> Paste copied styles with <kbd>cmd+opt+v</kbd></p>
+          <p> <b>For fun:</b> copy the styles of a dark artboard and paste it over some light artboards</p>
         </div> 
         <div fit-height grid vertically-aligned="center" horizontally-aligned="center" horizontally-distributed="around">
           <button class="mdc-button mdc-button--raised" style="background:hsl(0,0%,10%);color:hsl(0,0%,70%);">Copy my darkness</button>
@@ -281,8 +281,8 @@ <h2>BUT<br>
 
       <article span3x1 class="artboard" padded grid vertically-distributed="equal">
         <label>Text Styles</label>
-        <div>
-          <p class="tip">💡 Multiselect these headings and edit the ramp with the font tool</p>
+        <div class="tips">
+          <p> Multiselect these headings and edit the ramp with the font tool</p>
         </div>
         <div text-styles>
           <h1>The quick brown fox jumps over the lazy dog</h1>
@@ -296,8 +296,8 @@ <h6>The quick brown fox jumps over the lazy dog</h6>
 
       <article span2x1 class="artboard" padded grid vertically-distributed="between">
         <label>Move Tool</label>
-        <div>
-          <p class="tip">💡 <b>Fix the order</b> of the circles below</p>
+        <div class="tips">
+          <p><b>Fix the order</b> of the circles below</p>
         </div>
         <div ordered-numbers fit-height>
           <div class="filled-circle">3</div>
@@ -310,7 +310,9 @@ <h6>The quick brown fox jumps over the lazy dog</h6>
 
       <article span1x2 class="artboard" padded grid="rows" vertically-distributed="equal" horizontally-aligned="center">
         <label>Move Tool</label>
-        <p class="tip">💡 Flow direction can make left/right be up/down 🤔</p>
+        <div class="tips">
+          <p >Flow direction can make left/right be up/down 🤔</p>
+        </div>
         <div stop-light fit-height>
           <div class="filled-circle green"></div>
           <div class="filled-circle yellow"></div>
@@ -338,11 +340,11 @@ <h2>Site<br>
         </div>
       </article> 
 
-      <article span2x2 class="artboard" grid horizontally-distributed="equal">
+      <article padded span2x2 class="artboard" grid="rows" horizontally-distributed="space-between">
         <label>Inline SVG</label>
-        <div padded>
-          <p class="tip">💡 delete, copy, paste, duplicate</p>
-          <p class="tip">💡 change color, move x/y, inspect</p>
+        <div padded class="tips">
+          <p>Delete, copy, paste, & duplicate svg!</p>
+          <p>Change color, move x/y, & inspect svg!</p>
         </div>
         <div grid vertically-aligned="center" horizontally-aligned="center">
           <svg height="90%" width="90%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -373,8 +375,8 @@ <h2>Site<br>
 
       <article span2x1 padded class="artboard" grid="rows" horizontally-distributed="between">
         <label>Padding Tool</label>
-        <div>
-          <p class="tip">💡 Hotkey <kbd>p</kbd></p>
+        <div class="tips">
+          <p> Hotkey <kbd>p</kbd></p>
         </div>
         <div fit-height grid vertically-aligned="center" horizontally-aligned="center">
           <nav>
@@ -387,10 +389,13 @@ <h2>Site<br>
         </div>
       </article> 
 
-      <article span1x1 padded class="artboard">
+      <article span1x1 padded class="artboard" grid="rows" horizontally-distributed="between">
         <label>Drop Shadow Tool</label>
-        <div>
-          <p class="tip">💡 Hotkey <kbd>d</kbd></p>
+        <div class="tips">
+          <p>Hotkey <kbd>d</kbd></p>
+        </div>
+        <div fit-height grid vertically-aligned="center" horizontally-aligned="center">
+          <div class="filled-circle shadow-circle"></div>
         </div>
       </article> 
 
@@ -406,9 +411,9 @@ <h2>for help</h2>
 
       <article span1x1 padded class="artboard" grid="rows" horizontally-distributed="between">
         <label>Position Tool</label>
-        <div>
-          <p class="tip">💡 Hotkey <kbd>l</kbd></p>
-          <p class="tip">💡 Click to select, then click hold and drag anything around</p>
+        <div class="tips">
+          <p> Hotkey <kbd>l</kbd></p>
+          <p> Click to select, then click hold and drag anything around</p>
         </div>
         <div fit-height grid vertically-aligned="center" horizontally-aligned="center">
           <p style="text-align: center;">Move this artboard to somewhere wierd!</p>
@@ -417,8 +422,8 @@ <h2>for help</h2>
 
       <article span2x1 padded class="artboard" grid="rows" horizontally-distributed="between">
         <label>Align Tool</label>
-        <div>
-          <p class="tip">💡 Hotkey <kbd>a</kbd></p>
+        <div class="tips">
+          <p> Hotkey <kbd>a</kbd></p>
         </div>
         <div class="Use_the_align_tool_arrow_keys_on_me!" fit-height grid vertically-aligned="center" horizontally-aligned="center">
           <a class="padding-link" href="#">Left</a>
@@ -429,17 +434,27 @@ <h2>for help</h2>
         </div>
       </article> 
 
-      <article span2x1 padded class="artboard">
+      <article span2x1 padded class="artboard" grid="rows" horizontally-distributed="between">
         <label>Search Tool</label>
-        <div>
-          <p class="tip">💡 Hotkey <kbd>s</kbd></p>
+        <div class="tips">
+          <p> Hotkey <kbd>s</kbd></p>
+        </div>
+        <div class="Use_the_search_tool_to_select_elements!" fit-height grid="rows" vertically-aligned="center" horizontally-aligned="center">
+          <h4 class="Select_me_programmatically search-title">Select me by searching ".search-title"</h4>
+          <div class="Select_all_my_children_programatically">
+            <a class="search-link" href="#">Search</a>
+            <a class="search-link" href="#">".search-link"</a>
+            <a class="search-link" href="#">To</a>
+            <a class="search-link" href="#">Select</a>
+            <a class="search-link" href="#">Us</a>
+          </div>
         </div>
       </article> 
 
       <article span1x1 grid="rows" padded class="artboard Delete_styles" grid="rows" horizontally-distributed="between">
         <label class="Learn_to_delete_styles_👇">Delete styles</label>
-        <div>
-          <p class="tip">💡 Press <kbd>opt+del</kbd> to remove inline styles</p>
+        <div class="tips">
+          <p> Press <kbd>opt+del</kbd> to remove inline styles</p>
           <small class="Fix_me!">Ew, get rid of these terrible edits someone (me) did! 👇</small>
         </div>
         <div fit-height grid vertically-aligned="center" horizontally-aligned="center">
@@ -449,9 +464,9 @@ <h2 style="font-size: 3rem; color: green; text-shadow: 0 2px 4px red; font-weigh
 
       <article span2x2 padded class="artboard" grid="rows" horizontally-distributed="between">
         <label>Foreground / Background Color</label>
-        <div>
-          <p class="tip">💡 Hotkey <kbd>h</kbd></p>
-          <p class="tip">💡 Hotkey <kbd>[</kbd> or <kbd>]</kbd> to switch between foreground/background</p>
+        <div class="tips">
+          <p> Hotkey <kbd>h</kbd></p>
+          <p> Hotkey <kbd>[</kbd> or <kbd>]</kbd> to switch between foreground/background</p>
         </div>
         <div fit-height grid vertically-aligned="center" horizontally-aligned="center" horizontally-distributed="around">
           <div class="filled-circle google-blue">1</div>