Redesign extended information page (#4322)

* Redesign extended information page * Remove unused keys * Add $ui-base-lighter-color variable to SCSS
7 years ago · e43e0e959c
parent 6a0cf5945c
commit e43e0e959c
37 changed files with 219 additions and 260 deletions
--- a/app/javascript/styles/about.scss
+++ b/app/javascript/styles/about.scss
@ -120,18 +120,55 @@
 }

 .information-board {
-  margin: 20px 0;
-  display: flex;
-  justify-content: space-between;
-  border-top: 1px solid lighten($ui-base-color, 10%);
-  border-bottom: 1px solid lighten($ui-base-color, 10%);
-  padding-right: 14px;
+  background: darken($ui-base-color, 4%);
+  padding: 40px 0;
+
+  .panel {
+    position: absolute;
+    width: 280px;
+    box-sizing: border-box;
+    background: darken($ui-base-color, 8%);
+    padding: 20px;
+    padding-top: 10px;
+    border-radius: 4px 4px 0 0;
+    right: 0;
+    bottom: -40px;
+
+    .panel-header {
+      font-family: 'mastodon-font-display', sans-serif;
+      font-size: 14px;
+      line-height: 24px;
+      font-weight: 500;
+      color: $ui-base-lighter-color;
+      padding-bottom: 5px;
+      margin-bottom: 15px;
+      border-bottom: 1px solid lighten($ui-base-color, 4%);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+
+      span {
+        font-weight: 400;
+        color: lighten($ui-base-color, 34%);
+      }
+    }
+  }
+
+  .container {
+    position: relative;
+    padding-right: 280px + 15px;
+  }
+
+  .information-board-sections {
+    display: flex;
+    justify-content: space-between;
+  }

  .section {
    flex: 1 0 0;
-    padding: 14px;
-    text-align: right;
    font: 16px/28px 'mastodon-font-sans-serif', sans-serif;
+    text-align: right;
+    padding: 0 15px;

    span,
    strong {
@ -143,7 +180,6 @@

      &:last-child {
        color: $ui-secondary-color;
-        font-size: 14px;
      }
    }

@ -203,100 +239,6 @@
  }
 }

-.contact-email {
-  text-align: center;
-  margin: 40px 0;
-
-  strong {
-    display: block;
-    color: $primary-text-color;
-    word-break: break-word;
-  }
-}
-
-.sidebar-layout {
-  display: flex;
-
-  .main {
-    flex: 1 1 auto;
-    padding: 14px 0;
-
-    .panel {
-      padding-right: 14px;
-    }
-  }
-
-  .sidebar {
-    border-left: 1px solid lighten($ui-base-color, 10%);
-    width: 200px;
-    flex: 0 0 auto;
-  }
-
-  .panel {
-    .panel-header {
-      background: lighten($ui-base-color, 10%);
-      padding: 7px 14px;
-      text-transform: uppercase;
-      font-size: 12px;
-      font-weight: 500;
-    }
-
-    .panel-body {
-      padding: 14px;
-    }
-
-    .panel-list {
-      ul {
-        list-style: none;
-        margin: 0;
-
-        li {
-          margin: 0;
-          font-family: inherit;
-          font-size: 13px;
-          line-height: 18px;
-
-          a {
-            display: block;
-            padding: 7px 14px;
-            color: rgba($primary-text-color, 0.7);
-            text-decoration: none;
-            transition: all 200ms linear;
-
-            i.fa {
-              margin-right: 5px;
-            }
-
-            &:hover {
-              color: $primary-text-color;
-              background-color: darken($ui-base-color, 5%);
-              transition: all 100ms linear;
-            }
-
-            &.selected {
-              color: $primary-text-color;
-              background-color: $ui-highlight-color;
-
-              &:hover {
-                background-color: lighten($ui-highlight-color, 5%);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  @media screen and (max-width: 625px) {
-    flex-direction: column;
-
-    .sidebar {
-      border: 1px solid lighten($ui-base-color, 10%);
-      width: auto;
-    }
-  }
-}
-
 .features-list__row {
  display: flex;
  padding: 10px 0;
@ -322,7 +264,7 @@
  .text {
    font-size: 16px;
    line-height: 30px;
-    color: lighten($ui-base-color, 26%);
+    color: $ui-base-lighter-color;

    h6 {
      font-weight: 500;
@ -338,6 +280,15 @@
    background: linear-gradient(150deg, lighten($ui-base-color, 8%), $ui-base-color);
    position: relative;

+    &.compact {
+      background: $ui-base-color;
+      padding-bottom: 15px;
+
+      .hero .heading {
+        padding-bottom: 30px;
+      }
+    }
+
    .mascot-container {
      max-width: 800px;
      margin: 0 auto;
@ -402,7 +353,7 @@
          right: -120px;
          bottom: 0;
          animation-duration: 3s;
-          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447.1875 234.375" height="170" width="324"><path fill="#{hex-color(lighten($ui-base-color, 26%))}" d="M21.69 233.366c-6.45-1.268-13.347-5.63-16.704-10.564-10.705-15.734-1.513-37.724 18.632-44.57l4.8-1.632.173-17.753c.146-14.77.515-19.063 2.2-25.55 6.736-25.944 24.46-46.032 47.766-54.137 11.913-4.143 19.558-5.366 34.178-5.47l13.828-.096V71.12c0-4.755 2.853-17.457 5.238-23.327 8.588-21.137 26.735-35.957 52.153-42.593 23.248-6.07 50.153-6.415 71.863-.923 11.14 2.82 25.686 9.957 33.857 16.615 19.335 15.756 31.82 41.05 35.183 71.275.59 5.305.672 5.435 3.11 4.926 11.833-2.474 30.4-3.132 40.065-1.42 24.388 4.32 40.568 19.076 47.214 43.058 2.16 7.8 3.953 23.894 3.59 32.237l-.24 5.498 5.156 1.317c6.392 1.633 14.55 7.098 18.003 12.062 1.435 2.062 3.305 6.597 4.156 10.078 1.428 5.84 1.43 6.8.04 12.44-1.807 7.318-5.672 13.252-10.872 16.694-8.508 5.63 3.756 5.33-211.916 5.216-108.56-.056-199.22-.464-201.47-.906z"/></svg>');
+          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447.1875 234.375" height="170" width="324"><path fill="#{hex-color($ui-base-lighter-color)}" d="M21.69 233.366c-6.45-1.268-13.347-5.63-16.704-10.564-10.705-15.734-1.513-37.724 18.632-44.57l4.8-1.632.173-17.753c.146-14.77.515-19.063 2.2-25.55 6.736-25.944 24.46-46.032 47.766-54.137 11.913-4.143 19.558-5.366 34.178-5.47l13.828-.096V71.12c0-4.755 2.853-17.457 5.238-23.327 8.588-21.137 26.735-35.957 52.153-42.593 23.248-6.07 50.153-6.415 71.863-.923 11.14 2.82 25.686 9.957 33.857 16.615 19.335 15.756 31.82 41.05 35.183 71.275.59 5.305.672 5.435 3.11 4.926 11.833-2.474 30.4-3.132 40.065-1.42 24.388 4.32 40.568 19.076 47.214 43.058 2.16 7.8 3.953 23.894 3.59 32.237l-.24 5.498 5.156 1.317c6.392 1.633 14.55 7.098 18.003 12.062 1.435 2.062 3.305 6.597 4.156 10.078 1.428 5.84 1.43 6.8.04 12.44-1.807 7.318-5.672 13.252-10.872 16.694-8.508 5.63 3.756 5.33-211.916 5.216-108.56-.056-199.22-.464-201.47-.906z"/></svg>');
        }

        .float-2 {
@ -412,7 +363,7 @@
          bottom: 0;
          animation-duration: 3.5s;
          animation-delay: 0.2s;
-          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 536.25 222.1875" height="100" width="241"><path fill="#{hex-color(lighten($ui-base-color, 26%))}" d="M42.626 221.23c-14.104-1.174-26.442-5.133-32.825-10.534-4.194-3.548-7.684-10.66-8.868-18.075-1.934-12.102.633-22.265 7.528-29.81 7.61-8.328 19.998-12.76 39.855-14.257l8.47-.638-2.08-6.223c-4.826-14.422-6.357-24.813-6.37-43.255-.012-14.923.28-18.513 2.1-25.724 2.283-9.048 8.483-23.034 13.345-30.1 14.76-21.45 43.505-38.425 70.535-41.65 30.628-3.655 64.47 12.073 89.668 41.673l5.955 6.995 2.765-4.174c1.52-2.296 5.74-6.93 9.376-10.295 18.382-17.02 43.436-20.676 73.352-10.705 12.158 4.052 21.315 9.53 29.64 17.733 12.752 12.562 18.16 25.718 18.19 44.26l.02 10.98 2.312-3.01c15.64-20.365 42.29-20.485 62.438-.28 3.644 3.653 7.558 8.593 8.697 10.976 4.895 10.24 5.932 25.688 2.486 37.046-.76 2.507-1.388 4.816-1.393 5.13-.006.316 6.845.87 15.224 1.234 53.06 2.297 76.356 12.98 81.817 37.526 3.554 15.973-3.71 28.604-19.566 34.02-4.554 1.555-17.922 1.655-234.517 1.757-126.327.06-233.497-.21-238.154-.597z"/></svg>');
+          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 536.25 222.1875" height="100" width="241"><path fill="#{hex-color($ui-base-lighter-color)}" d="M42.626 221.23c-14.104-1.174-26.442-5.133-32.825-10.534-4.194-3.548-7.684-10.66-8.868-18.075-1.934-12.102.633-22.265 7.528-29.81 7.61-8.328 19.998-12.76 39.855-14.257l8.47-.638-2.08-6.223c-4.826-14.422-6.357-24.813-6.37-43.255-.012-14.923.28-18.513 2.1-25.724 2.283-9.048 8.483-23.034 13.345-30.1 14.76-21.45 43.505-38.425 70.535-41.65 30.628-3.655 64.47 12.073 89.668 41.673l5.955 6.995 2.765-4.174c1.52-2.296 5.74-6.93 9.376-10.295 18.382-17.02 43.436-20.676 73.352-10.705 12.158 4.052 21.315 9.53 29.64 17.733 12.752 12.562 18.16 25.718 18.19 44.26l.02 10.98 2.312-3.01c15.64-20.365 42.29-20.485 62.438-.28 3.644 3.653 7.558 8.593 8.697 10.976 4.895 10.24 5.932 25.688 2.486 37.046-.76 2.507-1.388 4.816-1.393 5.13-.006.316 6.845.87 15.224 1.234 53.06 2.297 76.356 12.98 81.817 37.526 3.554 15.973-3.71 28.604-19.566 34.02-4.554 1.555-17.922 1.655-234.517 1.757-126.327.06-233.497-.21-238.154-.597z"/></svg>');
        }

        .float-3 {
@ -422,7 +373,7 @@
          top: -30px;
          animation-duration: 4s;
          animation-delay: 0.5s;
-          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 388.125 202.5" height="140" width="267"><path fill="#{hex-color(lighten($ui-base-color, 26%))}" d="M181.37 201.458c-17.184-1.81-36.762-8.944-49.523-18.05l-5.774-4.12-8.074 2.63c-11.468 3.738-21.382 4.962-35.815 4.422-14.79-.554-24.577-2.845-36.716-8.594-15.483-7.332-28.498-19.98-35.985-34.968C2.44 128.675-.94 108.435.9 91.356c3.362-31.234 18.197-53.698 43.63-66.074 12.803-6.23 22.384-8.55 37.655-9.122 14.433-.54 24.347.684 35.814 4.42l8.073 2.633 5.635-4.01c24.81-17.656 60.007-23.332 92.914-14.985 10.11 2.565 25.498 9.62 33.102 15.178l5.068 3.704 7.632-2.564c10.89-3.66 21.086-4.916 35.516-4.376 45.816 1.716 76.422 30.03 81.285 75.196 1.84 17.08-1.54 37.32-8.585 51.422-7.487 14.99-20.502 27.636-35.984 34.968-12.14 5.75-21.926 8.04-36.716 8.593-14.43.54-24.626-.716-35.516-4.376l-7.632-2.564-5.068 3.704c-12.844 9.387-32.714 16.488-51.545 18.42-10.607 1.09-13.916 1.08-24.81-.066z"/></svg>');
+          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 388.125 202.5" height="140" width="267"><path fill="#{hex-color($ui-base-lighter-color)}" d="M181.37 201.458c-17.184-1.81-36.762-8.944-49.523-18.05l-5.774-4.12-8.074 2.63c-11.468 3.738-21.382 4.962-35.815 4.422-14.79-.554-24.577-2.845-36.716-8.594-15.483-7.332-28.498-19.98-35.985-34.968C2.44 128.675-.94 108.435.9 91.356c3.362-31.234 18.197-53.698 43.63-66.074 12.803-6.23 22.384-8.55 37.655-9.122 14.433-.54 24.347.684 35.814 4.42l8.073 2.633 5.635-4.01c24.81-17.656 60.007-23.332 92.914-14.985 10.11 2.565 25.498 9.62 33.102 15.178l5.068 3.704 7.632-2.564c10.89-3.66 21.086-4.916 35.516-4.376 45.816 1.716 76.422 30.03 81.285 75.196 1.84 17.08-1.54 37.32-8.585 51.422-7.487 14.99-20.502 27.636-35.984 34.968-12.14 5.75-21.926 8.04-36.716 8.593-14.43.54-24.626-.716-35.516-4.376l-7.632-2.564-5.068 3.704c-12.844 9.387-32.714 16.488-51.545 18.42-10.607 1.09-13.916 1.08-24.81-.066z"/></svg>');
        }
      }

@ -505,10 +456,6 @@
        a {
          padding-left: 0;
          color: $white;
-
-          &:hover img {
-            opacity: 1;
-          }
        }

        img {
@ -517,7 +464,6 @@
          position: relative;
          top: 4px;
          left: -10px;
-          opacity: 0.8;
        }
      }
    }
@ -541,6 +487,42 @@
    padding: 50px 0;
  }

+  .extended-description {
+    padding: 50px 0;
+
+    ul,
+    ol {
+      list-style: inherit;
+      margin-left: 20px;
+
+      &[type='a'] {
+        list-style-type: lower-alpha;
+      }
+
+      &[type='i'] {
+        list-style-type: lower-roman;
+      }
+    }
+
+    li > ol,
+    li > ul {
+      margin-top: 20px;
+    }
+
+    p,
+    li {
+      font: 16px/28px 'mastodon-font-sans-serif', sans-serif;
+      font-weight: 400;
+      margin-bottom: 12px;
+      color: $ui-base-lighter-color;
+
+      a {
+        color: $ui-highlight-color;
+        text-decoration: underline;
+      }
+    }
+  }
+
  h3 {
    font-family: 'mastodon-font-display', sans-serif;
    font-size: 16px;
@ -553,7 +535,7 @@
  p {
    font-size: 16px;
    line-height: 30px;
-    color: lighten($ui-base-color, 26%);
+    color: $ui-base-lighter-color;
  }

  .features {
@ -645,14 +627,14 @@
      display: block;
      font-size: 18px;
      font-weight: 400;
-      color: lighten($ui-base-color, 26%);
+      color: $ui-base-lighter-color;
    }
  }

  .footer-links {
    padding-bottom: 50px;
    text-align: right;
-    color: lighten($ui-base-color, 26%);
+    color: $ui-base-lighter-color;

    p {
      font-size: 14px;
@ -669,6 +651,29 @@
      padding: 0 20px;
    }

+    .information-board {
+      padding-bottom: 20px;
+    }
+
+    .information-board .container {
+      padding-right: 20px;
+
+      .panel {
+        position: static;
+        margin-top: 30px;
+        width: 100%;
+        border-radius: 4px;
+
+        .panel-header {
+          text-align: center;
+        }
+      }
+    }
+
+    .information-board .section {
+      text-align: center;
+    }
+
    .header-wrapper .mascot {
      left: 20px;
    }
@ -720,6 +725,12 @@
        padding: 30px 0;
      }

+      .links .brand img {
+        left: 0;
+        top: 0;
+        margin-right: 0;
+      }
+
      .hero {
        .simple_form,
        .closed-registrations-message {
--- a/app/javascript/styles/boost.scss
+++ b/app/javascript/styles/boost.scss
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@ -107,7 +107,7 @@
 .icon-button {
  display: inline-block;
  padding: 0;
-  color: lighten($ui-base-color, 26%);
+  color: $ui-base-lighter-color;
  border: none;
  background: transparent;
  cursor: pointer;
@ -145,7 +145,7 @@
    &:hover,
    &:active,
    &:focus {
-      color: lighten($ui-base-color, 26%);
+      color: $ui-base-lighter-color;
    }

    &.active {
@ -185,7 +185,7 @@
  &:hover,
  &:active,
  &:focus {
-    color: lighten($ui-base-color, 26%);
+    color: $ui-base-lighter-color;
    transition: color 200ms ease-out;
  }

@ -610,13 +610,13 @@
 }

 .status__relative-time {
-  color: lighten($ui-base-color, 26%);
+  color: $ui-base-lighter-color;
  float: right;
  font-size: 14px;
 }

 .status__display-name {
-  color: lighten($ui-base-color, 26%);
+  color: $ui-base-lighter-color;
 }

 .status__info .status__display-name {
@ -652,14 +652,14 @@

 .status__prepend {
  margin-left: 68px;
-  color: lighten($ui-base-color, 26%);
+  color: $ui-base-lighter-color;
  padding: 8px 0;
  padding-bottom: 2px;
  font-size: 14px;
  position: relative;

  .status__display-name strong {
-    color: lighten($ui-base-color, 26%);
+    color: $ui-base-lighter-color;
  }
 }

@ -725,7 +725,7 @@

 .detailed-status__meta {
  margin-top: 15px;
-  color: lighten($ui-base-color, 26%);
+  color: $ui-base-lighter-color;
  font-size: 14px;
  line-height: 18px;
 }
@ -944,7 +944,7 @@
  }

  abbr {
-    color: lighten($ui-base-color, 26%);
+    color: $ui-base-lighter-color;
  }
 }

@ -1046,11 +1046,11 @@
 .muted {
  .status__content p,
  .status__content a {
-    color: lighten($ui-base-color, 26%);
+    color: $ui-base-lighter-color;
  }

  .status__display-name strong {
-    color: lighten($ui-base-color, 26%);
+    color: $ui-base-lighter-color;
  }

  .status__avatar {
@ -1058,7 +1058,7 @@
  }

  a.status__content__spoiler-link {
-    background: lighten($ui-base-color, 26%);
+    background: $ui-base-lighter-color;
    color: lighten($ui-base-color, 4%);

    &:hover {
@ -1273,7 +1273,7 @@
 .static-content {
  padding: 10px;
  padding-top: 20px;
-  color: lighten($ui-base-color, 26%);
+  color: $ui-base-lighter-color;

  h1 {
    font-size: 16px;
@ -1736,7 +1736,7 @@

 .column-subheading {
  background: $ui-base-color;
-  color: lighten($ui-base-color, 26%);
+  color: $ui-base-lighter-color;
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 500;
@ -1875,7 +1875,7 @@
  }

  a {
-    color: lighten($ui-base-color, 26%);
+    color: $ui-base-lighter-color;
  }
 }

@ -1939,7 +1939,7 @@ button.icon-button.active i.fa-retweet {
  font-size: 14px;
  border: 1px solid lighten($ui-base-color, 8%);
  border-radius: 4px;
-  color: lighten($ui-base-color, 26%);
+  color: $ui-base-lighter-color;
  margin-top: 14px;
  text-decoration: none;
  overflow: hidden;
@ -2034,7 +2034,7 @@ button.icon-button.active i.fa-retweet {

 .load-more {
  display: block;
-  color: lighten($ui-base-color, 26%);
+  color: $ui-base-lighter-color;
  background-color: transparent;
  border: 0;
  font-size: inherit;
@ -2723,13 +2723,13 @@ button.icon-button.active i.fa-retweet {
  color: $ui-secondary-color;
  font-size: 18px;
  font-weight: 500;
-  border: 2px dashed lighten($ui-base-color, 26%);
+  border: 2px dashed $ui-base-lighter-color;
  border-radius: 4px;
 }

 .upload-progress {
  padding: 10px;
-  color: lighten($ui-base-color, 26%);
+  color: $ui-base-lighter-color;
  overflow: hidden;
  display: flex;

@ -2754,7 +2754,7 @@ button.icon-button.active i.fa-retweet {
  width: 100%;
  height: 6px;
  border-radius: 6px;
-  background: lighten($ui-base-color, 26%);
+  background: $ui-base-lighter-color;
  position: relative;
  margin-top: 5px;
 }
@ -2965,7 +2965,7 @@ button.icon-button.active i.fa-retweet {
 }

 .search-results__header {
-  color: lighten($ui-base-color, 26%);
+  color: $ui-base-lighter-color;
  background: lighten($ui-base-color, 2%);
  border-bottom: 1px solid darken($ui-base-color, 4%);
  padding: 15px 10px;
@ -3559,7 +3559,7 @@ button.icon-button.active i.fa-retweet {

 .attachment-list__icon {
  flex: 0 0 auto;
-  color: lighten($ui-base-color, 26%);
+  color: $ui-base-lighter-color;
  padding: 8px 18px;
  cursor: default;
  border-right: 1px solid lighten($ui-base-color, 8%);
@ -3589,7 +3589,7 @@ button.icon-button.active i.fa-retweet {

  a {
    text-decoration: none;
-    color: lighten($ui-base-color, 26%);
+    color: $ui-base-lighter-color;
    font-weight: 500;

    &:hover {
@ -3752,7 +3752,7 @@ button.icon-button.active i.fa-retweet {
 }

 .account-section-headline {
-  color: lighten($ui-base-color, 26%);
+  color: $ui-base-lighter-color;
  background: lighten($ui-base-color, 2%);
  border-bottom: 1px solid lighten($ui-base-color, 4%);
  padding: 15px 10px;
--- a/app/javascript/styles/forms.scss
+++ b/app/javascript/styles/forms.scss
@ -32,7 +32,7 @@ code {
      line-height: 18px;
      margin-top: 15px;
      margin-bottom: 0;
-      color: lighten($ui-base-color, 26%);
+      color: $ui-base-lighter-color;

      a {
        color: $ui-primary-color;
@ -308,7 +308,7 @@ code {
      padding: 7px 4px;
      padding-bottom: 9px;
      font-size: 16px;
-      color: lighten($ui-base-color, 26%);
+      color: $ui-base-lighter-color;
      font-family: inherit;
      pointer-events: none;
      cursor: default;
--- a/app/javascript/styles/variables.scss
+++ b/app/javascript/styles/variables.scss
@ -22,7 +22,8 @@ $valid-value-color: $success-green !default;
 $error-value-color: $error-red !default;

 // Tell UI to use selected colors
-$ui-base-color: $classic-base-color !default;             // Darkest
-$ui-primary-color: $classic-primary-color !default;       // Lighter
-$ui-secondary-color: $classic-secondary-color !default;   // Lightest
-$ui-highlight-color: $classic-highlight-color !default;   // Vibrant
+$ui-base-color: $classic-base-color !default;                  // Darkest
+$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
+$ui-primary-color: $classic-primary-color !default;            // Lighter
+$ui-secondary-color: $classic-secondary-color !default;        // Lightest
+$ui-highlight-color: $classic-highlight-color !default;        // Vibrant
--- a/app/views/about/_contact.html.haml
+++ b/app/views/about/_contact.html.haml
@ -1,5 +1,8 @@
 .panel
-  .panel-header= t 'about.contact'
+  .panel-header
+    = succeed ':' do
+      = t 'about.contact'
+    %span{ title: contact.site_contact_email.presence }= contact.site_contact_email.presence
  .panel-body
    - if contact.contact_account
      .owner
@ -8,8 +11,9 @@
          = link_to TagManager.instance.url_for(contact.contact_account) do
            %span.display_name.emojify= display_name(contact.contact_account)
            %span.username @#{contact.contact_account.acct}
-
-    - unless contact.site_contact_email.blank?
-      .contact-email
-        = t 'about.business_email'
-        %strong= contact.site_contact_email
+    - else
+      .owner
+        .avatar= image_tag full_asset_url('avatars/original/missing.png')
+        .name
+          %span.display_name= t 'about.contact_missing'
+          %span.username= t 'about.contact_unavailable'
--- a/app/views/about/more.html.haml
+++ b/app/views/about/more.html.haml
@ -1,16 +1,44 @@
 - content_for :page_title do
  = site_hostname

-.wrapper.thicc
-  .sidebar-layout
-    .main
-      .panel
-        %h2= site_hostname
+- content_for :header_tags do
+  = javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous'

-        - unless @instance_presenter.site_description.blank?
-          %p!= @instance_presenter.site_description
+  %meta{ property: 'og:site_name', content: site_title }/
+  %meta{ property: 'og:url', content: about_url }/
+  %meta{ property: 'og:type', content: 'website' }/
+  %meta{ property: 'og:title', content: site_hostname }/
+  %meta{ property: 'og:description', content: strip_tags(@instance_presenter.site_description.presence || t('about.about_mastodon_html')) }/
+  %meta{ property: 'og:image', content: asset_pack_path('mastodon_small.jpg', protocol: :request) }/
+  %meta{ property: 'og:image:width', content: '400' }/
+  %meta{ property: 'og:image:height', content: '400' }/
+  %meta{ property: 'twitter:card', content: 'summary' }/

-      .information-board
+.landing-page
+  .header-wrapper.compact
+    .header
+      .container.links
+        .brand
+          = link_to root_url do
+            = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
+
+        %ul.nav
+          %li
+            - if user_signed_in?
+              = link_to t('settings.back'), root_url, class: 'webapp-btn'
+            - else
+              = link_to t('auth.login'), new_user_session_path, class: 'webapp-btn'
+          %li= link_to t('about.about_this'), about_more_path
+          %li= link_to t('about.other_instances'), 'https://joinmastodon.org/'
+
+      .container.hero
+        .heading
+          %h3= t('about.description_headline', domain: site_hostname)
+          %p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname)
+
+  .information-board
+    .container
+      .information-board-sections
        .section
          %span= t 'about.user_count_before'
          %strong= number_with_delimiter @instance_presenter.user_count
@ -23,11 +51,14 @@
          %span= t 'about.domain_count_before'
          %strong= number_with_delimiter @instance_presenter.domain_count
          %span= t 'about.domain_count_after'
+      = render 'contact', contact: @instance_presenter

-      - unless @instance_presenter.site_extended_description.blank?
-        .panel!= @instance_presenter.site_extended_description
+  .extended-description
+    .container
+      = @instance_presenter.site_extended_description.html_safe.presence || t('about.extended_description_html')

-    .sidebar
-      = render 'contact', contact: @instance_presenter
-      = render 'links', instance: @instance_presenter
-      = render 'version', version: @instance_presenter
+  .footer-links
+    .container
+      %p
+        = link_to t('about.source_code'), 'https://github.com/tootsuite/mastodon'
+        = " (#{@instance_presenter.version_number})"
--- a/config/locales/ar.yml
+++ b/config/locales/ar.yml
@ -3,7 +3,6 @@ ar:
  about:
    about_mastodon_html: ماستدون شبكة إجتماعية <em>حرة و مفتوحة المصدر</em>. هو بديل <em>لامركزي</em> لمنصات تجارية ، يمكنك من تجنب احتكار شركة واحدة للإتصالات الخاصة بك. يمكنك اختيار أي خادم تثق فيه. أيهما تختار، يمكنك التفاعل مع أي شخص آخر على الشبكة. يمكن لأي شخص تنصيب و تشغيل خادم ماستدون خاص به والمشاركة في <em>الشبكات الاجتماعية</em> بكل شفافية.
    about_this: عن مثيل الخادوم هذا
-    business_email: 'البريد الإلكتروني المهني :'
    closed_registrations: التسجيلات في مثيل الخادوم هذا مُغلقة حاليًا.
    contact: للتواصل معنا
    description_headline: ما هو %{domain}?
--- a/config/locales/bg.yml
+++ b/config/locales/bg.yml
@ -3,7 +3,6 @@ bg:
  about:
    about_mastodon_html: Mastodon е <em>безплатен</em> сървър с <em>отворен код</em> за социални мрежи. Като <em>децентрализирана</em> алтернатива на комерсиалните платформи, той позволява избягването на риска от монополизация на твоята комуникация от единични компании. Изберете си сървър, на който се доверявате, и ще можете да контактувате с всички останали. Всеки може да пусне Mastodon и лесно да вземе участие в <em>социалната мрежа</em>.
    about_this: За тази инстанция
-    business_email: 'Служебен e-mail:'
    closed_registrations: В момента регистрациите за тази инстанция са затворени.
    contact: За контакти
    description_headline: Какво е %{domain}?
--- a/config/locales/ca.yml
+++ b/config/locales/ca.yml
@ -3,7 +3,6 @@ ca:
  about:
    about_mastodon_html: Mastodon és un servidor de xarxa social <em>lliure i de codi obert</em>. Una alternativa <em>descentralitzada</em> a plataformes comercials, que evita el risc que una única companyia monopolitzi la teva comunicació. Qualsevol pot executar Mastodon i participar sense problemes en la <em>xarxa social</em>.
    about_this: Sobre aquesta instància
-    business_email: 'Adreça de contacte:'
    closed_registrations: Els registres estan actualment tancats en aquesta instància.
    contact: Contacte
    description_headline: Què es %{domain}?
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@ -3,7 +3,6 @@ de:
  about:
    about_mastodon_html: Mastodon ist ein <em>freier, quelloffener</em> sozialer Netzwerkserver. Als <em>dezentralisierte</em> Alternative zu kommerziellen Plattformen verhindert es die Risiken, die entstehen, wenn eine einzelne Firma deine Kommunikation monopolisiert. Jeder kann Mastodon verwenden und ganz einfach am <em>sozialen Netzwerk</em> teilnehmen.
    about_this: Über diese Instanz
-    business_email: 'Geschäftliche E-Mail:'
    closed_registrations: Die Registrierung ist auf dieser Instanz momentan geschlossen.
    contact: Kontakt
    description_headline: Was ist %{domain}?
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@ -3,12 +3,16 @@ en:
  about:
    about_mastodon_html: Mastodon is a social network based on open web protocols and free, open-source software. It is decentralized like e-mail.
    about_this: About
-    business_email: 'Business e-mail:'
    closed_registrations: Registrations are currently closed on this instance. However! You can find a different instance to make an account on and get access to the very same network from there.
    contact: Contact
+    contact_missing: Not set
+    contact_unavailable: N/A
    description_headline: What is %{domain}?
    domain_count_after: other instances
    domain_count_before: Connected to
+    extended_description_html: |
+      <h3>A good place for rules</h3>
+      <p>The extended description has not been set up yet.</p>
    features:
      humane_approach_body: Learning from failures of other networks, Mastodon aims to make ethical design choices to combat the misuse of social media.
      humane_approach_title: A more humane approach
--- a/config/locales/eo.yml
+++ b/config/locales/eo.yml
@ -3,7 +3,6 @@ eo:
  about:
    about_mastodon_html: Mastodon estas <em>senpaga, malfermitkoda</em> socia reto. Ĝi estas <em>sencentra</em> alia eblo al komercaj servoj. Ĝi evitigas, ke unusola firmao regu vian tutan komunikadon. Elektu servilon, kiun vi fidas. Kiu ajn estas via elekto, vi povas interagi kun ĉiuj aliaj uzantoj. Iu ajn povas krei sian propran aperaĵon de Mastodon en sia servilo, kaj partopreni en la <em>socia reto</em> tute glate.
    about_this: Pri tiu aperaĵo
-    business_email: 'Profesia retpoŝt-adreso:'
    contact: Kontakti
    description_headline: Kio estas %{domain}?
    domain_count_after: aliaj aperaĵoj
--- a/config/locales/es.yml
+++ b/config/locales/es.yml
@ -3,7 +3,6 @@ es:
  about:
    about_mastodon_html: Mastodon es un servidor de red social <em>libre y de código abierto</em>. Una alternativa <em>descentralizada</em> a plataformas comerciales, que evita el riesgo de que una única compañía monopolice tu comunicación. Cualquiera puede ejecutar Mastodon y participar sin problemas en la <em>red social</em>.
    about_this: Acerca de esta instancia
-    business_email: 'Correo de negocios:'
    closed_registrations: Los registros están actualmente cerrados en esta instancia.
    contact: Contacto
    description_headline: "¿Qué es %{domain}?"
--- a/config/locales/fa.yml
+++ b/config/locales/fa.yml
@ -3,7 +3,6 @@ fa:
  about:
    about_mastodon_html: ماستدون (Mastodon) یک شبکهٔ اجتماعی <em>آزاد و کدباز</em> است. یک جایگزین <em>غیرمتمرکز</em> برای شبکه‌های تجاری، که نمی‌گذارد ارتباط‌های شما را یک شرکت در انحصار خود بگیرد. یک سرور مورد اعتماد را انتخاب کنید &mdash; هر سروری که باشد، همچنان می‌توانید با سرورهای دیگر ارتباط داشته باشید. هر کسی می‌تواند سرور ماستدون خود را راه بیندازد و در <em>شبکهٔ اجتماعی</em> سهیم شود.
    about_this: دربارهٔ این سرور
-    business_email: 'ایمیل کاری:'
    closed_registrations: امکان ثبت نام روی این سرور هم‌اینک فعال نیست.
    contact: تماس
    description_headline: "%{domain} چیست؟"
--- a/config/locales/fi.yml
+++ b/config/locales/fi.yml
@ -3,7 +3,6 @@ fi:
  about:
    about_mastodon_html: Mastodon on <em>ilmainen, avoimeen lähdekoodiin perustuva</em> sosiaalinen verkosto. <em>Hajautettu</em> vaihtoehto kaupallisille alustoille, se välttää eiskit yhden yrityksen monopolisoinnin sinun viestinnässäsi. Valitse palvelin mihin luotat &mdash; minkä tahansa valitset, voit vuorovaikuttaa muiden kanssa. Kuka tahansa voi luoda Mastodon palvelimen ja ottaa osaa <em>sosiaaliseen verkkoon</em> saumattomasti.
    about_this: Tietoja tästä palvelimesta
-    business_email: 'Business e-mail:'
    contact: Ota yhteyttä
    description_headline: Mikä on %{domain}?
    domain_count_after: muuhun palvelimeen
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
--- a/config/locales/he.yml
+++ b/config/locales/he.yml
@ -3,7 +3,6 @@ he:
  about:
    about_mastodon_html: מסטודון היא רשת חברתית <em>חופשית, מבוססת תוכנה חופשית ("קוד פתוח")</em>. כאלטרנטיבה <em>בלתי ריכוזית</em> לפלטפרומות המסחריות, מסטודון מאפשרת להמנע מהסיכונים הנלווים להפקדת התקשורת שלך בידי חברה יחידה. שמת את מבטחך בשרת אחד &mdash; לא משנה במי בחרת, תמיד אפשר לדבר עם כל שאר המשתמשים. לכל מי שרוצה יש את האפשרות להקים שרת מסטודון עצמאי, ולהשתתף ב<em>רשת החברתית</em> באופן חלק.
    about_this: אודות שרת זה
-    business_email: 'דוא"ל עסקי:'
    closed_registrations: הרשמות סגורות לשרת זה לעת עתה.
    contact: צור קשר
    description_headline: מהו %{domain}?
--- a/config/locales/hr.yml
+++ b/config/locales/hr.yml
@ -3,7 +3,6 @@ hr:
  about:
    about_mastodon_html: Mastodon je <em>besplatna, open-source</em> socijalna mreža. <em>Decentralizirana</em> alternativa komercijalnim platformama, izbjegava rizik toga da jedna tvrtka monopolizira vašu komunikaciju. Izaberite server kojem ćete vjerovati &mdash; koji god odabrali, moći ćete komunicirati sa svima ostalima. Bilo tko može imati svoju vlastitu Mastodon instancu i sudjelovati u <em>socijalnoj mreži</em> bez problema.
    about_this: O ovoj instanci
-    business_email: 'Poslovni e-mail:'
    closed_registrations: Registracije na ovoj instanci su trenutno zatvorene.
    contact: Kontakt
    description_headline: Što je %{domain}?
--- a/config/locales/id.yml
+++ b/config/locales/id.yml
@ -3,7 +3,6 @@ id:
  about:
    about_mastodon_html: Mastodon adalah sebuah jejaring sosial <em>terbuka, open-source</em. Sebuah alternatif <em>desentralisasi</em> dari platform komersial, menjauhkan anda resiko dari sebuah perusahaan yang memonopoli komunikasi anda. Pilih server yang anda percayai &mdash; apapun yang anda pilih, anda tetap dapat berinteraksi dengan semua orang. Semua orang dapat menjalankan server Mastodon sendiri dan berpartisipasi dalam <em>jejaring sosial</em> dengan mudah.
    about_this: Tentang server ini
-    business_email: 'E-mail bisnis:'
    closed_registrations: Pendaftaran untuk server ini sedang ditutup.
    contact: Kontak
    description_headline: Apa itu %{domain}?
--- a/config/locales/io.yml
+++ b/config/locales/io.yml
@ -3,7 +3,6 @@ io:
  about:
    about_mastodon_html: Mastodon esas <em>gratuita, apertitkodexa</em> sociala reto. Ol esas <em>sencentra</em> altra alternativo a komercala servadi. Ol evitigas, ke sola firmo guvernez tua tota komunikadol. Selektez servero, quan tu fidas. Irge qua esas tua selekto, tu povas komunikar kun omna altra uzeri. Irgu povas krear sua propra instaluro di Mastodon en sua servero, e partoprenar en la <em>sociala reto</em> tote glate.
    about_this: Pri ta instaluro
-    business_email: 'Profesionala retpost-adreso:'
    closed_registrations: Membresko ne nun esas posible en ta instaluro.
    contact: Kontaktar
    description_headline: Quo esas %{domain}?
--- a/config/locales/it.yml
+++ b/config/locales/it.yml
@ -3,7 +3,6 @@ it:
  about:
    about_mastodon_html: Mastodon è un social network <em>gratuito e open-source</em>. Un'alternativa <em>decentralizzata</em> alle piattaforme commerciali che evita che una singola compagnia monopolizzi il tuo modo di comunicare. Scegli un server di cui ti fidi &mdash; qualunque sia la tua scelta, potrai interagire con chiunque altro. Chiunque può sviluppare un suo server Mastodon e partecipare alla vita del <em>social network</em>.
    about_this: A proposito di questo server
-    business_email: 'Email di lavoro:'
    closed_registrations: Al momento le iscrizioni a questo server sono chiuse.
    contact: Contatti
    description_headline: Cos'è %{domain}?
--- a/config/locales/ja.yml
+++ b/config/locales/ja.yml
@ -3,7 +3,6 @@ ja:
  about:
    about_mastodon_html: Mastodon は、オープンなウェブプロトコルを採用した、自由でオープンソースなソーシャルネットワークです。電子メールのような分散型の仕組みを採っています。
    about_this: このインスタンスについて
-    business_email: 'ビジネスメールアドレス:'
    closed_registrations: 現在このインスタンスでの新規登録は受け付けていません。しかし、他のインスタンスにアカウントを作成しても全く同じネットワークに参加することができます。
    contact: 連絡先
    description_headline: "%{domain} とは？"
--- a/config/locales/ko.yml
+++ b/config/locales/ko.yml
@ -3,7 +3,6 @@ ko:
  about:
    about_mastodon_html: Mastodon 은<em>자유로운 오픈 소스</em>소셜 네트워크입니다. 상용 플랫폼의 대체로써 <em>분산형 구조</em>를 채택해, 여러분의 대화가 한 회사에 독점되는 것을 방지합니다. 신뢰할 수 있는 인스턴스를 선택하세요 &mdash; 어떤 인스턴스를 고르더라도, 누구와도 대화할 수 있습니다. 누구나 자신만의 Mastodon 인스턴스를 만들 수 있으며, Seamless하게 <em>소셜 네트워크</em>에 참가할 수 있습니다.
    about_this: 이 인스턴스에 대해서
-    business_email: '비즈니스 메일 주소:'
    closed_registrations: 현재 이 인스턴스에서는 신규 등록을 받고 있지 않습니다.
    contact: 연락처
    description_headline: "%{domain} 는 무엇인가요?"
--- a/config/locales/nl.yml
+++ b/config/locales/nl.yml
@ -3,7 +3,6 @@ nl:
  about:
    about_mastodon_html: Mastodon is een <em>vrij, gratis en open-source</em> sociaal netwerk. Een <em>gedecentraliseerd</em> alternatief voor commerciële platforms. Het voorkomt de risico's van een enkel bedrijf dat jouw communicatie monopoliseert. Kies een server die je vertrouwt &mdash; welke je ook kiest, je kunt met elke andere server communiceren. Iedereen kan een eigen Mastodon-server draaien en naadloos deelnemen in het <em>sociale netwerk</em>.
    about_this: Over deze server
-    business_email: 'E-mailadres:'
    closed_registrations: Registreren op deze server is momenteel uitgeschakeld.
    contact: Contact
    description_headline: Wat is %{domain}?
--- a/config/locales/no.yml
+++ b/config/locales/no.yml
@ -3,7 +3,6 @@
  about:
    about_mastodon_html: Mastodon er et sosialt nettverk laget med <em>fri programvare</em>. Et <em>desentralisert</em> alternativ til kommersielle plattformer. Slik kan det unngå risikoene ved å ha et enkelt selskap som monopoliserer din kommunikasjon. Velg en tjener du stoler på &mdash; uansett hvilken du velger så kan du kommunisere med alle andre. Alle kan kjøre sin egen Mastodon og delta sømløst i det sosiale nettverket.
    about_this: Om denne instansen
-    business_email: 'Bedriftsepost:'
    closed_registrations: Registreringer er for øyeblikket lukket på denne instansen.
    contact: Kontakt
    description_headline: Hva er %{domain}?
--- a/config/locales/oc.yml
+++ b/config/locales/oc.yml
@ -3,7 +3,6 @@ oc:
  about:
    about_mastodon_html: Mastodon es un malhum social <em>liure e open-source</em>. Una alternativa <em>descentralizada</em> a las plat-formas comercialas, aquò evita qu’una sola companhiá monopolize vòstra comunicacion. Causissètz un servidor que vos fisatz, quina que siasque vòstra causida, podètz interagir amb tot lo mond. Qual que siasque pòt aver son instància Mastodon e participar al <em>malhum social</em> sens cap de problèmas.
    about_this: A prepaus d’aquesta instància
-    business_email: 'Corrièl professional :'
    closed_registrations: Las inscripcions son clavadas pel moment sus aquesta instància.
    contact: Contacte
    description_headline: Qué es %{domain} ?
--- a/config/locales/pl.yml
+++ b/config/locales/pl.yml
@ -3,7 +3,6 @@ pl:
  about:
    about_mastodon_html: Mastodon jest wolną i otwartą siecią społecznościową, zdecentralizowaną alternatywą dla zamkniętych, komercyjnych platform.
    about_this: O tej instancji
-    business_email: 'Służbowy adres e-mail:'
    closed_registrations: Rejestracja na tej instancji jest obecnie zamknięta. Możesz jednak zarejestrować się na innej instancji, uzyskując dostęp do tej samej sieci.
    contact: Kontakt
    description_headline: Czym jest %{domain}?
--- a/config/locales/pt-BR.yml
+++ b/config/locales/pt-BR.yml
@ -3,7 +3,6 @@ pt-BR:
  about:
    about_mastodon_html: Mastodon é um servidor de rede social <em>grátis, e open-source</em>. Uma alternativa <em>descentralizada</em> ás plataformas comerciais, que evita o risco de uma única empresa monopolizar a sua comunicação. Escolha um servidor que você confie &mdash; qualquer um que escolher, você poderá interagir com todo o resto. Qualquer um pode ter uma instância Mastodon e assim participar na <em>rede social federada</em> sem problemas.
    about_this: Sobre essa instância
-    business_email: 'Email comercial:'
    closed_registrations: Registros estão fechadas para essa instância.
    contact: Contato
    description_headline: O que é %{domain}?
--- a/config/locales/pt.yml
+++ b/config/locales/pt.yml
@ -3,7 +3,6 @@ pt:
  about:
    about_mastodon_html: Mastodon é uma rede social <em>grátis e em código aberto</em>. Uma alternativa <em>descentralizada</em> às plataformas comerciais, que evita o risco de uma única empresa monopolizar a tua comunicação. Escolhe um servidor que confies, não importa qual, pois vais poder comunicar com todos os outros. Qualquer um pode criar uma instância Mastodon e participar nesta <em>rede social</em>.
    about_this: Sobre esta instância
-    business_email: 'Email comercial:'
    closed_registrations: Novos registos estão fechados nesta instância.
    contact: Contacto
    description_headline: O que é o %{domain}?
--- a/config/locales/ru.yml
+++ b/config/locales/ru.yml
@ -3,7 +3,6 @@ ru:
  about:
    about_mastodon_html: Mastodon - это <em>свободная</em> социальная сеть с <em>открытым исходным кодом</em>. Как <em>децентрализованная</em> альтернатива коммерческим платформам, Mastodon предотвращает риск монополизации Вашего общения одной компанией. Выберите сервер, которому Вы доверяете &mdash; что бы Вы ни выбрали, Вы сможете общаться со всеми остальными. Любой может запустить свой собственный узел Mastodon и участвовать в <em>социальной сети</em> совершенно бесшовно.
    about_this: Об этом узле
-    business_email: 'Деловой e-mail:'
    closed_registrations: В данный момент регистрация на этом узле закрыта.
    contact: Связаться
    description_headline: Что такое %{domain}?
--- a/config/locales/th.yml
+++ b/config/locales/th.yml
@ -3,7 +3,6 @@ th:
  about:
    about_mastodon_html: แมสโทดอน เป็น  <em>ดีเซ็นทรัลไลซ์</em><em>ฟรีโอเพ่นซอร์ส</em> โซเชี่ยวเน็ตเวริ์ค.  เป็นทางเลือกทดแทนโซเชี่ยวเน็ตเวิร์คที่ทำเป็นธุรกิจการค้า, ป้องกันการผูกขาดช่องทางการสื่อสารของคุณ. เลือกเซร์ฟเวอร์ที่คุณไว้ใจ &mdash; ที่คุณเลือกได้เอง, สื่อสารกับคนที่คุณต้องการได้เสมอ. ใครๆก็รันแมสโทดอนอินซะแตนซ์ได้ และ เชื่อมต่อกับ<em>โซเชี่ยวเน็ตเวิร์ค</em> โดยไม่มีอะไรมาขวางกั้น.
    about_this: เกี่ยวกับอินซะแตนซ์นี้
-    business_email: 'อีเมล์ธุรกิจ:'
    closed_registrations: อินซะแตนซ์นี้ปิดรับลงทะเบียนแล้ว.
    contact: ติดต่อ
    description_headline: โดเมนคือ %{domain} ?
--- a/config/locales/tr.yml
+++ b/config/locales/tr.yml
@ -3,7 +3,6 @@ tr:
  about:
    about_mastodon_html: Mastodon <em>ücretsiz ve açık kaynaklı</em> bir sosyal ağdır. <em>Merkezileştirilmemiş</em> yapısı sayesinde diğer ticari sosyal platformların aksine iletişimininizin tek bir firmada tutulmasının/yönetilmesinin önüne geçer. Güvendiğiniz bir sunucuyu seçerek oradaki kişilerle etkileşimde bulunabilirsiniz. Herkes kendi Mastodon sunucusunu kurabilir ve sorunsuz bir şekilde Mastodon <em>sosyal ağına</em> dahil edebilir.
    about_this: Bu sunucu hakkında
-    business_email: 'İş e-postası:'
    closed_registrations: Bu sunucu şu anda yeni kayıt almamaktadır.
    contact: İletişim
    description_headline: Peki %{domain} nedir?
--- a/config/locales/uk.yml
+++ b/config/locales/uk.yml
@ -3,7 +3,6 @@ uk:
  about:
    about_mastodon_html: Mastodon - це <em>вільна</em> соціальна мережа з <em>відкритим вихідним кодом</em>. Вона є <em>децентралізованою</em> альтернативою комерційним платформам, що дозволяє уникнути ризиків монополізації вашого спілкування однією компанією. Виберіть сервер, якому ви довіряєте &mdash; що б ви не вибрали, Ви зможете спілкуватись з усіма іншими. Будь-який користувач може запустити власну інстанцію Mastodon та без проблем брати участь в <em>соціальній мережі</em>.
    about_this: Про цю інстанцію
-    business_email: 'Діловий email:'
    closed_registrations: На даний момент реєстрація на цій інстанції закрита.
    contact: Зв'язатися
    description_headline: Що таке %{domain}?
--- a/config/locales/zh-CN.yml
+++ b/config/locales/zh-CN.yml
@ -3,7 +3,6 @@ zh-CN:
  about:
    about_mastodon_html: Mastodon（长毛象）是一个<em>自由、开放源码</em>的社交网站。它是一个分布式的服务，避免你的通信被单一商业机构垄断操控。请你选择一家你信任的 Mastodon 实例，在上面创建帐号，然后你就可以和任一 Mastodon 实例上的用户互通，享受无缝的<em>社交</em>交流。
    about_this: 关于本实例
-    business_email: 商业电邮︰
    closed_registrations: 这个实例目前不开放注册 _(:3」∠)_
    contact: 联络
    description_headline: 关于 %{domain}
--- a/config/locales/zh-HK.yml
+++ b/config/locales/zh-HK.yml
@ -3,7 +3,6 @@ zh-HK:
  about:
    about_mastodon_html: Mastodon（萬象）是<em>自由、開源</em>的社交網絡。服務站<em>各自獨立而互連</em>，避免單一商業機構壟斷。找你所信任的服務站，建立帳號，你即可與任何服務站上的用戶溝通，享受無縫的<em>網絡交流</em>。
    about_this: 關於本服務站
-    business_email: 聯絡網站管理者︰
    closed_registrations: 本服務站暫時停止接受登記。
    contact: 聯絡
    description_headline: 關於 %{domain}
--- a/config/locales/zh-TW.yml
+++ b/config/locales/zh-TW.yml
@ -3,7 +3,6 @@ zh-TW:
  about:
    about_mastodon_html: Mastodon （長毛象）是一個<em>自由、開放原始碼</em>的社群網站。它是一個分散式的服務，避免您的通訊被單一商業機構壟斷操控。請您選擇一家您信任的 Mastodon 服務站，在上面建立帳號，然後您就可以和任一 Mastodon 服務站上的使用者互通，享受無縫的<em>社群網路</em>交流。
    about_this: 關於本服務站
-    business_email: 商務信箱︰
    closed_registrations: 本服務站暫時停止接受註冊。
    contact: 聯絡我們
    description_headline: 關於 %{domain}