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
Eugen Rochko
2 years ago
committed by
GitHub
@ -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.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 |