[v2] refactor, improvements to UX/UI and new controls

css/base.css

@@ -23,12 +23,13 @@
   --gray-20: #fafafa;
   --root-font-size: 14px;
   --radius: 2px;
-  --accent: 255, 170, 51;
+  --accent: 0, 255, 0;
   --line-width: 3px;
   --background: var(--gray-01);
-  --animation-speed-fast: 0.1s;
+  --gutter: 0.5em;
-  --animation-speed-medium: 0.2s;
+  --animation-speed-fast: 0.2s;
-  --animation-speed-slow: 0.3s;
+  --animation-speed-medium: 0.3s;
+  --animation-speed-slow: 0.4s;
   --font-regular: "Open Sans Regular", sans-serif;
   --font-bold: "Open Sans Bold", sans-serif;
   --font-light: "Open Sans Light", sans-serif;
@@ -38,7 +39,7 @@
   --breakpoint-sm: 550px;
   --breakpoint-md: 700px;
   --breakpoint-lg: 900px;
-  --breakpoint-xl: 1300px;
+  --breakpoint-xl: 1100px;
 }
 
 :root.is-link-block {
@@ -57,6 +58,7 @@
   :root {
     --root-font-size: 16px;
   }
+
   :root.is-link-block {
     --link-height: 9em;
   }
@@ -75,11 +77,6 @@ body {
   background-color: var(--background);
   color: var(--white);
   font-size: 1rem;
-  width: 100vw;
+  line-height: 1.6;
-  height: 100vh;
   font-family: var(--font-regular);
 }
-
-* {
-  box-sizing: border-box;
-}

css/button.css

@@ -4,9 +4,9 @@ input[type="button"],
 input[type="reset"],
 input[type="submit"] {
   background-color: var(--gray-02);
-  padding: 0.25em 1em;
+  padding: 0.125em 1em;
   margin: 0 0 1em 0;
-  color: var(--gray-16);
+  color: var(--gray-12);
   font-size: 1em;
   font-family: var(--font-regular);
   min-height: 2.5em;
@@ -22,7 +22,7 @@ input[type="submit"] {
   white-space: nowrap;
   cursor: pointer;
   box-shadow: none;
-  transition: all var(--animation-speed-medium) ease-in-out;
+  transition: all var(--animation-speed-fast) ease-in-out;
   display: inline-flex;
   flex-direction: row;
   justify-content: center;
@@ -85,9 +85,14 @@ button [class*=" icon-"],
   font-size: 0.8em;
 }
 
+.button-block {
+  display: flex;
+  width: 100%;
+}
+
 .button-group {
   margin: 0 0 1em 0;
-  display: flex;
+  display: inline-flex;
   justify-content: center;
   align-items: stretch;
 }
@@ -99,12 +104,14 @@ button [class*=" icon-"],
 }
 
 .button-group button:first-child,
-.button-group .button:first-child {
+.button-group .button:first-child,
+.button-group .button-group-addon:first-child {
   border-radius: var(--radius) 0 0 var(--radius);
 }
 
 .button-group button:last-child,
-.button-group .button:last-child {
+.button-group .button:last-child,
+.button-group .button-group-addon:last-child {
   border-radius: 0 var(--radius) var(--radius) 0;
 }
 

css/clock.css

@@ -1,29 +1,52 @@
 .clock {
   margin: 0;
   padding: 0;
-  width: 100%;
+  border-radius: var(--radius);
+  font-size: 1em;
   font-family: var(--font-fjalla);
-  font-size: 1.5em;
   color: var(--white);
-  text-align: center;
+  width: 100%;
+  min-height: 2.5em;
   display: flex;
   flex-direction: row;
   justify-content: center;
-  transition: all var(--animation-speed-medium) ease-in-out;
+  flex-wrap: nowrap;
+}
+
+.clock-seperator,
+.clock-hours,
+.clock-minutes,
+.clock-seconds,
+.clock-meridiem {
+  font-size: 1.5em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .clock-seperator {
+  min-width: 0.5em;
   color: rgb(var(--accent));
 }
 
-.clock-hour,
+.clock-hours,
 .clock-minutes,
-.clock-seconds {
+.clock-seconds,
-  min-width: 1.75em;
+.clock-meridiem {
-  display: block;
+  min-width: 1.25em;
 }
 
-.clock-hour {
+.clock [class^="clock-"]:not(:first-child),
+.clock [class*=" clock-"]:not(:first-child) {
+  margin-left: 0.125em;
+}
+
+.clock [class^="clock-"]:not(:last-child),
+.clock [class*=" clock-"]:not(:last-child) {
+  margin-right: 0.125em;
+}
+
+.clock-hours {
   color: var(--white);
 }
 
@@ -34,3 +57,7 @@
 .clock-seconds {
   color: var(--gray-12);
 }
+
+.clock-meridiem {
+  color: var(--gray-10);
+}

css/container.css

@@ -0,0 +1,44 @@
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  transition: all var(--animation-speed-fast) ease-in-out;
+}
+
+.is-layout-fluid .container,
+.is-layout-wide .container,
+.is-layout-thin .container {
+  width: calc(100vw - 4em);
+}
+
+@media (min-width: 550px) {
+  .is-layout-wide .container {
+    width: 80vw;
+  }
+
+  .is-layout-thin .container {
+    width: 60vw;
+  }
+}
+
+@media (min-width: 900px) {}
+
+@media (min-width: 1000px) {
+  .is-layout-wide .container {
+    width: 75vw;
+  }
+
+  .is-layout-thin .container {
+    width: 40vw;
+  }
+}
+
+@media (min-width: 1600px) {
+  .is-layout-wide .container {
+    width: 70vw;
+  }
+    .is-layout-thin .container {
+      width: 30vw;
+    }
+}
+
+@media (min-width: 1600px) {}

css/form.css

@@ -18,10 +18,53 @@ input[type="text"] {
   border-color: transparent;
   border-radius: var(--radius);
   cursor: text;
-  transition: all var(--animation-speed-medium) ease-in-out;
+  transition: all var(--animation-speed-fast) ease-in-out;
   -moz-appearance: textfield;
 }
 
+input[type="email"][disabled],
+input[type="email"][disabled]:hover,
+input[type="email"][disabled]:focus,
+input[type="email"][disabled]::placeholder,
+input[type="email"][disabled]:hover::placeholder,
+input[type="email"][disabled]:focus::placeholder,
+input[type="number"][disabled],
+input[type="number"][disabled]:hover,
+input[type="number"][disabled]:focus,
+input[type="number"][disabled]::placeholder,
+input[type="number"][disabled]:hover::placeholder,
+input[type="number"][disabled]:focus::placeholder,
+input[type="password"][disabled],
+input[type="password"][disabled]:hover,
+input[type="password"][disabled]:focus,
+input[type="password"][disabled]::placeholder,
+input[type="password"][disabled]:hover::placeholder,
+input[type="password"][disabled]:focus::placeholder,
+input[type="search"][disabled],
+input[type="search"][disabled]:hover,
+input[type="search"][disabled]:focus,
+input[type="search"][disabled]::placeholder,
+input[type="search"][disabled]:hover::placeholder,
+input[type="search"][disabled]:focus::placeholder,
+input[type="tel"][disabled],
+input[type="tel"][disabled]:hover,
+input[type="tel"][disabled]:focus,
+input[type="tel"][disabled]::placeholder,
+input[type="tel"][disabled]:hover::placeholder,
+input[type="tel"][disabled]:focus::placeholder,
+input[type="text"][disabled],
+input[type="text"][disabled]:hover,
+input[type="text"][disabled]:focus,
+input[type="text"][disabled]::placeholder,
+input[type="text"][disabled]:hover::placeholder,
+input[type="text"][disabled]:focus::placeholder {
+  background-color: var(--gray-04);
+  color: var(--gray-08);
+  border-color: transparent;
+  cursor: default;
+  box-shadow: none;
+}
+
 input[type="email"]:hover,
 input[type="number"]:hover,
 input[type="password"]:hover,
@@ -55,7 +98,16 @@ input[type="search"]::placeholder,
 input[type="tel"]::placeholder,
 input[type="text"]::placeholder {
   color: var(--gray-10);
-  transition: all var(--animation-speed-medium) ease-in-out;
+  transition: all var(--animation-speed-fast) ease-in-out;
+}
+
+input[type="email"]:hover::placeholder,
+input[type="number"]:hover::placeholder,
+input[type="password"]:hover::placeholder,
+input[type="search"]:hover::placeholder,
+input[type="tel"]:hover::placeholder,
+input[type="text"]:hover::placeholder {
+  color: var(--gray-12);
 }
 
 input[type="email"]:focus::placeholder,
@@ -68,14 +120,24 @@ input[type="text"]:focus::placeholder {
 }
 
 label {
-  color: var(--gray-18);
+  padding: 0.5em 0;
+  color: var(--gray-16);
+  margin-bottom: 0;
   font-size: 1em;
-  display: inline-block;
+  display: block;
+}
+
+label[disabled] {
+  color: var(--gray-04);
 }
 
 input[type="color"] {
-  border: 0;
+  opacity: 0;
-  height: 2.5em;
+  width: 2px;
+  height: 2px;
+  position: absolute;
+  top: 0;
+  left: 0;
   display: block;
   cursor: pointer;
   -webkit-appearance: none;
@@ -92,3 +154,185 @@ input[type="color"]::-webkit-color-swatch-wrapper {
 input[type="color"]::-webkit-color-swatch {
   border: 0;
 }
+
+input[type="color"]+.label-button-color {
+  padding-right: 2.25em;
+  justify-content: center;
+  align-items: center;
+}
+
+input[type="color"]+.label-button-color:before {
+  background-color: rgb(var(--accent));
+  content: "";
+  border-radius: 50%;
+  position: absolute;
+  right: 0.5em;
+  width: 1em;
+  height: 1em;
+  z-index: 1;
+  box-shadow: 0 0 0.25em 0 rgba(var(--accent), 0.6), 0 0 0.5em 0 rgba(var(--accent), 0.4);
+}
+
+.input-wrap,
+.checkbox-wrap,
+.radio-wrap {
+  position: relative;
+}
+
+.form-input-indent-1.input-wrap,
+.form-input-indent-1.checkbox-wrap,
+.form-input-indent-1.radio-wrap {
+  margin-left: 1em;
+}
+
+.form-input-indent-2.input-wrap,
+.form-input-indent-2.checkbox-wrap,
+.form-input-indent-2.radio-wrap {
+  margin-left: 2em;
+}
+
+.form-input-indent-3.input-wrap,
+.form-input-indent-3.checkbox-wrap,
+.form-input-indent-3.radio-wrap {
+  margin-left: 3em;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  display: block;
+  font-size: 1em;
+  line-height: 1;
+  cursor: pointer;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+input[type="checkbox"]+label,
+input[type="radio"]+label {
+  color: var(--gray-12);
+  font-size: 1em;
+  font-family: var(--font-regular);
+  min-height: 2.5em;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  /* transition: all var(--animation-speed-fast) ease-in-out; */
+}
+
+input[type="checkbox"]+label .label-icon,
+input[type="radio"]+label .label-icon {
+  margin-right: 0.5em;
+  font-size: 1.5em;
+  line-height: 1;
+  display: block;
+  width: 1em;
+  height: 1em;
+}
+
+input[type="checkbox"]:focus+label,
+input[type="checkbox"]:hover+label,
+input[type="radio"]:focus+label,
+input[type="radio"]:hover+label {
+  color: var(--white);
+}
+
+input[type="checkbox"]:active+label,
+input[type="radio"]:active+label {
+  color: var(--white);
+}
+
+input[type="checkbox"]:focus+label .label-icon,
+input[type="checkbox"]:hover+label .label-icon,
+input[type="radio"]:focus+label .label-icon,
+input[type="radio"]:hover+label .label-icon {
+  color: var(--white);
+}
+
+input[type="checkbox"]:active+label .label-icon,
+input[type="radio"]:active+label .label-icon {
+  color: rgb(var(--accent));
+  transform: scale(0.9);
+}
+
+input[type="checkbox"]:checked+label,
+input[type="radio"]:checked+label {
+  color: var(--gray-16);
+}
+
+input[type="checkbox"]:not([disabled]):hover:checked+label,
+input[type="checkbox"]:not([disabled]):focus:checked+label,
+input[type="radio"]:not([disabled]):hover:checked+label,
+input[type="radio"]:not([disabled]):focus:checked+label {
+  color: var(--white);
+}
+
+input[type="checkbox"]:checked+label .label-icon,
+input[type="radio"]:checked+label .label-icon {
+  color: rgb(var(--accent));
+}
+
+input[type="checkbox"]:checked:focus+label .label-icon,
+input[type="radio"]:checked:focus+label .label-icon {
+  transform: scale(1.2);
+}
+
+input[type="checkbox"]+.button-checkbox,
+input[type="radio"]+.button-checkbox {
+  justify-content: center;
+  align-items: center;
+}
+
+input[type="checkbox"]:checked+.button-checkbox,
+input[type="radio"]:checked+.button-checkbox {
+  border-bottom-color: rgb(var(--accent));
+}
+
+input[type="checkbox"][disabled]+label,
+input[type="radio"][disabled]+label {
+  color: var(--gray-04);
+  cursor: default;
+}
+
+input[type="checkbox"][disabled]+label .label-icon,
+input[type="radio"][disabled]+label .label-icon {
+  color: var(--gray-04);
+  cursor: default;
+}
+
+input[type="checkbox"][disabled]:active+label .label-icon,
+input[type="radio"][disabled]:active+label .label-icon {
+  transform: none;
+}
+
+input[type="checkbox"]+label .label-icon:before,
+input[type="radio"]+label .label-icon:before {
+  font-family: "Icons" !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+}
+
+input[type="checkbox"]+label .label-icon:before {
+  content: "\e835";
+}
+
+input[type="checkbox"]:checked+label .label-icon:before {
+  content: "\e834";
+}
+
+input[type="radio"]+label .label-icon:before {
+  content: "\e836";
+}
+
+input[type="radio"]:checked+label .label-icon:before {
+  content: "\e837";
+}

css/grid.css

@@ -1,88 +0,0 @@
-.grid {
-  height: 100vh;
-  width: 100vw;
-  display: grid;
-  grid-template-columns: 100%;
-  grid-template-rows: auto 1fr;
-  grid-gap: 0;
-  justify-content: center;
-  align-items: start;
-}
-
-.grid-item-head {
-  padding: 2em 2em 1em 2em;
-  width: 100%;
-}
-
-.grid-item-body {
-  padding: 2em 2em 25vh 2em;
-  width: 100%;
-  max-height: 100%;
-  overflow-y: scroll;
-  display: grid;
-  grid-template-columns: repeat(2, minmax(1em, 1fr));
-  grid-auto-rows: 1fr;
-  grid-gap: 1em;
-}
-
-@media (min-width: 700px) {
-
-  .grid-item-head,
-  .grid-item-body {
-    padding-left: 8vw;
-    padding-right: 8vw;
-  }
-
-  .grid-item-body {
-    grid-template-columns: repeat(3, minmax(1em, 1fr));
-  }
-}
-
-@media (min-width: 1000px) {
-
-  .grid-item-head,
-  .grid-item-body {
-    padding-left: 11vw;
-    padding-right: 11vw;
-  }
-
-  .grid-item-body {
-    grid-template-columns: repeat(4, minmax(1em, 1fr));
-  }
-}
-
-@media (min-width: 1300px) {
-
-  .grid-item-head,
-  .grid-item-body {
-    padding-left: 14vw;
-    padding-right: 14vw;
-  }
-
-  .grid-item-head {
-    padding-top: 3em;
-    padding-bottom: 2em;
-  }
-
-  .grid-item-body {
-    grid-template-columns: repeat(5, minmax(1em, 1fr));
-  }
-}
-
-@media (min-width: 1600px) {
-  .grid-item-body {
-    grid-template-columns: repeat(6, minmax(1em, 1fr));
-  }
-}
-
-@media (min-width: 1900px) {
-  .grid-item-body {
-    grid-template-columns: repeat(7, minmax(1em, 1fr));
-  }
-}
-
-@media (min-width: 2200px) {
-  .grid-item-body {
-    grid-template-columns: repeat(8, minmax(1em, 1fr));
-  }
-}

css/head.css

@@ -1,22 +1,65 @@
-.head {
+.header {
-  --gutter: 0.5em;
+  background-color: var(--background);
-  margin: 0 calc(var(--gutter) * -1);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2;
+}
+
+.header-area {
+  margin: calc(var(--gutter) * 4) calc(var(--gutter) * -1) calc(var(--gutter) * 2) calc(var(--gutter) * -1);
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  justify-content: flex-start;
   align-items: stretch;
+  /* display: grid; */
+  /* grid-template-columns: auto 1fr auto auto auto; */
+  /* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */
 }
 
-.head-item {
+.header-item {
   margin-left: var(--gutter);
   margin-right: var(--gutter);
+  margin-bottom: 1em;
+  margin: var(--gutter);
   display: flex;
   flex-wrap: nowrap;
   justify-content: center;
   align-items: center;
 }
 
-.head-search {
+.is-alignment-left .header-area {
+  justify-content: flex-start;
+}
+
+.is-alignment-center .header-area {
+  justify-content: center;
+}
+
+.is-alignment-right .header-area {
+  justify-content: flex-end;
+}
+
+.is-search-grow .header-search {
   flex-grow: 1;
 }
+
+.header-search {
+  width: 20vw;
+  min-width: 20em;
+}
+
+.header-clock,
+.header-search,
+.header-edit-add,
+.header-accent {
+  display: none;
+}
+
+.is-search .header-search,
+.is-clock .header-clock,
+.is-search-edit-add .header-edit-add,
+.is-search-accent .header-accent {
+  display: flex;
+}

css/icons.css

@@ -1,5 +1,5 @@
 @font-face {
-  font-family: "icons";
+  font-family: "Icons";
   src: url("../fonts/icons/icons.eot?4e687y");
   src: url("../fonts/icons/icons.eot?4e687y#iefix") format("embedded-opentype"),
     url("../fonts/icons/icons.ttf?4e687y") format("truetype"),
@@ -12,7 +12,7 @@
 [class^="icon-"],
 [class*=" icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: "icons" !important;
+  font-family: "Icons" !important;
   speak: none;
   font-style: normal;
   font-weight: normal;
@@ -71,6 +71,7 @@
 .icon-done:before {
   content: "\e876";
 }
+
 .icon-arrow-down:before {
   content: "\e313";
 }
@@ -107,6 +108,10 @@
   content: "\e15b";
 }
 
+.icon-settings:before {
+  content: "\e8b8";
+}
+
 .icon-unfold-less:before {
   content: "\e5d6";
 }

css/link.css

@@ -1,3 +1,33 @@
+.link {
+  margin-bottom: 50vh;
+  width: 100vw;
+  z-index: 1;
+}
+
+.link-area {
+  width: 100%;
+  display: grid;
+  grid-auto-rows: 1fr;
+  grid-gap: calc(var(--gutter) * 2);
+}
+
+.is-link-block .link-area {
+  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
+}
+
+.is-link-list .link-area {
+  grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
+}
+
+.is-layout-thin.is-link-list .link-area {
+  grid-template-columns: 1fr;
+}
+
+.is-layout-thin.is-link-block .link-area {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+
 .link-item {
   width: 100%;
   height: var(--link-height);
@@ -5,7 +35,7 @@
   position: relative;
   display: block;
   transform: scale(1);
-  transition: all var(--animation-speed-medium) ease-in-out;
+  transition: all var(--animation-speed-fast) ease-in-out;
 }
 
 .link-item:focus,
@@ -28,7 +58,7 @@
   z-index: 3;
   position: relative;
   user-select: none;
-  transition: all var(--animation-speed-medium) ease-in-out;
+  transition: all var(--animation-speed-fast) ease-in-out;
 }
 
 .is-link-block .link-panel-front {
@@ -83,14 +113,15 @@
 }
 
 .link-control {
-  margin: 0 0.25em;
+  margin: 0;
+  padding: 0 var(--line-width);
   height: 0;
   display: flex;
   overflow: hidden;
   flex-direction: row;
   align-items: stretch;
   justify-content: center;
-  transition: all var(--animation-speed-medium) ease-in-out;
+  transition: all var(--animation-speed-fast) ease-in-out;
 }
 
 .link-control-item {
@@ -131,7 +162,7 @@
   overflow: hidden;
   display: flex;
   align-items: center;
-  transition: all var(--animation-speed-medium) ease-in-out;
+  transition: all var(--animation-speed-fast) ease-in-out;
 }
 
 .is-link-block .link-url {
@@ -188,7 +219,7 @@
   margin: 0;
   font-size: 0.9em;
   font-family: var(--font-regular);
-  color: var(--gray-08);
+  color: var(--gray-12);
   white-space: nowrap;
   overflow: hidden;
   max-width: 100%;

css/menu.css

@@ -0,0 +1,43 @@
+.menu {
+  background-color: var(--gray-02);
+  border-radius: var(--radius);
+  padding: calc(var(--gutter) * 4);
+  position: fixed;
+  bottom: 1em;
+  left: 1em;
+  width: calc(100% - 2em);
+  max-height: calc(60vh - 2em);
+  overflow-y: scroll;
+  z-index: 3000;
+  display: grid;
+  /* grid-template-columns: repeat(1, minmax(1em, 1fr)); */
+  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
+  transform: translateY(calc(100% + 2em));
+  transition: transform var(--animation-speed-fast) ease-in-out;
+  grid-gap: calc(var(--gutter) * 8);
+}
+
+.is-menu-open .menu {
+  transform: translateY(0);
+}
+
+.menu-item {
+  position: relative;
+}
+
+.menu-item:not(:first-child):before {
+  /* content: "";
+  border-left: 1px solid var(--gray-04);
+  position: absolute;
+  top: 0;
+  left: -2em;
+  width: calc(100% + 1px);
+  height: calc(100% + 1px);
+  pointer-events: none; */
+}
+
+@media (min-width: 900px) {
+  .menu {
+    max-height: calc(80vh - 2em);
+  }
+}

css/modal.css

@@ -10,7 +10,7 @@
   transform: translate(-50%, -50%);
   opacity: 0;
   perspective: 1000px;
-  transition: opacity var(--animation-speed-slow);
+  transition: opacity var(--animation-speed-fast) ease-in-out;
 }
 
 .modal-large {
@@ -33,7 +33,7 @@
 }
 
 .is-transition-end .modal-wrapper {
-  transition: all var(--animation-speed-medium);
+  transition: all var(--animation-speed-fast) ease-in-out;
 }
 
 .modal-body {

css/shade.css

@@ -5,7 +5,7 @@
   left: -1em;
   width: calc(100% + 2em);
   height: calc(100% + 2em);
-  opacity: 0.5;
+  opacity: 0;
   z-index: 1000;
-  transition: opacity var(--animation-speed-slow);
+  transition: opacity var(--animation-speed-fast) ease-in-out;
 }

css/spacing.css

@@ -1248,7 +1248,7 @@
   }
 }
 
-@media (min-width: 1300px) {
+@media (min-width: 1100px) {
   .m-xl-0 {
     margin: 0 !important;
   }

css/state.css

@@ -0,0 +1,39 @@
+.is-hidden {
+  display: none !important;
+}
+
+.is-inline-block {
+  display: inline-block !important;
+}
+
+.is-block {
+  display: block !important;
+}
+
+.is-transparent {
+  opacity: 0 !important;
+}
+
+.is-opaque {
+  opacity: 1 !important;
+}
+
+.is-invisible {
+  visibility: hidden !important;
+}
+
+.is-visible {
+  visibility: visible !important;
+}
+
+.is-scrolll-disabled {
+  overflow: hidden !important;
+}
+
+.is-small {
+  transform: scale(0.5) !important;
+}
+
+.is-large {
+  transform: scale(1.5) !important;
+}

css/theme.css

@@ -1,36 +0,0 @@
-.theme {
-  position: relative;
-}
-
-.theme-label.button {
-  position: relative;
-  padding-right: 2.25em;
-}
-
-.theme-label:before {
-  background-color: rgb(var(--accent));
-  content: "";
-  border-radius: 50%;
-  position: absolute;
-  right: 0.5em;
-  width: 1em;
-  height: 1em;
-  z-index: 1;
-  box-shadow: 0 0 0.25em 0 rgba(var(--accent), 0.6), 0 0 0.5em 0 rgba(var(--accent), 0.4);
-}
-
-.theme-input[type="color"] {
-  opacity: 0;
-  width: 2px;
-  height: 2px;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.theme-input[type="color"]:focus+.theme-label {
-  background-color: var(--gray-03);
-  border-bottom-color: rgb(var(--accent));
-  color: var(--white);
-  outline: 0;
-}

css/typography.css

@@ -11,43 +11,49 @@ h6 {
 
 h1 {
   font-size: 1.5em;
-  font-family: var(--font-light);
+  font-family: var(--font-fjalla);
 }
 
 h2 {
-  font-size: 1.5em;
+  font-size: 1.2em;
-  font-family: var(--font-light);
+  font-family: var(--font-regular);
+  color: var(--gray-18);
 }
 
 h3 {
-  font-size: 1.5em;
+  font-size: 1.1em;
   font-family: var(--font-regular);
+  color: var(--gray-18);
 }
 
 h4 {
-  font-size: 1.25em;
+  font-size: 1em;
-  font-family: var(--font-bold);
+  font-family: var(--font-regular);
+  color: var(--gray-18);
 }
 
 h5 {
   font-size: 1em;
   font-family: var(--font-bold);
+  color: var(--gray-18);
 }
 
 h6 {
   font-size: 0.75em;
   font-family: var(--font-bold);
+  color: var(--gray-18);
 }
 
 p {
-  color: var(--black);
+  color: var(--white);
   margin: 0;
   line-height: 1.5;
 }
 
 hr {
   border: 0;
-  border: 1px solid var(--gray-08);
+  border-top: 1px solid var(--gray-04);
+  border-radius: var(--radius);
   margin: 1em 0;
   clear: both;
 }

css/utilities.css

@@ -1,39 +1,12 @@
-.is-hidden {
+.u-list-unstyled {
-  display: none !important;
+  padding-left: 0;
+  margin-bottom: 0;
 }
 
-.is-inline-block {
+.u-list-unstyled li {
-  display: inline-block !important;
+  list-style-type: none;
 }
 
-.is-block {
+.u-list-inline li {
-  display: block !important;
+  display: inline-block;
-}
-
-.is-transparent {
-  opacity: 0 !important;
-}
-
-.is-opaque {
-  opacity: 1 !important;
-}
-
-.is-invisible {
-  visibility: hidden !important;
-}
-
-.is-visible {
-  visibility: visible !important;
-}
-
-.is-scrolll-disabled {
-  overflow: hidden !important;
-}
-
-.is-small {
-  transform: scale(0.5) !important;
-}
-
-.is-large {
-  transform: scale(1.5) !important;
 }

fonts/icons/icons.svg

@@ -29,5 +29,6 @@
 <glyph unicode="&#xe836;" glyph-name="radio_button_unchecked" d="M512 84.667c188 0 342 154 342 342s-154 342-342 342-342-154-342-342 154-342 342-342zM512 852.667c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
 <glyph unicode="&#xe837;" glyph-name="radio_button_checked" d="M512 84.667c188 0 342 154 342 342s-154 342-342 342-342-154-342-342 154-342 342-342zM512 852.667c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426zM512 640.667c118 0 214-96 214-214s-96-214-214-214-214 96-214 214 96 214 214 214z" />
 <glyph unicode="&#xe876;" glyph-name="done" d="M384 246.667l452 454 60-60-512-512-238 238 58 60z" />
+<glyph unicode="&#xe8b8;" glyph-name="settings" d="M512 276.667c82 0 150 68 150 150s-68 150-150 150-150-68-150-150 68-150 150-150zM830 384.667l90-70c8-6 10-18 4-28l-86-148c-6-10-16-12-26-8l-106 42c-22-16-46-32-72-42l-16-112c-2-10-10-18-20-18h-172c-10 0-18 8-20 18l-16 112c-26 10-50 24-72 42l-106-42c-10-4-20-2-26 8l-86 148c-6 10-4 22 4 28l90 70c-2 14-2 28-2 42s0 28 2 42l-90 70c-8 6-10 18-4 28l86 148c6 10 16 12 26 8l106-42c22 16 46 32 72 42l16 112c2 10 10 18 20 18h172c10 0 18-8 20-18l16-112c26-10 50-24 72-42l106 42c10 4 20 2 26-8l86-148c6-10 4-22-4-28l-90-70c2-14 2-28 2-42s0-28-2-42z" />
 <glyph unicode="&#xe909;" glyph-name="indeterminate_check_box" d="M726 384.667v84h-428v-84h428zM810 810.667c46 0 86-40 86-86v-596c0-46-40-86-86-86h-596c-46 0-86 40-86 86v596c0 46 40 86 86 86h596z" />
 </font></defs></svg>

index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="is-link-block">
+<html lang="en">
 
 <head>
   <meta charset="utf-8">
@@ -10,84 +10,227 @@
   <link rel="stylesheet" href="css/base.css">
   <link rel="stylesheet" href="css/fonts.css">
   <link rel="stylesheet" href="css/icons.css">
+  <link rel="stylesheet" href="css/state.css">
   <link rel="stylesheet" href="css/utilities.css">
-  <link rel="stylesheet" href="css/theme.css">
   <link rel="stylesheet" href="css/typography.css">
-  <link rel="stylesheet" href="css/grid.css">
+  <link rel="stylesheet" href="css/container.css">
   <link rel="stylesheet" href="css/spacing.css">
   <link rel="stylesheet" href="css/button.css">
   <link rel="stylesheet" href="css/form.css">
   <link rel="stylesheet" href="css/shade.css">
   <link rel="stylesheet" href="css/modal.css">
+  <link rel="stylesheet" href="css/menu.css">
   <link rel="stylesheet" href="css/head.css">
   <link rel="stylesheet" href="css/clock.css">
   <link rel="stylesheet" href="css/search.css">
-  <link rel="stylesheet" href="css/links.css">
+  <link rel="stylesheet" href="css/link.css">
 </head>
 
 <body>
 
-  <div class="grid">
 
-    <div class="grid-item-head">
+  <header class="header">
-      <div class="head">
+    <div class="container">
-        <div class="head-item mb-3 mb-xl-0">
+      <div class="header-area">
+        <div class="header-item header-clock">
           <p class="clock"></p>
         </div>
-        <div class="head-item head-search mb-3 mb-xl-0">
+        <div class="header-item header-search">
-          <form class="search" action="https://www.google.com/search" method="get">
+          <form class="search" action="" method="get">
-            <input class="search-input mb-0" type="text" placeholder="Find bookmarks or search" tabindex="1" name="q" autocomplete="off" tabindex="1">
+            <input class="search-input mb-0" type="text" placeholder="Find or Search" tabindex="1" name="q" autocomplete="off" tabindex="1">
             <input type="submit" value="Search" class="is-hidden">
           </form>
           <button class="button mb-0 ml-3 search-clear" tabindex="1" disabled>
             <span class="icon-close"></span>
           </button>
         </div>
-        <div class="head-item button-group mb-3 mb-xl-0">
+        <div class="header-item header-edit-add">
-          <button class="button mb-0 control-add" tabindex="1">
+          <div class="button-group mb-0">
+            <div class="checkbox-wrap">
+              <input id="control-edit" class="control-edit" type="checkbox" tabindex="1">
+              <label for="control-edit" class="button button-checkbox">
+                <div class="button-text">Edit</div>
+              </label>
+            </div>
+            <button class="button control-add" tabindex="1">
               <span class="button-text">Add</span>
             </button>
-          <button class="button mb-0 control-edit" tabindex="1">
-            <span class="button-text">Edit</span>
-          </button>
           </div>
-        <div class="head-item button-group mb-3 mb-xl-0">
-          <button class="button mb-0 control-link-list" tabindex="1">
-            <span class="button-text">List</span>
-          </button>
-          <button class="button mb-0 control-link-blocks" tabindex="1">
-            <span class="button-text">Block</span>
-          </button>
         </div>
-        <div class="head-item mb-3 mb-xl-0">
+        <div class="header-item header-accent">
-          <form class="theme">
+          <div class="input-wrap">
-            <input id="accent-picker" type="color" class="theme-input" value="#ffaa33" tabindex="1">
+            <input id="control-layout-theme" type="color" class="control-layout-theme" value="#00ff00" tabindex="1">
-            <label class="button mb-0 theme-label" for="accent-picker">
+            <label for="control-layout-theme" class="button label-button-color mb-0">
               <span class="button-text">Accent</span>
             </label>
-          </form>
+          </div>
+        </div>
+        <div class="header-item">
+          <button class="button mb-0 control-menu" tabindex="1">
+            <span class="button-text"><span class="icon-settings"></span></span>
+          </button>
         </div>
       </div>
     </div>
+  </header>
 
-    <div class="grid-item-body"></div>
+  <section class="link">
-
+    <div class="container">
+      <div class="link-area"></div>
     </div>
+  </section>
+
+  <section class="menu">
+    <div class="menu-item">
+      <h1>Header</h1>
+      <h2>Clock</h2>
+      <div class="checkbox-wrap">
+        <input id="control-header-clock-active" class="control-header-clock-active" type="checkbox" tabindex="1">
+        <label for="control-header-clock-active"><span class="label-icon"></span>Show</label>
+      </div>
+      <div class="checkbox-wrap form-input-indent-1">
+        <input id="control-header-clock-show-seconds" class="control-header-clock-show-seconds" type="checkbox" tabindex="1">
+        <label for="control-header-clock-show-seconds"><span class="label-icon"></span>Seconds</label>
+      </div>
+      <div class="checkbox-wrap form-input-indent-1">
+        <input id="control-header-clock-show-seperator" class="control-header-clock-show-seperator" type="checkbox" tabindex="1">
+        <label for="control-header-clock-show-seperator"><span class="label-icon"></span>Seperators</label>
+      </div>
+      <div class="checkbox-wrap form-input-indent-1">
+        <input id="control-header-clock-24" class="control-header-clock-24" type="checkbox" tabindex="1">
+        <label for="control-header-clock-24"><span class="label-icon"></span>24 Hours</label>
+      </div>
+      <div class="checkbox-wrap form-input-indent-2">
+        <input id="control-header-clock-show-leading-zero" class="control-header-clock-show-leading-zero" type="checkbox" tabindex="1">
+        <label for="control-header-clock-show-leading-zero"><span class="label-icon"></span>Leading Zero</label>
+      </div>
+      <div class="checkbox-wrap form-input-indent-1">
+        <input id="control-header-clock-show-meridiem" class="control-header-clock-show-meridiem" type="checkbox" tabindex="1">
+        <label for="control-header-clock-show-meridiem"><span class="label-icon"></span>AM/PM</label>
+      </div>
+      <hr>
+      <h2>Search</h2>
+      <div class="checkbox-wrap">
+        <input id="control-header-search-active" class="control-header-search-active" type="checkbox" tabindex="1">
+        <label for="control-header-search-active"><span class="label-icon"></span>Show</label>
+      </div>
+      <div class="checkbox-wrap form-input-indent-1">
+        <input id="control-header-search-grow" class="control-header-search-grow" type="checkbox" tabindex="1">
+        <label for="control-header-search-grow"><span class="label-icon"></span>Fill</label>
+      </div>
+      <h2>Engine</h2>
+      <div class="radio-wrap form-input-indent-1">
+        <input id="control-header-search-engine-google" class="control-header-search-engine-google" type="radio" tabindex="1" name="control-header-search-engine" value="google">
+        <label for="control-header-search-engine-google"><span class="label-icon"></span>Google</label>
+      </div>
+      <div class="radio-wrap form-input-indent-1">
+        <input id="control-header-search-engine-duckduckgo" class="control-header-search-engine-duckduckgo" type="radio" tabindex="1" name="control-header-search-engine" value="duckduckgo">
+        <label for="control-header-search-engine-duckduckgo"><span class="label-icon"></span>Duck Duck Go</label>
+      </div>
+      <div class="radio-wrap form-input-indent-1">
+        <input id="control-header-search-engine-giphy" class="control-header-search-engine-giphy" type="radio" tabindex="1" name="control-header-search-engine" value="giphy">
+        <label for="control-header-search-engine-giphy"><span class="label-icon"></span>Giphy</label>
+      </div>
+      <div class="radio-wrap form-input-indent-1">
+        <input id="control-header-search-engine-custom" class="control-header-search-engine-custom" type="radio" tabindex="1" name="control-header-search-engine" value="custom">
+        <label for="control-header-search-engine-custom"><span class="label-icon"></span>Custom</label>
+      </div>
+      <div class="input-wrap form-input-indent-1">
+        <label for="control-header-search-engine-custom-url">URL</label>
+        <input id="control-header-search-engine-custom-url" type="text" class="control-header-search-engine-custom-url mb-0" placeholder="https://" tabindex="1" autocomplete="off">
+      </div>
+      <hr>
+      <h2>Edit/Add</h2>
+      <div class="checkbox-wrap">
+        <input id="control-header-edit-add-active" class="control-header-edit-add-active" type="checkbox" tabindex="1">
+        <label for="control-header-edit-add-active"><span class="label-icon"></span>Show</label>
+      </div>
+      <hr>
+      <h2>Accent</h2>
+      <div class="checkbox-wrap">
+        <input id="control-header-accent-active" class="control-header-accent-active" type="checkbox" tabindex="1">
+        <label for="control-header-accent-active"><span class="label-icon"></span>Show</label>
+      </div>
+      <hr>
+      <h2>Alignment</h2>
+      <div class="radio-wrap">
+        <input id="control-layout-alignment-left" class="control-layout-alignment-left" type="radio" tabindex="1" name="control-layout-alignment" value="left">
+        <label for="control-layout-alignment-left"><span class="label-icon"></span>Left</label>
+      </div>
+      <div class="radio-wrap">
+        <input id="control-layout-alignment-center" class="control-layout-alignment-center" type="radio" tabindex="1" name="control-layout-alignment" value="center">
+        <label for="control-layout-alignment-center"><span class="label-icon"></span>Center</label>
+      </div>
+      <div class="radio-wrap">
+        <input id="control-layout-alignment-right" class="control-layout-alignment-right" type="radio" tabindex="1" name="control-layout-alignment" value="right">
+        <label for="control-layout-alignment-right"><span class="label-icon"></span>Right</label>
+      </div>
+    </div>
+    <div class="menu-item">
+      <h1>Bookmarks</h1>
+      <div class="checkbox-wrap">
+        <input id="control-link-new-tab" class="control-link-new-tab" type="checkbox" tabindex="1">
+        <label for="control-link-new-tab"><span class="label-icon"></span>Open in new tab</label>
+      </div>
+      <hr>
+      <h2>Style</h2>
+      <div class="radio-wrap">
+        <input id="control-link-style-block" class="control-link-style-block" type="radio" tabindex="1" name="control-link-style" value="block">
+        <label for="control-link-style-block"><span class="label-icon"></span>Block</label>
+      </div>
+      <div class="radio-wrap">
+        <input id="control-link-style-list" class="control-link-style-list" type="radio" tabindex="1" name="control-link-style" value="list">
+        <label for="control-link-style-list"><span class="label-icon"></span>List</label>
+      </div>
+      <hr>
+      <h2>Sort</h2>
+      <div class="radio-wrap">
+        <input id="control-link-sort-none" class="control-link-sort-none" type="radio" tabindex="1" name="control-link-sort" value="none">
+        <label for="control-link-sort-none"><span class="label-icon"></span>None (As added)</label>
+      </div>
+      <div class="radio-wrap">
+        <input id="control-link-sort-name" class="control-link-sort-name" type="radio" tabindex="1" name="control-link-sort" value="name">
+        <label for="control-link-sort-name"><span class="label-icon"></span>Name</label>
+      </div>
+      <div class="radio-wrap">
+        <input id="control-link-sort-letter" class="control-link-sort-letter" type="radio" tabindex="1" name="control-link-sort" value="letter">
+        <label for="control-link-sort-letter"><span class="label-icon"></span>Letter</label>
+      </div>
+    </div>
+    <div class="menu-item">
+      <h1>Layout</h1>
+      <div class="radio-wrap">
+        <input id="control-layout-container-fluid" class="control-layout-container-fluid" type="radio" tabindex="1" name="control-layout-container" value="fluid">
+        <label for="control-layout-container-fluid"><span class="label-icon"></span>Fluid</label>
+      </div>
+      <div class="radio-wrap">
+        <input id="control-layout-container-wide" class="control-layout-container-wide" type="radio" tabindex="1" name="control-layout-container" value="wide">
+        <label for="control-layout-container-wide"><span class="label-icon"></span>Wide</label>
+      </div>
+      <div class="radio-wrap">
+        <input id="control-layout-container-thin" class="control-layout-container-thin" type="radio" tabindex="1" name="control-layout-container" value="thin">
+        <label for="control-layout-container-thin"><span class="label-icon"></span>Thin</label>
+      </div>
+    </div>
+  </section>
 
 </body>
 
 <script src="js/helper.js"></script>
-<script src="js/control.js"></script>
+<script src="js/data.js"></script>
+<script src="js/state.js"></script>
 <script src="js/bookmarks.js"></script>
+<script src="js/control.js"></script>
+<script src="js/menu.js"></script>
+<script src="js/header.js"></script>
 <script src="js/modal.js"></script>
 <script src="js/shade.js"></script>
 <script src="js/theme.js"></script>
 <script src="js/clock.js"></script>
 <script src="js/search.js"></script>
-<script src="js/state.js"></script>
+<script src="js/link.js"></script>
-<script src="js/data.js"></script>
-<script src="js/links.js"></script>
 <script src="js/version.js"></script>
+<script src="js/keyboard.js"></script>
 <script src="js/init.js"></script>
 
 </html>

js/bookmarks.js

@@ -1,135 +1,217 @@
 var bookmarks = (function() {
 
   var all = [{
-    letter: "AN",
-    name: "/r/Android/",
-    url: "https://www.reddit.com/r/Android/"
-  }, {
-    letter: "ANA",
-    name: "Analytics",
-    url: "https://analytics.google.com/"
-  }, {
-    letter: "AS",
-    name: "awesomeSheet",
-    url: "https://zombiefox.github.io/awesomeSheet/"
-  }, {
-    letter: "AZ",
-    name: "Amazon",
-    url: "https://www.amazon.co.uk/"
-  }, {
-    letter: "BX",
-    name: "Box",
-    url: "https://app.box.com/login/"
-  }, {
-    letter: "CAL",
-    name: "Calendar",
-    url: "https://www.google.com/calendar/"
-  }, {
     letter: "CM",
     name: "Citymapper",
-    url: "https://citymapper.com/london/superrouter"
+    url: "https://citymapper.com/london/superrouter",
-  }, {
+    timeStamp: 1546453100455
-    letter: "CO",
-    name: "Contacts",
-    url: "https://contacts.google.com/"
-  }, {
-    letter: "COS",
-    name: "/r/chromeos/",
-    url: "https://www.reddit.com/r/chromeos/"
-  }, {
-    letter: "DR",
-    name: "Drive",
-    url: "https://drive.google.com/drive/"
   }, {
     letter: "DEV",
     name: "Devdocs",
-    url: "http://devdocs.io/"
+    url: "http://devdocs.io/",
+    timeStamp: 1546453101749
   }, {
-    letter: "FB",
+    letter: "OD",
-    name: "Facebook",
+    name: "r/opendirectories/",
-    url: "https://www.facebook.com/"
+    url: "https://www.reddit.com/r/opendirectories/",
-  }, {
+    timeStamp: 1546453102199
-    letter: "GIT",
-    name: "Github",
-    url: "https://github.com/login"
-  }, {
-    letter: "GM",
-    name: "Gmail",
-    url: "https://mail.google.com/"
-  }, {
-    letter: "GOT",
-    name: "/r/gameofthrones/",
-    url: "https://www.reddit.com/r/gameofthrones/"
   }, {
     letter: "KP",
     name: "Keep",
-    url: "https://keep.google.com/"
+    url: "https://keep.google.com/",
+    timeStamp: 1546453102671
+  }, {
+    letter: "MHW",
+    name: "r/monsterhunter/",
+    url: "https://www.reddit.com/r/monsterhunter/",
+    timeStamp: 1546453103110
   }, {
     letter: "M",
     name: "Maps",
-    url: "https://www.google.co.uk/maps"
+    url: "https://www.google.co.uk/maps",
+    timeStamp: 1546453103560
   }, {
-    letter: "MHW",
+    letter: "AS",
-    name: "/r/monsterhunter/",
+    name: "awesomeSheet",
-    url: "https://www.reddit.com/r/monsterhunter/"
+    url: "https://zombiefox.github.io/awesomeSheet/",
+    timeStamp: 1546453104010
   }, {
     letter: "N",
     name: "Netflix",
-    url: "https://www.netflix.com/"
+    url: "https://www.netflix.com/",
-  }, {
+    timeStamp: 1546453104460
-    letter: "OD",
-    name: "/r/opendirectories/",
-    url: "https://www.reddit.com/r/opendirectories/"
   }, {
     letter: "P",
     name: "Photos",
-    url: "https://photos.google.com/"
+    url: "https://photos.google.com/",
+    timeStamp: 1546453104910
   }, {
-    letter: "PRG",
+    letter: "FB",
-    name: "/r/Pathfinder_RPG/",
+    name: "Facebook",
-    url: "https://www.reddit.com/r/Pathfinder_RPG/"
+    url: "https://www.facebook.com/",
+    timeStamp: 1546453105349
   }, {
-    letter: "R",
+    letter: "GOT",
-    name: "Reddit",
+    name: "r/gameofthrones/",
-    url: "https://www.reddit.com/"
+    url: "https://www.reddit.com/r/gameofthrones/",
+    timeStamp: 1546453105844
+  }, {
+    letter: "BX",
+    name: "Box",
+    url: "https://app.box.com/login/",
+    timeStamp: 1546453106272
   }, {
     letter: "TFL",
     name: "TFL Map",
-    url: "http://content.tfl.gov.uk/standard-tube-map.pdf"
+    url: "http://content.tfl.gov.uk/standard-tube-map.pdf",
+    timeStamp: 1546453106734
   }, {
-    letter: "V",
+    letter: "PRG",
-    name: "/r/videos/",
+    name: "r/Pathfinder_RPG/",
-    url: "https://www.reddit.com/r/videos/"
+    url: "https://www.reddit.com/r/Pathfinder_RPG/",
+    timeStamp: 1546453107194
+  }, {
+    letter: "AZ",
+    name: "Amazon",
+    url: "https://www.amazon.co.uk/",
+    timeStamp: 1546453107633
   }, {
     letter: "YT",
     name: "Youtube",
-    url: "https://www.youtube.com/"
+    url: "https://www.youtube.com/",
+    timeStamp: 1546453108071
+  }, {
+    letter: "CO",
+    name: "Contacts",
+    url: "https://contacts.google.com/",
+    timeStamp: 1546453108501
+  }, {
+    letter: "GIT",
+    name: "Github",
+    url: "https://github.com/login",
+    timeStamp: 1546453108926
+  }, {
+    letter: "AN",
+    name: "r/Android/",
+    url: "https://www.reddit.com/r/Android/",
+    timeStamp: 1546453109355
+  }, {
+    letter: "V",
+    name: "r/videos/",
+    url: "https://www.reddit.com/r/videos/",
+    timeStamp: 1546453109840
+  }, {
+    letter: "GM",
+    name: "Gmail",
+    url: "https://mail.google.com/",
+    timeStamp: 1546453110265
+  }, {
+    letter: "CAL",
+    name: "Calendar",
+    url: "https://www.google.com/calendar/",
+    timeStamp: 1546453110885
+  }, {
+    letter: "R",
+    name: "Reddit",
+    url: "https://www.reddit.com/",
+    timeStamp: 1546453111491
+  }, {
+    letter: "DR",
+    name: "Drive",
+    url: "https://drive.google.com/drive/",
+    timeStamp: 1546453111953
+  }, {
+    letter: "ANA",
+    name: "Analytics",
+    url: "https://analytics.google.com/",
+    timeStamp: 1546453112357
+  }, {
+    letter: "COS",
+    name: "r/chromeos/",
+    url: "https://www.reddit.com/r/chromeos/",
+    timeStamp: 1546453112797
   }];
 
-  var get = function() {
+  var get = function(timeStamp) {
-    return all;
+    var _singleBookmark = function() {
+      for (var i = 0; i < all.length; i++) {
+        if (all[i].timeStamp === timeStamp) {
+          return all[i];
+        };
+      };
+    };
+    var _allBookmarks = function() {
+      var by = {
+        none: function(array) {
+          return helper.sortObject(array, "timeStamp");
+        },
+        name: function(array) {
+          return helper.sortObject(array, "name");
+        },
+        letter: function(array) {
+          return helper.sortObject(array, "letter");
+        }
+      };
+      return by[state.get().link.sort](all);
+    };
+    if (timeStamp) {
+      return _singleBookmark(timeStamp);
+    } else {
+      return _allBookmarks();
+    };
   };
 
-  var add = function(object) {
+  var restore = function(data) {
-    all.push(object);
+    if ("bookmarks" in data) {
+      all = data.bookmarks;
+    };
   };
 
-  var edit = function(object, index) {
+  var add = function(override) {
-    all[index] = object;
+    var options = {
+      letter: null,
+      name: null,
+      url: null,
+      timeStamp: null
+    };
+    if (override) {
+      options = helper.applyOptions(options, override);
+    };
+    var newBookmark = {
+      letter: options.letter,
+      name: options.name,
+      url: options.url,
+      timeStamp: options.timeStamp
+    };
+    all.push(newBookmark);
   };
 
-  var remove = function(index) {
+  var edit = function(object, timeStamp) {
-    all.splice(index, 1);
+    for (var i = 0; i < all.length; i++) {
+      if (all[i].timeStamp === timeStamp) {
+        all[i] = object;
+      };
+    };
   };
 
-  var restore = function(array) {
+  var remove = function(timeStamp) {
-    if (array) {
+    for (var i = 0; i < all.length; i++) {
-      all = array;
+      if (all[i].timeStamp === timeStamp) {
+        all.splice(all.indexOf(all[i]), 1);
+      };
+    };
+  };
+
+  var init = function() {
+    if (data.load()) {
+      restore(data.load());
     };
   };
 
   // exposed methods
   return {
+    all: all,
+    init: init,
     get: get,
     add: add,
     edit: edit,

js/clock.js

@@ -1,58 +1,136 @@
 var clock = (function() {
 
-  var clear = function() {
+  var bind = function() {
-    var clock = helper.e(".clock")
-    while (clock.lastChild) {
-      clock.removeChild(clock.lastChild);
-    };
-  };
-
-  var render = function() {
-    var time = helper.getDateTime();
-    if (time.minutes < 10) {
-      time.minutes = "0" + time.minutes;
-    };
-    if (time.seconds < 10) {
-      time.seconds = "0" + time.seconds;
-    };
-    // if (time.hours > 12) {
-    //   time.hours = time.hours - 12;
-    // };
-    var hour = document.createElement("span");
-    hour.setAttribute("class", "clock-hour");
-    hour.textContent = time.hours;
-    var minutes = document.createElement("span");
-    minutes.setAttribute("class", "clock-minutes");
-    minutes.textContent = time.minutes;
-    var seconds = document.createElement("span");
-    seconds.setAttribute("class", "clock-seconds");
-    seconds.textContent = time.seconds;
-    var seperator1 = document.createElement("span");
-    seperator1.setAttribute("class", "clock-seperator");
-    seperator1.textContent = " : ";
-    var seperator2 = document.createElement("span");
-    seperator2.setAttribute("class", "clock-seperator");
-    seperator2.textContent = " : ";
-    var clock = helper.e(".clock");
-    clock.appendChild(hour);
-    clock.appendChild(seperator1);
-    clock.appendChild(minutes);
-    clock.appendChild(seperator2);
-    clock.appendChild(seconds);
-  };
-
-  var init = function() {
-    clear();
-    render();
     window.setInterval(function() {
       clear();
       render();
     }, 1000);
   };
 
+  var clear = function() {
+    var clock = helper.e(".clock");
+    while (clock.lastChild) {
+      clock.removeChild(clock.lastChild);
+    };
+  };
+
+  var _makeTimeObject = function() {
+    var time = helper.getDateTime();
+    time.meridiem = "AM";
+    if (state.get().header.clock.hour24) {
+      if (time.hours < 10 && state.get().header.clock.show.leadingZero) {
+        time.hours = "0" + time.hours;
+      };
+    } else {
+      if (time.hours > 12) {
+        time.meridiem = "PM";
+        time.hours = time.hours - 12;
+      };
+      if (time.hours == 0) {
+        time.hours = 12;
+      };
+    };
+    if (time.minutes < 10) {
+      time.minutes = "0" + time.minutes;
+    };
+    if (time.seconds < 10) {
+      time.seconds = "0" + time.seconds;
+    };
+    return time;
+  };
+
+  var render = function() {
+    var _clock = function() {
+      var clock = helper.e(".clock");
+      var time = _makeTimeObject();
+      var hours = helper.makeNode({
+        tag: "span",
+        text: time.hours,
+        attr: [{
+          key: "class",
+          value: "clock-item clock-hours"
+        }]
+      });
+      var minutes = helper.makeNode({
+        tag: "span",
+        text: time.minutes,
+        attr: [{
+          key: "class",
+          value: "clock-item clock-minutes"
+        }]
+      });
+      var seconds = helper.makeNode({
+        tag: "span",
+        text: time.seconds,
+        attr: [{
+          key: "class",
+          value: "clock-item clock-seconds"
+        }]
+      });
+      var meridiem = helper.makeNode({
+        tag: "span",
+        text: time.meridiem,
+        attr: [{
+          key: "class",
+          value: "clock-item clock-meridiem"
+        }]
+      });
+      var seperator1 = helper.makeNode({
+        tag: "span",
+        text: ":",
+        attr: [{
+          key: "class",
+          value: "clock-seperator"
+        }]
+      });
+      var seperator2 = helper.makeNode({
+        tag: "span",
+        text: ":",
+        attr: [{
+          key: "class",
+          value: "clock-seperator"
+        }]
+      });
+      var seperator3 = helper.makeNode({
+        tag: "span",
+        text: ":",
+        attr: [{
+          key: "class",
+          value: "clock-seperator"
+        }]
+      });
+      clock.appendChild(hours);
+      if (state.get().header.clock.show.seperator) {
+        clock.appendChild(seperator1);
+      };
+      clock.appendChild(minutes);
+      if (state.get().header.clock.show.seconds) {
+        if (state.get().header.clock.show.seperator) {
+          clock.appendChild(seperator2);
+        };
+        clock.appendChild(seconds);
+      };
+      if (!state.get().header.clock.hour24 && state.get().header.clock.show.meridiem) {
+        if (state.get().header.clock.show.seperator) {
+          clock.appendChild(seperator3);
+        };
+        clock.appendChild(meridiem);
+      };
+    };
+    if (state.get().header.clock.active) {
+      _clock();
+    };
+  };
+
+  var init = function() {
+    render();
+    bind();
+  };
+
   // exposed methods
   return {
     init: init,
+    bind: bind,
     render: render,
     clear: clear
   };

js/control.js

@@ -1,113 +1,383 @@
 var control = (function() {
 
-  var state = {
+  var toggle = function(override) {
-    edit: false,
+    var options = {
-    style: {
+      path: null,
-      block: true,
+      value: null
-      list: false
-    }
     };
-
+    if (override) {
-  var get = function() {
+      options = helper.applyOptions(options, override);
-    return state;
     };
-
+    if (options.path != null) {
-  var bind = function() {
+      helper.setObject({
-    var controlAdd = helper.e(".control-add");
+        path: options.path,
-    var controlEdit = helper.e(".control-edit");
+        object: state.get(),
-    var controlLinkBlock = helper.e(".control-link-blocks");
+        newValue: options.value
-    var controlLinkList = helper.e(".control-link-list");
+      });
-    controlAdd.addEventListener("click", function() {
+      console.log(state.get());
-      links.add();
-    }, false);
-    controlEdit.addEventListener("click", function() {
-      _toggleEdit();
-      render();
-      links.tabIndex();
-      data.save();
-    }, false);
-    controlLinkBlock.addEventListener("click", function() {
-      _toggleListStyle("block");
-      render();
-      data.save();
-    }, false);
-    controlLinkList.addEventListener("click", function() {
-      _toggleListStyle("list");
-      render();
-      data.save();
-    }, false);
     };
-
-  var _toggleEdit = function() {
-    if (state.edit) {
-      state.edit = false;
-    } else {
-      state.edit = true;
-    };
-  };
-
-  var _toggleListStyle = function(style) {
-    var action = {
-      block: function() {
-        state.style.block = true;
-        state.style.list = false;
-      },
-      list: function() {
-        state.style.block = false;
-        state.style.list = true;
-      }
-    };
-    action[style]();
   };
 
   var render = function() {
     var html = helper.e("html");
-    var controlEdit = helper.e(".control-edit");
+    var _edit = function() {
-    var controlLinkBlock = helper.e(".control-link-blocks");
+      if (state.get().edit.active) {
-    var controlLinkList = helper.e(".control-link-list");
-    var _renderEdit = function() {
-      if (state.edit) {
         helper.addClass(html, "is-edit");
-        helper.addClass(controlEdit, "active");
       } else {
         helper.removeClass(html, "is-edit");
-        helper.removeClass(controlEdit, "active");
       };
     };
-    var _renderStyle = function() {
+    var _clock = function() {
-      if (state.style.block) {
+      if (state.get().header.clock.active) {
+        helper.addClass(html, "is-clock");
+      } else {
+        helper.removeClass(html, "is-clock");
+      };
+    };
+    var _search = function() {
+      if (state.get().header.search.active) {
+        helper.addClass(html, "is-search");
+      } else {
+        helper.removeClass(html, "is-search");
+      };
+      if (state.get().header.search.grow) {
+        helper.addClass(html, "is-search-grow");
+      } else {
+        helper.removeClass(html, "is-search-grow");
+      };
+      helper.e(".control-header-search-engine-custom-url").value = state.get().header.search.engine.custom.url;
+    };
+    var _alignment = function() {
+      helper.removeClass(html, "is-alignment-left");
+      helper.removeClass(html, "is-alignment-center");
+      helper.removeClass(html, "is-alignment-right");
+      helper.addClass(html, "is-alignment-" + state.get().layout.alignment);
+    };
+    var _link = function() {
+      var view = {
+        block: function() {
           helper.addClass(html, "is-link-block");
           helper.removeClass(html, "is-link-list");
-        helper.addClass(controlLinkBlock, "active");
+        },
-        helper.removeClass(controlLinkList, "active");
+        list: function() {
-      } else if (state.style.list) {
           helper.removeClass(html, "is-link-block");
           helper.addClass(html, "is-link-list");
-        helper.removeClass(controlLinkBlock, "active");
+        }
-        helper.addClass(controlLinkList, "active");
+      };
+      view[state.get().link.style]();
+    };
+    var _layout = function() {
+      helper.removeClass(html, "is-layout-fludi");
+      helper.removeClass(html, "is-layout-wide");
+      helper.removeClass(html, "is-layout-thin");
+      helper.addClass(html, "is-layout-" + state.get().layout.container);
+    };
+    var _editAdd = function() {
+      if (state.get().header.editAdd.active) {
+        helper.addClass(html, "is-search-edit-add");
+      } else {
+        helper.removeClass(html, "is-search-edit-add");
       };
     };
-    _renderEdit();
+    var _accent = function() {
-    _renderStyle();
+      if (state.get().header.accent.active) {
+        helper.addClass(html, "is-search-accent");
+      } else {
+        helper.removeClass(html, "is-search-accent");
+      };
+    };
+    _alignment();
+    _edit();
+    _clock();
+    _search();
+    _editAdd();
+    _accent();
+    _link();
+    _layout();
   };
 
-  var restore = function(object) {
+  var _dependents = function(options) {
-    if (object) {
+    var _clock = function() {
-      state = object;
+      if (state.get().header.clock.active) {
-      render();
+        helper.e(".control-header-clock-show-seconds").disabled = false;
+        helper.e(".control-header-clock-show-seperator").disabled = false;
+        helper.e(".control-header-clock-24").disabled = false;
+      } else {
+        helper.e(".control-header-clock-show-seconds").disabled = true;
+        helper.e(".control-header-clock-show-seperator").disabled = true;
+        helper.e(".control-header-clock-24").disabled = true;
       };
+      if (state.get().header.clock.active && state.get().header.clock.hour24) {
+        helper.e(".control-header-clock-show-leading-zero").disabled = false;
+      } else {
+        helper.e(".control-header-clock-show-leading-zero").disabled = true;
+      };
+      if (state.get().header.clock.active && !state.get().header.clock.hour24) {
+        helper.e(".control-header-clock-show-meridiem").disabled = false;
+      } else {
+        helper.e(".control-header-clock-show-meridiem").disabled = true;
+      };
+    };
+    var _search = function() {
+      if (state.get().header.search.active) {
+        helper.e(".control-header-search-grow").disabled = false;
+        helper.e(".control-header-search-engine-google").disabled = false;
+        helper.e(".control-header-search-engine-duckduckgo").disabled = false;
+        helper.e(".control-header-search-engine-giphy").disabled = false;
+        helper.e(".control-header-search-engine-custom").disabled = false;
+      } else {
+        helper.e(".control-header-search-grow").disabled = true;
+        helper.e(".control-header-search-engine-google").disabled = true;
+        helper.e(".control-header-search-engine-duckduckgo").disabled = true;
+        helper.e(".control-header-search-engine-giphy").disabled = true;
+        helper.e(".control-header-search-engine-custom").disabled = true;
+      };
+      if (state.get().header.search.active && state.get().header.search.engine.selected === "custom") {
+        helper.e("[for=control-header-search-engine-custom-url]").removeAttribute("disabled");
+        helper.e(".control-header-search-engine-custom-url").disabled = false;
+      } else {
+        helper.e("[for=control-header-search-engine-custom-url]").setAttribute("disabled", "");
+        helper.e(".control-header-search-engine-custom-url").disabled = true;
+      };
+    };
+    _clock();
+    _search();
+  };
+
+  var _bind = function() {
+    helper.e(".control-menu").addEventListener("click", function() {
+      menu.toggle();
+    }, false);
+
+    helper.e(".control-add").addEventListener("click", function() {
+      link.add();
+    }, false);
+
+    helper.e(".control-edit").addEventListener("change", function() {
+      state.change({
+        path: "edit.active",
+        value: this.checked
+      });
+      render();
+      data.save();
+    }, false);
+
+    helper.e(".control-layout-theme").addEventListener("change", function() {
+      state.change({
+        path: "layout.theme",
+        value: helper.hexToRgb(this.value)
+      });
+      theme.render();
+      data.save();
+    });
+    helper.e(".control-link-new-tab").addEventListener("change", function() {
+      state.change({
+        path: "link.newTab",
+        value: this.checked
+      });
+      link.clear();
+      link.render();
+      data.save();
+    });
+    helper.eA("input[name='control-link-style']").forEach(function(arrayItem, index) {
+      arrayItem.addEventListener("change", function() {
+        state.change({
+          path: "link.style",
+          value: this.value
+        });
+        render();
+        data.save();
+      }, false);
+    });
+
+    helper.eA("input[name='control-link-sort']").forEach(function(arrayItem, index) {
+      arrayItem.addEventListener("change", function() {
+        state.change({
+          path: "link.sort",
+          value: this.value
+        });
+        link.clear();
+        link.render();
+        data.save();
+      }, false);
+    });
+    helper.e(".control-header-search-active").addEventListener("change", function() {
+      state.change({
+        path: "header.search.active",
+        value: this.checked
+      });
+      render();
+      _dependents();
+      header.render();
+      data.save();
+    }, false);
+    helper.e(".control-header-search-grow").addEventListener("change", function() {
+      state.change({
+        path: "header.search.grow",
+        value: this.checked
+      });
+      render();
+      _dependents();
+      header.render();
+      data.save();
+    }, false);
+    helper.eA("input[name='control-header-search-engine']").forEach(function(arrayItem, index) {
+      arrayItem.addEventListener("change", function() {
+        state.change({
+          path: "header.search.engine.selected",
+          value: this.value
+        });
+        render();
+        _dependents();
+        search.update();
+        data.save();
+      }, false);
+    });
+    helper.e(".control-header-search-engine-custom-url").addEventListener("input", function() {
+      state.change({
+        path: "header.search.engine.custom.url",
+        value: this.value
+      });
+      search.update();
+      data.save();
+    });
+    helper.e(".control-header-clock-active").addEventListener("change", function() {
+      state.change({
+        path: "header.clock.active",
+        value: this.checked
+      });
+      render();
+      _dependents();
+      clock.clear();
+      clock.render();
+      header.render();
+      data.save();
+    }, false);
+    helper.e(".control-header-clock-show-seconds").addEventListener("change", function() {
+      state.change({
+        path: "header.clock.show.seconds",
+        value: this.checked
+      });
+      clock.clear();
+      clock.render();
+      header.render();
+      data.save();
+    }, false);
+    helper.e(".control-header-clock-show-seperator").addEventListener("change", function() {
+      state.change({
+        path: "header.clock.show.seperator",
+        value: this.checked
+      });
+      clock.clear();
+      clock.render();
+      header.render();
+      data.save();
+    }, false);
+    helper.e(".control-header-clock-24").addEventListener("change", function() {
+      state.change({
+        path: "header.clock.hour24",
+        value: this.checked
+      });
+      _dependents();
+      clock.clear();
+      clock.render();
+      header.render();
+      data.save();
+    }, false);
+    helper.e(".control-header-clock-show-leading-zero").addEventListener("change", function() {
+      state.change({
+        path: "header.clock.show.leadingZero",
+        value: this.checked
+      });
+      _dependents();
+      clock.clear();
+      clock.render();
+      header.render();
+      data.save();
+    }, false);
+    helper.e(".control-header-clock-show-meridiem").addEventListener("change", function() {
+      state.change({
+        path: "header.clock.show.meridiem",
+        value: this.checked
+      });
+      clock.clear();
+      clock.render();
+      header.render();
+      data.save();
+    }, false);
+    helper.e(".control-header-edit-add-active").addEventListener("change", function() {
+      state.change({
+        path: "header.editAdd.active",
+        value: this.checked
+      });
+      render();
+      header.render();
+      data.save();
+    }, false);
+    helper.e(".control-header-accent-active").addEventListener("change", function() {
+      state.change({
+        path: "header.accent.active",
+        value: this.checked
+      });
+      render();
+      header.render();
+      data.save();
+    }, false);
+    helper.eA("input[name='control-layout-alignment']").forEach(function(arrayItem, index) {
+      arrayItem.addEventListener("change", function() {
+        state.change({
+          path: "layout.alignment",
+          value: this.value
+        });
+        render();
+        data.save();
+      }, false);
+    });
+    helper.eA("input[name='control-layout-container']").forEach(function(arrayItem, index) {
+      arrayItem.addEventListener("change", function() {
+        state.change({
+          path: "layout.container",
+          value: this.value
+        });
+        render();
+        data.save();
+      }, false);
+    });
+  };
+
+  var update = function() {
+    helper.e(".control-edit").checked = state.get().edit.active;
+    helper.e(".control-layout-theme").value = helper.rgbToHex(state.get().layout.theme);
+    helper.e(".control-link-new-tab").value = state.get().link.style.newTab;
+    helper.e(".control-link-style-" + state.get().link.style).checked = true;
+    helper.e(".control-link-sort-" + state.get().link.sort).checked = true;
+    helper.e(".control-header-search-active").checked = state.get().header.search.active;
+    helper.e(".control-header-search-grow").checked = state.get().header.search.grow;
+    helper.e(".control-header-search-engine-" + state.get().header.search.engine.selected).checked = true;
+    helper.e(".control-header-search-engine-custom-url").value = state.get().header.search.engine.custom.url;
+    helper.e(".control-header-clock-active").checked = state.get().header.clock.active;
+    helper.e(".control-header-clock-show-seconds").checked = state.get().header.clock.show.seconds;
+    helper.e(".control-header-clock-show-seperator").checked = state.get().header.clock.show.seperator;
+    helper.e(".control-header-clock-24").checked = state.get().header.clock.hour24;
+    helper.e(".control-header-clock-show-leading-zero").checked = state.get().header.clock.show.leadingZero;
+    helper.e(".control-header-clock-show-meridiem").checked = state.get().header.clock.show.meridiem;
+    helper.e(".control-header-edit-add-active").checked = state.get().header.editAdd.active;
+    helper.e(".control-header-accent-active").checked = state.get().header.accent.active;
+    helper.e(".control-layout-alignment-" + state.get().layout.alignment).checked = true;
+    helper.e(".control-layout-container-" + state.get().layout.container).checked = true;
   };
 
   var init = function() {
-    bind();
+    _bind();
+    update();
+    _dependents();
     render();
   };
 
   // exposed methods
   return {
     init: init,
-    get: get,
+    update: update,
-    restore: restore,
     render: render
   };
 

js/data.js

@@ -15,40 +15,30 @@ var data = (function() {
   };
 
   var save = function() {
-    set(saveName, JSON.stringify(state.get()));
+    var data = {
+      state: state.get(),
+      bookmarks: bookmarks.get()
+    };
+    set(saveName, JSON.stringify(data));
     console.log("data saved");
   };
 
-  var restore = function() {
+  var load = function() {
     var data = JSON.parse(get(saveName));
-    if (data) {
+    return data;
-      bookmarks.restore(data.bookmarks);
-      theme.restore(data.theme);
-      control.restore(data.control);
-      console.log("data restored");
-    };
   };
 
   var wipe = function() {
     clear(saveName);
   };
 
-  var init = function() {
-    if (get(saveName)) {
-      restore();
-    } else {
-      save();
-    };
-  };
-
   return {
-    init: init,
     save: save,
     clear: clear,
     set: set,
     get: get,
     wipe: wipe,
-    restore: restore
+    load: load
   };
 
 })();

js/header.js

@@ -0,0 +1,29 @@
+var header = (function() {
+
+  var _bind = function() {
+    window.addEventListener("resize", function(event) {
+      render();
+    }, false);
+  };
+
+  var render = function() {
+    var html = helper.e("html");
+    var header = helper.e(".header");
+    var link = helper.e(".link");
+    var height = parseInt(getComputedStyle(header).height, 10);
+    var fontSize = parseInt(getComputedStyle(html).fontSize, 10);
+    link.style.marginTop = (height + fontSize) + "px";
+  };
+
+  var init = function() {
+    _bind();
+    render();
+  };
+
+  // exposed methods
+  return {
+    init: init,
+    render: render
+  };
+
+})();

js/helper.js

@@ -1,27 +1,27 @@
 var helper = (function() {
 
   // methods on this object
-  function e(selector) {
+  var e = function(selector) {
     return document.querySelector(selector);
   };
 
-  function eA(selector) {
+  var eA = function(selector) {
     return document.querySelectorAll(selector);
   };
 
-  function toggleClass(element, theClassName) {
+  var toggleClass = function(element, theClassName) {
     element.classList.toggle(theClassName);
   };
 
-  function addClass(element, theClassName) {
+  var addClass = function(element, theClassName) {
     element.classList.add(theClassName);
   };
 
-  function removeClass(element, theClassName) {
+  var removeClass = function(element, theClassName) {
     element.classList.remove(theClassName);
   };
 
-  function getDateTime() {
+  var getDateTime = function() {
     var dateStamp = new Date();
     var object = {
       // string: dateStamp.constructor(),
@@ -40,8 +40,14 @@ var helper = (function() {
 
   var sortObject = function(object, key) {
     object.sort(function(a, b) {
-      var textA = a[key].toLowerCase();
+      var textA = a[key];
-      var textB = b[key].toLowerCase();
+      if (typeof textA == "string") {
+        textA = textA.toLowerCase();
+      };
+      var textB = b[key];
+      if (typeof textB == "string") {
+        textB = textB.toLowerCase();
+      };
       if (textA < textB) {
         return -1;
       } else if (textA > textB) {
@@ -53,7 +59,7 @@ var helper = (function() {
     return object;
   };
 
-  function applyOptions(defaultOptions, options) {
+  var applyOptions = function(defaultOptions, options) {
     if (defaultOptions && options) {
       if (options) {
         for (var key in options) {
@@ -68,7 +74,7 @@ var helper = (function() {
     };
   };
 
-  function hexToRgb(hex) {
+  var hexToRgb = function(hex) {
     var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
     if (result) {
       result = {
@@ -82,7 +88,7 @@ var helper = (function() {
     return result;
   };
 
-  function rgbToHex(rgbObject) {
+  var rgbToHex = function(rgbObject) {
     var componentToHex = function(hexPart) {
       hexPart = hexPart.toString(16);
       if (hexPart.length == 1) {
@@ -94,6 +100,193 @@ var helper = (function() {
     return result;
   };
 
+  var makeNode = function(override) {
+    var options = {
+      tag: null,
+      classes: null,
+      text: null,
+      url: null,
+      index: null,
+      attr: null
+    };
+    if (override) {
+      options = helper.applyOptions(options, override);
+    };
+    var element = document.createElement(options.tag);
+    if (options.text != null) {
+      element.textContent = options.text;
+    };
+    if (options.attr != null) {
+      options.attr.forEach(function(arrayItem, index) {
+        if ("key" in arrayItem && "value" in arrayItem) {
+          element.setAttribute(arrayItem.key, arrayItem.value);
+        } else if ("key" in arrayItem) {
+          element.setAttribute(arrayItem.key, "");
+        }
+      });
+    };
+    return element;
+  };
+
+  function _makeAddress(path) {
+    var array;
+    if (path.indexOf("[") != -1 && path.indexOf("]") != -1) {
+      array = path.split(".").join(",").split("[").join(",").split("]").join(",").split(",");
+      for (var i = 0; i < array.length; i++) {
+        if (array[i] == "") {
+          array.splice(i, 1);
+        };
+        if (!isNaN(parseInt(array[i], 10))) {
+          array[i] = parseInt(array[i], 10);
+        };
+      };
+    } else {
+      array = path.split(".");
+    };
+    return array;
+  };
+
+  function setObject(options) {
+    var defaultOptions = {
+      path: null,
+      object: null,
+      newValue: null
+    };
+    if (options) {
+      var defaultOptions = applyOptions(defaultOptions, options);
+    };
+    var address = _makeAddress(defaultOptions.path);
+    var _setData = function() {
+      while (address.length > 1) {
+        // shift off and store the first key
+        var currentKey = address.shift();
+        // if the key is not found make a new object
+        if (!(currentKey in defaultOptions.object)) {
+          // make an empty object in the current object level
+          if (isNaN(currentKey)) {
+            defaultOptions.object[currentKey] = {};
+          } else {
+            defaultOptions.object[currentKey] = [];
+          };
+        };
+        // drill down the object with the first key
+        defaultOptions.object = defaultOptions.object[currentKey];
+      };
+      var finalKey = address.shift();
+      defaultOptions.object[finalKey] = defaultOptions.newValue;
+    };
+    if (defaultOptions.object != null && defaultOptions.path != null && defaultOptions.newValue != null) {
+      _setData();
+    } else {
+      return false;
+    };
+  };
+
+  function getObject(options) {
+    var defaultOptions = {
+      object: null,
+      path: null
+    };
+    if (options) {
+      var defaultOptions = applyOptions(defaultOptions, options);
+    };
+    var address = _makeAddress(defaultOptions.path);
+    var _getData = function() {
+      while (address.length > 1) {
+        // shift off and store the first key
+        var currentKey = address.shift();
+        // if the key is not found make a new object
+        if (!(currentKey in defaultOptions.object)) {
+          // make an empty object in the current object level
+          if (isNaN(currentKey)) {
+            defaultOptions.object[currentKey] = {};
+          } else {
+            defaultOptions.object[currentKey] = [];
+          };
+        };
+        // drill down the object with the first key
+        defaultOptions.object = defaultOptions.object[currentKey];
+      };
+      var finalKey = address.shift();
+      if (!(finalKey in defaultOptions.object)) {
+        return "";
+      } else {
+        return defaultOptions.object[finalKey];
+      };
+    };
+    if (defaultOptions.object != null && defaultOptions.path != null) {
+      return _getData();
+    } else {
+      return false;
+    };
+  };
+
+  function makeObject(string) {
+    var _stringOrBooleanOrNumber = function(stringToTest) {
+      console.log(stringToTest);
+      if (stringToTest == "true") {
+        return true;
+      } else if (stringToTest == "false") {
+        return false;
+      } else if (stringToTest.indexOf("#") != -1) {
+        return stringToTest.substr(1, kevValuePair[1].length);
+      } else {
+        return "\"" + stringToTest + "\"";
+      };
+    };
+    // if argument is a string
+    if (typeof string == "string") {
+      // start building the object
+      var objectString = "{";
+      // split the string on comma not followed by a space
+      // split on character if not followed by a space
+      var items = string.split(/,(?=\S)/);
+      // loop over each item
+      for (var i = 0; i < items.length; i++) {
+        // split each would be object key values pair
+        // split on character if not followed by a space
+        var kevValuePair = items[i].split(/:(?=\S)/);
+        // get the key
+        var key = "\"" + kevValuePair[0] + "\"";
+        var value;
+        // if the value has + with a space after it
+        if (/\+(?=\S)/.test(kevValuePair[1])) {
+          // remove first + symbol
+          kevValuePair[1] = kevValuePair[1].substr(1, kevValuePair[1].length);
+          // split the would be values
+          // split on character if not followed by a space
+          var all_value = kevValuePair[1].split(/\+(?=\S)/);
+          // if there are multiple values make an array
+          value = "["
+          for (var q = 0; q < all_value.length; q++) {
+            value += _stringOrBooleanOrNumber(all_value[q]) + ",";
+          };
+          // remove last comma
+          value = value.substr(0, value.length - 1);
+          // close array
+          value += "]"
+        } else {
+          value = _stringOrBooleanOrNumber(kevValuePair[1]);
+        };
+        objectString += key + ":" + value + ",";
+      };
+      // remove last comma
+      objectString = objectString.substr(0, objectString.length - 1);
+      // close object
+      objectString += "}";
+      var object = JSON.parse(objectString);
+      return object;
+    } else {
+      return false;
+    };
+  };
+
+  var allEqual = function(array) {
+    return array.every(function(arrayItem) {
+      return arrayItem === array[0];
+    });
+  };
+
   // exposed methods
   return {
     e: e,
@@ -101,11 +294,16 @@ var helper = (function() {
     toggleClass: toggleClass,
     addClass: addClass,
     removeClass: removeClass,
+    allEqual: allEqual,
     getDateTime: getDateTime,
     sortObject: sortObject,
     applyOptions: applyOptions,
     hexToRgb: hexToRgb,
-    rgbToHex: rgbToHex
+    rgbToHex: rgbToHex,
+    makeNode: makeNode,
+    setObject: setObject,
+    getObject: getObject,
+    makeObject: makeObject
   };
 
 })();

js/init.js

@@ -1,11 +1,38 @@
+// log version
 console.log("nightTab v", version.get(), "loaded");
-// look for and restore data
+
-data.init();
+// bind and update controls
-// render theme
+// render states
+state.init();
+
+// close menu if left open
+menu.init();
+
+// restore bookmarks
+bookmarks.init();
+
+// render input color value
+// render css accent var
 theme.init();
-// render links
+
-links.init();
+// render links from bookmarks
-// other init
+link.init();
+
+// bind controls
+// render checkboxes and radios
+// render states
 control.init();
+
+// bind search box
+// render search engine
 search.init();
+
+// render clock
+// bind clock update
 clock.init();
+
+// bind keyboard keys
+keyboard.init();
+
+// render header height padding
+header.init();

js/keyboard.js

@@ -0,0 +1,62 @@
+var keyboard = (function() {
+
+  var _bind = function() {
+    window.addEventListener("keydown", function(event) {
+      //  esc
+      if (event.keyCode == 27) {
+        if (state.get().menu.active) {
+          menu.close();
+          shade.destroy();
+        } else if (state.get().modal.active) {
+          modal.destroy();
+          shade.destroy();
+        } else if (state.get().edit.active) {
+          state.change({
+            path: "edit.active",
+            value: false
+          });
+          control.update();
+          control.render();
+        };
+        data.save();
+      };
+      // ctrl+alt+a
+      if (event.ctrlKey && event.altKey && event.keyCode == 65) {
+        menu.close();
+        link.add();
+      };
+      // ctrl+alt+m
+      if (event.ctrlKey && event.altKey && event.keyCode == 77) {
+        shade.destroy();
+        modal.destroy();
+        menu.toggle();
+      };
+      // ctrl+alt+e
+      if (event.ctrlKey && event.altKey && event.keyCode == 69) {
+        if (state.get().edit.active) {
+          state.change({
+            path: "edit.active",
+            value: false
+          });
+        } else {
+          state.change({
+            path: "edit.active",
+            value: true
+          });
+        };
+        control.update();
+        control.render();
+        data.save();
+      };
+    }, false);
+  };
+
+  var init = function() {
+    _bind();
+  };
+
+  return {
+    init: init
+  };
+
+})();

js/link.js

@@ -1,8 +1,4 @@
-var links = (function() {
+var link = (function() {
-
-  var currentEditIndex = null;
-
-  var currentAction = null;
 
   var _bind = function(override) {
     var options = {
@@ -11,7 +7,7 @@ var links = (function() {
     };
     if (override) {
       options = helper.applyOptions(options, override);
-    }
+    };
     var action = {
       edit: function() {
         options.element.addEventListener("click", function() {
@@ -30,7 +26,7 @@ var links = (function() {
   };
 
   var add = function() {
-    currentAction = "add";
+    state.get().link.action = "add";
     var form = _makeLinkForm();
     modal.render({
       heading: "Add a new bookmark",
@@ -42,9 +38,10 @@ var links = (function() {
   };
 
   var edit = function(button) {
-    currentAction = "edit";
+    state.get().link.action = "edit";
-    currentEditIndex = parseInt(button.closest(".link-item").dataset.index, 10);
+    state.get().link.editObject = bookmarks.get(parseInt(button.closest(".link-item").dataset.timeStamp, 10));
-    var currentBookmark = bookmarks.get()[currentEditIndex];
+    console.log(state.get().link.editObject);
+    var currentBookmark = bookmarks.get(state.get().link.editObject.timeStamp);
     var form = _makeLinkForm();
     form.querySelector(".link-form-input-letter").value = currentBookmark.letter;
     form.querySelector(".link-form-input-name").value = currentBookmark.name;
@@ -61,10 +58,12 @@ var links = (function() {
   var save = function(button) {
     var action = {
       add: function(newLinkData) {
+        newLinkData.timeStamp = new Date().getTime();
         bookmarks.add(newLinkData);
       },
       edit: function(newLinkData) {
-        bookmarks.edit(newLinkData, currentEditIndex);
+        newLinkData.timeStamp = state.get().link.editObject.timeStamp;
+        bookmarks.edit(newLinkData, state.get().link.editObject.timeStamp);
       }
     };
     var form = helper.e(".link-form");
@@ -73,11 +72,11 @@ var links = (function() {
       name: form.querySelector(".link-form-input-name").value,
       url: form.querySelector(".link-form-input-url").value
     };
-    action[currentAction](newLinkData);
+    action[state.get().link.action](newLinkData);
-    currentEditIndex = null;
+    state.get().link.editObject = null;
-    currentAction = null;
+    state.get().link.action = null;
     clear();
-    if (search.get().search) {
+    if (state.get().header.search.searching) {
       search.render();
     } else {
       render();
@@ -86,10 +85,10 @@ var links = (function() {
   };
 
   var remove = function(button) {
-    var index = parseInt(button.closest(".link-item").dataset.index, 10);
+    var timeStamp = parseInt(button.closest(".link-item").dataset.timeStamp, 10);
-    bookmarks.remove(index);
+    bookmarks.remove(timeStamp);
     clear();
-    if (search.get().search) {
+    if (state.get().header.search.searching) {
       search.render();
     } else {
       render();
@@ -97,46 +96,18 @@ var links = (function() {
     data.save();
   };
 
-  var _makeElement = function(override) {
-    var options = {
-      tag: null,
-      classes: null,
-      text: null,
-      url: null,
-      index: null,
-      attr: null
-    };
-    if (override) {
-      options = helper.applyOptions(options, override);
-    };
-    var element = document.createElement(options.tag);
-    if (options.text != null) {
-      element.textContent = options.text;
-    };
-    if (options.attr != null) {
-      options.attr.forEach(function(arrayItem, index) {
-        if ("key" in arrayItem && "value" in arrayItem) {
-          element.setAttribute(arrayItem.key, arrayItem.value);
-        } else if ("key" in arrayItem) {
-          element.setAttribute(arrayItem.key, "");
-        }
-      });
-    };
-    return element;
-  };
-
   var _makeLinkForm = function() {
-    var form = _makeElement({
+    var form = helper.makeNode({
       tag: "form",
       attr: [{
         key: "class",
         value: "link-form"
       }]
     });
-    var fieldset = _makeElement({
+    var fieldset = helper.makeNode({
       tag: "fieldset"
     });
-    var letterLabel = _makeElement({
+    var letterLabel = helper.makeNode({
       tag: "label",
       text: "Letters",
       attr: [{
@@ -144,7 +115,7 @@ var links = (function() {
         value: "letters"
       }]
     });
-    var letterInput = _makeElement({
+    var letterInput = helper.makeNode({
       tag: "input",
       attr: [{
         key: "type",
@@ -166,7 +137,7 @@ var links = (function() {
         value: "off"
       }]
     });
-    var nameLabel = _makeElement({
+    var nameLabel = helper.makeNode({
       tag: "label",
       text: "Name",
       attr: [{
@@ -174,7 +145,7 @@ var links = (function() {
         value: "name"
       }]
     });
-    var nameInput = _makeElement({
+    var nameInput = helper.makeNode({
       tag: "input",
       attr: [{
         key: "type",
@@ -196,7 +167,7 @@ var links = (function() {
         value: "off"
       }]
     });
-    var urlLabel = _makeElement({
+    var urlLabel = helper.makeNode({
       tag: "label",
       text: "URL",
       attr: [{
@@ -204,7 +175,7 @@ var links = (function() {
         value: "url"
       }]
     });
-    var urlInput = _makeElement({
+    var urlInput = helper.makeNode({
       tag: "input",
       attr: [{
         key: "type",
@@ -236,18 +207,18 @@ var links = (function() {
     return form;
   };
 
-  var _makeLink = function(data, index) {
+  var _makeLink = function(data) {
-    var linkItem = _makeElement({
+    var linkItem = helper.makeNode({
       tag: "div",
       attr: [{
         key: "class",
         value: "link-item"
       }, {
-        key: "data-index",
+        key: "data-time-stamp",
-        value: index
+        value: data.timeStamp
       }]
     });
-    var linkPanelFront = _makeElement({
+    var linkOptions = {
       tag: "a",
       attr: [{
         key: "class",
@@ -259,26 +230,30 @@ var links = (function() {
         key: "tabindex",
         value: 1
       }]
+    };
+    if (state.get().link.newTab) {
+      linkOptions.attr.push({
+        key: "target",
+        value: "_blank"
       });
-    var linkPanelBack = _makeElement({
+    };
+    var linkPanelFront = helper.makeNode(linkOptions);
+    var linkPanelBack = helper.makeNode({
       tag: "div",
       attr: [{
         key: "class",
         value: "link-panel-back"
       }]
     });
-    var linkLetter = _makeElement({
+    var linkLetter = helper.makeNode({
       tag: "p",
       text: data.letter,
       attr: [{
         key: "class",
         value: "link-letter"
-      }, {
-        key: "data-index",
-        value: data.url
       }]
     });
-    var linkName = _makeElement({
+    var linkName = helper.makeNode({
       tag: "p",
       text: data.name,
       attr: [{
@@ -286,14 +261,14 @@ var links = (function() {
         value: "link-name"
       }]
     });
-    var linkUrl = _makeElement({
+    var linkUrl = helper.makeNode({
       tag: "div",
       attr: [{
         key: "class",
         value: "link-url"
       }]
     });
-    var linkUrlText = _makeElement({
+    var linkUrlText = helper.makeNode({
       tag: "p",
       text: data.url.replace(/^https?\:\/\//i, "").replace(/\/$/, ""),
       attr: [{
@@ -301,14 +276,14 @@ var links = (function() {
         value: "link-url-text"
       }]
     });
-    var linkControl = _makeElement({
+    var linkControl = helper.makeNode({
       tag: "div",
       attr: [{
         key: "class",
         value: "link-control"
       }]
     });
-    var linkEdit = _makeElement({
+    var linkEdit = helper.makeNode({
       tag: "button",
       attr: [{
         key: "class",
@@ -318,14 +293,14 @@ var links = (function() {
         value: -1
       }]
     });
-    var linkEditIcon = _makeElement({
+    var linkEditIcon = helper.makeNode({
       tag: "span",
       attr: [{
         key: "class",
         value: "button-icon icon-edit"
       }]
     });
-    var linkDelete = _makeElement({
+    var linkDelete = helper.makeNode({
       tag: "button",
       attr: [{
         key: "class",
@@ -335,7 +310,7 @@ var links = (function() {
         value: -1
       }]
     });
-    var linkDeleteIcon = _makeElement({
+    var linkDeleteIcon = helper.makeNode({
       tag: "span",
       attr: [{
         key: "class",
@@ -365,24 +340,16 @@ var links = (function() {
   };
 
   var render = function(array) {
-    var gridItemBody = helper.e(".grid-item-body");
+    var linkArea = helper.e(".link-area");
-    if (array) {
+    var bookmarksToRender = array || bookmarks.get();
-      array.forEach(function(arrayItem, index) {
+    bookmarksToRender.forEach(function(arrayItem) {
-        if (arrayItem.index) {
+      linkArea.appendChild(_makeLink(arrayItem));
-          index = arrayItem.index;
-        };
-        gridItemBody.appendChild(_makeLink(arrayItem, index));
     });
-    } else {
-      bookmarks.get().forEach(function(arrayItem, index) {
-        gridItemBody.appendChild(_makeLink(arrayItem, index));
-      });
-    };
   };
 
   var tabIndex = function() {
     var allLinkControlItem = helper.eA(".link-control-item");
-    if (control.get().edit) {
+    if (state.get().edit.active) {
       allLinkControlItem.forEach(function(arrayItem, index) {
         arrayItem.tabIndex = 1;
       });
@@ -394,9 +361,9 @@ var links = (function() {
   };
 
   var clear = function() {
-    var gridItemBody = helper.e(".grid-item-body");
+    var linkArea = helper.e(".link-area");
-    while (gridItemBody.lastChild) {
+    while (linkArea.lastChild) {
-      gridItemBody.removeChild(gridItemBody.lastChild);
+      linkArea.removeChild(linkArea.lastChild);
     };
   };
 

js/menu.js

@@ -0,0 +1,49 @@
+var menu = (function() {
+
+  var close = function() {
+    state.get().menu.active = false;
+    render();
+  };
+
+  var open = function() {
+    state.get().menu.active = true;
+    render();
+  };
+
+  var toggle = function() {
+    if (state.get().menu.active) {
+      state.get().menu.active = false;
+    } else {
+      state.get().menu.active = true;
+    };
+    render();
+  };
+
+  var render = function() {
+    var html = helper.e("html");
+    if (state.get().menu.active) {
+      helper.addClass(html, "is-menu-open");
+      shade.render({
+        action: function() {
+          close();
+          render();
+        }
+      });
+    } else {
+      helper.removeClass(html, "is-menu-open");
+    };
+  };
+
+  var init = function() {
+    close();
+  };
+
+  return {
+    init: init,
+    close: close,
+    open: open,
+    toggle: toggle,
+    render: render
+  };
+
+})();

js/modal.js

@@ -2,7 +2,7 @@ var modal = (function() {
 
   var previousModal = null;
 
-  function destroy() {
+  var destroy = function() {
     var all_modal = helper.eA(".modal");
     if (all_modal[0]) {
       for (var i = 0; i < all_modal.length; i++) {
@@ -11,7 +11,7 @@ var modal = (function() {
     };
   };
 
-  function render(options) {
+  var render = function(options) {
     var defaultOptions = {
       heading: "Modal",
       content: "Body",
@@ -25,7 +25,10 @@ var modal = (function() {
     };
     var makeModal = function() {
       var body = helper.e("body");
-      body.dataset.modal = true;
+      state.change({
+        path: "modal.active",
+        value: true
+      });
       var modalWrapper = document.createElement("div");
       modalWrapper.setAttribute("class", "modal-wrapper");
       var modal = document.createElement("div");
@@ -44,7 +47,10 @@ var modal = (function() {
         } else {
           modal.remove();
         };
-        body.dataset.modal = false;
+        state.change({
+          path: "modal.active",
+          value: false
+        });
       };
       var modalBody = document.createElement("div");
       modalBody.setAttribute("class", "modal-body");

js/search.js

@@ -1,40 +1,32 @@
 var search = (function() {
 
-  var state = {
-    search: false
-  };
-
-  var get = function() {
-    return state;
-  };
-
   var bind = function() {
     var searchInput = helper.e(".search-input");
     var searchClear = helper.e(".search-clear");
     searchInput.addEventListener("input", function() {
-      _updateState(this);
+      _toggle(this);
-      _updateSearchClear();
+      _searchClear();
       render();
     }, false);
     searchClear.addEventListener("click", function() {
-      _updateState(this);
+      _toggle(this);
-      _updateSearchClear();
+      _searchClear();
       clear();
     }, false);
   };
 
-  var _updateState = function(input) {
+  var _toggle = function(input) {
     if (input.value != "") {
-      state.search = true;
+      state.get().header.search.searching = true;
     } else {
-      state.search = false;
+      state.get().header.search.searching = false;
     };
   };
 
-  var _updateSearchClear = function() {
+  var _searchClear = function() {
     var searchInput = helper.e(".search-input");
     var searchClear = helper.e(".search-clear");
-    if (state.search) {
+    if (state.get().header.search.searching) {
       searchClear.removeAttribute("disabled");
     } else {
       searchClear.setAttribute("disabled", "");
@@ -43,40 +35,46 @@ var search = (function() {
 
   var render = function() {
     var searchInput = helper.e(".search-input");
-    if (state.search) {
+    if (state.get().header.search.searching) {
-      var searchResult = [];
+      var searchedBookmarks = [];
       bookmarks.get().forEach(function(arrayItem, index) {
         if (arrayItem.url.replace(/^https?\:\/\//i, "").replace(/\/$/, "").toLowerCase().includes(searchInput.value.toLowerCase()) || arrayItem.name.toLowerCase().includes(searchInput.value.toLowerCase())) {
           var copy = JSON.parse(JSON.stringify(arrayItem));
           copy.index = index;
-          searchResult.push(copy);
+          searchedBookmarks.push(copy);
         };
       });
-      links.clear();
+      link.clear();
-      links.render(searchResult);
+      link.render(searchedBookmarks);
     } else {
-      links.clear();
+      link.clear();
-      links.render();
+      link.render();
     };
   };
 
+  var update = function() {
+    var search = helper.e(".search");
+    search.setAttribute("action", state.get().header.search.engine[state.get().header.search.engine.selected].url);
+  };
+
   var clear = function() {
     var searchInput = helper.e(".search-input");
     searchInput.value = "";
     searchInput.focus();
-    links.clear();
+    link.clear();
-    links.render();
+    link.render();
   };
 
   var init = function() {
     bind();
+    update();
   };
 
   // exposed methods
   return {
     init: init,
-    get: get,
     render: render,
+    update: update,
     clear: clear
   };
 

js/shade.js

@@ -2,7 +2,7 @@ var shade = (function() {
 
   var previousShade = null;
 
-  function destroy() {
+  var destroy = function() {
     var all_shade = helper.eA(".shade");
     if (all_shade[0]) {
       for (var i = 0; i < all_shade.length; i++) {
@@ -11,7 +11,7 @@ var shade = (function() {
     };
   };
 
-  function render(options) {
+  var render = function(options) {
     var defaultOptions = {
       action: null,
       includeHeader: false

js/state.js

@@ -1,16 +1,112 @@
 var state = (function() {
 
-  var get = function() {
   var current = {
-      bookmarks: bookmarks.get(),
+    header: {
-      control: control.get(),
+      clock: {
-      theme: theme.get()
+        active: true,
+        hour24: true,
+        show: {
+          leadingZero: true,
+          seconds: true,
+          seperator: true,
+          meridiem: true
+        }
+      },
+      editAdd: {
+        active: true,
+      },
+      accent: {
+        active: true,
+      },
+      search: {
+        searching: false,
+        active: true,
+        grow: true,
+        engine: {
+          selected: "google",
+          google: {
+            url: "https://www.google.com/search"
+          },
+          duckduckgo: {
+            url: "https://duckduckgo.com/"
+          },
+          giphy: {
+            url: "https://giphy.com/search/"
+          },
+          custom: {
+            url: ""
+          }
+        }
+      },
+      buttons: {
+        show: true
+      }
+    },
+    link: {
+      editObject: null,
+      action: null,
+      newTab: false,
+      style: "block",
+      sort: "none"
+    },
+    layout: {
+      alignment: "left",
+      container: "wide",
+      theme: {
+        r: 0,
+        g: 255,
+        b: 0,
+      },
+    },
+    edit: {
+      active: false
+    },
+    menu: {
+      open: false
+    },
+    modal: {
+      active: false
+    }
   };
+
+  var get = function() {
     return current;
   };
 
+  var restore = function(data) {
+    if ("state" in data) {
+      current = data.state;
+    };
+  };
+
+  var change = function(override) {
+    var options = {
+      path: null,
+      value: null
+    };
+    if (override) {
+      options = helper.applyOptions(options, override);
+    };
+    if (options.path != null) {
+      helper.setObject({
+        path: options.path,
+        object: current,
+        newValue: options.value
+      });
+    };
+  };
+
+  var init = function() {
+    if (data.load()) {
+      restore(data.load());
+    };
+  };
+
   return {
-    get: get
+    init: init,
+    get: get,
+    change: change,
+    restore: restore
   };
 
 })();

js/theme.js

@@ -1,55 +1,18 @@
 var theme = (function() {
 
-  var state = {
+  var render = function() {
-    r: 255,
-    g: 170,
-    b: 51,
-  };
-
-  var get = function() {
-    return state;
-  };
-
-  var bind = function() {
-    var themeAccent = helper.e(".theme-input");
-    themeAccent.addEventListener("change", function() {
-      _updateAcent(this);
-      render();
-      data.save();
-    });
-  };
-
-  var _updateAcent = function(input) {
-    state = helper.hexToRgb(input.value);
-  };
-
-  var _updateInput = function() {
-    var themeAccent = helper.e(".theme-input");
-    themeAccent.value = helper.rgbToHex(state);
-  };
-
-  var render = function(input) {
     var html = helper.e("html");
-    html.style.setProperty("--accent", state.r + ", " + state.g + ", " + state.b);
+    var color = state.get().layout.theme;
-  };
+    html.style.setProperty("--accent", color.r + ", " + color.g + ", " + color.b);
-
-  var restore = function(object) {
-    if (object) {
-      state = object;
-      _updateInput();
-      render();
-    };
   };
 
   var init = function() {
-    bind();
+    render();
   };
 
   // exposed methods
   return {
     init: init,
-    get: get,
-    restore: restore,
     render: render
   };
 

js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = 1.0;
+  var current = 2.0;
 
   var get = function() {
     return current;