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

Author: zombieFox

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;
---animation-speed-medium:0.2s;
---animation-speed-slow:0.3s;
+--gutter:0.5em;
+--animation-speed-fast:0.2s;
+--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;
-height:100vh;
+line-height:1.6;
 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.25em1em;
+padding:0.125em1em;
 margin:001em0;
-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:001em0;
-display: flex;
+display:inline-flex;
 justify-content: center;
 align-items: stretch;
 }
@@ -99,12 +104,14 @@ button [class*=" icon-"],
 }
 
 .button-groupbutton:first-child,
-.button-group .button:first-child{
+.button-group .button:first-child,
+.button-group .button-group-addon:first-child{
 border-radius:var(--radius) 00var(--radius);
 }
 
 .button-groupbutton:last-child,
-.button-group .button:last-child{
+.button-group .button:last-child,
+.button-group .button-group-addon:last-child{
 border-radius:0var(--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{
-min-width:1.75em;
-display: block;
+.clock-seconds,
+.clock-meridiem{
+min-width:1.25em;
+}
+
+.clock [class^="clock-"]:not(:first-child),
+.clock [class*=" clock-"]:not(:first-child){
+margin-left:0.125em;
 }
 
-.clock-hour{
+.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){}