From 45aa5781ce611ea411e34e3b18358a9fe15f67ce Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 9 Jun 2022 22:25:23 +0200 Subject: Change brand color and logotypes (#18592) - Add rake task for generating Apple/Android icons and favicons from SVG - Add rake task for generating PNG icons and logos for e-mails from SVG - Remove obsolete Microsoft icons and configuration - Remove PWA shortcut icons --- app/views/layouts/admin.html.haml | 4 ++-- app/views/layouts/application.html.haml | 21 +++++++++++++-------- app/views/layouts/auth.html.haml | 2 +- app/views/layouts/embedded.html.haml | 2 +- app/views/layouts/mailer.html.haml | 4 ++-- app/views/layouts/public.html.haml | 4 ++-- 6 files changed, 21 insertions(+), 16 deletions(-) (limited to 'app/views/layouts') 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 -- cgit From 37cd984acfdd206e85c50a851c4daedc2c87deb3 Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 10 Jun 2022 17:34:59 +0200 Subject: Fix logo gradient not working on some Safari and Blink-based browsers (#18634) Works around https://bugs.chromium.org/p/chromium/issues/detail?id=258029 --- app/javascript/styles/mastodon/basics.scss | 12 +++++++++++- app/views/layouts/application.html.haml | 2 +- app/views/layouts/embedded.html.haml | 2 +- 3 files changed, 13 insertions(+), 3 deletions(-) (limited to 'app/views/layouts') diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index 391f1fad9..413a1cdd6 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -256,7 +256,17 @@ button { } .logo-resources { - display: none; + // Not using display: none because of https://bugs.chromium.org/p/chromium/issues/detail?id=258029 + visibility: hidden; + user-select: none; + pointer-events: none; + width: 0; + height: 0; + overflow: hidden; + position: absolute; + top: 0; + left: 0; + z-index: -1000; } // NoScript adds a __ns__pop2top class to the full ancestry of blocked elements, diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 1501c2b97..25fd5bc34 100755 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -43,6 +43,6 @@ %body{ class: body_classes } = content_for?(:content) ? yield(:content) : yield - .logo-resources + .logo-resources{ 'tabindex' => '-1', 'inert' => true, 'aria-hidden' => true } = render_symbol :icon = render_symbol :wordmark diff --git a/app/views/layouts/embedded.html.haml b/app/views/layouts/embedded.html.haml index 6c6730ef2..e74bff9cc 100644 --- a/app/views/layouts/embedded.html.haml +++ b/app/views/layouts/embedded.html.haml @@ -20,5 +20,5 @@ %body.embed = yield - .logo-resources + .logo-resources{ 'tabindex' => '-1', 'inert' => true, 'aria-hidden' => true } = render_symbol :icon -- cgit