Improved landing page
This commit is contained in:
		
							parent
							
								
									6b1db5c2b2
								
							
						
					
					
						commit
						8803ca9efe
					
				
					 5 changed files with 124 additions and 9 deletions
				
			
		
							
								
								
									
										
											BIN
										
									
								
								app/assets/images/fluffy-elephant-friend.png
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								app/assets/images/fluffy-elephant-friend.png
									
										
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| 
		 After Width: | Height: | Size: 1.1 MiB  | 
| 
						 | 
				
			
			@ -95,6 +95,7 @@
 | 
			
		|||
 | 
			
		||||
  .actions {
 | 
			
		||||
    overflow: hidden;
 | 
			
		||||
    margin-bottom: 20px;
 | 
			
		||||
 | 
			
		||||
    .info {
 | 
			
		||||
      float: right;
 | 
			
		||||
| 
						 | 
				
			
			@ -273,3 +274,61 @@
 | 
			
		|||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.features-list {
 | 
			
		||||
  display: flex;
 | 
			
		||||
  margin-bottom: 20px;
 | 
			
		||||
 | 
			
		||||
  .features-list__column {
 | 
			
		||||
    flex: 1 1 0;
 | 
			
		||||
 | 
			
		||||
    ul {
 | 
			
		||||
      list-style: none;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    li {
 | 
			
		||||
      margin: 0;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.screenshot-with-signup {
 | 
			
		||||
  display: flex;
 | 
			
		||||
  margin-bottom: 20px;
 | 
			
		||||
 | 
			
		||||
  .mascot {
 | 
			
		||||
    flex: 1 1 auto;
 | 
			
		||||
    display: flex;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
    justify-content: center;
 | 
			
		||||
    flex-direction: column;
 | 
			
		||||
 | 
			
		||||
    img {
 | 
			
		||||
      display: block;
 | 
			
		||||
      margin: 0 auto;
 | 
			
		||||
      max-width: 100%;
 | 
			
		||||
      height: auto;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .simple_form {
 | 
			
		||||
    width: 300px;
 | 
			
		||||
    flex: 0 0 auto;
 | 
			
		||||
    background: rgba(darken($color1, 7%), 0.5);
 | 
			
		||||
    padding: 14px;
 | 
			
		||||
    border-radius: 4px;
 | 
			
		||||
    box-shadow: 0 0 15px rgba($color8, 0.4);
 | 
			
		||||
 | 
			
		||||
    .actions {
 | 
			
		||||
      margin-bottom: 0;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .info {
 | 
			
		||||
      text-align: center;
 | 
			
		||||
 | 
			
		||||
      a {
 | 
			
		||||
        color: $color2;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -20,17 +20,64 @@
 | 
			
		|||
    Mastodon
 | 
			
		||||
 | 
			
		||||
  %p= t('about.about_mastodon').html_safe
 | 
			
		||||
  %p= t('about.about_instance', instance: Rails.configuration.x.local_domain).html_safe
 | 
			
		||||
 | 
			
		||||
  .screenshot= image_tag 'screenshot.png'
 | 
			
		||||
  .screenshot-with-signup
 | 
			
		||||
    .mascot= image_tag 'fluffy-elephant-friend.png'
 | 
			
		||||
 | 
			
		||||
    = simple_form_for(:user, url: user_registration_path) do |f|
 | 
			
		||||
      = f.simple_fields_for :account do |ff|
 | 
			
		||||
        = ff.input :username, autofocus: true, placeholder: t('simple_form.labels.defaults.username'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username') }
 | 
			
		||||
 | 
			
		||||
      = f.input :email, placeholder: t('simple_form.labels.defaults.email'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.email') }
 | 
			
		||||
      = f.input :password, autocomplete: "off", placeholder: t('simple_form.labels.defaults.password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.password') }
 | 
			
		||||
      = f.input :password_confirmation, autocomplete: "off", placeholder: t('simple_form.labels.defaults.confirm_password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.confirm_password') }
 | 
			
		||||
 | 
			
		||||
      .actions
 | 
			
		||||
        = f.button :button, t('about.get_started'), type: :submit
 | 
			
		||||
 | 
			
		||||
      .info
 | 
			
		||||
        = link_to t('auth.login'), new_user_session_path, class: 'webapp-btn'
 | 
			
		||||
        ·
 | 
			
		||||
        = link_to t('about.about_this'), about_more_path
 | 
			
		||||
 | 
			
		||||
  %h3= t('about.features_headline')
 | 
			
		||||
 | 
			
		||||
  .features-list
 | 
			
		||||
    .features-list__column
 | 
			
		||||
      %ul.fa-ul
 | 
			
		||||
        %li
 | 
			
		||||
          = fa_icon('li check-square')
 | 
			
		||||
          = t 'about.features.chronology'
 | 
			
		||||
        %li
 | 
			
		||||
          = fa_icon('li check-square')
 | 
			
		||||
          = t 'about.features.public'
 | 
			
		||||
        %li
 | 
			
		||||
          = fa_icon('li check-square')
 | 
			
		||||
          = t 'about.features.characters'
 | 
			
		||||
        %li
 | 
			
		||||
          = fa_icon('li check-square')
 | 
			
		||||
          = t 'about.features.gifv'
 | 
			
		||||
    .features-list__column
 | 
			
		||||
      %ul.fa-ul
 | 
			
		||||
        %li
 | 
			
		||||
          = fa_icon('li check-square')
 | 
			
		||||
          = t 'about.features.privacy'
 | 
			
		||||
        %li
 | 
			
		||||
          = fa_icon('li check-square')
 | 
			
		||||
          = t 'about.features.blocks'
 | 
			
		||||
        %li
 | 
			
		||||
          = fa_icon('li check-square')
 | 
			
		||||
          = t 'about.features.ethics'
 | 
			
		||||
        %li
 | 
			
		||||
          = fa_icon('li check-square')
 | 
			
		||||
          = t 'about.features.api'
 | 
			
		||||
 | 
			
		||||
  - unless @description.blank?
 | 
			
		||||
    %h3= t('about.description_headline', domain: Rails.configuration.x.local_domain)
 | 
			
		||||
    %p= @description.html_safe
 | 
			
		||||
 | 
			
		||||
  .actions
 | 
			
		||||
    .info
 | 
			
		||||
      = link_to t('about.learn_more'), about_more_path
 | 
			
		||||
      ·
 | 
			
		||||
      = link_to t('about.terms'), terms_path
 | 
			
		||||
      ·
 | 
			
		||||
      = link_to t('apps'), 'https://github.com/tootsuite/mastodon/blob/master/docs/Using-Mastodon/Apps.md'
 | 
			
		||||
| 
						 | 
				
			
			@ -38,6 +85,3 @@
 | 
			
		|||
      = link_to t('about.source_code'), 'https://github.com/tootsuite/mastodon'
 | 
			
		||||
      ·
 | 
			
		||||
      = link_to t('about.other_instances'), 'https://github.com/tootsuite/mastodon/blob/master/docs/Using-Mastodon/List-of-Mastodon-instances.md'
 | 
			
		||||
 | 
			
		||||
    = link_to t('about.get_started'), new_user_registration_path, class: 'button webapp-btn'
 | 
			
		||||
    = link_to t('auth.login'), new_user_session_path, class: 'button webapp-btn'
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -7,7 +7,7 @@
 | 
			
		|||
  .fields-group
 | 
			
		||||
    = f.input :locale, collection: I18n.available_locales, wrapper: :with_label, include_blank: false, label_method: lambda { |locale| human_locale(locale) }
 | 
			
		||||
 | 
			
		||||
    = f.input :setting_default_privacy, collection: Status.visibilities.keys, wrapper: :with_label, include_blank: false, label_method: lambda { |visibility| I18n.t("statuses.visibilities.#{visibility}") }, required: false
 | 
			
		||||
    = f.input :setting_default_privacy, collection: Status.visibilities.keys - [:direct], wrapper: :with_label, include_blank: false, label_method: lambda { |visibility| I18n.t("statuses.visibilities.#{visibility}") }, required: false
 | 
			
		||||
 | 
			
		||||
  .fields-group
 | 
			
		||||
    = f.simple_fields_for :notification_emails, hash_to_object(current_user.settings.notification_emails) do |ff|
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -2,11 +2,23 @@
 | 
			
		|||
en:
 | 
			
		||||
  about:
 | 
			
		||||
    about_instance: "<em>%{instance}</em> is a Mastodon instance."
 | 
			
		||||
    about_mastodon: Mastodon is a <em>free, open-source</em> social network server. A <em>decentralized</em> alternative to commercial platforms, it avoids the risks of a single company monopolizing your communication. Anyone can run Mastodon and participate in the <em>social network</em> seamlessly.
 | 
			
		||||
    about_mastodon: Mastodon is a <em>free, open-source</em> social network. A <em>decentralized</em> alternative to commercial platforms, it avoids the risks of a single company monopolizing your communication. Pick a server that you trust — whichever you choose, you can interact with everyone else. Anyone can run their own Mastodon instance and participate in the <em>social network</em> seamlessly.
 | 
			
		||||
    about_this: About this instance
 | 
			
		||||
    business_email: 'Business e-mail:'
 | 
			
		||||
    contact: Contact
 | 
			
		||||
    description_headline: What is %{domain}?
 | 
			
		||||
    domain_count_after: other instances
 | 
			
		||||
    domain_count_before: Connected to
 | 
			
		||||
    features:
 | 
			
		||||
      api: Open API for apps and services
 | 
			
		||||
      blocks: Rich block and muting tools
 | 
			
		||||
      characters: 500 characters per post
 | 
			
		||||
      chronology: Timelines are chronological
 | 
			
		||||
      ethics: 'Ethical design: no ads, no tracking'
 | 
			
		||||
      gifv: GIFV sets and short videos
 | 
			
		||||
      privacy: Granular, per-post privacy settings
 | 
			
		||||
      public: Public timelines
 | 
			
		||||
    features_headline: What sets Mastodon apart
 | 
			
		||||
    get_started: Get started
 | 
			
		||||
    learn_more: Learn more
 | 
			
		||||
    links: Links
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		
		Reference in a new issue