Fix unresponsive blocks

static/css/components.css

@@ -8,6 +8,7 @@
     .menu-logo {
         text-align: center;
         font-weight: bold;
+        padding-left: 20px;
     }
 
         .menu-logo img {
@@ -38,6 +39,7 @@
         margin-top: 100px;
         font-weight: normal;
         font-size: 29px;
+        padding: 0 20px;
     }
 
 .landing-boards {
@@ -76,7 +78,6 @@
         .landing-board-name {
             display: block;
             font-size: 160%;
-            line-height: 130%;
             margin: 15px;
             font-weight: bold;
         }
@@ -103,7 +104,7 @@
 
     .curator-info {
         margin-left: 30px;
-        line-height: 1.5em;
+        line-height: 1.5;
     }
 
         .curator-name {
@@ -114,7 +115,7 @@
 
         .curator-url {
             font-size: 120%;
-            padding-top: 10px;
+            line-height: 1;
         }
 
         .curator-bio {
@@ -126,6 +127,17 @@
             color: var(--link-color);
         }
 
+    @media only screen and (max-width : 570px) {
+        .curator {
+            font-size: 12px;
+        }
+
+            .curator-avatar {
+                width: 100px;
+                height: 100px;
+            }
+    }
+
 .board-empty {
     padding: 100px 20px;
     text-align: center;
@@ -166,7 +178,7 @@
     box-sizing: border-box;
     box-shadow: 3px 3px 150px #000;
     font-size: 120%;
-    line-height: 150%;
+    line-height: 1.5;
 }
 
     .block-login-title {
@@ -218,7 +230,7 @@
         .feed-title small {
             font-size: 70%;
             opacity: 0.7;
-            line-height: 200%;
+            line-height: 2;
         }
 
     .feed-articles {

static/css/layout.css

@@ -5,7 +5,7 @@
 
 .menu {
     display: grid;
-    grid-template-columns: 170px auto 100px;
+    grid-template-columns: 190px auto 100px;
     max-width: var(--max-content-width);
     margin: 0 auto;
 }
@@ -25,12 +25,25 @@
     min-height: 250px;
 }
 
+    @media only screen and (max-width : 570px) {
+        .header {
+            min-height: 170px;
+            padding-top: 20px;
+        }
+    }
+
 .curator {
     display: grid;
     grid-template-columns: 150px auto;
     place-self: center;
 }
 
+    @media only screen and (max-width : 570px) {
+        .curator {
+            grid-template-columns: 100px auto;
+        }
+    }
+
 .board {
     display: block;
     position: relative;
@@ -49,17 +62,6 @@
         grid-column-end: 4;
     }
 
-    @media only screen and (max-width : 570px) {
-        .block {
-            grid-template-columns: 100%;
-        }
-
-        .block-header {
-            grid-column-start: 1;
-            grid-column-end: 2;
-        }
-    }
-
     @media only screen and (max-width : 1024px)  {
         .block {
             grid-template-columns: 50% 50%;
@@ -69,7 +71,21 @@
             grid-column-start: 1;
             grid-column-end: 3;
         }
+    }
 
+    @media only screen and (max-width : 570px) {
+        .block {
+            grid-template-columns: 100%;
+        }
+
+        .block-header {
+            grid-column-start: 1;
+            grid-column-end: 2;
+        }
+
+        .feed-title-hidden {
+            display: none;
+        }
     }
 
 .block-login {

static/css/theme.css

@@ -1,7 +1,7 @@
 body {
     font-family: 'Nunito', sans-serif;
     font-size: 16px;
-    line-height: 1.4em;
+    line-height: 1.3;
     transition: all linear .2s;
 }