diff --git a/app/javascript/images/bliss/auth_background.jpg b/app/javascript/images/bliss/auth_background.jpg new file mode 100644 index 000000000..f82bce31d Binary files /dev/null and b/app/javascript/images/bliss/auth_background.jpg differ diff --git a/app/javascript/images/elephant_ui_plane.xcf b/app/javascript/images/elephant_ui_plane.xcf index 4bfee9ece..f21911781 100644 Binary files a/app/javascript/images/elephant_ui_plane.xcf and b/app/javascript/images/elephant_ui_plane.xcf differ diff --git a/app/javascript/images/home.jpg b/app/javascript/images/home.jpg new file mode 100644 index 000000000..279e0ff16 Binary files /dev/null and b/app/javascript/images/home.jpg differ diff --git a/app/javascript/styles/mastodon/_custom.scss b/app/javascript/styles/mastodon/_custom.scss index 2d3b03294..322267e8d 100644 --- a/app/javascript/styles/mastodon/_custom.scss +++ b/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; } diff --git a/app/views/about/_login.html.haml b/app/views/about/_login.html.haml index e8da68466..baa629458 100644 --- a/app/views/about/_login.html.haml +++ b/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 diff --git a/app/views/about/_registration.html.haml b/app/views/about/_registration.html.haml index 33f2b13c2..e4d614d71 100644 --- a/app/views/about/_registration.html.haml +++ b/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| diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml index acf9e25e2..adf0dfc45 100644 --- a/app/views/about/show.html.haml +++ b/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') } * diff --git a/app/views/layouts/auth.html.haml b/app/views/layouts/auth.html.haml index 82d70292e..e8e24beec 100644 --- a/app/views/layouts/auth.html.haml +++ b/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 diff --git a/app/views/layouts/public.html.haml b/app/views/layouts/public.html.haml index bdb8a3a8e..47b128bcf 100644 --- a/app/views/layouts/public.html.haml +++ b/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