diff --git a/.rubocop.yml b/.rubocop.yml index a76937426..9e3ff21f2 100644 --- a/.rubocop.yml +++ b/.rubocop.yml @@ -281,6 +281,9 @@ Style/RedundantRegexpEscape: Style/RedundantReturn: Enabled: true +Style/RedundantBegin: + Enabled: false + Style/RegexpLiteral: Enabled: false diff --git a/README.md b/README.md index 4b48e071d..eade19ef8 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,8 @@ -![Mastodon](https://i.imgur.com/NhZc40l.png) -======== +
[![GitHub release](https://img.shields.io/github/release/mastodon/mastodon.svg)][releases] [![Build Status](https://img.shields.io/circleci/project/github/mastodon/mastodon.svg)][circleci] @@ -35,7 +38,7 @@ Click below to **learn more** in a video: ## Features - + ### No vendor lock-in: Fully interoperable with any conforming platform diff --git a/app/helpers/accounts_helper.rb b/app/helpers/accounts_helper.rb index 557f60f26..d37634964 100644 --- a/app/helpers/accounts_helper.rb +++ b/app/helpers/accounts_helper.rb @@ -23,20 +23,20 @@ module AccountsHelper if user_signed_in? if account.id == current_user.account_id link_to settings_profile_url, class: 'button logo-button' do - safe_join([svg_logo, t('settings.edit_profile')]) + safe_join([logo_as_symbol, t('settings.edit_profile')]) end elsif current_account.following?(account) || current_account.requested?(account) link_to account_unfollow_path(account), class: 'button logo-button button--destructive', data: { method: :post } do - safe_join([svg_logo, t('accounts.unfollow')]) + safe_join([logo_as_symbol, t('accounts.unfollow')]) end elsif !(account.memorial? || account.moved?) link_to account_follow_path(account), class: "button logo-button#{account.blocking?(current_account) ? ' disabled' : ''}", data: { method: :post } do - safe_join([svg_logo, t('accounts.follow')]) + safe_join([logo_as_symbol, t('accounts.follow')]) end end elsif !(account.memorial? || account.moved?) link_to account_remote_follow_path(account), class: 'button logo-button modal-button', target: '_new' do - safe_join([svg_logo, t('accounts.follow')]) + safe_join([logo_as_symbol, t('accounts.follow')]) end end end @@ -99,12 +99,4 @@ module AccountsHelper [prepend_str, account.note].join(' ยท ') end - - def svg_logo - content_tag(:svg, tag(:use, 'xlink:href' => '#mastodon-svg-logo'), 'viewBox' => '0 0 216.4144 232.00976') - end - - def svg_logo_full - content_tag(:svg, tag(:use, 'xlink:href' => '#mastodon-svg-logo-full'), 'viewBox' => '0 0 713.35878 175.8678') - end end diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 705cc2e3f..db33292c1 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -99,11 +99,6 @@ module ApplicationHelper end end - def favicon_path - env_suffix = Rails.env.production? ? '' : '-dev' - "/favicon#{env_suffix}.ico" - end - def title Rails.env.production? ? site_title : "#{site_title} (Dev)" end @@ -147,8 +142,8 @@ module ApplicationHelper end end - def custom_emoji_tag(custom_emoji, animate = true) - if animate + def custom_emoji_tag(custom_emoji) + if prefers_autoplay? image_tag(custom_emoji.image.url, class: 'emojione', alt: ":#{custom_emoji.shortcode}:") else image_tag(custom_emoji.image.url(:static), class: 'emojione custom-emoji', alt: ":#{custom_emoji.shortcode}", 'data-original' => full_asset_url(custom_emoji.image.url), 'data-static' => full_asset_url(custom_emoji.image.url(:static))) @@ -198,7 +193,7 @@ module ApplicationHelper def quote_wrap(text, line_width: 80, break_sequence: "\n") text = word_wrap(text, line_width: line_width - 2, break_sequence: break_sequence) - text.split("\n").map { |line| '> ' + line }.join("\n") + text.split("\n").map { |line| "> #{line}" }.join("\n") end def render_initial_state diff --git a/app/helpers/branding_helper.rb b/app/helpers/branding_helper.rb new file mode 100644 index 000000000..c91661e56 --- /dev/null +++ b/app/helpers/branding_helper.rb @@ -0,0 +1,37 @@ +# frozen_string_literal: true + +module BrandingHelper + def logo_as_symbol(version = :icon) + case version + when :icon + _logo_as_symbol_icon + when :wordmark + _logo_as_symbol_wordmark + end + end + + def _logo_as_symbol_wordmark + content_tag(:svg, tag(:use, href: '#logo-symbol-wordmark'), viewBox: '0 0 261 66', class: 'logo logo--wordmark') + end + + def _logo_as_symbol_icon + content_tag(:svg, tag(:use, href: '#logo-symbol-icon'), viewBox: '0 0 79 75', class: 'logo logo--icon') + end + + def render_logo + image_pack_tag('logo.svg', alt: 'Mastodon', class: 'logo logo--icon') + end + + def render_symbol(version = :icon) + path = begin + case version + when :icon + 'logo-symbol-icon.svg' + when :wordmark + 'logo-symbol-wordmark.svg' + end + end + + render(file: Rails.root.join('app', 'javascript', 'images', path)).html_safe # rubocop:disable Rails/OutputSafety + end +end diff --git a/app/javascript/icons/android-chrome-144x144.png b/app/javascript/icons/android-chrome-144x144.png new file mode 100644 index 000000000..d282a6d3d Binary files /dev/null and b/app/javascript/icons/android-chrome-144x144.png differ diff --git a/app/javascript/icons/android-chrome-192x192.png b/app/javascript/icons/android-chrome-192x192.png new file mode 100644 index 000000000..d3f9959c5 Binary files /dev/null and b/app/javascript/icons/android-chrome-192x192.png differ diff --git a/app/javascript/icons/android-chrome-256x256.png b/app/javascript/icons/android-chrome-256x256.png new file mode 100644 index 000000000..98ce6ffbb Binary files /dev/null and b/app/javascript/icons/android-chrome-256x256.png differ diff --git a/app/javascript/icons/android-chrome-36x36.png b/app/javascript/icons/android-chrome-36x36.png new file mode 100644 index 000000000..f8ffeeb76 Binary files /dev/null and b/app/javascript/icons/android-chrome-36x36.png differ diff --git a/app/javascript/icons/android-chrome-384x384.png b/app/javascript/icons/android-chrome-384x384.png new file mode 100644 index 000000000..60b375354 Binary files /dev/null and b/app/javascript/icons/android-chrome-384x384.png differ diff --git a/app/javascript/icons/android-chrome-48x48.png b/app/javascript/icons/android-chrome-48x48.png new file mode 100644 index 000000000..ce49448d4 Binary files /dev/null and b/app/javascript/icons/android-chrome-48x48.png differ diff --git a/app/javascript/icons/android-chrome-512x512.png b/app/javascript/icons/android-chrome-512x512.png new file mode 100644 index 000000000..bccaada29 Binary files /dev/null and b/app/javascript/icons/android-chrome-512x512.png differ diff --git a/app/javascript/icons/android-chrome-72x72.png b/app/javascript/icons/android-chrome-72x72.png new file mode 100644 index 000000000..ce57ab746 Binary files /dev/null and b/app/javascript/icons/android-chrome-72x72.png differ diff --git a/app/javascript/icons/android-chrome-96x96.png b/app/javascript/icons/android-chrome-96x96.png new file mode 100644 index 000000000..cd8f09ed4 Binary files /dev/null and b/app/javascript/icons/android-chrome-96x96.png differ diff --git a/app/javascript/icons/apple-touch-icon-1024x1024.png b/app/javascript/icons/apple-touch-icon-1024x1024.png new file mode 100644 index 000000000..b1f18f3e3 Binary files /dev/null and b/app/javascript/icons/apple-touch-icon-1024x1024.png differ diff --git a/app/javascript/icons/apple-touch-icon-114x114.png b/app/javascript/icons/apple-touch-icon-114x114.png new file mode 100644 index 000000000..e13aaa87d Binary files /dev/null and b/app/javascript/icons/apple-touch-icon-114x114.png differ diff --git a/app/javascript/icons/apple-touch-icon-120x120.png b/app/javascript/icons/apple-touch-icon-120x120.png new file mode 100644 index 000000000..aa63012b5 Binary files /dev/null and b/app/javascript/icons/apple-touch-icon-120x120.png differ diff --git a/app/javascript/icons/apple-touch-icon-144x144.png b/app/javascript/icons/apple-touch-icon-144x144.png new file mode 100644 index 000000000..d282a6d3d Binary files /dev/null and b/app/javascript/icons/apple-touch-icon-144x144.png differ diff --git a/app/javascript/icons/apple-touch-icon-152x152.png b/app/javascript/icons/apple-touch-icon-152x152.png new file mode 100644 index 000000000..0dec7d63e Binary files /dev/null and b/app/javascript/icons/apple-touch-icon-152x152.png differ diff --git a/app/javascript/icons/apple-touch-icon-167x167.png b/app/javascript/icons/apple-touch-icon-167x167.png new file mode 100644 index 000000000..a622e1215 Binary files /dev/null and b/app/javascript/icons/apple-touch-icon-167x167.png differ diff --git a/app/javascript/icons/apple-touch-icon-180x180.png b/app/javascript/icons/apple-touch-icon-180x180.png new file mode 100644 index 000000000..864046b56 Binary files /dev/null and b/app/javascript/icons/apple-touch-icon-180x180.png differ diff --git a/app/javascript/icons/apple-touch-icon-57x57.png b/app/javascript/icons/apple-touch-icon-57x57.png new file mode 100644 index 000000000..116918ce2 Binary files /dev/null and b/app/javascript/icons/apple-touch-icon-57x57.png differ diff --git a/app/javascript/icons/apple-touch-icon-60x60.png b/app/javascript/icons/apple-touch-icon-60x60.png new file mode 100644 index 000000000..0eda96ed6 Binary files /dev/null and b/app/javascript/icons/apple-touch-icon-60x60.png differ diff --git a/app/javascript/icons/apple-touch-icon-72x72.png b/app/javascript/icons/apple-touch-icon-72x72.png new file mode 100644 index 000000000..ce57ab746 Binary files /dev/null and b/app/javascript/icons/apple-touch-icon-72x72.png differ diff --git a/app/javascript/icons/apple-touch-icon-76x76.png b/app/javascript/icons/apple-touch-icon-76x76.png new file mode 100644 index 000000000..50e162891 Binary files /dev/null and b/app/javascript/icons/apple-touch-icon-76x76.png differ diff --git a/app/javascript/icons/favicon-16x16.png b/app/javascript/icons/favicon-16x16.png new file mode 100644 index 000000000..e7037f4cf Binary files /dev/null and b/app/javascript/icons/favicon-16x16.png differ diff --git a/app/javascript/icons/favicon-32x32.png b/app/javascript/icons/favicon-32x32.png new file mode 100644 index 000000000..a91b02463 Binary files /dev/null and b/app/javascript/icons/favicon-32x32.png differ diff --git a/app/javascript/icons/favicon-48x48.png b/app/javascript/icons/favicon-48x48.png new file mode 100644 index 000000000..d3721fbdd Binary files /dev/null and b/app/javascript/icons/favicon-48x48.png differ diff --git a/app/javascript/images/app-icon.svg b/app/javascript/images/app-icon.svg new file mode 100644 index 000000000..1035bd076 --- /dev/null +++ b/app/javascript/images/app-icon.svg @@ -0,0 +1,28 @@ + diff --git a/app/javascript/images/icon_cached.svg b/app/javascript/images/icon_cached.svg deleted file mode 100644 index 1087c4350..000000000 --- a/app/javascript/images/icon_cached.svg +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/app/javascript/images/icon_done.svg b/app/javascript/images/icon_done.svg deleted file mode 100644 index 446af14d9..000000000 --- a/app/javascript/images/icon_done.svg +++ /dev/null @@ -1,4 +0,0 @@ - \ No newline at end of file diff --git a/app/javascript/images/icon_email.svg b/app/javascript/images/icon_email.svg deleted file mode 100644 index 6d0ad9d9b..000000000 --- a/app/javascript/images/icon_email.svg +++ /dev/null @@ -1,4 +0,0 @@ - \ No newline at end of file diff --git a/app/javascript/images/icon_file_download.svg b/app/javascript/images/icon_file_download.svg deleted file mode 100644 index 53e97e4f8..000000000 --- a/app/javascript/images/icon_file_download.svg +++ /dev/null @@ -1,4 +0,0 @@ - \ No newline at end of file diff --git a/app/javascript/images/icon_flag.svg b/app/javascript/images/icon_flag.svg deleted file mode 100644 index 3939c9d2b..000000000 --- a/app/javascript/images/icon_flag.svg +++ /dev/null @@ -1,4 +0,0 @@ - diff --git a/app/javascript/images/icon_grade.svg b/app/javascript/images/icon_grade.svg deleted file mode 100644 index f48b46889..000000000 --- a/app/javascript/images/icon_grade.svg +++ /dev/null @@ -1,4 +0,0 @@ - \ No newline at end of file diff --git a/app/javascript/images/icon_lock_open.svg b/app/javascript/images/icon_lock_open.svg deleted file mode 100644 index 3288b46d6..000000000 --- a/app/javascript/images/icon_lock_open.svg +++ /dev/null @@ -1,4 +0,0 @@ - \ No newline at end of file diff --git a/app/javascript/images/icon_person_add.svg b/app/javascript/images/icon_person_add.svg deleted file mode 100644 index 068b8ae7c..000000000 --- a/app/javascript/images/icon_person_add.svg +++ /dev/null @@ -1,4 +0,0 @@ - \ No newline at end of file diff --git a/app/javascript/images/icon_reply.svg b/app/javascript/images/icon_reply.svg deleted file mode 100644 index cf6a09abc..000000000 --- a/app/javascript/images/icon_reply.svg +++ /dev/null @@ -1,4 +0,0 @@ - \ No newline at end of file diff --git a/app/javascript/images/icons/icon_cached.svg b/app/javascript/images/icons/icon_cached.svg new file mode 100644 index 000000000..d938e9bad --- /dev/null +++ b/app/javascript/images/icons/icon_cached.svg @@ -0,0 +1 @@ + diff --git a/app/javascript/images/icons/icon_done.svg b/app/javascript/images/icons/icon_done.svg new file mode 100644 index 000000000..a35ab87a1 --- /dev/null +++ b/app/javascript/images/icons/icon_done.svg @@ -0,0 +1 @@ + diff --git a/app/javascript/images/icons/icon_email.svg b/app/javascript/images/icons/icon_email.svg new file mode 100644 index 000000000..0215b6f3a --- /dev/null +++ b/app/javascript/images/icons/icon_email.svg @@ -0,0 +1 @@ + diff --git a/app/javascript/images/icons/icon_file_download.svg b/app/javascript/images/icons/icon_file_download.svg new file mode 100644 index 000000000..dc6d6bce3 --- /dev/null +++ b/app/javascript/images/icons/icon_file_download.svg @@ -0,0 +1 @@ + diff --git a/app/javascript/images/icons/icon_flag.svg b/app/javascript/images/icons/icon_flag.svg new file mode 100644 index 000000000..fe07808fa --- /dev/null +++ b/app/javascript/images/icons/icon_flag.svg @@ -0,0 +1 @@ + diff --git a/app/javascript/images/icons/icon_grade.svg b/app/javascript/images/icons/icon_grade.svg new file mode 100644 index 000000000..f8dd93864 --- /dev/null +++ b/app/javascript/images/icons/icon_grade.svg @@ -0,0 +1 @@ + diff --git a/app/javascript/images/icons/icon_lock_open.svg b/app/javascript/images/icons/icon_lock_open.svg new file mode 100644 index 000000000..12f559beb --- /dev/null +++ b/app/javascript/images/icons/icon_lock_open.svg @@ -0,0 +1 @@ + diff --git a/app/javascript/images/icons/icon_person_add.svg b/app/javascript/images/icons/icon_person_add.svg new file mode 100644 index 000000000..370536333 --- /dev/null +++ b/app/javascript/images/icons/icon_person_add.svg @@ -0,0 +1 @@ + diff --git a/app/javascript/images/icons/icon_reply.svg b/app/javascript/images/icons/icon_reply.svg new file mode 100644 index 000000000..9f99e4cbf --- /dev/null +++ b/app/javascript/images/icons/icon_reply.svg @@ -0,0 +1 @@ + diff --git a/app/javascript/images/logo-symbol-icon.svg b/app/javascript/images/logo-symbol-icon.svg new file mode 100644 index 000000000..12f4e078e --- /dev/null +++ b/app/javascript/images/logo-symbol-icon.svg @@ -0,0 +1,2 @@ + + diff --git a/app/javascript/images/logo-symbol-wordmark.svg b/app/javascript/images/logo-symbol-wordmark.svg new file mode 100644 index 000000000..7e7f7b087 --- /dev/null +++ b/app/javascript/images/logo-symbol-wordmark.svg @@ -0,0 +1,11 @@ + diff --git a/app/javascript/images/logo.svg b/app/javascript/images/logo.svg index 034a9c221..6ffc988e5 100644 --- a/app/javascript/images/logo.svg +++ b/app/javascript/images/logo.svg @@ -1 +1,10 @@ - + diff --git a/app/javascript/images/logo_full.svg b/app/javascript/images/logo_full.svg deleted file mode 100644 index 03bcf93e3..000000000 --- a/app/javascript/images/logo_full.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/app/javascript/images/logo_transparent.svg b/app/javascript/images/logo_transparent.svg deleted file mode 100644 index a1e7b403e..000000000 --- a/app/javascript/images/logo_transparent.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/app/javascript/images/logo_transparent_white.svg b/app/javascript/images/logo_transparent_white.svg deleted file mode 100644 index f061ffe4c..000000000 --- a/app/javascript/images/logo_transparent_white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/app/javascript/images/mailer/icon_cached.png b/app/javascript/images/mailer/icon_cached.png index 5c993dbee..e94abb7ba 100644 Binary files a/app/javascript/images/mailer/icon_cached.png and b/app/javascript/images/mailer/icon_cached.png differ diff --git a/app/javascript/images/mailer/icon_done.png b/app/javascript/images/mailer/icon_done.png index f7f95a0e8..472364de4 100644 Binary files a/app/javascript/images/mailer/icon_done.png and b/app/javascript/images/mailer/icon_done.png differ diff --git a/app/javascript/images/mailer/icon_email.png b/app/javascript/images/mailer/icon_email.png index 13967009a..d8dfe161e 100644 Binary files a/app/javascript/images/mailer/icon_email.png and b/app/javascript/images/mailer/icon_email.png differ diff --git a/app/javascript/images/mailer/icon_file_download.png b/app/javascript/images/mailer/icon_file_download.png index 3f7ac429b..24e424d3b 100644 Binary files a/app/javascript/images/mailer/icon_file_download.png and b/app/javascript/images/mailer/icon_file_download.png differ diff --git a/app/javascript/images/mailer/icon_flag.png b/app/javascript/images/mailer/icon_flag.png new file mode 100644 index 000000000..0f14f45a8 Binary files /dev/null and b/app/javascript/images/mailer/icon_flag.png differ diff --git a/app/javascript/images/mailer/icon_grade.png b/app/javascript/images/mailer/icon_grade.png index 8c212b7ee..7f371ab11 100644 Binary files a/app/javascript/images/mailer/icon_grade.png and b/app/javascript/images/mailer/icon_grade.png differ diff --git a/app/javascript/images/mailer/icon_lock_open.png b/app/javascript/images/mailer/icon_lock_open.png index c854c3bdb..d11c36475 100644 Binary files a/app/javascript/images/mailer/icon_lock_open.png and b/app/javascript/images/mailer/icon_lock_open.png differ diff --git a/app/javascript/images/mailer/icon_person_add.png b/app/javascript/images/mailer/icon_person_add.png index 6290a42ae..696eb7495 100644 Binary files a/app/javascript/images/mailer/icon_person_add.png and b/app/javascript/images/mailer/icon_person_add.png differ diff --git a/app/javascript/images/mailer/icon_reply.png b/app/javascript/images/mailer/icon_reply.png index a70093356..51d92f845 100644 Binary files a/app/javascript/images/mailer/icon_reply.png and b/app/javascript/images/mailer/icon_reply.png differ diff --git a/app/javascript/images/mailer/icon_warning.png b/app/javascript/images/mailer/icon_warning.png deleted file mode 100644 index 7baaac61c..000000000 Binary files a/app/javascript/images/mailer/icon_warning.png and /dev/null differ diff --git a/app/javascript/images/mailer/logo.png b/app/javascript/images/mailer/logo.png new file mode 100644 index 000000000..54c8afd6a Binary files /dev/null and b/app/javascript/images/mailer/logo.png differ diff --git a/app/javascript/images/mailer/logo_full.png b/app/javascript/images/mailer/logo_full.png deleted file mode 100644 index 82d981fc6..000000000 Binary files a/app/javascript/images/mailer/logo_full.png and /dev/null differ diff --git a/app/javascript/images/mailer/logo_transparent.png b/app/javascript/images/mailer/logo_transparent.png deleted file mode 100644 index 6dbcc2e8d..000000000 Binary files a/app/javascript/images/mailer/logo_transparent.png and /dev/null differ diff --git a/app/javascript/images/mailer/wordmark.png b/app/javascript/images/mailer/wordmark.png new file mode 100644 index 000000000..f3d714d3a Binary files /dev/null and b/app/javascript/images/mailer/wordmark.png differ diff --git a/app/javascript/images/preview.jpg b/app/javascript/images/preview.jpg deleted file mode 100644 index ec2856748..000000000 Binary files a/app/javascript/images/preview.jpg and /dev/null differ diff --git a/app/javascript/images/preview.png b/app/javascript/images/preview.png new file mode 100644 index 000000000..369bed4b6 Binary files /dev/null and b/app/javascript/images/preview.png differ diff --git a/app/javascript/packs/mailer.js b/app/javascript/packs/mailer.js index 732fc1698..a4b6d5446 100644 --- a/app/javascript/packs/mailer.js +++ b/app/javascript/packs/mailer.js @@ -1 +1,3 @@ require('../styles/mailer.scss'); + +require.context('../icons'); diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss index cb65b9567..bbea06195 100644 --- a/app/javascript/styles/application.scss +++ b/app/javascript/styles/application.scss @@ -6,6 +6,7 @@ @import 'mastodon/reset'; @import 'mastodon/basics'; +@import 'mastodon/branding'; @import 'mastodon/containers'; @import 'mastodon/lists'; @import 'mastodon/footer'; diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index ac2fdb2c7..c82be742d 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -688,7 +688,7 @@ $small-breakpoint: 960px; align-items: center; padding: 50px; - svg { + .logo { fill: $primary-text-color; height: 52px; } diff --git a/app/javascript/styles/mastodon/branding.scss b/app/javascript/styles/mastodon/branding.scss new file mode 100644 index 000000000..d1bddc68b --- /dev/null +++ b/app/javascript/styles/mastodon/branding.scss @@ -0,0 +1,3 @@ +.logo { + color: $primary-text-color; +} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 401cf02ac..13474a003 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2538,7 +2538,6 @@ a.account__display-name { padding: 40px; .logo { - fill: $primary-text-color; width: 50px; margin: 0 auto; margin-bottom: 40px; diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 81459f5ba..23dbece6b 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -20,8 +20,7 @@ justify-content: center; align-items: center; - svg { - fill: $primary-text-color; + .logo { height: 42px; margin-right: 10px; } @@ -320,7 +319,7 @@ display: block; padding: 15px; - svg { + .logo { display: block; height: 18px; width: auto; diff --git a/app/javascript/styles/mastodon/footer.scss b/app/javascript/styles/mastodon/footer.scss index 073ebda7e..0c3e42033 100644 --- a/app/javascript/styles/mastodon/footer.scss +++ b/app/javascript/styles/mastodon/footer.scss @@ -132,19 +132,19 @@ } .brand { - svg { + .logo { display: block; height: 36px; width: auto; margin: 0 auto; - fill: lighten($ui-base-color, 34%); + color: lighten($ui-base-color, 34%); } &:hover, &:focus, &:active { - svg { - fill: lighten($ui-base-color, 38%); + .logo { + color: lighten($ui-base-color, 38%); } } } diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss index 47d7e6f87..544f33ebf 100644 --- a/app/javascript/styles/mastodon/variables.scss +++ b/app/javascript/styles/mastodon/variables.scss @@ -12,7 +12,7 @@ $red-bookmark: $warning-red; $classic-base-color: #282c37; // Midnight Express $classic-primary-color: #9baec8; // Echo Blue $classic-secondary-color: #d9e1e8; // Pattens Blue -$classic-highlight-color: #2b90d9; // Summer Sky +$classic-highlight-color: #6364ff; // Brand purple // Variables for defaults in UI $base-shadow-color: $black !default; diff --git a/app/serializers/manifest_serializer.rb b/app/serializers/manifest_serializer.rb index ad05fdf6b..9827323a8 100644 --- a/app/serializers/manifest_serializer.rb +++ b/app/serializers/manifest_serializer.rb @@ -4,7 +4,19 @@ class ManifestSerializer < ActiveModel::Serializer include RoutingHelper include ActionView::Helpers::TextHelper - attributes :name, :short_name, :description, + ICON_SIZES = %w( + 36 + 48 + 72 + 96 + 144 + 192 + 256 + 384 + 512 + ).freeze + + attributes :name, :short_name, :icons, :theme_color, :background_color, :display, :start_url, :scope, :share_target, :shortcuts @@ -17,22 +29,18 @@ class ManifestSerializer < ActiveModel::Serializer object.site_title end - def description - strip_tags(object.site_short_description.presence || I18n.t('about.about_mastodon_html')) - end - def icons - [ + ICON_SIZES.map do |size| { - src: '/android-chrome-192x192.png', - sizes: '192x192', + src: full_pack_url("media/icons/android-chrome-#{size}x#{size}.png"), + sizes: "#{size}x#{size}", type: 'image/png', - }, - ] + } + end end def theme_color - '#282c37' + '#6364FF' end def background_color @@ -68,37 +76,12 @@ class ManifestSerializer < ActiveModel::Serializer def shortcuts [ { - name: 'New toot', + name: 'Compose new post', url: '/web/publish', - icons: [ - { - src: '/shortcuts/new-status.png', - type: 'image/png', - sizes: '192x192', - }, - ], }, { name: 'Notifications', url: '/web/notifications', - icons: [ - { - src: '/shortcuts/notifications.png', - type: 'image/png', - sizes: '192x192', - }, - ], - }, - { - name: 'Direct messages', - url: '/web/conversations', - icons: [ - { - src: '/shortcuts/direct.png', - type: 'image/png', - sizes: '192x192', - }, - ], }, ] end diff --git a/app/serializers/rest/instance_serializer.rb b/app/serializers/rest/instance_serializer.rb index 0dc44b623..f5dec0dac 100644 --- a/app/serializers/rest/instance_serializer.rb +++ b/app/serializers/rest/instance_serializer.rb @@ -39,7 +39,7 @@ class REST::InstanceSerializer < ActiveModel::Serializer end def thumbnail - instance_presenter.thumbnail ? full_asset_url(instance_presenter.thumbnail.file.url) : full_pack_url('media/images/preview.jpg') + instance_presenter.thumbnail ? full_asset_url(instance_presenter.thumbnail.file.url) : full_pack_url('media/images/preview.png') end def stats diff --git a/app/views/about/more.html.haml b/app/views/about/more.html.haml index f4429622c..3b48afc0c 100644 --- a/app/views/about/more.html.haml +++ b/app/views/about/more.html.haml @@ -9,7 +9,7 @@ .column-0 .public-account-header.public-account-header--no-bar .public-account-header__image - = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.jpg'), alt: @instance_presenter.site_title, class: 'parallax' + = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.site_title, class: 'parallax' .column-1 .landing-page__call-to-action{ dir: 'ltr' } diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml index 321440096..fb292941b 100644 --- a/app/views/about/show.html.haml +++ b/app/views/about/show.html.haml @@ -8,7 +8,7 @@ .landing .landing__brand = link_to root_url, class: 'brand' do - = svg_logo_full + = logo_as_symbol(:wordmark) %span.brand__tagline=t 'about.tagline' .landing__grid @@ -53,7 +53,7 @@ .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 + = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.site_title .hero-widget__text %p diff --git a/app/views/accounts/show.rss.ruby b/app/views/accounts/show.rss.ruby index 73c1c51e0..5e1c3a518 100644 --- a/app/views/accounts/show.rss.ruby +++ b/app/views/accounts/show.rss.ruby @@ -5,7 +5,6 @@ RSS::Builder.build do |doc| doc.image(full_asset_url(@account.avatar.url(:original)), display_name(@account), params[:tag].present? ? short_account_tag_url(@account, params[:tag]) : short_account_url(@account)) doc.last_build_date(@statuses.first.created_at) if @statuses.any? doc.icon(full_asset_url(@account.avatar.url(:original))) - doc.logo(full_pack_url('media/images/logo_transparent_white.svg')) doc.generator("Mastodon v#{Mastodon::Version.to_s}") @statuses.each do |status| diff --git a/app/views/admin/custom_emojis/_custom_emoji.html.haml b/app/views/admin/custom_emojis/_custom_emoji.html.haml index 41f3975cf..8d34d38e5 100644 --- a/app/views/admin/custom_emojis/_custom_emoji.html.haml +++ b/app/views/admin/custom_emojis/_custom_emoji.html.haml @@ -3,7 +3,7 @@ = f.check_box :custom_emoji_ids, { multiple: true, include_hidden: false }, custom_emoji.id .batch-table__row__content.batch-table__row__content--with-image .batch-table__row__content__image - = custom_emoji_tag(custom_emoji, current_account&.user&.setting_auto_play_gif) + = custom_emoji_tag(custom_emoji) .batch-table__row__content__text %samp= ":#{custom_emoji.shortcode}:" diff --git a/app/views/application/_sidebar.html.haml b/app/views/application/_sidebar.html.haml index e97c493fe..0a952add0 100644 --- a/app/views/application/_sidebar.html.haml +++ b/app/views/application/_sidebar.html.haml @@ -1,6 +1,6 @@ .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 + = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.site_title .hero-widget__text %p= @instance_presenter.site_short_description.html_safe.presence || t('about.about_mastodon_html') diff --git a/app/views/layouts/admin.html.haml b/app/views/layouts/admin.html.haml index 0f6433781..e577b9803 100644 --- a/app/views/layouts/admin.html.haml +++ b/app/views/layouts/admin.html.haml @@ -8,12 +8,12 @@ .sidebar-wrapper__inner .sidebar = link_to root_path do - = image_pack_tag 'logo.svg', class: 'logo', alt: 'Mastodon' + = render_logo .sidebar__toggle .sidebar__toggle__logo = link_to root_path do - = svg_logo_full + = logo_as_symbol(:wordmark) = link_to '#', class: 'sidebar__toggle__icon' do = fa_icon 'bars' diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index f5a963e00..1501c2b97 100755 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -11,12 +11,17 @@ - if storage_host? %link{ rel: 'dns-prefetch', href: storage_host }/ - %link{ rel: 'icon', href: favicon_path, type: 'image/x-icon' }/ - %link{ rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' }/ - %link{ rel: 'mask-icon', href: '/mask-icon.svg', color: '#2B90D9' }/ - %link{ rel: 'manifest', href: '/manifest.json' }/ - %meta{ name: 'msapplication-config', content: '/browserconfig.xml' }/ - %meta{ name: 'theme-color', content: '#282c37' }/ + %link{ rel: 'icon', href: '/favicon.ico', type: 'image/x-icon' }/ + + - %w(16 32 48).each do |size| + %link{ rel: 'icon', sizes: "#{size}x#{size}", href: asset_pack_path("media/icons/favicon-#{size}x#{size}.png"), type: 'image/png' }/ + + - %w(57 60 72 76 114 120 144 152 167 180 1024).each do |size| + %link{ rel: 'apple-touch-icon', sizes: "#{size}x#{size}", href: asset_pack_path("media/icons/apple-touch-icon-#{size}x#{size}.png") }/ + + %link{ rel: 'mask-icon', href: asset_pack_path('media/images/logo-symbol-icon.svg'), color: '#6364FF' }/ + %link{ rel: 'manifest', href: manifest_path(format: :json) }/ + %meta{ name: 'theme-color', content: '#6364FF' }/ %meta{ name: 'apple-mobile-web-app-capable', content: 'yes' }/ %title= content_for?(:page_title) ? safe_join([yield(:page_title).chomp.html_safe, title], ' - ') : title @@ -39,5 +44,5 @@ = content_for?(:content) ? yield(:content) : yield .logo-resources - = raw render file: Rails.root.join('app', 'javascript', 'images', 'logo_transparent.svg') - = raw render file: Rails.root.join('app', 'javascript', 'images', 'logo_full.svg') + = render_symbol :icon + = render_symbol :wordmark diff --git a/app/views/layouts/auth.html.haml b/app/views/layouts/auth.html.haml index 0ea3bbe3b..6096eada4 100644 --- a/app/views/layouts/auth.html.haml +++ b/app/views/layouts/auth.html.haml @@ -6,7 +6,7 @@ .logo-container %h1 = link_to root_path do - = svg_logo_full + = logo_as_symbol(:wordmark) .form-container = render 'flashes' diff --git a/app/views/layouts/embedded.html.haml b/app/views/layouts/embedded.html.haml index 719c21a9a..6c6730ef2 100644 --- a/app/views/layouts/embedded.html.haml +++ b/app/views/layouts/embedded.html.haml @@ -21,4 +21,4 @@ = yield .logo-resources - = raw render file: Rails.root.join('app', 'javascript', 'images', 'logo_transparent.svg') + = render_symbol :icon diff --git a/app/views/layouts/mailer.html.haml b/app/views/layouts/mailer.html.haml index 343bcb265..f26de8d99 100644 --- a/app/views/layouts/mailer.html.haml +++ b/app/views/layouts/mailer.html.haml @@ -24,7 +24,7 @@ %tr %td.column-cell = link_to root_url do - = image_tag full_pack_url('media/images/mailer/logo_full.png'), alt: 'Mastodon', height: 34, class: 'logo' + = image_tag full_pack_url('media/images/mailer/wordmark.png'), alt: 'Mastodon', height: 34, class: 'logo' = yield @@ -49,4 +49,4 @@ %p= link_to t('application_mailer.notification_preferences'), settings_preferences_notifications_url %td.column-cell.text-right = link_to root_url do - = image_tag full_pack_url('media/images/mailer/logo_transparent.png'), alt: 'Mastodon', height: 24 + = image_tag full_pack_url('media/images/mailer/logo.png'), alt: 'Mastodon', height: 24 diff --git a/app/views/layouts/public.html.haml b/app/views/layouts/public.html.haml index 3a9ca7ed7..83640de1a 100644 --- a/app/views/layouts/public.html.haml +++ b/app/views/layouts/public.html.haml @@ -9,7 +9,7 @@ %nav.header .nav-left = link_to root_url, class: 'brand' do - = svg_logo_full + = logo_as_symbol(:wordmark) - unless whitelist_mode? = link_to t('directories.directory'), explore_path, class: 'nav-link optional' if Setting.profile_directory @@ -42,7 +42,7 @@ %li= link_to t('about.api'), 'https://docs.joinmastodon.org/client/intro/' .column-2 %h4= link_to t('about.what_is_mastodon'), 'https://joinmastodon.org/' - = link_to svg_logo, root_url, class: 'brand' + = link_to logo_as_symbol, root_url, class: 'brand' .column-3 %h4= site_hostname %ul diff --git a/app/views/shared/_og.html.haml b/app/views/shared/_og.html.haml index c8f12974e..7feae1b8b 100644 --- a/app/views/shared/_og.html.haml +++ b/app/views/shared/_og.html.haml @@ -8,7 +8,7 @@ = opengraph 'og:type', 'website' = opengraph 'og:title', @instance_presenter.site_title = opengraph 'og:description', description -= opengraph 'og:image', full_asset_url(thumbnail&.file&.url || asset_pack_path('media/images/preview.jpg', protocol: :request)) += opengraph 'og:image', full_asset_url(thumbnail&.file&.url || asset_pack_path('media/images/preview.png', protocol: :request)) = opengraph 'og:image:width', thumbnail ? thumbnail.meta['width'] : '1200' = opengraph 'og:image:height', thumbnail ? thumbnail.meta['height'] : '630' = opengraph 'twitter:card', 'summary_large_image' diff --git a/app/views/tags/show.rss.ruby b/app/views/tags/show.rss.ruby index f4481b81c..12f560904 100644 --- a/app/views/tags/show.rss.ruby +++ b/app/views/tags/show.rss.ruby @@ -3,7 +3,6 @@ RSS::Builder.build do |doc| doc.description(I18n.t('rss.descriptions.tag', hashtag: @tag.name)) doc.link(tag_url(@tag)) doc.last_build_date(@statuses.first.created_at) if @statuses.any? - doc.logo(full_pack_url('media/images/logo_transparent_white.svg')) doc.generator("Mastodon v#{Mastodon::Version.to_s}") @statuses.each do |status| diff --git a/app/views/user_mailer/warning.html.haml b/app/views/user_mailer/warning.html.haml index fff61fa90..b9422e950 100644 --- a/app/views/user_mailer/warning.html.haml +++ b/app/views/user_mailer/warning.html.haml @@ -17,7 +17,7 @@ %tbody %tr %td - = image_tag full_pack_url('media/images/mailer/icon_warning.png'), alt: '' + = image_tag full_pack_url('media/images/mailer/icon_flag.png'), alt: '' %h1= t "user_mailer.warning.title.#{@warning.action}" diff --git a/config/locales/en.yml b/config/locales/en.yml index b73b352c7..cedcc9361 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -38,7 +38,7 @@ en: one: post other: posts status_count_before: Who published - tagline: Follow friends and discover new ones + tagline: Decentralized social network terms: Terms of service unavailable_content: Moderated servers unavailable_content_description: diff --git a/lib/assets/wordmark.dark.css b/lib/assets/wordmark.dark.css new file mode 100644 index 000000000..d87069178 --- /dev/null +++ b/lib/assets/wordmark.dark.css @@ -0,0 +1 @@ +// Not needed diff --git a/lib/assets/wordmark.dark.png b/lib/assets/wordmark.dark.png new file mode 100644 index 000000000..f3d714d3a Binary files /dev/null and b/lib/assets/wordmark.dark.png differ diff --git a/lib/assets/wordmark.light.css b/lib/assets/wordmark.light.css new file mode 100644 index 000000000..9a601f972 --- /dev/null +++ b/lib/assets/wordmark.light.css @@ -0,0 +1 @@ +use { color: #000 !important; } diff --git a/lib/assets/wordmark.light.png b/lib/assets/wordmark.light.png new file mode 100644 index 000000000..50bbb6bd3 Binary files /dev/null and b/lib/assets/wordmark.light.png differ diff --git a/lib/tasks/branding.rake b/lib/tasks/branding.rake new file mode 100644 index 000000000..d513465ed --- /dev/null +++ b/lib/tasks/branding.rake @@ -0,0 +1,78 @@ +namespace :branding do + desc 'Generate necessary graphic assets for branding from source SVG files' + task generate: :environment do + Rake::Task['branding:generate_app_icons'].invoke + Rake::Task['branding:generate_app_badge'].invoke + Rake::Task['branding:generate_github_assets'].invoke + Rake::Task['branding:generate_mailer_assets'].invoke + end + + desc 'Generate PNG icons and logos for e-mail templates' + task generate_mailer_assets: :environment do + rsvg_convert = Terrapin::CommandLine.new('rsvg-convert', '-w :w -h :h :input -o :output') + output_dest = Rails.root.join('app', 'javascript', 'images', 'mailer') + + # Displayed size is 64px, at 3x it's 192px + Dir[Rails.root.join('app', 'javascript', 'images', 'icons', '*.svg')].each do |path| + rsvg_convert.run(input: path, w: 192, h: 192, output: output_dest.join("#{File.basename(path, '.svg')}.png")) + end + + # Displayed size is 34px, at 3x it's 102px + rsvg_convert.run(input: Rails.root.join('app', 'javascript', 'images', 'logo-symbol-wordmark.svg'), w: (102 * (261.0 / 66)).ceil, h: 102, output: output_dest.join('wordmark.png')) + + # Displayed size is 24px, at 3x it's 72px + rsvg_convert.run(input: Rails.root.join('app', 'javascript', 'images', 'logo-symbol-icon.svg'), w: (72 * (79.0 / 75)).ceil, h: 72, output: output_dest.join('logo.png')) + end + + desc 'Generate light/dark logotypes for GitHub' + task generate_github_assets: :environment do + rsvg_convert = Terrapin::CommandLine.new('rsvg-convert', '--stylesheet :stylesheet -w :w -h :h :input -o :output') + output_dest = Rails.root.join('lib', 'assets') + + rsvg_convert.run(stylesheet: Rails.root.join('lib', 'assets', 'wordmark.dark.css'), input: Rails.root.join('app', 'javascript', 'images', 'logo-symbol-wordmark.svg'), w: (102 * (261.0 / 66)).ceil, h: 102, output: output_dest.join('wordmark.dark.png')) + rsvg_convert.run(stylesheet: Rails.root.join('lib', 'assets', 'wordmark.light.css'), input: Rails.root.join('app', 'javascript', 'images', 'logo-symbol-wordmark.svg'), w: (102 * (261.0 / 66)).ceil, h: 102, output: output_dest.join('wordmark.light.png')) + end + + desc 'Generate favicons and app icons from SVG source files' + task generate_app_icons: :environment do + favicon_source = Rails.root.join('app', 'javascript', 'images', 'logo.svg') + app_icon_source = Rails.root.join('app', 'javascript', 'images', 'app-icon.svg') + output_dest = Rails.root.join('app', 'javascript', 'icons') + + rsvg_convert = Terrapin::CommandLine.new('rsvg-convert', '-w :size -h :size :input -o :output') + convert = Terrapin::CommandLine.new('convert', ':input :output') + + favicon_sizes = [16, 32, 48] + apple_icon_sizes = [57, 60, 72, 76, 114, 120, 144, 152, 167, 180, 1024] + android_icon_sizes = [36, 48, 72, 96, 144, 192, 256, 384, 512] + + favicons = [] + + favicon_sizes.each do |size| + output_path = output_dest.join("favicon-#{size}x#{size}.png") + favicons << output_path + rsvg_convert.run(size: size, input: favicon_source, output: output_path) + end + + convert.run(input: favicons, output: Rails.root.join('public', 'favicon.ico')) + + apple_icon_sizes.each do |size| + rsvg_convert.run(size: size, input: app_icon_source, output: output_dest.join("apple-touch-icon-#{size}x#{size}.png")) + end + + android_icon_sizes.each do |size| + rsvg_convert.run(size: size, input: app_icon_source, output: output_dest.join("android-chrome-#{size}x#{size}.png")) + end + end + + desc 'Generate badge icon from SVG source files' + task generate_app_badge: :environment do + rsvg_convert = Terrapin::CommandLine.new('rsvg-convert', '--stylesheet :stylesheet -w :w -h :h :input -o :output') + badge_source = Rails.root.join('app', 'javascript', 'images', 'logo-symbol-icon.svg') + source_ratio = 79.0 / 75 + output_dest = Rails.root.join('public') + stylesheet = Rails.root.join('lib', 'assets', 'wordmark.light.css') + + rsvg_convert.run(stylesheet: stylesheet, input: badge_source, w: (192 * source_ratio).ceil, h: 192, output: output_dest.join('badge.png')) + end +end diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png deleted file mode 100644 index 7a99a1964..000000000 Binary files a/public/android-chrome-192x192.png and /dev/null differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png deleted file mode 100644 index b12aa55a3..000000000 Binary files a/public/apple-touch-icon.png and /dev/null differ diff --git a/public/badge.png b/public/badge.png index c3e99ddd4..0449e9292 100644 Binary files a/public/badge.png and b/public/badge.png differ diff --git a/public/browserconfig.xml b/public/browserconfig.xml deleted file mode 100644 index 7fdab5058..000000000 --- a/public/browserconfig.xml +++ /dev/null @@ -1,9 +0,0 @@ - -