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…
	
		Reference in a new issue