diff options
| -rw-r--r-- | app/javascript/styles/mastodon/about.scss | 11 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/containers.scss | 53 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/widgets.scss | 11 | ||||
| -rw-r--r-- | app/views/about/more.html.haml | 8 |
4 files changed, 78 insertions, 5 deletions
diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index bba7044cf..228dd96f0 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -790,8 +790,10 @@ $small-breakpoint: 960px; border-radius: 4px; padding: 25px 40px; overflow: hidden; + box-sizing: border-box; .row { + width: 100%; display: flex; flex-direction: row-reverse; flex-wrap: wrap; @@ -808,11 +810,20 @@ $small-breakpoint: 960px; flex: 1 0 auto; padding: 0 10px; } + + @media screen and (max-width: $no-gap-breakpoint) { + width: 100%; + justify-content: space-between; + } } .row__mascot { flex: 1; margin: 10px -50px 0 0; + + @media screen and (max-width: $no-gap-breakpoint) { + display: none; + } } } diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index ba36d62d9..8ecedd2cb 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -141,6 +141,55 @@ grid-column: 1/3; grid-row: 3; } + + .landing-page__call-to-action { + min-height: 100%; + } + + @media screen and (max-width: 738px) { + grid-template-columns: minmax(0, 50%) minmax(0, 50%); + + .landing-page__call-to-action { + padding: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .row__information-board { + width: 100%; + justify-content: center; + align-items: center; + } + + .row__mascot { + display: none; + } + } + + @media screen and (max-width: $no-gap-breakpoint) { + grid-gap: 0; + grid-template-columns: minmax(0, 100%); + + .column-0 { + grid-column: 1; + } + + .column-1 { + grid-column: 1; + grid-row: 3; + } + + .column-2 { + grid-column: 1; + grid-row: 2; + } + + .column-3 { + grid-column: 1; + grid-row: 4; + } + } } .public-layout { @@ -334,6 +383,10 @@ .public-account-header__image, .public-account-header__image img { border-radius: 4px; + + @media screen and (max-width: $no-gap-breakpoint) { + border-radius: 0; + } } } diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index 875a36959..f843f0b42 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -114,7 +114,7 @@ .landing-page__information.contact-widget { box-sizing: border-box; padding: 20px; - height: 100%; + min-height: 100%; border-radius: 4px; background: $ui-base-color; box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); @@ -127,6 +127,10 @@ word-wrap: break-word; font-weight: 400; + strong { + font-weight: 500; + } + p { margin-bottom: 10px; @@ -226,7 +230,10 @@ } .moved-account-widget, -.memoriam-widget { +.memoriam-widget, +.box-widget, +.contact-widget, +.landing-page__information.contact-widget { @media screen and (max-width: $no-gap-breakpoint) { margin-bottom: 0; box-shadow: none; diff --git a/app/views/about/more.html.haml b/app/views/about/more.html.haml index 9e042ca73..8411cd276 100644 --- a/app/views/about/more.html.haml +++ b/app/views/about/more.html.haml @@ -29,14 +29,16 @@ .column-2 .landing-page__information.contact-widget - %p= t 'about.administered_by' + %p + %strong= t 'about.administered_by' = account_link_to(@instance_presenter.contact_account) - if @instance_presenter.site_contact_email.present? %p.contact-widget__mail - = succeed ':' do - = t 'about.contact' + %strong + = succeed ':' do + = t 'about.contact' %br/ = mail_to @instance_presenter.site_contact_email, nil, title: @instance_presenter.site_contact_email |