diff --git a/docs/index.html b/docs/index.html index 119e2b7bb..dbc700bf5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -19,15 +19,79 @@ code, kbd { font-size: 1em; } code { transform: scale(1); } /* Deals with the issue described in #243 */ pre { font-size: 1rem; border: 0.0625rem solid var(--secondary-border-color); border-radius: var(--universal-border-radius);} + .group { + position:relative; + margin-top: 3em; + padding-bottom: -1em; + } + .search { + font-size:18px; + padding:10px 10px 10px 5px; + display:block; + width:300px; + border:none; + border-bottom:1px solid var(--nav-link-color); + } + .search:focus { outline:none; } + + /* LABEL ======================================= */ + label { + color: var(--nav-link-color); + font-size:18px; + font-weight:normal; + position:absolute; + pointer-events:none; + left:5px; + top:10px; + transition:0.2s ease all; + -moz-transition:0.2s ease all; + -webkit-transition:0.2s ease all; + } + + /* active state */ + .search:focus ~ label, .search:valid ~ label { + top:-20px; + font-size:14px; + color: var(--nav-link-color); + } + + /* BOTTOM BARS ================================= */ + .bar { position:relative; display:block; width:300px; } + .bar:before, .bar:after { + content:''; + height:2px; + width:0; + bottom:1px; + position:absolute; + background: var(--nav-link-color); + } + .bar:before { + left:50%; + } + .bar:after { + right:50%; + } + + /* HIGHLIGHTER ================================== */ + .highlight { + position:absolute; + height:60%; + width:100px; + top:25%; + left:0; + pointer-events:none; + opacity:0.5; + } + @@ -40,7 +104,13 @@

mapObject

Maps the values of an array to an object using a function, where the key-value pairs consist of the original value as the key and the mapped value.

Use an anonymous inner function scope to declare an undefined memory space, using closures to store a return value. Use a new Array to stor the array with a map of the function over its data set and a comma operator to return a second step, without needing to move from one context to another (due to closures and order of operations).

-
const mapObject = (arr, fn) =>
+
const mapObject = (arr, fn) => 
   (a => (a = [arr, arr.map(fn)], a[0].reduce( (acc,val,ind) => (acc[val] = a[1][ind], acc), {}) )) ( );
 /*
 const squareIt = arr => mapObject(arr, a => a*a)
@@ -386,7 +456,7 @@ Use Array.push() to keep track of pulled values

let removed = []; let pulled = arr.map((v, i) => pullArr.includes(i) ? removed.push(v) : v) .filter((v, i) => !pullArr.includes(i)) - arr.length = 0; + arr.length = 0; pulled.forEach(v => arr.push(v)); return removed; } @@ -403,7 +473,7 @@ Use Array.push() to keep track of pulled values

Use Array.length = 0 to mutate the passed in array by resetting it's length to zero and Array.push() to re-populate it with only the pulled values. Use Array.push() to keep track of pulled values

const pullAtValue = (arr, pullArr) => {
-  let removed = [],
+  let removed = [], 
     pushToRemove = arr.forEach((v, i) => pullArr.includes(v) ? removed.push(v) : v),
     mutateTo = arr.filter((v, i) => !pullArr.includes(v));
   arr.length = 0;
@@ -1183,3 +1253,4 @@ Use Number() to check if the coercion holds.

+ diff --git a/static-parts/index-start.html b/static-parts/index-start.html index 9ebc743f6..b5f2b2bbb 100644 --- a/static-parts/index-start.html +++ b/static-parts/index-start.html @@ -19,15 +19,79 @@ code, kbd { font-size: 1em; } code { transform: scale(1); } /* Deals with the issue described in #243 */ pre { font-size: 1rem; border: 0.0625rem solid var(--secondary-border-color); border-radius: var(--universal-border-radius);} + .group { + position: relative; + margin-top: 2em; + margin-bottom: -1em; + } + .search { + font-size: 14px; + margin-top: -0.1em; + display: block; + width: 320px; + border: none; + border-bottom: 1px solid var(--nav-link-color); + } + .search:focus { outline:none; } + + /* LABEL ======================================= */ + label { + color: var(--nav-link-color); + font-size:18px; + font-weight:normal; + position:absolute; + pointer-events:none; + left:5px; + top:10px; + transition:0.2s ease all; + -moz-transition:0.2s ease all; + -webkit-transition:0.2s ease all; + } + + /* active state */ + .search:focus ~ label, .search:valid ~ label { + top:-20px; + font-size:14px; + color: var(--nav-link-color); + } + + /* BOTTOM BARS ================================= */ + .bar { position:relative; display:block; width:inherit; } + .bar:before, .bar:after { + content:''; + height:2px; + width:0; + bottom:1px; + position:absolute; + background: var(--nav-link-color); + } + .bar:before { + left:50%; + } + .bar:after { + right:50%; + } + + /* HIGHLIGHTER ================================== */ + .highlight { + position:absolute; + height:60%; + width:100px; + top:25%; + left:0; + pointer-events:none; + opacity:0.5; + } + @@ -40,5 +104,11 @@