diff options
author | Lynx Kotoura <admin@sanin.link> | 2018-02-27 01:43:45 +0900 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2018-02-26 17:43:45 +0100 |
commit | 7150f2e9d3791720131dc77cd889acd0226d6acb (patch) | |
tree | 3552fa62b60662640a7a252d87f6d0ac7f1d7503 /app/javascript/styles/mastodon | |
parent | 3a6ace487465bd82c3f9527deb85f0c739742f32 (diff) |
Grid layout for tag pages (#6545)
* Use grid layout for the landing page * Use grid layout for tag pages * Set 2 columns width as explicit percentage for tag pages
Diffstat (limited to 'app/javascript/styles/mastodon')
-rw-r--r-- | app/javascript/styles/mastodon/about.scss | 113 |
1 files changed, 37 insertions, 76 deletions
diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index 9417a924b..c2e819f51 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -1015,93 +1015,54 @@ $small-breakpoint: 960px; } &.tag-page { - .features { - padding: 30px 0; - - .container-alt { - max-width: 820px; - - #mastodon-timeline { - margin-right: 0; - border-top-right-radius: 0; - } - - .about-mastodon { - .about-hashtag { - background: darken($ui-base-color, 4%); - padding: 0 20px 20px 30px; - border-radius: 0 5px 5px 0; - - .brand { - padding-top: 20px; - margin-bottom: 20px; - - img { - height: 48px; - width: auto; - } - } - - p { - strong { - color: $ui-secondary-color; - font-weight: 700; - } - } + .grid { + @media screen and (min-width: $small-breakpoint) { + grid-template-columns: 33% 67%; + } - .cta { - margin: 0; + .column-2 { + grid-column: 2; + grid-row: 1; + } + } - .button { - margin-right: 4px; - } - } - } + .brand { + text-align: unset; + padding: 0; - .features-list { - margin-left: 30px; - margin-right: 10px; - } - } + img { + height: 48px; + width: auto; } } - @media screen and (max-width: 675px) { - .features { - padding: 10px 0; + .cta { + margin: 0; - .container-alt { - display: flex; - flex-direction: column; - - #mastodon-timeline { - order: 2; - flex: 0 0 auto; - height: 60vh; - margin-bottom: 20px; - border-top-right-radius: 4px; - } + .button { + margin-right: 4px; + } + } - .about-mastodon { - order: 1; - flex: 0 0 auto; - max-width: 100%; + @media screen and (max-width: $column-breakpoint) { + .grid { + .column-1 { + grid-column: 1; + grid-row: 2; + } - .about-hashtag { - background: unset; - padding: 0; - border-radius: 0; + .column-2 { + grid-column: 1; + grid-row: 1; + } + } - .cta { - margin: 20px 0; - } - } + .brand { + margin: 0; + } - .features-list { - display: none; - } - } - } + .landing-page__features { + display: none; } } } |