2 files changed, 136 insertions, 8 deletions

diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index cc3d7a4b9..049e12055 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1,6 +1,12 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+    .post-code__language {
+        @include opacity(.6);
+        @include transition(none);
+        display: block;
+    }
+
     .backstage-filters {
         display: block;
 
@@ -41,10 +47,15 @@
     }
 
     .channel-intro {
-        margin: 0 15px 35px;
+        margin: 0 0 35px;
     }
 
     .post {
+        &.post--compact {
+
+
+        }
+
         .post__dropdown {
             display: inline-block;
             height: 20px;
@@ -136,10 +147,6 @@
 
         &.same--root {
             &.same--user {
-                .post__time {
-                    display: none;
-                }
-
                 .post__header {
                     height: auto;
                     margin-top: 5px;
@@ -275,7 +282,7 @@
     .signup-team__container {
         font-size: .9em;
         margin-bottom: 30px;
-        padding: 30px 0;
+        padding: 60px 10px 0;
 
         .signup-team__name {
             font-size: 2em;
@@ -1010,12 +1017,19 @@
 
 @media screen and (max-height: 640px) {
     .signup-team__container {
-        padding: 30px 0;
-        margin-bottom: 30px;
         font-size: .9em;
+        margin-bottom: 30px;
 
         .signup-team__name {
             font-size: 2em;
         }
     }
 }
+
+@media screen and (max-width: 320px) {
+    .tip-overlay {
+        &.tip-overlay--sidebar {
+            min-height: 440px;
+        }
+    }
+}
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 72b4b5aad..f5e341b25 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -65,6 +65,7 @@
     }
 }
 
+// Tablet and desktop
 @media screen and (min-width: 768px) {
     .second-bar {
         display: none;
@@ -83,6 +84,111 @@
     }
 
     .post {
+        &.post--compact {
+            padding: 5px .5em 0 80px;
+
+            .post__link {
+                margin: 4px 0 7px;
+            }
+
+            .post__time {
+                font-size: .85em;
+                left: -70px;
+                position: absolute;
+                top: 2px;
+            }
+
+            span {
+                p {
+                    &:last-child {
+                        margin-bottom: .3em;
+                    }
+                }
+            }
+
+            .post__header {
+                float: left;
+                height: 18px;
+                padding-top: 3px;
+
+                .col__name {
+                    font-weight: bold;
+                }
+
+                .col__reply {
+                    top: 2px;
+                }
+            }
+
+            &.other--root {
+                .post__body {
+                    > div {
+                        &:first-child {
+                            min-height: 21px;
+                        }
+                    }
+                }
+
+                .post__link + .post__body {
+                    clear: both;
+                }
+
+                &.post--comment {
+                    .post__header {
+                        .col__reply {
+                            top: 0;
+                        }
+                    }
+                }
+            }
+
+            .post-code {
+                clear: both;
+            }
+
+            &.same--root {
+                &.same--user {
+                    padding-left: 80px;
+
+                    .post__img {
+                        img {
+                            display: none;
+                        }
+                    }
+                }
+
+                &.post--comment {
+                    padding-top: 1px;
+
+                    .post__img {
+                        img {
+                            display: inline-block;
+                        }
+                    }
+
+                    &.same--user {
+                        .post__img {
+                            img {
+                                display: none;
+                            }
+                        }
+                    }
+
+                    .post__header {
+                        margin-left: 12px;
+                    }
+                }
+            }
+
+            .post__body {
+                width: 100%;
+            }
+
+            .post__content {
+                padding-right: 85px;
+            }
+        }
+
         &.same--root {
             &.same--user {
                 .post__time {
@@ -94,6 +200,14 @@
                     text-rendering: auto;
                     top: -2px;
                 }
+
+                &.post--compact {
+                    .post__time {
+                        font-size: .85em;
+                        left: -70px;
+                        top: -5px;
+                    }
+                }
             }
         }
     }