diff --git a/static/css/components.css b/static/css/components.css index 653e5ae..aedd221 100644 --- a/static/css/components.css +++ b/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 { diff --git a/static/css/layout.css b/static/css/layout.css index e6c1299..c8ce86a 100644 --- a/static/css/layout.css +++ b/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 { diff --git a/static/css/theme.css b/static/css/theme.css index d022135..2d81f66 100644 --- a/static/css/theme.css +++ b/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; }