From 8de048fcdb328167922f3056e460afc6f055cb8d Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Wed, 7 Mar 2018 08:59:27 +0100
Subject: [PATCH] In wide layout, columnize Mastodon features on landing page
(#6674)
---
app/javascript/styles/mastodon/about.scss | 21 ++++++++++++++-------
app/views/about/show.html.haml | 6 ++++--
2 files changed, 18 insertions(+), 9 deletions(-)
diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss
index 9ce83aa9be..f299181354 100644
--- a/app/javascript/styles/mastodon/about.scss
+++ b/app/javascript/styles/mastodon/about.scss
@@ -832,8 +832,13 @@ $small-breakpoint: 960px;
}
&__features {
+ & > p {
+ padding-right: 60px;
+ }
+
.features-list {
- margin: 40px 0 !important;
+ margin: 40px 0;
+ margin-top: 30px;
}
&__action {
@@ -842,17 +847,11 @@ $small-breakpoint: 960px;
}
.features-list {
- margin-top: 20px;
-
.features-list__row {
display: flex;
padding: 10px 0;
justify-content: space-between;
- &:first-child {
- padding-top: 0;
- }
-
.visual {
flex: 0 0 auto;
display: flex;
@@ -878,6 +877,14 @@ $small-breakpoint: 960px;
}
}
}
+
+ @media screen and (min-width: $small-breakpoint) {
+ display: grid;
+ grid-gap: 30px;
+ grid-template-columns: 1fr 1fr;
+ grid-auto-columns: 50%;
+ grid-auto-rows: max-content;
+ }
}
.extended-description {
diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml
index 4f3cedacd6..d067d48741 100644
--- a/app/views/about/show.html.haml
+++ b/app/views/about/show.html.haml
@@ -103,8 +103,10 @@
- if Setting.timeline_preview
.column-4.landing-page__information
.landing-page__features
- %h3= t 'about.what_is_mastodon'
- %p= t 'about.about_mastodon_html'
+ .features-list
+ %div
+ %h3= t 'about.what_is_mastodon'
+ %p= t 'about.about_mastodon_html'
= render 'features'