up background pane

app/javascript/styles/mastodon/_custom.scss

@@ -10,30 +10,49 @@
   margin-bottom: 0.5em;
   text-align: center;
 }
-
+.page-show{
+  min-height: 100vh;
+  position: relative;
+  top: 0;
+  width: 100%;
+  background: url('../images/home.jpg') no-repeat fixed center;
+  background-size: cover;
+}
 .auth-page {
+  min-height: 100vh;
   position: absolute;
   top: 0;
   width: 100%;
-  background: url('../images/bliss/a_travers_pic_mastodon_grey.jpg')  no-repeat fixed center;
+  background: url('../images/bliss/auth_background.jpg') no-repeat fixed center;
   background-size: cover;
 
-  .form-container{
-    background: rgba(0,0,0,0.5);
+  .form-container {
+    background: rgba(0, 0, 0, 0.5);
   }
-  .logo-container{
+
+  .logo-container {
     width: 200px;
   }
-  .img-custom{
-    text-align:center;
+
+  .img-custom {
+    text-align: center;
+    width: 440px;
+    background: rgba(0, 0, 0, 0.5);
+    margin: 0 auto;
+    display: block;
+
     img {
-    width: 400px;
-    max-width: 90vw;
-    margin: 1em auto;
-    display:inline-block;
+      width: 400px;
+      max-width: 90vw;
+      margin: 1em auto;
+      display: inline-block;
+      border: solid 2px #111;
+    }
   }
-  }
-  .title{
+
+  .title {
+
+    padding: 1em;
     font-size: 3em;
     margin-bottom: 0.5em;
   }

app/views/about/_login.html.haml

@@ -1,9 +1,7 @@
 = simple_form_for(new_user, url: user_session_path, namespace: 'login') do |f|
-  %h2.custom_message_heading= t('auth.login')
-  .landing__custom_img
-  = class: 'custom-img' do
-    =  image_tag asset_pack_path('media/images/bliss/login.jpg'), alt: @instance_presenter.site_title
-    %span.brand__tagline=t 'about.tagline'
+  .before-stuff
+    %h2.custom_message_heading= t('auth.login')
+
   .fields-group
     - if use_seamless_external_login?
       = f.input :email, placeholder: t('simple_form.labels.defaults.username_or_email'), input_html: { 'aria-label' => t('simple_form.labels.defaults.username_or_email') }, hint: false

app/views/about/_registration.html.haml

@@ -1,9 +1,6 @@
 .simple_form__overlay-area{ class: (closed_registrations? && @instance_presenter.closed_registrations_message.present?) ? 'simple_form__overlay-area__blurred' : '' }
   = simple_form_for(new_user, url: user_registration_path, namespace: 'registration', html: { novalidate: false }) do |f|
-    %h3.custom_message_heading= t('auth.register')
-    .landing__custom_img
-      = class: 'custom-img' do
-        =  image_tag asset_pack_path('media/images/bliss/register.jpg'), alt: @instance_presenter.site_title
+    %p.lead= t('about.federation_hint_html', instance: content_tag(:strong, site_hostname))
 
     .fields-group
       = f.simple_fields_for :account do |account_fields|

app/views/about/show.html.haml

@@ -1,83 +1,82 @@
-- content_for :page_title do
-  = site_hostname
+.page-show
+  - content_for :page_title do
+    = site_hostname
 
-- content_for :header_tags do
-  %link{ rel: 'canonical', href: about_url }/
-  = render partial: 'shared/og'
+  - content_for :header_tags do
+    %link{ rel: 'canonical', href: about_url }/
+    = render partial: 'shared/og'
 
-.landing
-  .landing__custom_img
-    = link_to root_url, class: 'custom-img' do
-      =  image_tag asset_pack_path('media/images/bliss/a_travers_pic_mastodon_grey.jpg'), alt: @instance_presenter.site_title
-      %span.brand__tagline=t 'about.tagline'
-  .landing__brand
-    = link_to root_url, class: 'brand' do
-      = svg_logo_full
-      %span.brand__tagline=t 'about.tagline'
+  .landing
 
-  .landing__grid
-    .landing__grid__column.landing__grid__column-registration
-      .box-widget
-        = render 'registration'
+    %span.brand__tagline=t 'about.tagline'
+    .landing__brand
+      = link_to root_url, class: 'brand' do
+        = svg_logo_full
+        %span.brand__tagline=t 'about.tagline'
+
+    .landing__grid
+      .landing__grid__column.landing__grid__column-registration
+        .box-widget
+          = render 'registration'
+
+        .directory
+          - if Setting.profile_directory
+            .directory__tag
+              = optional_link_to Setting.profile_directory, explore_path do
+                %h4
+                  = fa_icon 'address-book fw'
+                  = t('about.discover_users')
+                  %small= t('about.browse_directory')
+
+                .avatar-stack
+                  - @instance_presenter.sample_accounts.each do |account|
+                    = image_tag current_account&.user&.setting_auto_play_gif ? account.avatar_original_url : account.avatar_static_url, alt: '', class: 'account__avatar'
+
+          - if Setting.timeline_preview
+            .directory__tag
+              = optional_link_to Setting.timeline_preview, public_timeline_path do
+                %h4
+                  = fa_icon 'globe fw fa-3x'
+                  = t('about.see_whats_happening')
+                  %small= t('about.browse_public_posts')
 
-      .directory
-        - if Setting.profile_directory
           .directory__tag
-            = optional_link_to Setting.profile_directory, explore_path do
+            = link_to 'https://joinmastodon.org/apps', target: '_blank', rel: 'noopener noreferrer' do
               %h4
-                = fa_icon 'address-book fw'
-                = t('about.discover_users')
-                %small= t('about.browse_directory')
+                = fa_icon 'tablet fw'
+                = t('about.get_apps')
+                %small= t('about.apps_platforms')
 
-              .avatar-stack
-                - @instance_presenter.sample_accounts.each do |account|
-                  = image_tag current_account&.user&.setting_auto_play_gif ? account.avatar_original_url : account.avatar_static_url, alt: '', class: 'account__avatar'
+      .landing__grid__column.landing__grid__column-login
+        .box-widget
+          = render 'login'
 
-        - if Setting.timeline_preview
-          .directory__tag
-            = optional_link_to Setting.timeline_preview, public_timeline_path do
-              %h4
-                = fa_icon 'globe fw fa-3x'
-                = t('about.see_whats_happening')
-                %small= t('about.browse_public_posts')
+        .hero-widget
+          .hero-widget__img
+            = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.jpg'), alt: @instance_presenter.site_title
 
-        .directory__tag
-          = link_to 'https://joinmastodon.org/apps', target: '_blank', rel: 'noopener noreferrer' do
-            %h4
-              = fa_icon 'tablet fw'
-              = t('about.get_apps')
-              %small= t('about.apps_platforms')
+          .hero-widget__text
+            %p
+              = @instance_presenter.site_short_description.html_safe.presence || t('about.about_mastodon_html')
+              = link_to about_more_path do
+                = t('about.learn_more')
+                = fa_icon 'angle-double-right'
 
-    .landing__grid__column.landing__grid__column-login
-      .box-widget
-        = render 'login'
+          .hero-widget__footer
+            .hero-widget__footer__column
+              %h4= t 'about.administered_by'
 
-      .hero-widget
-        .hero-widget__img
-          = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.jpg'), alt: @instance_presenter.site_title
+              = account_link_to @instance_presenter.contact_account
 
-        .hero-widget__text
-          %p
-            = @instance_presenter.site_short_description.html_safe.presence || t('about.about_mastodon_html')
-            = link_to about_more_path do
-              = t('about.learn_more')
-              = fa_icon 'angle-double-right'
+            .hero-widget__footer__column
+              %h4= t 'about.server_stats'
 
-        .hero-widget__footer
-          .hero-widget__footer__column
-            %h4= t 'about.administered_by'
-
-            = account_link_to @instance_presenter.contact_account
-
-          .hero-widget__footer__column
-            %h4= t 'about.server_stats'
-
-            .hero-widget__counters__wrapper
-              .hero-widget__counter
-                %strong= friendly_number_to_human @instance_presenter.user_count
-                %span= t 'about.user_count_after', count: @instance_presenter.user_count
-              .hero-widget__counter
-                %strong= friendly_number_to_human @instance_presenter.active_user_count
-                %span
-                  = t 'about.active_count_after'
-                  %abbr{ title: t('about.active_footnote') } *
+              .hero-widget__counters__wrapper
+                .hero-widget__counter
+                  %strong= friendly_number_to_human @instance_presenter.user_count
+                  %span= t 'about.user_count_after', count: @instance_presenter.user_count
+                .hero-widget__counter
+                  %strong= friendly_number_to_human @instance_presenter.active_user_count
+                  %span
+                    = t 'about.active_count_after'
+                    %abbr{ title: t('about.active_footnote') } *

app/views/layouts/auth.html.haml

@@ -9,13 +9,15 @@
           = link_to root_path do
             = svg_logo_full
       .img-custom
+        %h2.title.is-2
+          = t('auth.login')
+
         = image_tag asset_pack_path('media/images/bliss/login.jpg'), alt: @instance_presenter.site_title
 
       .form-container
         = render 'flashes'
 
-        %h2.title.is-2
-          = t('auth.login')
+
 
         = yield
 

app/views/layouts/public.html.haml

@@ -25,7 +25,7 @@
               = link_to t('auth.login'), new_user_session_path, class: 'webapp-btn nav-link nav-button'
               = link_to t('auth.register'), available_sign_up_path, class: 'webapp-btn nav-link nav-button'
 
-    .container= yield
+    .main-container= yield
 
     .container
       .footer