Redesign extended information page (#4322)

* Redesign extended information page

* Remove unused keys

* Add $ui-base-lighter-color variable to SCSS

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'

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'
-
-      - unless @instance_presenter.site_extended_description.blank?
-        .panel!= @instance_presenter.site_extended_description
-
-    .sidebar
       = render 'contact', contact: @instance_presenter
-      = render 'links', instance: @instance_presenter
-      = render 'version', version: @instance_presenter
+
+  .extended-description
+    .container
+      = @instance_presenter.site_extended_description.html_safe.presence || t('about.extended_description_html')
+
+  .footer-links
+    .container
+      %p
+        = link_to t('about.source_code'), 'https://github.com/tootsuite/mastodon'
+        = " (#{@instance_presenter.version_number})"