[design] improve layout and head area

css/base.css

@@ -35,6 +35,12 @@
   --font-bold: "Open Sans Bold", sans-serif;
   --font-light: "Open Sans Light", sans-serif;
   --font-fjalla: "Fjalla One Regular", sans-serif;
+  /* breakpoint reference */
+  /* can not be used in @media as of yet */
+  --breakpoint-sm: 550px;
+  --breakpoint-md: 700px;
+  --breakpoint-lg: 900px;
+  --breakpoint-xl: 1300px;
 }
 
 @media (min-width: 700px) {

css/button.css

@@ -12,8 +12,8 @@ input[type="submit"] {
   min-height: 2.5em;
   line-height: 1;
   border: 0;
-  border-top-width: 2px;
+  border-top-width: 3px;
-  border-bottom-width: 2px;
+  border-bottom-width: 3px;
   border-style: solid;
   border-color: transparent;
   border-radius: var(--radius);
@@ -29,10 +29,44 @@ input[type="submit"] {
   align-items: center;
 }
 
-.button.active {
+button:hover,
-  border-top-width: 3px;
+button:focus,
-  border-bottom-width: 3px;
+.button:hover,
+.button:focus,
+input[type="button"]:hover,
+input[type="button"]:focus,
+input[type="reset"]:hover,
+input[type="reset"]:focus,
+input[type="submit"]:hover,
+input[type="submit"]:focus {
+  background-color: var(--gray-03);
   border-bottom-color: rgb(var(--accent));
+  color: var(--white);
+  outline: 0;
+}
+
+button:active,
+.button:active,
+input[type="button"]:active,
+input[type="reset"]:active,
+input[type="submit"]:active {
+  background-color: var(--gray-04);
+  color: var(--white);
+  transition: none;
+}
+
+button[disabled],
+.button[disabled],
+button[disabled]:hover,
+.button[disabled]:hover,
+button[disabled]:focus,
+.button[disabled]:focus,
+button[disabled]:active,
+.button[disabled]:active {
+  background-color: var(--gray-02);
+  border-color: transparent;
+  color: var(--gray-04);
+  cursor: default;
 }
 
 button [class^="icon-"],
@@ -43,6 +77,10 @@ button [class*=" icon-"],
   line-height: 1;
 }
 
+.button.active {
+  border-bottom-color: rgb(var(--accent));
+}
+
 .button-small {
   font-size: 0.8em;
 }
@@ -70,32 +108,6 @@ button [class*=" icon-"],
   border-radius: 0 var(--radius) var(--radius) 0;
 }
 
-button:hover,
-button:focus,
-.button:hover,
-.button:focus,
-input[type="button"]:hover,
-input[type="button"]:focus,
-input[type="reset"]:hover,
-input[type="reset"]:focus,
-input[type="submit"]:hover,
-input[type="submit"]:focus {
-  background-color: var(--gray-03);
-  border-bottom-color: rgb(var(--accent));
-  color: var(--white);
-  outline: 0;
-}
-
-button:active,
-.button:active,
-input[type="button"]:active,
-input[type="reset"]:active,
-input[type="submit"]:active {
-  background-color: var(--gray-04);
-  color: var(--white);
-  transition: none;
-}
-
 button [class^="button-"],
 button [class*=" button-"],
 .button [class^="button-"],

css/clock.css

@@ -1,11 +1,14 @@
 .clock {
   margin: 0;
   padding: 0;
-  min-width: 6em;
+  width: 100%;
   font-family: var(--font-fjalla);
   font-size: 1.5em;
   color: var(--white);
   text-align: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
   transition: all var(--animation-speed-medium) ease-in-out;
 }
 
@@ -13,6 +16,13 @@
   color: rgb(var(--accent));
 }
 
+.clock-hour,
+.clock-minutes,
+.clock-seconds {
+  min-width: 1.75em;
+  display: block;
+}
+
 .clock-hour {
   color: var(--white);
 }

css/form.css

@@ -4,7 +4,7 @@ input[type="password"],
 input[type="search"],
 input[type="tel"],
 input[type="text"] {
-  background-color: var(--gray-16);
+  background-color: var(--gray-14);
   padding: 0 0.5em;
   margin: 0 0 1em 0;
   color: var(--black);

css/head.css

@@ -1,32 +1,22 @@
 .head {
-  margin: 0;
+  --gutter: 0.5em;
+  margin: 0 calc(var(--gutter) * -1);
   display: flex;
   flex-direction: row;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
-  justify-content: center;
+  justify-content: flex-start;
+  align-items: stretch;
 }
 
 .head-item {
-  margin-left: 0.5em;
+  margin-left: var(--gutter);
-  margin-right: 0.5em;
+  margin-right: var(--gutter);
   display: flex;
   flex-wrap: nowrap;
   justify-content: center;
   align-items: center;
 }
 
-.head-item:first-child {
+.head-search {
-  margin-left: 0;
-}
-
-.head-item:last-child {
-  margin-right: 0;
-}
-
-.head-item-shrink {
-  flex-shrink: 0;
-}
-
-.head-item-grow {
   flex-grow: 1;
 }

css/links.css

@@ -71,7 +71,6 @@
   bottom: 0;
   left: 0.25em;
   z-index: -1;
-  transition: all var(--animation-speed-medium) ease-in-out;
 }
 
 .link-control {
@@ -152,7 +151,6 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  transition: all var(--animation-speed-medium) ease-in-out;
 }
 
 .link-item:hover .link-letter,
@@ -170,7 +168,6 @@
   overflow: hidden;
   opacity: 1;
   text-overflow: ellipsis;
-  transition: all var(--animation-speed-medium) ease-in-out;
 }
 
 .link-item:hover .link-name,

css/utilities.css

@@ -1,19 +1,3 @@
-.margin-top-0 {
-  margin-top: 0 !important;
-}
-
-.margin-right-0 {
-  margin-right: 0 !important;
-}
-
-.margin-bottom-0 {
-  margin-bottom: 0 !important;
-}
-
-.margin-left-0 {
-  margin-left: 0 !important;
-}
-
 .is-hidden {
   display: none !important;
 }

index.html

@@ -6,13 +6,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
   <title>New Tab</title>
   <link rel="stylesheet" href="css/reset.css">
+  <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/utilities.css">
-  <link rel="stylesheet" href="css/base.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/spacing.css">
   <link rel="stylesheet" href="css/button.css">
   <link rel="stylesheet" href="css/form.css">
   <link rel="stylesheet" href="css/shade.css">
@@ -29,33 +30,31 @@
 
     <div class="grid-item-head">
       <div class="head">
-        <div class="head-item">
+        <div class="head-item mb-3 mb-md-0">
           <p class="clock"></p>
         </div>
-        <div class="head-item head-item-grow">
+        <div class="head-item head-search mb-3 mb-md-0">
           <form class="search" action="http://www.google.com/search" method="get">
-            <input class="search-input margin-bottom-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 bookmarks or search" tabindex="1" name="q" autocomplete="off" tabindex="1">
             <input type="submit" value="Search" class="is-hidden">
           </form>
-        </div>
+          <button class="button mb-0 ml-3 search-clear" tabindex="1" disabled>
-        <div class="head-item search-clear is-hidden">
-          <button class="button margin-bottom-0" tabindex="1">
             <span class="icon-close"></span>
           </button>
         </div>
-        <div class="head-item">
+        <div class="head-item mb-3 mb-md-0">
-          <button class="button margin-bottom-0 control-add" tabindex="1">
+          <button class="button mb-0 control-add" tabindex="1">
             <span class="button-text">Add</span>
           </button>
         </div>
-        <div class="head-item">
+        <div class="head-item mb-3 mb-md-0">
-          <button class="button margin-bottom-0 control-edit" tabindex="1">
+          <button class="button mb-0 control-edit" tabindex="1">
             <span class="button-text">Edit</span>
           </button>
         </div>
-        <div class="head-item">
+        <div class="head-item mb-3 mb-md-0">
           <form class="theme">
-            <label class="button margin-bottom-0 theme-label" for="accent-picker">
+            <label class="button mb-0 theme-label" for="accent-picker">
               <span class="button-text">Accent</span>
             </label>
             <input id="accent-picker" type="color" class="theme-input" value="#ffaa33" tabindex="1">

js/search.js

@@ -24,10 +24,11 @@ var search = (function() {
     var searchInput = helper.e(".search-input");
     var searchClear = helper.e(".search-clear");
     if (searchInput.value != "") {
-      helper.removeClass(searchClear, "is-hidden");
+      console.log(1);
+      searchClear.removeAttribute("disabled");
     } else {
-      helper.addClass(searchClear, "is-hidden");
+      searchClear.setAttribute("disabled", "");
-    }
+    };
   };
 
   var _findResults = function(string) {