auth page full background

app/javascript/styles/mastodon/_custom.scss

@@ -1,6 +1,40 @@
-.custom-img img{
+.custom-img img {
   width: 100%;
   max-width: 50vw;
   display: block;
   margin: 0 auto;
 }
+
+.custom_message_heading {
+  font-size: 2em;
+  margin-bottom: 0.5em;
+  text-align: center;
+}
+
+.auth-page {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  background: url('../images/bliss/a_travers_pic_mastodon_grey.jpg')  no-repeat fixed center;
+  background-size: cover;
+
+  .form-container{
+    background: rgba(0,0,0,0.5);
+  }
+  .logo-container{
+    width: 200px;
+  }
+  .img-custom{
+    text-align:center;
+    img {
+    width: 400px;
+    max-width: 90vw;
+    margin: 1em auto;
+    display:inline-block;
+  }
+  }
+  .title{
+    font-size: 3em;
+    margin-bottom: 0.5em;
+  }
+}

app/views/about/_login.html.haml

@@ -1,4 +1,9 @@
 = 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'
   .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,6 +1,9 @@
 .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|
-    %p.lead= t('about.federation_hint_html', instance: content_tag(:strong, site_hostname))
+    %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
 
     .fields-group
       = f.simple_fields_for :account do |account_fields|

app/views/about/show.html.haml

@@ -37,7 +37,7 @@
           .directory__tag
             = optional_link_to Setting.timeline_preview, public_timeline_path do
               %h4
-                = fa_icon 'globe fw'
+                = fa_icon 'globe fw fa-3x'
                 = t('about.see_whats_happening')
                 %small= t('about.browse_public_posts')
 

app/views/layouts/auth.html.haml

@@ -2,15 +2,21 @@
   = javascript_pack_tag 'public', crossorigin: 'anonymous'
 
 - content_for :content do
-  .container-alt
-    .logo-container
-      %h1
-        = link_to root_path do
-          = svg_logo_full
+  .auth-page.content
+    .container-alt
+      .logo-container
+        %h1
+          = link_to root_path do
+            = svg_logo_full
+      .img-custom
+        = image_tag asset_pack_path('media/images/bliss/login.jpg'), alt: @instance_presenter.site_title
 
-    .form-container
-      = render 'flashes'
+      .form-container
+        = render 'flashes'
 
-      = yield
+        %h2.title.is-2
+          = t('auth.login')
+
+        = yield
 
 = render template: 'layouts/application'