experiments in dharma

res/css/views/rooms/_RoomHeader.scss

@@ -20,15 +20,15 @@ limitations under the License.
 }
 
 .mx_RoomHeader_wrapper {
-    max-width: 960px;
     margin: auto;
-    height: 70px;
+    height: 52px;
     align-items: center;
     display: flex;
 }
 
 .mx_RoomHeader_leftRow {
-    margin-left: -2px;
+    display: flex;
+    margin-left: 15px;
     order: 1;
     flex: 1;
     overflow: hidden;
@@ -72,15 +72,15 @@ limitations under the License.
 }
 
 .mx_RoomHeader_info {
-    display: table-cell;
-    width: 100%;
-    vertical-align: middle;
+    display: flex;
+    flex: 1;
+    align-items: center;
 }
 
 .mx_RoomHeader_simpleHeader {
-    line-height: 70px;
-    color: $primary-fg-color;
-    font-size: 22px;
+    line-height: 52px;
+    color: $roomheader-color;
+    font-size: 18px;
     font-weight: bold;
     overflow: hidden;
     margin-left: 63px;
@@ -99,15 +99,12 @@ limitations under the License.
 }
 
 .mx_RoomHeader_name {
-    vertical-align: middle;
-    width: 100%;
-    height: 31px;
     overflow: hidden;
-    color: $primary-fg-color;
+    color: $roomheader-color;
     font-weight: bold;
-    font-size: 22px;
-    padding-left: 19px;
-    padding-right: 16px;
+    font-size: 18px;
+    padding-left: 15px;
+    padding-right: 15px;
     /* why isn't text-overflow working? */
     text-overflow: ellipsis;
     border-bottom: 1px solid transparent;
@@ -166,25 +163,20 @@ limitations under the License.
 }
 
 .mx_RoomHeader_topic {
-    vertical-align: bottom;
-    float: left;
     max-height: 38px;
-    color: $settings-grey-fg-color;
-    font-weight: 300;
+    color: $roomtopic-color;
+    font-weight: 400;
     font-size: 13px;
-    margin-left: 19px;
-    margin-right: 16px;
+    margin-right: 13px;
     overflow: hidden;
     text-overflow: ellipsis;
     border-bottom: 1px solid transparent;
-    column-width: 960px;
 }
 
 .mx_RoomHeader_avatar {
-    display: table-cell;
-    width: 48px;
-    height: 50px;
-    vertical-align: middle;
+    flex: 0;
+    width: 28px;
+    height: 28px;
 }
 
 .mx_RoomHeader_avatar .mx_BaseAvatar_image {