Design improvements

res/css/main.css

@@ -37,26 +37,34 @@ body {
   border-right-width: 1px;
   border-right-color: #cecece;
   border-right-style: solid;
-  z-index: 50; }
+  z-index: 50;
+  font-weight: 500; }
 
 .drawerimg {
   width: 100%; }
 
-.draweritem {
-  height: 72px;
-  line-height: 72px;
+.draweritem, .draweritembottom {
+  height: 58px;
+  line-height: 58px;
   font-size: 18px;
   padding-left: 16px;
   cursor: pointer; }
 
-.draweritem:hover {
-  background: #e0e0e0; }
+.draweritembottom {
+  bottom: 0px;
+  position: absolute;
+  width: calc(100% - 16px); }
 
-.drawerdivider, .carddivider {
+.drawerdivider, .drawerdividerbottom, .carddivider {
   border-top-color: #cecece;
   border-top-width: 1px;
   border-top-style: solid; }
 
+.drawerdividerbottom {
+  bottom: 60px;
+  position: absolute;
+  width: 100%; }
+
 .main {
   width: calc(100% - 300px);
   height: calc(100%-60px);
@@ -104,9 +112,6 @@ body {
   color: #03a9f4;
   cursor: pointer; }
 
-.cardbutton:hover {
-  background: #e0e0e0; }
-
 .overlay {
   background: #000;
   opacity: 0;
@@ -127,6 +132,9 @@ body {
 #outputcard {
   display: none; }
 
+#writtenmorse {
+  color: #03a9f4; }
+
 @media screen and (max-width: 1400px) {
   .drawer {
     display: none;

res/css/main.sass

@@ -5,9 +5,8 @@ $drawer-width: 300px
 $actionbar-height: 60px
 $actionbar-shadow: #999
 $divider-color: #cecece
-$drawer-item-height: 72px
+$drawer-item-height: 58px
 $drawer-item-font-size: 18px
-$hovered-element-color: #e0e0e0
 $card-padding: 20px
 
 =border-radius($radius)
@@ -59,6 +58,7 @@ body
     border-right-color: $divider-color
     border-right-style: solid
     z-index: 50
+    font-weight: 500
 
 .drawerimg
     width: 100%
@@ -70,14 +70,23 @@ body
     padding-left: 16px
     cursor: pointer
 
-.draweritem:hover
-    background: $hovered-element-color
+.draweritembottom
+    @extend .draweritem
+    bottom: 0px
+    position: absolute
+    width: calc(100% - 16px)
 
 .drawerdivider
     border-top-color: $divider-color
     border-top-width: 1px
     border-top-style: solid
 
+.drawerdividerbottom
+    @extend .drawerdivider
+    bottom: 60px
+    position: absolute
+    width: 100%
+
 .main
     width: calc(100% - 300px)
     height: calc(100%-60px)
@@ -120,9 +129,6 @@ body
     color: $primary-color
     cursor: pointer
 
-.cardbutton:hover
-    background: $hovered-element-color
-
 .overlay
     background: #000
     opacity: 0
@@ -144,6 +150,9 @@ body
 #outputcard
     display: none
 
+#writtenmorse
+    color: $primary-color
+
 @media screen and (max-width: 1400px)
     .drawer
         display: none