diff options
author | Eugen <eugen@zeonfederated.com> | 2017-01-05 02:57:13 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-01-05 02:57:13 +0100 |
commit | db21724a5a74d08f895753bf755cbf558148d9b5 (patch) | |
tree | 633873ec75f223de21d4836729dfbfa447d882b3 /app/assets/stylesheets/components.scss | |
parent | 98b83aca372fabdfc32b05c1eb72c80a79102e53 (diff) | |
parent | aaee8c9b5d935143cf749fbea78f8cfee74ee37f (diff) |
Merge pull request #393 from ticky/qol-for-four-inch-phones
Improve experience on 4-inch phones
Diffstat (limited to 'app/assets/stylesheets/components.scss')
-rw-r--r-- | app/assets/stylesheets/components.scss | 39 |
1 files changed, 27 insertions, 12 deletions
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index acfa85c6b..c64419243 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -331,11 +331,15 @@ } .columns-area { - margin: 10px; - margin-left: 0; flex-direction: row; } +@media screen and (min-width: 360px) { + .columns-area { + margin: 10px; + } +} + .column { width: 330px; position: relative; @@ -346,11 +350,20 @@ } .column, .drawer { - margin-left: 10px; + margin-left: 5px; + margin-right: 5px; flex: 0 0 auto; overflow: hidden; } +.column:first-child, .drawer:first-child { + margin-left: 0; +} + +.column:last-child, .drawer:last-child { + margin-right: 0; +} + @media screen and (max-width: 1024px) { .column, .drawer { width: 100%; @@ -359,7 +372,6 @@ } .columns-area { - margin: 10px; flex-direction: column; } } @@ -368,6 +380,13 @@ display: flex; } +@media screen and (min-width: 360px) { + .tabs-bar { + margin: 10px; + margin-bottom: 0; + } +} + @media screen and (min-width: 1025px) { .tabs-bar { display: none; @@ -589,12 +608,8 @@ } } -.getting-started__illustration { - width: 330px; - height: 235px; - background: image-url('mastodon-getting-started.png') no-repeat 0 0; - position: absolute; - pointer-events: none; - bottom: 0; - left: 0; +.getting-started { + overflow-y: auto; + padding-bottom: 235px; + background: image-url('mastodon-getting-started.png') no-repeat 0 100% local; } |