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 iconslocal
@ -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 |
After Width: | Height: | Size: 6.5 KiB |
After Width: | Height: | Size: 9.9 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 25 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 39 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 3.6 KiB |
After Width: | Height: | Size: 102 KiB |
After Width: | Height: | Size: 4.5 KiB |
After Width: | Height: | Size: 4.8 KiB |
After Width: | Height: | Size: 6.5 KiB |
After Width: | Height: | Size: 6.8 KiB |
After Width: | Height: | Size: 7.9 KiB |
After Width: | Height: | Size: 8.7 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 650 B |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 3.6 KiB |
Before Width: | Height: | Size: 604 B |
Before Width: | Height: | Size: 214 B |
Before Width: | Height: | Size: 273 B |
Before Width: | Height: | Size: 205 B |
Before Width: | Height: | Size: 197 B |
Before Width: | Height: | Size: 252 B |
Before Width: | Height: | Size: 395 B |
Before Width: | Height: | Size: 305 B |
Before Width: | Height: | Size: 220 B |
After Width: | Height: | Size: 563 B |
After Width: | Height: | Size: 203 B |
After Width: | Height: | Size: 262 B |
After Width: | Height: | Size: 194 B |
After Width: | Height: | Size: 189 B |
After Width: | Height: | Size: 241 B |
After Width: | Height: | Size: 384 B |
After Width: | Height: | Size: 294 B |
After Width: | Height: | Size: 209 B |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 7.3 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 5.6 KiB |
Before Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 423 B After Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 253 B After Width: | Height: | Size: 817 B |
Before Width: | Height: | Size: 387 B After Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 225 B After Width: | Height: | Size: 813 B |
After Width: | Height: | Size: 693 B |
Before Width: | Height: | Size: 412 B After Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 387 B After Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 376 B After Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 319 B After Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 371 B |
After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 506 B |
After Width: | Height: | Size: 8.7 KiB |
Before Width: | Height: | Size: 285 KiB |
After Width: | Height: | Size: 502 KiB |
@ -1 +1,3 @@ |
|||||||
require('../styles/mailer.scss'); |
require('../styles/mailer.scss'); |
||||||
|
|
||||||
|
require.context('../icons'); |
||||||
|
@ -0,0 +1,3 @@ |
|||||||
|
.logo { |
||||||
|
color: $primary-text-color; |
||||||
|
} |
@ -0,0 +1 @@ |
|||||||
|
// Not needed |
After Width: | Height: | Size: 8.7 KiB |
@ -0,0 +1 @@ |
|||||||
|
use { color: #000 !important; } |
After Width: | Height: | Size: 8.4 KiB |
@ -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 |
Before Width: | Height: | Size: 13 KiB |