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 iconsmain
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('../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 |