witching to UIKit 3

src/index.scss

@@ -1,5 +1,5 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto');
 @import "./vars.scss";
+
 * {
    margin: 0;
    padding: 0;
@@ -18,27 +18,47 @@ html {
    display: flex;
 }
 
-// .feather {
-//    width: 24px;
-//    height: 24px;
-//    stroke: currentColor;
-//    stroke-width: 2;
-//    stroke-linecap: round;
-//    stroke-linejoin: round;
-//    fill: none;
-// }
-.header_icon_button {
-   height: $header_icon_width;
-   width: $header_icon_width;
-}
-
-.header_title {
-   max-width: calc(100% - #{$header_icon_width} - #{$header_icon_width});
-   overflow: hidden;
-}
+$header-margin: .5em;
+$header-icon-size: calc(1.5rem * 1);
+// $header-icon-size: 100%;
 
 header {
    display: flex;
    justify-content: space-between;
-   margin-bottom: calc(1.5 * var(--universal-padding));
+   margin-bottom: $header-margin;
+   align-content: center;
+   padding: 0.75em;
+   border-bottom: solid $border-color 1px;
+
+   >* {
+      margin: 0;
+   }
+
+   >.header-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      flex-grow: 1;
+      margin: 0 1em;
+   }
+
+   .header-icon-button {
+      display: block;
+      margin-top: auto;
+      margin-bottom: auto;
+      color: black;
+      min-width: $header-icon-size;
+
+      >svg {
+         height: $header-icon-size;
+         width: $header-icon-size;
+      }
+   }
+
+}
+
+.def-shadow {
+   box-shadow: 0px 5px 8px 2px rgba(66, 66, 66, 0.53);
 }