redesign timeline with css gridlayout

src/Bundle/ChillPersonBundle/Resources/public/sass/chillperson.scss

@@ -130,89 +130,87 @@ div#header-household-details {
    }
 }
 
-div.household__address,
-div.person__address {
-   div.row {
-      height: 100px;
-      width: 100%;
+/*
+*  ADDRESS HISTORY
+*  context person / household
+*/
+div.timeline.grid {
+   display: grid;
+   grid-template-rows: auto auto auto;
+   grid-template-columns: auto 120px auto;
+   
+   @media only screen and (max-width: 750px) {
+      grid-template-columns: auto 1em auto;
+   }
+   
+   div.top {
+      grid-column: 2;
+      text-align: center;
+      color: lightgrey;
+      margin-bottom: -20px;
+   }
+   div.col-a {
+      grid-column: 1;
+      text-align: right;
+   }
+   div.col-b, 
+   div.date {
+      grid-column: 2;
       position: relative;
-
-      & > div {
+      &:after {
          position: absolute;
-         display: table;
+         content: '';
+         top: 0; bottom: 0;
+         left: 50%;
+         margin: auto -5px;
+         width: 10px;
          height: 100%;
-         border: 1px dotted #c3c3c3;
+         background-color: lightgrey;
+         z-index: -5;
       }
+   }
+   div.col-c {
+      grid-column: 3;
+   }
 
-      div.household__address--date,
-      div.person__address--date {
-         width: 30%;
-         background-color: #c3c3c3;
-         height: 100%;
-
-         div.cell {
-            box-sizing: border-box;
-            position: relative;
-            height: 100%;
-            width: 100%;
-            margin-left: 50%;
-
-            div.pill {
-               position: absolute;
-               box-sizing: border-box;
-               width: 120px;
-               height: 40px;
-               bottom: -20px;
-               background-color: white;
-               padding: 10px;
-               border-radius: 30px;
-               left: -60px;
-               text-align: center;
-               z-index: 10;
-            }
-         }
+   div.col-b,
+   div.action,
+   div.content {
+      min-height: 30px;
+      padding: 1em;
+   }
+   div.content {
+      box-shadow: 
+         1px 0 0 0 #000, 
+         0 1px 0 0 #000, 
+         1px 1px 0 0 #000,
+         1px 0 0 0 #000 inset, 
+         0 1px 0 0 #000 inset;
+         
+      div.address {
+         font-variant: small-caps;
       }
-
-      div.household__address--content,
-      div.person__address--content {
-         width: 70%;
-         left: 30%;
-         text-align: left;
-         background-color: #ececec;
-         border: 1px solid #888;
-
-         div.cell {
-            display: table-cell;
-            padding: 5px 30px;
-            vertical-align: middle;
-
-            & > div {
-               display: flex;
-               justify-content: space-between;
-            }
-
-            i.dot::after,
-            i.dot::before {
-               position: absolute;
-               width: 20px;
-               height: 20px;
-               content: '';
-               border: 0;
-               background-color: white;
-               border-radius: 50%;
-               border: 5px solid #c3c3c3;
-               z-index: 10;
-               left: -15px;
-               bottom: -15px;
-            }
-         }
+   }   
+   div.date {
+      text-align: center;
+      background-color: lightgrey;
+      padding: 0.5em;
+      border-radius: 0.3em;
+   }
+   
+   div.span2 { grid-row: span 3; }
+   div.span3 { grid-row: span 5; }
+   div.span4 { grid-row: span 7; }
+   div.span5 { grid-row: span 9; }
+   
+   ul.record_actions {
+      margin: 0;
+   }
+   .fake {
+      &:after {
+         content: 'fake, just to test.. ';
+         color: lightgrey;
+         font-style: italic;
       }
    }
 }
-
-div.household__address-move {
-   div.household__address-move__create {
-      display: flex;
-      flex-direction: column;
-   }
-}