Simplify CSS

main.css

@@ -2,39 +2,9 @@
 table {
     margin-left: 2em;
 }
-tbody {
-    margin-left: 2em;
-}
-tr {
-    margin-left: 2em;
-}
-
-body {
-    color: #454545;
-    background-color: #ffffff;
-    -webkit-rtl-ordering: visual;
-}
-#roomList {
-    border-collapse: collapse;
-}
-#roomList > tbody > tr:nth-of-type(2n+1) {
-    background-color: #eaf5f0;
-}
-#roomList td {
-    padding: 0 3px;
-    border: 1px solid transparent;
-}
-/* Theming end */
-header + hr + div {
-    text-align: center;
-}
-footer {
-    margin-top: 1em;
-}
-footer a {
-    padding: 1em;
-    margin-left: 1em;
-    margin-right: 1em;
+td {
+    align-items: center;
+    display:flex;
 }
 img.avatar {
     -webkit-border-radius: 50%;
@@ -42,77 +12,6 @@ img.avatar {
     border-radius: 50%;
 }
 
-img.userAvatar {
-    height: 20px;
-}
-img.userAvatarMedium {
+img.roomAvatar {
     height: 36px;
 }
-img.userAvatarBig {
-    height: 96px;
-}
-
-* {
-    font-family: 'Open Sans',Arial,Helvetica,Sans-Serif;
-}
-img.serverAvatar {
-    height: 20px;
-}
-img.roomAvatar {
-    height: 64px;
-}
-td.roomAvatar {
-    width: 80px;
-}
-td.roomAvatar img {
-    height: 96px;
-}
-tr.dateSep {
-    background-color: lightblue;
-    text-align: center;
-    font-weight: bold;
-}
-td.nowrap {
-    white-space: nowrap;
-    width: 1px;
-}
-td.fullWidth {
-    white-space: nowrap;
-}
-table#roomHeader {
-    width: 100%;
-}
-table#roomList img {
-    height: 60px;
-}
-table#timeline {
-    width: 100%;
-}
-table#timeline tr {
-    vertical-align: top;
-}
-tr {
-    margin-left: 2em;
-}
-td.rightAlign {
-    text-align: right;
-    min-width: 120px;
-}
-div.paginate {
-    text-align: center;
-}
-div.paginate h4 {
-    margin: 10px;
-}
-h2 {
-    margin: 0;
-}
-span.redacted {
-    color: red;
-}
-tr.evHighlight {
-    background-color: yellow;
-}
-form {
-    float: right;
-}

spaces.html

@@ -15,27 +15,27 @@
             <tbody>
                 <tr>
                 % if 'avatar_url' in room:
-                <td><img class="avatar roomAvatar" src=${mxc2url(room['avatar_url'])}></td>
+                <td><img class="avatar roomAvatar" src=${mxc2url(room['avatar_url'])}>
                 % endif
+
+                % if 'room_id' in room:
+                    <a href="https://view.matrix.org/room/${room['room_id']}">
+
+                    % if 'name' in room:
+                        <div> ${room['name']} </div>
+                    % endif
+
+                    </a>
+                % endif
+                </td>
+                </tr>
+
                 % if 'children' in room:
-                    <td><div>${room['name']} </div></td>
-                    </tr>
                     % for subroom in room['children']:
                         <tr><td>${render(subroom)}</td></tr>
                     % endfor
-                % else:
-
-                    % if 'room_id' in room:
-                        <td><a href="https://view.matrix.org/room/${room['room_id']}">
-
-                        % if 'name' in room:
-                            <div> ${room['name']} </div>
-                        % endif
-
-                        </a> </td>
-                    % endif
-                    </tr>
                 % endif
+
             </tbody>
             </table>
         </%def>