Adjust responsive design for /about/more and /terms (#8158)

Follow-up to #8142

diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss
index bba7044cf3bb97e1d3ccb8ed454f8aa4e4c244d3..228dd96f0de411df002d5c9908d948acdac0e6ae 100644 (file)
--- 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 ba36d62d97e9ff8c220a3232eef7783acbee1926..8ecedd2cb7fbf9d88c82b202cf58f09865f2e011 100644 (file)
--- 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 875a369594f96b49a47a5d58a46a3b14d45aee34..f843f0b42b54bca4b12efcbe2657ca391742eece 100644 (file)
--- 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 9e042ca73dcab385b0a8a1ec20a4ba038ff0e4bc..8411cd276d2da1412d40a0bf9c476807aaa79ae6 100644 (file)
--- 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