Fix most pages on small screens

4 files changed, 75 insertions, 7 deletions

diff --git a/app/assets/stylesheets/about.scss b/app/assets/stylesheets/about.scss
index df52ec184..84627383a 100644
--- a/app/assets/stylesheets/about.scss
+++ b/app/assets/stylesheets/about.scss
@@ -3,7 +3,7 @@
 
 .about-body {
   .wrapper {
-    width: 600px;
+    max-width: 600px;
     margin: 0 auto;
     color: #9baec8;
     padding-top: 200px;
@@ -38,4 +38,10 @@
     font: 16px/16px 'Montserrat', sans-serif;
     font-weight: 300;
   }
+
+  @media screen and (max-width: 360px) {
+    .wrapper {
+      padding: 20px;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/accounts.scss b/app/assets/stylesheets/accounts.scss
index 57da32856..f2be0fcf7 100644
--- a/app/assets/stylesheets/accounts.scss
+++ b/app/assets/stylesheets/accounts.scss
@@ -63,6 +63,13 @@
     margin-top: 30px;
     position: relative;
     z-index: 2;
+    flex-direction: row;
+  }
+
+  .details-counters {
+    display: flex;
+    flex-direction: row;
+    order: 0;
   }
 
   .counter {
@@ -129,6 +136,26 @@
     line-height: 18px;
     padding: 5px 10px;
     color: #d9e1e8;
+    order: 1;
+  }
+
+  @media screen and (max-width: 360px) {
+    .details {
+      display: block;
+    }
+
+    .bio {
+      text-align: center;
+      margin-bottom: 20px;
+    }
+
+    .counter {
+      flex: 1 1 auto;
+    }
+
+    .counter:last-child {
+      border-right: none;
+    }
   }
 }
 
@@ -186,6 +213,18 @@
     cursor: default;
     color: lighten(#282c37, 10%);
   }
+
+  @media screen and (max-width: 360px) {
+    padding: 30px 20px;
+
+    a, .current, .next_page, .previous_page, .gap {
+      display: none;
+    }
+
+    .next_page, .previous_page {
+      display: inline-block;
+    }
+  }
 }
 
 .accounts-grid {
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 917a2f9d9..e6ae1d915 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -69,7 +69,6 @@ body {
   padding-bottom: 140px;
   text-rendering: optimizelegibility;
   font-feature-settings: "kern";
-  min-width: 380px;
 
   &.app-body {
     position: fixed;
@@ -77,6 +76,10 @@ body {
     height: 100%;
     padding: 0;
   }
+
+  @media screen and (max-width: 360px) {
+    padding-bottom: 0;
+  }
 }
 
 .app-holder {
@@ -99,10 +102,14 @@ body {
 }
 
 .logo-container {
-  width: 400px;
+  max-width: 400px;
   margin: 100px auto;
   cursor: default;
 
+  @media screen and (max-width: 360px) {
+    margin: 30px auto;
+  }
+
   h1 {
     display: block;
     text-align: center;
@@ -145,7 +152,7 @@ body {
 }
 
 .form-container {
-  width: 400px;
+  max-width: 400px;
   margin: 0 auto;
   padding: 20px;
 
@@ -321,6 +328,11 @@ body {
     font-size: 12px;
     font-weight: 400;
     font-family: 'Roboto Mono', monospace;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
   }
 
   .powered-by {
diff --git a/app/assets/stylesheets/stream_entries.scss b/app/assets/stylesheets/stream_entries.scss
index a111ec1e6..27eb21361 100644
--- a/app/assets/stylesheets/stream_entries.scss
+++ b/app/assets/stylesheets/stream_entries.scss
@@ -60,8 +60,12 @@
     border-radius: 0;
     box-shadow: none;
 
-    &.activity-stream-headless {
-      .entry:first-child {
+    .entry {
+      &:last-child {
+        border-radius: 0;
+      }
+
+      &:first-child {
         border-radius: 0;
 
         &:last-child {
@@ -71,6 +75,12 @@
     }
   }
 
+  @media screen and (max-width: 360px) {
+    .avatar {
+      display: none;
+    }
+  }
+
   .entry__container {
     display: flex;
   }
@@ -192,6 +202,7 @@
     display: block;
     overflow: hidden;
     padding-left: 10px;
+    margin-bottom: 21px;
 
     li {
       display: block;
@@ -200,7 +211,7 @@
       height: 100px;
       border-radius: 4px;
       margin-right: 4px;
-      margin-bottom: 25px;
+      margin-bottom: 4px;
 
       a {
         display: block;