diff --git a/.gitignore b/.gitignore index a320f7b6..330c1918 100644 --- a/.gitignore +++ b/.gitignore @@ -16,3 +16,15 @@ # Ignore .DS_store file .DS_Store + +# IDE files +.project +.idea +.idea/* +.idea/workspace.xml +/.idea/workspace.xml +.settings/ +.buildpath + +# Gemfile.lock +Gemfile.lock diff --git a/Gemfile b/Gemfile index deffdaf4..4e32d709 100644 --- a/Gemfile +++ b/Gemfile @@ -3,6 +3,7 @@ source 'http://rubygems.org' gem "middleman", "~>3.3.3" +gem "middleman-minify-html" # Live-reloading plugin gem "middleman-livereload", "~> 3.1.0" @@ -11,4 +12,4 @@ gem "middleman-livereload", "~> 3.1.0" gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw] # Windows does not come with time zone data -gem "tzinfo-data", platforms: [:mswin, :mingw] \ No newline at end of file +gem "tzinfo-data", platforms: [:mswin, :mingw] diff --git a/Gemfile.lock b/Gemfile.lock deleted file mode 100644 index 515aa77c..00000000 --- a/Gemfile.lock +++ /dev/null @@ -1,121 +0,0 @@ -GEM - remote: http://rubygems.org/ - specs: - activesupport (4.1.1) - i18n (~> 0.6, >= 0.6.9) - json (~> 1.7, >= 1.7.7) - minitest (~> 5.1) - thread_safe (~> 0.1) - tzinfo (~> 1.1) - chunky_png (1.3.1) - coffee-script (2.2.0) - coffee-script-source - execjs - coffee-script-source (1.7.0) - compass (0.12.6) - chunky_png (~> 1.2) - fssm (>= 0.2.7) - sass (~> 3.2.19) - compass-import-once (1.0.4) - sass (>= 3.2, < 3.5) - em-websocket (0.5.1) - eventmachine (>= 0.12.9) - http_parser.rb (~> 0.6.0) - erubis (2.7.0) - eventmachine (1.0.3) - execjs (2.2.0) - ffi (1.9.3) - fssm (0.2.10) - haml (4.0.5) - tilt - hike (1.2.3) - hooks (0.4.0) - uber (~> 0.0.4) - http_parser.rb (0.6.0) - i18n (0.6.9) - json (1.8.1) - kramdown (1.4.0) - listen (1.3.1) - rb-fsevent (>= 0.9.3) - rb-inotify (>= 0.9) - rb-kqueue (>= 0.2) - middleman (3.3.3) - coffee-script (~> 2.2.0) - compass (>= 0.12.4) - compass-import-once (= 1.0.4) - execjs (~> 2.0) - haml (>= 4.0.5) - kramdown (~> 1.2) - middleman-core (= 3.3.3) - middleman-sprockets (>= 3.1.2) - sass (>= 3.2.17, < 4.0) - uglifier (~> 2.5) - middleman-core (3.3.3) - activesupport (~> 4.1.0) - bundler (~> 1.1) - erubis - hooks (~> 0.3) - i18n (~> 0.6.9) - listen (~> 1.1) - padrino-helpers (~> 0.12.1) - rack (>= 1.4.5, < 2.0) - rack-test (~> 0.6.2) - thor (>= 0.15.2, < 2.0) - tilt (~> 1.4.1, < 2.0) - middleman-livereload (3.1.1) - em-websocket (>= 0.2.0) - middleman-core (>= 3.0.2) - multi_json (~> 1.0) - rack-livereload - middleman-sprockets (3.3.3) - middleman-core (>= 3.2) - sprockets (~> 2.2) - sprockets-helpers (~> 1.1.0) - sprockets-sass (~> 1.1.0) - minitest (5.3.5) - multi_json (1.10.1) - padrino-helpers (0.12.2) - i18n (~> 0.6, >= 0.6.7) - padrino-support (= 0.12.2) - tilt (~> 1.4.1) - padrino-support (0.12.2) - activesupport (>= 3.1) - rack (1.5.2) - rack-livereload (0.3.15) - rack - rack-test (0.6.2) - rack (>= 1.0) - rb-fsevent (0.9.4) - rb-inotify (0.9.5) - ffi (>= 0.5.0) - rb-kqueue (0.2.3) - ffi (>= 0.5.0) - sass (3.2.19) - sprockets (2.12.1) - hike (~> 1.2) - multi_json (~> 1.0) - rack (~> 1.0) - tilt (~> 1.1, != 1.3.0) - sprockets-helpers (1.1.0) - sprockets (~> 2.0) - sprockets-sass (1.1.0) - sprockets (~> 2.0) - tilt (~> 1.1) - thor (0.19.1) - thread_safe (0.3.4) - tilt (1.4.1) - tzinfo (1.2.1) - thread_safe (~> 0.1) - uber (0.0.6) - uglifier (2.5.1) - execjs (>= 0.3.0) - json (>= 1.8.0) - -PLATFORMS - ruby - -DEPENDENCIES - middleman (~> 3.3.3) - middleman-livereload (~> 3.1.0) - tzinfo-data - wdm (~> 0.1.0) diff --git a/README.md b/README.md index 6925bfe3..3dd97178 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,17 @@ Meme is a generator that Vox Media uses to create social sharing images. See wor * Highly (and easily!) customizable editor and theme options. * Watermark selector. +## What's new in meme-tn version? + +* New responsive UI. +* Add ribbons feature. +* Add and position emojis features. +* Change image proportions for Twitter and Facebook. +* Choose between different background patterns for transparent background images. +* Improved image generation, no more DOM access in every rendering. +* Better drag n’ drop behaviour when the image doesn't fit in the canvas. +* Better drag n’ drop behaviour in touch devices. + ## Install * `git clone https://github.com/voxmedia/meme.git` @@ -47,6 +58,21 @@ If you're hosting this application on the same domain that serves your images, t 2. Embed all of your watermark images as base64 data URIs within the `settings.js.erb` file. The asset pipeline's `asset_data_uri` helper method makes this very easy, and effectively embeds all image data within your JavaScript. The downside here is that your JavaScript will become a very large payload as you include more images. In the long term, getting CORS headers configured will be a better option. +## Installing in Apache + +It uses Middleman to run. You must use this command to build it: + +* `bundle exec middleman build` + +### Fixing Assets + +Before you use it, you have to fix the asset. Add these lines to the build block in [config file](https://github.com/voxmedia/meme/blob/master/config.js.erb#L36) + +* `activate :minify_html` +* `activate :relative_assets` + +To fix the paths, use [middleman's helpers](https://middlemanapp.com/advanced/asset_pipeline/#helpers) in your CSS, and the `asset_data_uri` function in your [settings file](https://github.com/voxmedia/meme/blob/master/source/javascripts/settings.js.erb). + ## Examples * http://www.sbnation.com/a/meme @@ -60,4 +86,4 @@ If you're hosting this application on the same domain that serves your images, t 2. Create your feature branch (`git checkout -b my-new-feature`) 3. Commit your changes (`git commit -am 'Add some feature'`) 4. Push to the branch (`git push origin my-new-feature`) -5. Create a new Pull Request \ No newline at end of file +5. Create a new Pull Request diff --git a/config.rb b/config.rb index 286adc3c..eecbf999 100644 --- a/config.rb +++ b/config.rb @@ -23,7 +23,7 @@ def get_url set :css_dir, 'stylesheets' set :js_dir, 'javascripts' set :images_dir, 'images' -set :url_prefix, '/' +set :url_prefix, '' set :absolute_prefix, 'http://localhost:4567' # Build-specific configuration @@ -31,7 +31,12 @@ def get_url puts "local build" set :url_prefix, "" set :absolute_prefix, "" + #set :images_dir, 'images' + activate :asset_hash activate :minify_javascript activate :minify_css + + activate :minify_html + activate :relative_assets end diff --git a/png/emojis.png b/png/emojis.png new file mode 100644 index 00000000..881d8fb6 Binary files /dev/null and b/png/emojis.png differ diff --git a/source/fonts/Impact.eot b/source/fonts/Impact.eot new file mode 100644 index 00000000..0852698f Binary files /dev/null and b/source/fonts/Impact.eot differ diff --git a/source/fonts/Impact.svg b/source/fonts/Impact.svg new file mode 100644 index 00000000..4a2ec4cf --- /dev/null +++ b/source/fonts/Impact.svg @@ -0,0 +1,2097 @@ + + + + +Created by FontForge 20090622 at Wed Jun 10 18:40:09 2015 + By deploy user +Digitized data copyright (C) 1991-1996 The Monotype Corporation. All rights reserved. Impact is a trademark of Stephenson Blake (Holdings) Ltd. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/source/fonts/Impact.ttf b/source/fonts/Impact.ttf new file mode 100644 index 00000000..529135e6 Binary files /dev/null and b/source/fonts/Impact.ttf differ diff --git a/source/fonts/Impact.woff b/source/fonts/Impact.woff new file mode 100644 index 00000000..f80186f5 Binary files /dev/null and b/source/fonts/Impact.woff differ diff --git a/source/fonts/blokletters-viltstift.eot b/source/fonts/blokletters-viltstift.eot new file mode 100644 index 00000000..8566d7b7 Binary files /dev/null and b/source/fonts/blokletters-viltstift.eot differ diff --git a/source/fonts/blokletters-viltstift.svg b/source/fonts/blokletters-viltstift.svg new file mode 100644 index 00000000..90f4ac53 --- /dev/null +++ b/source/fonts/blokletters-viltstift.svg @@ -0,0 +1,1623 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/source/fonts/blokletters-viltstift.ttf b/source/fonts/blokletters-viltstift.ttf new file mode 100644 index 00000000..0973aee0 Binary files /dev/null and b/source/fonts/blokletters-viltstift.ttf differ diff --git a/source/fonts/blokletters-viltstift.woff b/source/fonts/blokletters-viltstift.woff new file mode 100644 index 00000000..120b18aa Binary files /dev/null and b/source/fonts/blokletters-viltstift.woff differ diff --git a/source/fonts/museo-300.eot b/source/fonts/museo-300.eot new file mode 100644 index 00000000..047f6006 Binary files /dev/null and b/source/fonts/museo-300.eot differ diff --git a/source/fonts/museo-300.svg b/source/fonts/museo-300.svg new file mode 100644 index 00000000..09c0166e --- /dev/null +++ b/source/fonts/museo-300.svg @@ -0,0 +1,860 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/source/fonts/museo-300.ttf b/source/fonts/museo-300.ttf new file mode 100644 index 00000000..3a271b0d Binary files /dev/null and b/source/fonts/museo-300.ttf differ diff --git a/source/fonts/museo-300.woff b/source/fonts/museo-300.woff new file mode 100644 index 00000000..4481f786 Binary files /dev/null and b/source/fonts/museo-300.woff differ diff --git a/source/fonts/museo-700.eot b/source/fonts/museo-700.eot new file mode 100644 index 00000000..42935985 Binary files /dev/null and b/source/fonts/museo-700.eot differ diff --git a/source/fonts/museo-700.svg b/source/fonts/museo-700.svg new file mode 100644 index 00000000..17e50b92 --- /dev/null +++ b/source/fonts/museo-700.svg @@ -0,0 +1,860 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/source/fonts/museo-700.ttf b/source/fonts/museo-700.ttf new file mode 100644 index 00000000..2150675e Binary files /dev/null and b/source/fonts/museo-700.ttf differ diff --git a/source/fonts/museo-700.woff b/source/fonts/museo-700.woff new file mode 100644 index 00000000..aaa3f98f Binary files /dev/null and b/source/fonts/museo-700.woff differ diff --git a/source/fonts/museosans-300.eot b/source/fonts/museosans-300.eot new file mode 100755 index 00000000..a777f333 Binary files /dev/null and b/source/fonts/museosans-300.eot differ diff --git a/source/fonts/museosans-300.svg b/source/fonts/museosans-300.svg new file mode 100755 index 00000000..442434d1 --- /dev/null +++ b/source/fonts/museosans-300.svg @@ -0,0 +1,169 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/source/fonts/museosans-300.ttf b/source/fonts/museosans-300.ttf new file mode 100755 index 00000000..1b56a694 Binary files /dev/null and b/source/fonts/museosans-300.ttf differ diff --git a/source/fonts/museosans-300.woff b/source/fonts/museosans-300.woff new file mode 100755 index 00000000..92475f58 Binary files /dev/null and b/source/fonts/museosans-300.woff differ diff --git a/source/fonts/museosans-700.eot b/source/fonts/museosans-700.eot new file mode 100755 index 00000000..25f621b8 Binary files /dev/null and b/source/fonts/museosans-700.eot differ diff --git a/source/fonts/museosans-700.svg b/source/fonts/museosans-700.svg new file mode 100755 index 00000000..2595aed4 --- /dev/null +++ b/source/fonts/museosans-700.svg @@ -0,0 +1,702 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/source/fonts/museosans-700.ttf b/source/fonts/museosans-700.ttf new file mode 100755 index 00000000..fd63447b Binary files /dev/null and b/source/fonts/museosans-700.ttf differ diff --git a/source/fonts/museosans-700.woff b/source/fonts/museosans-700.woff new file mode 100755 index 00000000..2c97c37e Binary files /dev/null and b/source/fonts/museosans-700.woff differ diff --git a/source/fonts/museosans-900.eot b/source/fonts/museosans-900.eot new file mode 100644 index 00000000..9827b131 Binary files /dev/null and b/source/fonts/museosans-900.eot differ diff --git a/source/fonts/museosans-900.svg b/source/fonts/museosans-900.svg new file mode 100644 index 00000000..a570a755 --- /dev/null +++ b/source/fonts/museosans-900.svg @@ -0,0 +1,708 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/source/fonts/museosans-900.ttf b/source/fonts/museosans-900.ttf new file mode 100644 index 00000000..2d6c40d4 Binary files /dev/null and b/source/fonts/museosans-900.ttf differ diff --git a/source/fonts/museosans-900.woff b/source/fonts/museosans-900.woff new file mode 100644 index 00000000..8f212ee6 Binary files /dev/null and b/source/fonts/museosans-900.woff differ diff --git a/source/images/backgrounds/concrete.png b/source/images/backgrounds/concrete.png new file mode 100644 index 00000000..17d7d071 Binary files /dev/null and b/source/images/backgrounds/concrete.png differ diff --git a/source/images/backgrounds/tn-blue.png b/source/images/backgrounds/tn-blue.png new file mode 100644 index 00000000..6ca619d9 Binary files /dev/null and b/source/images/backgrounds/tn-blue.png differ diff --git a/source/images/backgrounds/tn-red.png b/source/images/backgrounds/tn-red.png new file mode 100644 index 00000000..45467de3 Binary files /dev/null and b/source/images/backgrounds/tn-red.png differ diff --git a/source/images/backgrounds/tweed.png b/source/images/backgrounds/tweed.png new file mode 100755 index 00000000..ac0eb820 Binary files /dev/null and b/source/images/backgrounds/tweed.png differ diff --git a/source/images/emojis/emojis-canvas.png b/source/images/emojis/emojis-canvas.png new file mode 100644 index 00000000..52233e99 Binary files /dev/null and b/source/images/emojis/emojis-canvas.png differ diff --git a/source/images/emojis/emojis-editor.png b/source/images/emojis/emojis-editor.png new file mode 100644 index 00000000..544a1520 Binary files /dev/null and b/source/images/emojis/emojis-editor.png differ diff --git a/source/images/sprite-meme.png b/source/images/sprite-meme.png new file mode 100644 index 00000000..4c05b3e1 Binary files /dev/null and b/source/images/sprite-meme.png differ diff --git a/source/images/theverge.png b/source/images/theverge.png deleted file mode 100644 index fa6226d0..00000000 Binary files a/source/images/theverge.png and /dev/null differ diff --git a/source/images/usertnylgt.svg b/source/images/usertnylgt.svg new file mode 100755 index 00000000..97238323 --- /dev/null +++ b/source/images/usertnylgt.svg @@ -0,0 +1,16 @@ + + + + + + + + diff --git a/source/images/vox.png b/source/images/vox.png deleted file mode 100644 index 650f269f..00000000 Binary files a/source/images/vox.png and /dev/null differ diff --git a/source/images/watermarks/famosos.png b/source/images/watermarks/famosos.png new file mode 100644 index 00000000..b8949c16 Binary files /dev/null and b/source/images/watermarks/famosos.png differ diff --git a/source/images/watermarks/la-viola.png b/source/images/watermarks/la-viola.png new file mode 100644 index 00000000..cfff77c3 Binary files /dev/null and b/source/images/watermarks/la-viola.png differ diff --git a/source/images/watermarks/tecno.png b/source/images/watermarks/tecno.png new file mode 100644 index 00000000..8e788f1b Binary files /dev/null and b/source/images/watermarks/tecno.png differ diff --git a/source/images/watermarks/tn-y-la-gente.png b/source/images/watermarks/tn-y-la-gente.png new file mode 100644 index 00000000..e898843a Binary files /dev/null and b/source/images/watermarks/tn-y-la-gente.png differ diff --git a/source/images/watermarks/todapasion.png b/source/images/watermarks/todapasion.png new file mode 100644 index 00000000..5132369d Binary files /dev/null and b/source/images/watermarks/todapasion.png differ diff --git a/source/images/watermarks/todonoticias.png b/source/images/watermarks/todonoticias.png new file mode 100644 index 00000000..3315c964 Binary files /dev/null and b/source/images/watermarks/todonoticias.png differ diff --git a/source/index.html.erb b/source/index.html.erb deleted file mode 100644 index 83c6eee8..00000000 --- a/source/index.html.erb +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: Social sharing builder -description: ---- diff --git a/source/index.html.haml b/source/index.html.haml new file mode 100644 index 00000000..bfd7b21d --- /dev/null +++ b/source/index.html.haml @@ -0,0 +1,4 @@ +--- +title: Meme +description: Si llegaste hasta aca, mereces usarlo y #sosGroso #sabelo +--- diff --git a/source/javascripts/application.js b/source/javascripts/application.js index 96102ff4..3846068d 100644 --- a/source/javascripts/application.js +++ b/source/javascripts/application.js @@ -1,6 +1,7 @@ //= require "vendor/jquery" //= require "vendor/underscore" //= require "vendor/backbone" +//= require "vendor/jquery-cookie" //= require "main" //= require "models/meme" //= require "views/meme-canvas" diff --git a/source/javascripts/main.js b/source/javascripts/main.js index 1d27ca58..15210389 100644 --- a/source/javascripts/main.js +++ b/source/javascripts/main.js @@ -29,4 +29,12 @@ MEME = { MEME.$(function() { MEME.init(); + + if ($.cookie('tns01')) { + $('#user-image').find('.small-avatar') + .removeAttr('data-original') + .attr('src', $.parseJSON($.cookie('tns01')).image); + } + + //$('#meme-canvas').addClass('animate'); }); \ No newline at end of file diff --git a/source/javascripts/models/meme.js b/source/javascripts/models/meme.js index 72ef90c5..7e17b01f 100644 --- a/source/javascripts/models/meme.js +++ b/source/javascripts/models/meme.js @@ -4,10 +4,16 @@ */ MEME.MemeModel = Backbone.Model.extend({ defaults: { + backgroundOpt: '', + backgroundOpts: [], backgroundPosition: { x: null, y: null }, creditText: 'Source:', creditSize: 12, downloadName: 'share', + emoji: '', + emojiImage: '', + emojiPosition: '', + emojiSize: '', fontColor: 'white', fontFamily: 'Helvetica Neue', fontFamilyOpts: ['Helvetica', 'Helvetica Neue', 'Comic Sans MS'], @@ -18,9 +24,14 @@ MEME.MemeModel = Backbone.Model.extend({ imageScale: 1, imageSrc: '', overlayAlpha: 0.5, - overlayColor: '#000', - overlayColorOpts: ['#000', '#777', '#2980b9'], + //overlayColor: '#000', + //overlayColorOpts: ['#000', '#777', '#2980b9'], paddingRatio: 0.05, + ribbon: { + text:'', + background: '' + }, + ribbonOpts: [], textAlign: 'left', textAlignOpts: ['left', 'center', 'right'], textShadow: true, @@ -35,17 +46,26 @@ MEME.MemeModel = Backbone.Model.extend({ // Initialize with custom image members used for background and watermark: // These images will (sort of) behave like managed model fields. initialize: function() { + var emo = (this.attributes.emojiImage || this.defaults.emojiImage); + this.background = new Image(); + this.backgroundOpt = new Image(); this.watermark = new Image(); + this.emoji = new Image(); + + if (emo != '') { + this.emoji.src = emo; + } // Set image sources to trigger "change" whenever they reload: - this.background.onload = this.watermark.onload = _.bind(function() { + this.background.onload = this.watermark.onload = this.backgroundOpt.onload = _.bind(function() { this.trigger('change'); }, this); // Set initial image and watermark sources: if (this.get('imageSrc')) this.background.src = this.get('imageSrc'); if (this.get('watermarkSrc')) this.setWatermarkSrc(this.get('watermarkSrc')); + if (this.get('backgroundOpt')) this.backgroundOpt = this.get('backgroundOpt'); // Update image and watermark sources if new source URLs are set: this.listenTo(this, 'change:imageSrc', function() { @@ -54,7 +74,12 @@ MEME.MemeModel = Backbone.Model.extend({ this.listenTo(this, 'change:watermarkSrc', function() { this.setWatermarkSrc(this.get('watermarkSrc')); }); + this.listenTo(this, 'change:backgroundOpt', function() { + this.setBackgroundOpt(this.get('backgroundOpt')); + }); }, + + canvas: null, // Specifies if the background image currently has data: hasBackground: function() { @@ -71,12 +96,33 @@ MEME.MemeModel = Backbone.Model.extend({ // Loads a file reference into the background image data source: loadBackground: function(file) { this.loadFileForImage(file, this.background); + this.attributes.backgroundPosition.x = null; + this.attributes.backgroundPosition.y = null; }, // Loads a file reference into the watermark image data source: loadWatermark: function(file) { this.loadFileForImage(file, this.watermark); }, + + // When setting a new watermark "src", + // this method looks through watermark options and finds the matching option. + // The option's "data" attribute will be set as the watermark, if defined. + // This is useful for avoiding cross-origin resource loading issues. + setBackgroundOpt: function(src) { + var opt = _.findWhere(this.get('backgroundOpt'), {value: src}); + var data = (opt && opt.data) || src; + + // Toggle cross-origin attribute for Data URI requests: + if (data.indexOf('data:') === 0) { + this.backgroundOpt.removeAttribute('crossorigin'); + } else { + this.backgroundOpt.setAttribute('crossorigin', 'anonymous'); + } + + this.backgroundOpt.src = data; + this.set('backgroundOpt', src); + }, // When setting a new watermark "src", // this method looks through watermark options and finds the matching option. @@ -92,7 +138,7 @@ MEME.MemeModel = Backbone.Model.extend({ } else { this.watermark.setAttribute('crossorigin', 'anonymous'); } - + this.watermark.src = data; this.set('watermarkSrc', src); } diff --git a/source/javascripts/settings.js.erb b/source/javascripts/settings.js.erb index 97fddf34..75c59690 100644 --- a/source/javascripts/settings.js.erb +++ b/source/javascripts/settings.js.erb @@ -1,62 +1,114 @@ var MEME_SETTINGS = { - creditText: 'Source:', // Default "credits" text. + + aspectRatio: '970x545', + aspectRatioOpts: [ + {text: 'TN [970x545px]', value: '970x545', selected:"selected"}, + {text: 'Instagram [510x510px]', value: '510x510'}, + {text: 'Twitter [506x253px]', value: '506x253'} + ], + + backgroundOpt: '', + backgroundOpts: [ + {text: 'Rojo TN', value: '<%= asset_data_uri("backgrounds/tn-red.png") %>'}, + {text: 'Azul TN', value: '<%= asset_data_uri("backgrounds/tn-blue.png") %>'}, + {text: 'Hormigon', value: '<%= asset_data_uri("backgrounds/concrete.png") %>'}, + {text: 'Trama', value: '<%= asset_data_uri("backgrounds/tweed.png") %>'} + ], + + creditText: 'Fuente:', // Default "credits" text. creditSize: 12, // Font size for credit text. - downloadName: 'share', // The name of the downloaded image file (will have a ".png" extension added). + + downloadName: 'meme', // The name of the downloaded image file (will have a ".png" extension added). + + emojiImage: '<%= asset_data_uri("emojis/emojis-canvas.png") %>', + emojiPosition: 1, + emojiOpts: [ + {text: 'Izquierda abajo', value: 3, disabled:true}, + {text: 'Izquierda arriba', value: 0, disabled:true}, + {text: 'Derecha abajo', value: 2, disabled:true}, + {text: 'Derecha arriba', value: 1, selected:true} + ], + emojiSize: '100', + emojiMaxWidthRatio: 0.12, + fontColor: 'white', // Universal font color. // Universal font family for texts: // Note that you'll need to included quoted font names as you would in CSS, ie: '"Knockout 28 B"'. - fontFamily: 'Helvetica Neue', + fontFamily: 'museo-sans-900', // Font family options: set to empty array to disable font selector. // These options may also be formatted as {text:'Knockout', value:'"Knockout 28 B"'}. - fontFamilyOpts: ['Arial', 'Helvetica Neue', 'Comic Sans MS'], + fontFamilyOpts: [ + {text: 'Blokletters Viltstift', value: 'blokletters_viltstifviltstift'}, + {text: 'Impact', value: 'Impact'}, + {text: 'Museo Normal', value: 'museo-300'}, + {text: 'Museo Negrita', value: 'museo-700'}, + {text: 'Museo Sans Normal', value: 'museo-sans-300'}, + {text: 'Museo Sans Negrita', value: 'museo-sans-900', selected:true}, + ], + + //['Arial', 'Blokletters Viltstift', 'Comic Sans MS', 'Helvetica Neue', 'Museo Sans 300', 'Museo Sans 700',], // Font size of main headline: - fontSize: 24, + fontSize: 48, // Font size options: set to empty array to disable font-size selector. fontSizeOpts: [ - {text: 'Small text', value: 14}, - {text: 'Medium text', value: 24}, - {text: 'Large text', value: 36} + {text: 'Chica', value: 36}, + {text: 'Mediana', value: 48, selected:true}, + {text: 'Grande', value: 60} ], - headlineText: 'Write your own headline', // Default headline text. - height: 378, // Canvas rendering height. + headlineText: 'Escribe el titular', // Default headline text. + height: 545, // Canvas rendering height. imageScale: 1, // Background image scale. imageSrc: '', // Default background image path. MUST reside on host domain, or use base64 data. overlayAlpha: 0.5, // Opacity of image overlay. // Image overlay color, or blank ('') for no overlay: - overlayColor: '#000', + overlayColor: '', // Overlay color options: set to empty array to disable overlay options selector. - overlayColorOpts: ['#000', '#777', '#2980b9'], + //overlayColorOpts: ['#970018', '#e00038','#e84e1b','#ed7511','#f3c423','#9cc43f','#75932f','#007f76','#6ac0c2','#04b1ff','#0073a4','#2b406b','#6b2449','#d64892','#2d2d2d','#7b7b7b','#ffffff'], paddingRatio: 0.05, // Percentage of canvas width to use as edge padding. + ribbonOpts: [ + {text: 'Ahora', value:'rgba(224, 0, 0, .8)'}, + {text: 'Urgente', value:'rgba(224, 0, 0, .8)'}, + {text: 'En Vivo', value:'rgba(224, 0, 0, .8)'}, + {text: 'Exclusivo', value:'rgba(224, 0, 0, .8)'}, + {text: 'Última noticia', value:'rgba(243, 196, 35, .8)'}, + {text: 'Alerta meteorológica', value:'rgba(243, 196, 35, .8)'} + ], + // Text alignment: valid settings are "left", "center", and "right". textAlign: 'left', // Text alignment options: set to empty array to disable alignment picker. textAlignOpts: [ - {text: 'Align left', value: 'left'}, - {text: 'Align center', value: 'center'}, - {text: 'Align right', value: 'right'} + {text: 'Izquierda', value: 'left', selected:true}, + {text: 'Centro', value: 'center'}, + {text: 'Derecha', value: 'right'} ], textShadow: false, // Text shadow toggle. textShadowEdit: true, // Toggles text shadow control within the editor. + watermarkAlpha: 1, // Opacity of watermark image. - watermarkMaxWidthRatio: 0.25, // Maximum allowed width of watermark (percentage of total canvas width). + watermarkMaxWidthRatio: 0.15, // Maximum allowed width of watermark (percentage of total canvas width). // Path to the watermark image source, or blank for no watermark: - // Alternatively, use '<%= asset_data_uri("vox.png") %>' to populate the watermark with base64 data, avoiding Cross-Origin issues. - watermarkSrc: (localStorage && localStorage.getItem('meme_watermark')) || '<%= image_path("vox.png") %>', + // Alternatively, use to populate the watermark with base64 data, avoiding Cross-Origin issues. + watermarkSrc: (localStorage && localStorage.getItem('meme_watermark')) || '<%= image_path("watermarks/todonoticias.png") %>', // Watermark image options: set to empty array to disable watermark picker. // NOTE: only populate the "data" attributes with base64 data when concerned about Cross-Origin requests... // Otherwise, just leave "data" attributes blank and allow images to load from your server. watermarkOpts: [ - {text: 'Vox', value: '<%= image_path("vox.png") %>', data: '<%= asset_data_uri("vox.png") %>'}, - {text: 'The Verge', value: '<%= image_path("theverge.png") %>', data: ''} + {text: 'TN', value: '<%= asset_data_uri("watermarks/todonoticias.png") %>', selected:true}, + {text: 'Todapasion', value: '<%= asset_data_uri("watermarks/todapasion.png") %>'}, + {text: 'La viola', value: '<%= asset_data_uri("watermarks/la-viola.png") %>'}, + {text: 'Famosos', value: '<%= asset_data_uri("watermarks/famosos.png") %>'}, + {text: 'Tecno', value: '<%= asset_data_uri("watermarks/tecno.png") %>'}, + {text: 'TN y la Gente', value: '<%= asset_data_uri("watermarks/tn-y-la-gente.png") %>'} ], - width: 755 // Canvas rendering width. + width: 970 // Canvas rendering width. }; \ No newline at end of file diff --git a/source/javascripts/vendor/jquery-cookie.js b/source/javascripts/vendor/jquery-cookie.js new file mode 100755 index 00000000..5334b3f3 --- /dev/null +++ b/source/javascripts/vendor/jquery-cookie.js @@ -0,0 +1,77 @@ +(function ($) { + + var pluses = /\+/g; + + function raw(s) { + return s; + } + + function decoded(s) { + return decodeURIComponent(s.replace(pluses, ' ')); + } + + function converted(s) { + if (s.indexOf('"') === 0) { + s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\'); + } + try { + return config.json ? JSON.parse(s) : s; + } catch(er) {} + } + + var config = $.cookie = function (key, value, options) { + + // write + if (value !== undefined) { + options = $.extend({}, config.defaults, options); + + if (typeof options.expires === 'number') { + var days = options.expires, t = options.expires = new Date(); + t.setDate(t.getDate() + days); + } + + value = config.json ? JSON.stringify(value) : String(value); + + return (document.cookie = [ + config.raw ? key : encodeURIComponent(key), + '=', + config.raw ? value : encodeURIComponent(value), + options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE + options.path ? '; path=' + options.path : '', + options.domain ? '; domain=' + options.domain : '', + options.secure ? '; secure' : '' + ].join('')); + } + + var decode = config.raw ? raw : decoded; + var cookies = document.cookie.split('; '); + var result = key ? null : {}; + for (var i = 0, l = cookies.length; i < l; i++) { + var parts = cookies[i].split('='); + var name = decode(parts.shift()); + var cookie = decode(parts.join('=')); + + if (key && key === name) { + result = converted(cookie); + break; + } + + if (!key) { + result[name] = converted(cookie); + } + } + + return result; + }; + + config.defaults = {}; + + $.removeCookie = function (key, options) { + if ($.cookie(key) !== undefined) { + $.cookie(key, '', $.extend(options, { expires: -1 })); + return true; + } + return false; + }; + +})(jQuery); \ No newline at end of file diff --git a/source/javascripts/views/meme-canvas.js b/source/javascripts/views/meme-canvas.js index b5e0f0e1..79015319 100644 --- a/source/javascripts/views/meme-canvas.js +++ b/source/javascripts/views/meme-canvas.js @@ -12,7 +12,7 @@ MEME.MemeCanvasView = Backbone.View.extend({ if (canvas && canvas.getContext) { $container.html(canvas); this.canvas = canvas; - this.setDownload(); + //this.setDownload(); this.render(); } else { $container.html(this.$('noscript').html()); @@ -22,13 +22,6 @@ MEME.MemeCanvasView = Backbone.View.extend({ this.listenTo(this.model, 'change', this.render); }, - setDownload: function() { - var a = document.createElement('a'); - if (typeof a.download == 'undefined') { - this.$el.append('

Right-click button and select "Download Linked File..." to save image.

'); - } - }, - render: function() { // Return early if there is no valid canvas to render: if (!this.canvas) return; @@ -44,24 +37,45 @@ MEME.MemeCanvasView = Backbone.View.extend({ this.canvas.height = d.height; ctx.clearRect(0, 0, d.width, d.height); + function renderBackground(ctx) { + if (d.backgroundOpt == '') { + return; + } + + ctx.save(); + ctx.globalCompositeOperation="destination-over"; + //console.log(ctx.createPattern(m.backgroundOpt,"repeat")) + try { + ctx.fillStyle = ctx.createPattern(m.backgroundOpt,"repeat"); + ctx.fillRect(0, 0, d.width, d.height); + ctx.restore(); + + }catch(err) {} + + } + + function renderImage(ctx) { // Base height and width: var bh = m.background.height; var bw = m.background.width; - + if (bh && bw) { // Transformed height and width: // Set the base position if null var th = bh * d.imageScale; var tw = bw * d.imageScale; - var cx = d.backgroundPosition.x || d.width / 2; - var cy = d.backgroundPosition.y || d.height / 2; - - ctx.drawImage(m.background, 0, 0, bw, bh, cx-(tw/2), cy-(th/2), tw, th); + //Use position or center + d.backgroundPosition.x = d.backgroundPosition.x || (d.width / 2) - (bw / 2); + d.backgroundPosition.y = d.backgroundPosition.y || (d.height / 2) - (bh / 2); + + ctx.drawImage(m.background, 0, 0, bw, bh, d.backgroundPosition.x, d.backgroundPosition.y, tw, th); + } } function renderOverlay(ctx) { + if (d.overlayColor) { ctx.save(); ctx.globalAlpha = d.overlayAlpha; @@ -76,24 +90,26 @@ MEME.MemeCanvasView = Backbone.View.extend({ var maxWidth = Math.round(d.width * 0.75); var x = padding; var y = padding; + + + ctx.font = d.fontSize +'px '+ d.fontFamily; - ctx.font = d.fontSize +'pt '+ d.fontFamily; ctx.fillStyle = d.fontColor; ctx.textBaseline = 'top'; // Text shadow: if (d.textShadow) { - ctx.shadowColor = "#666"; - ctx.shadowOffsetX = -2; - ctx.shadowOffsetY = 1; - ctx.shadowBlur = 10; + ctx.shadowColor = "rgba(0,0,0, .5)"; + ctx.shadowOffsetX = 4; + ctx.shadowOffsetY = 4; + ctx.shadowBlur = 4; } // Text alignment: if (d.textAlign == 'center') { ctx.textAlign = 'center'; x = d.width / 2; - y = d.height - d.height / 1.5; + //y = d.height - d.height / 1.5; maxWidth = d.width - d.width / 3; } else if (d.textAlign == 'right' ) { @@ -120,7 +136,7 @@ MEME.MemeCanvasView = Backbone.View.extend({ line = testLine; } } - + ctx.fillText(line, x, y); ctx.shadowColor = 'transparent'; } @@ -129,7 +145,7 @@ MEME.MemeCanvasView = Backbone.View.extend({ ctx.textBaseline = 'bottom'; ctx.textAlign = 'left'; ctx.fillStyle = d.fontColor; - ctx.font = 'normal '+ d.creditSize +'pt '+ d.fontFamily; + ctx.font = 'normal '+ d.creditSize +'pt museo-300'; ctx.fillText(d.creditText, padding, d.height - padding); } @@ -146,7 +162,7 @@ MEME.MemeCanvasView = Backbone.View.extend({ // Constrain transformed height based on maximum allowed width: if (mw < bw) { th = bh * (mw / bw); - tw = mw; + tw = mw; } ctx.globalAlpha = d.watermarkAlpha; @@ -154,59 +170,149 @@ MEME.MemeCanvasView = Backbone.View.extend({ ctx.globalAlpha = 1; } } + + function renderRibbon(ctx){ + + if (d.ribbon.background == '' || d.aspectRatio != '970x545'){ + return; + } + + var h = 120; + + //Rectangulo + ctx.globalCompositeOperation="source-over"; + ctx.fillStyle=d.ribbon.background; + ctx.fillRect(0, ((d.height / 2) - (h / 2)), d.width, h); + + //Texto + if (d.ribbon.text == 'Alerta meteorológica') { + ctx.font = 'normal 60px museo-sans-900'; + } else { + ctx.font = 'normal 84px museo-sans-900'; + } + + ctx.textBaseline = 'middle'; + ctx.textAlign = 'center'; + ctx.fillStyle = d.fontColor; + + //sombra + ctx.shadowColor = "rgba(0,0,0, .5)"; + ctx.shadowOffsetX = 4; + ctx.shadowOffsetY = 4; + ctx.shadowBlur = 4; + + ctx.fillText(d.ribbon.text.toUpperCase(), d.width / 2, (d.height / 2) + 8 ); + ctx.shadowColor = 'transparent'; + } + + function renderEmoji(ctx){ + if (d.emoji == ''){ + return; + } + + var x = padding, + y = padding, + mw = d.width * d.emojiMaxWidthRatio,// Calculate watermark maximum width: + efinal = d.emojiSize; + + // Constrain transformed height based on maximum allowed width: + if (mw < d.emojiSize) { + efinal = d.emojiSize * (mw / d.emojiSize); + } + + switch (d.emojiPosition){ + case 0: + x = padding; + y = padding; + break; + case 1: + x = d.width - efinal - padding; + y = padding; + break; + case 2: + x = d.width - efinal - padding; + y = d.height - efinal - padding; + break; + case 3: + x = padding; + y = d.height - efinal - padding; + break; + } + + ctx.drawImage(m.emoji, + d.emojiSize * d.emoji, 0, d.emojiSize, d.emojiSize, + x, y, efinal, efinal); + + + } renderBackground(ctx); + renderImage(ctx); renderOverlay(ctx); renderHeadline(ctx); renderCredit(ctx); renderWatermark(ctx); - - var data = this.canvas.toDataURL(); //.replace('image/png', 'image/octet-stream'); - this.$('#meme-download').attr({ - 'href': data, - 'download': (d.downloadName || 'share') + '.png' - }); - + renderRibbon(ctx); + renderEmoji(ctx); + + this.model.canvas = this.canvas;//.toDataURL("image/jpeg", .80); //.replace('image/png', 'image/octet-stream'); // Enable drag cursor while canvas has artwork: this.canvas.style.cursor = this.model.background.width ? 'move' : 'default'; }, - + events: { - 'mousedown canvas': 'onDrag' + 'mousedown canvas': 'onDrag', + 'touchstart canvas': 'onDrag', }, // Performs drag-and-drop on the background image placement: onDrag: function(evt) { evt.preventDefault(); - + // Return early if there is no background image: if (!this.model.hasBackground()) return; - + // Configure drag settings: var model = this.model; var d = model.toJSON(); var iw = model.background.width * d.imageScale / 2; var ih = model.background.height * d.imageScale / 2; - var origin = {x: evt.clientX, y: evt.clientY}; + var origin = {x: evt.clientX || evt.originalEvent.touches[0].clientX, + y: evt.clientY || evt.originalEvent.touches[0].clientY}; var start = d.backgroundPosition; - start.x = start.x || d.width / 2; - start.y = start.y || d.height / 2; - + start.x = start.x || (d.width / 2) - (iw / 2); + start.y = start.y || (d.height / 2) - (ih / 2); + // Create update function with draggable constraints: function update(evt) { + evt.preventDefault(); + + if (evt.type == 'touchend') { + return; + } + + model.set('backgroundPosition', { + x: start.x - (origin.x - (evt.clientX || evt.originalEvent.touches[0].clientX) ), + y: start.y - (origin.y - (evt.clientY || evt.originalEvent.touches[0].clientY) ) + }); + + /* model.set('backgroundPosition', { x: Math.max(d.width-iw, Math.min(start.x - (origin.x - evt.clientX), iw)), y: Math.max(d.height-ih, Math.min(start.y - (origin.y - evt.clientY), ih)) }); + */ } + + //alert(evt.type) // Perform drag sequence: var $doc = MEME.$(document) - .on('mousemove.drag', update) - .on('mouseup.drag', function(evt) { - $doc.off('mouseup.drag mousemove.drag'); + .on('mousemove.drag touchmove.drag', update) + .on('mouseup.drag touchend.drag', function(evt) { + $doc.off('mouseup.drag mousemove.drag touchmove.drag touchend.drag'); update(evt); }); - } + } }); diff --git a/source/javascripts/views/meme-editor.js b/source/javascripts/views/meme-editor.js index b5792f8c..7ef40ba9 100644 --- a/source/javascripts/views/meme-editor.js +++ b/source/javascripts/views/meme-editor.js @@ -16,13 +16,40 @@ MEME.MemeEditorView = Backbone.View.extend({ function buildOptions(opts) { return _.reduce(opts, function(memo, opt) { - return memo += [''].join(''); + return memo += [''].join(''); }, ''); } if (d.textShadowEdit) { $('#text-shadow').parent().show(); } + + // Build aspect ratio options: + if (d.aspectRatioOpts && d.aspectRatioOpts.length) { + $('#aspect-ratio').append(buildOptions(d.aspectRatioOpts)).show(); + } + + // Build background options: + if (d.backgroundOpts && d.backgroundOpts.length) { + $('#background').append(buildOptions(d.backgroundOpts)).show(); + } + + // Build emojis options: + if (d.emojiOpts && d.emojiOpts.length) { + $('#emoji-align').append(buildOptions(d.emojiOpts)).show(); + } + + // Build ribbon options: + if (d.ribbonOpts && d.ribbonOpts.length) { + $('#ribbon').append(buildOptions(d.ribbonOpts)).show(); + } // Build text alignment options: if (d.textAlignOpts && d.textAlignOpts.length) { @@ -43,7 +70,7 @@ MEME.MemeEditorView = Backbone.View.extend({ if (d.watermarkOpts && d.watermarkOpts.length) { $('#watermark').append(buildOptions(d.watermarkOpts)).show(); } - + /* // Build overlay color options: if (d.overlayColorOpts && d.overlayColorOpts.length) { var overlayOpts = _.reduce(d.overlayColorOpts, function(memo, opt) { @@ -53,23 +80,64 @@ MEME.MemeEditorView = Backbone.View.extend({ $('#overlay').show().find('ul').append(overlayOpts); } + */ + + //this.onAspectRatio(); }, render: function() { var d = this.model.toJSON(); + + //Image + this.$('#image-scale').val(d.imageScale); + this.$('#aspect-ratio').val(d.aspectRatio); + this.$('#overlay').val(d.overlayColor); + this.$('#background').val(d.backgroundOpt); + + //Text this.$('#headline').val(d.headlineText); this.$('#credit').val(d.creditText); - this.$('#watermark').val(d.watermarkSrc); - this.$('#image-scale').val(d.imageScale); this.$('#font-size').val(d.fontSize); - this.$('#font-family').val(d.fontFamily); this.$('#text-align').val(d.textAlign); + this.$('#font-family').val(d.fontFamily); this.$('#text-shadow').prop('checked', d.textShadow); - this.$('#overlay').find('[value="'+d.overlayColor+'"]').prop('checked', true); + + //Extra + this.$('#watermark').val(d.watermarkSrc); + this.$('#ribbon').val(d.ribbon.background); + this.$('#emojis').val(d.emoji); + this.$('#emoji-align').val(d.emojiPosition); + + //this.$('#overlay').find('[value="'+d.overlayColor+'"]').prop('checked', true); + + /* + if (this.model.hasBackground()){ + $('#meme-download').removeClass('disabled') + } + */ + }, + + resetEmoji: function(pos){ + + this.$('#emoji-align').find('option[value="' + pos + '"]').attr('disabled', 'disabled'); + + if (this.model.attributes.emojiPosition == pos){ + + var p = this.$('#text-align').val() == 'right' ? 0 : 1, + m = this.model; + + setTimeout(function(){ + m.set('emojiPosition', p); + }, 10); + + this.$('#emoji-align').find('option').removeAttr('selected').end().val(p); + } + }, events: { 'input #headline': 'onHeadline', + 'keydown #headline':'onKeyAction', 'input #credit': 'onCredit', 'input #image-scale': 'onScale', 'change #font-size': 'onFontSize', @@ -78,20 +146,83 @@ MEME.MemeEditorView = Backbone.View.extend({ 'change #text-align': 'onTextAlign', 'change #text-shadow': 'onTextShadow', 'change [name="overlay"]': 'onOverlayColor', + 'dragover #dropzone': 'onZoneOver', - 'dragleave #dropzone': 'onZoneOut', - 'drop #dropzone': 'onZoneDrop' + 'drop #dropzone': 'onZoneDrop', + 'dragover canvas': 'onZoneOver', + 'drop canvas': 'onZoneDrop', + + 'change #aspect-ratio': 'onAspectRatio', + 'change #background': 'onBackground', + 'change #ribbon': 'onRibbon', + 'change [name="emoji"]': 'onEmojiImage', + 'change #emoji-align': 'onEmojiAlign', + 'change #image-upload': 'onFileSelect', + 'click #meme-download': 'onDownload', + + + }, onCredit: function() { - this.model.set('creditText', this.$('#credit').val()); + + var str = this.$('#credit').val().trim().replace(/(\r\n|\n|\r)/gm,""); + + if (str == ''){ + this.$('#emoji-align').find('option[value="3"]').removeAttr('disabled'); + } else { + this.resetEmoji(3); + } + + this.model.set('creditText', str); + }, + + onKeyAction: function(e) { + var code = e.keyCode || e.which; + if (code == 13) { + return false; + } + }, + + onDownload: function(e){ + /* + if (e.currentTarget.className == 'disabled'){ + return; + } + */ + var anchor = document.createElement('a'); + anchor.href = this.model.canvas.toDataURL("image/jpeg", .80); + anchor.target = '_blank'; + anchor.download = this.model.attributes.downloadName + '.jpg'; + + document.body.appendChild(anchor); + anchor.click(); + document.body.removeChild(anchor); }, onHeadline: function() { - this.model.set('headlineText', this.$('#headline').val()); + this.model.set('headlineText', this.$('#headline').val().trim().replace(/(\r\n|\n|\r)/gm,"") ); }, + onFileSelect: function(t) { + var e = t.target; + e && this.model.loadBackground(e.files[0]); + }, + onTextAlign: function() { + + this.$('#emoji-align').find('option[value="0"]').removeAttr('disabled').end() + .find('option[value="1"]').removeAttr('disabled'); + + switch (this.$('#text-align').val()){ + case 'left': + this.resetEmoji(0); + break; + case 'right': + this.resetEmoji(1); + break; + } + this.model.set('textAlign', this.$('#text-align').val()); }, @@ -108,12 +239,52 @@ MEME.MemeEditorView = Backbone.View.extend({ }, onWatermark: function() { + + if (this.$('#watermark').val() == ''){ + this.$('#emoji-align').find('option[value="2"]').removeAttr('disabled'); + } else { + this.resetEmoji(2); + } + this.model.set('watermarkSrc', this.$('#watermark').val()); if (localStorage) localStorage.setItem('meme_watermark', this.$('#watermark').val()); }, + + onAspectRatio: function() { + var wh = this.$('#aspect-ratio').val().split('x'); + + this.model.set({ + aspectRatio: this.$('#aspect-ratio').val(), + width:wh[0], + height:wh[1] + }); + + this.$('#meme-canvas').attr('class', 'ratio-' + this.$('#aspect-ratio').find(':selected').text().split(' ')[0].toLowerCase()); + }, + + onBackground: function() { + this.model.set('backgroundOpt', this.$('#background').val()); + if (localStorage) localStorage.setItem('meme_background', this.$('#background').val()); + }, + + onRibbon: function() { + this.model.set('ribbon', { + text: this.$('#ribbon').find(':selected').text(), + background: this.$('#ribbon').val() + }); + }, + + onEmojiImage: function(evt) { + this.model.set('emoji', this.$(evt.target).val()); + }, + + onEmojiAlign: function() { + this.model.set('emojiPosition', parseInt(this.$('#emoji-align').val(),10)); + }, onScale: function() { - this.model.set('imageScale', this.$('#image-scale').val()); + this.model.set({imageScale: this.$('#image-scale').val()}); + //this.model.set('imageScale', this.$('#image-scale').val()); }, onOverlayColor: function(evt) { diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb deleted file mode 100644 index 761ff3f4..00000000 --- a/source/layouts/layout.erb +++ /dev/null @@ -1,15 +0,0 @@ - - - - <%= partial "partials/head" %> - - -
-

Meme Generator

- <%= partial "partials/editor" %> - <%= partial "partials/canvas" %> -
- <%= javascript_include_tag 'application' %> - <%= javascript_include_tag 'settings' %> - - diff --git a/source/layouts/layout.haml b/source/layouts/layout.haml new file mode 100644 index 00000000..fdecc198 --- /dev/null +++ b/source/layouts/layout.haml @@ -0,0 +1,17 @@ +!!! 5 +%html.is-desktop + %head + + = partial "partials/head" + + %body{:class=>page_classes} + + = partial 'partials/header' + + %main#main.clearfix.wrapper{:role=>"main"} + + = partial "partials/editor" + + + = partial 'partials/footer' + = partial 'partials/scripts' diff --git a/source/partials/_canvas.html.erb b/source/partials/_canvas.html.erb deleted file mode 100644 index 0a08b150..00000000 --- a/source/partials/_canvas.html.erb +++ /dev/null @@ -1,8 +0,0 @@ -
-
- -
-

- Download Image -

-
diff --git a/source/partials/_editor.html.erb b/source/partials/_editor.html.erb deleted file mode 100644 index 03708220..00000000 --- a/source/partials/_editor.html.erb +++ /dev/null @@ -1,40 +0,0 @@ -
-
Drop Image Here
- -

- - -

- - - - - - - - -
- - -
- - - -

- - -
-

Overlay Color

- -
-
diff --git a/source/partials/_editor.html.haml b/source/partials/_editor.html.haml new file mode 100644 index 00000000..66ceb8b1 --- /dev/null +++ b/source/partials/_editor.html.haml @@ -0,0 +1,108 @@ +:ruby + overlay = ['#970018', '#e00038','#e84e1b','#ed7511','#f3c423','#9cc43f','#75932f','#007f76','#6ac0c2','#04b1ff','#0073a4','#2b406b','#6b2449','#d64892','#2d2d2d','#7b7b7b','#ffffff'] + +%form#meme-editor-view + + %fieldset.upload-image + .upload-wrapper.clearfix + .form-input.drop#dropzone + Arrastrar imagen + .form-input#explore.explore + %label.icon-arrow-up{:for => "image"} Subir imagen + %input#image-upload.image-upload{:name => "image", :type => "file", :accept=>"image/*"} + + #meme-canvas-view + #meme-canvas.ratio-tn + %noscript Lo sentimos, esta herramienta requiere un navegador moderno. Prueba Google Chrome. + + .options.clearfix + %fieldset + %h2 Imagen + + .form-input + %label.form-title{:for => "image-scale"} Ajustar tamaño + %input#image-scale{:max => "4", :min => ".01", :step => ".01", :type => "range", :value => "1"} + + .form-input + %label.form-title{:for => "aspect-ratio"} Proporciones + %select#aspect-ratio + + .items-group.form-input + .form-title Color + %ul#overlay.clearfix + %li + %input#overlay-none{:name => "overlay", :type => "radio", :value => "", :checked=>"checked"} + %label.items-group-none{:for=>'overlay-none'} Ninguno + - overlay.each_with_index do |element, index| + %li + %input{:id=>"overlay-#{index}", :name => "overlay", :type => "radio", :value =>element} + %label{:for=>"overlay-#{index}", :style=>"background: #{element}"}= element + + .form-input + %label.form-title{:for => "background"} Fondo + %select#background + %option{:value=>"", :selected=>"selected"} Ninguno + + %fieldset + %h2 Texto + + .form-input + %label.form-title{:for => "headline"} Títular + %textarea#headline{:name => "headline"} + + .form-input + %label.form-title{:for => "credit"} Fuente + %input#credit.text{:name => "credit", :type=>"text"} + + .form-input + %label.form-title{:for => "font-family"} Tipografía + %select#font-family + + .two-columns.clearfix + + .form-input + %label.form-title{:for => "text-align"} Alineación + %select#text-align + + .form-input + %label.form-title{:for => "font-size"} Tamaño + %select#font-size + + + .form-input.checkbox-group.clearfix + .checkbox-item + %input#text-shadow{:name => "shadow", :type => "checkbox"} + %label.form-title{:for => "text-shadow"} Sombra + + + + %fieldset + %h2 Extra + + .form-input + %label.form-title{:for => "watermark"} Logo + %select#watermark + %option{:value => ""} Ninguno + + .form-input + %label.form-title{:for => "ribbon"} Barra + %select#ribbon + %option{:value => "", :selected=>"selected"} Ninguna + + .items-group.form-input + .form-title Emojis + %ul#emojis.clearfix + %li + %input#emoji-none{:name => "emoji", :type => "radio", :value => "", :checked=>"checked"} + %label.items-group-none{:for=>'emoji-none'} Ninguno + - (0..16).each do |element| + %li + %input{:id=>"emoji-#{element}", :name => "emoji", :type => "radio", :value =>element} + %label{:for=>"emoji-#{element}", :class=>"emoji-#{element}"}= "Emoji #{element}" + + .form-input + %label.form-title{:for => "emojis-align"} Posición emojis + %select#emoji-align + + + #meme-download.disabled{:title=>"Descargar imagen"} Descargar imagen \ No newline at end of file diff --git a/source/partials/_footer.html.haml b/source/partials/_footer.html.haml new file mode 100755 index 00000000..be378870 --- /dev/null +++ b/source/partials/_footer.html.haml @@ -0,0 +1,11 @@ +%footer#footer.clearfix.wrapper + .legal + %p + %a{:href=>"http://blogs.tn.com.ar/dev/memes_al_poder_una_receta_para_generar_imagenes_que_quieren_ser_compartidas/", :title=>"¿Qué es esto?"} ¿Qué es esto? + | + %a{:href=>"https://github.com/dientuki/meme", :title=>"Código Fuente"} Código Fuente + | + %a{:href=>"https://github.com/voxmedia/meme", :title=>"Meme original de Vox Media"} Meme original + de Vox Media + | + %a{:href=>"http://tn.com.ar/terminos-y-condiciones", :title=>"Términos y Condiciones"} Términos y Condiciones diff --git a/source/partials/_head.html.erb b/source/partials/_head.html.erb deleted file mode 100644 index 88245d1b..00000000 --- a/source/partials/_head.html.erb +++ /dev/null @@ -1,7 +0,0 @@ - - - - -<%= current_page.data.title %> -<%= stylesheet_link_tag "main", {media: false} %> - diff --git a/source/partials/_head.html.haml b/source/partials/_head.html.haml new file mode 100644 index 00000000..4ef94b6c --- /dev/null +++ b/source/partials/_head.html.haml @@ -0,0 +1,17 @@ +%meta{:charset => "utf-8"} +%meta{:content => "width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, initial-scale=1.0", :name => "viewport"} + +/ Always force latest IE rendering engine or request Chrome Frame +%meta{:content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"} + +%title= current_page.data.title +%meta{:content => current_page.data.description, :name => "description"} + +%link{:href => "humans.txt", :rel => "author"} += stylesheet_link_tag "main", {media: false} + +:javascript + + if (window.navigator.userAgent.match(/tablet|android|iphone|ipad|ipod|windows phone|mobi|xoom|sch-i800|playbook|tablet|kindle|GoogleTV|SmartTV|Internet.TV|NetCast|NETTV|AppleTV|boxee|Kylo|Roku|DLNADOC|CE\-HTML/gi)){ + document.documentElement.className = 'is-touch'; + } \ No newline at end of file diff --git a/source/partials/_header.html.haml b/source/partials/_header.html.haml new file mode 100755 index 00000000..b3a4b818 --- /dev/null +++ b/source/partials/_header.html.haml @@ -0,0 +1,7 @@ +%header#header + .wrapper.clearfix.header-top + + %h1.header-title= current_page.data.title + + + = partial 'partials/sticky' \ No newline at end of file diff --git a/source/partials/_scripts.html.haml b/source/partials/_scripts.html.haml new file mode 100644 index 00000000..babdb0f5 --- /dev/null +++ b/source/partials/_scripts.html.haml @@ -0,0 +1,2 @@ += javascript_include_tag 'application' += javascript_include_tag 'settings' \ No newline at end of file diff --git a/source/partials/_sticky.html.haml b/source/partials/_sticky.html.haml new file mode 100755 index 00000000..c40b3f94 --- /dev/null +++ b/source/partials/_sticky.html.haml @@ -0,0 +1,117 @@ +%section#sticky + %h2.visuallyhidden Navegación secundaria + %ul#secondary-navigation.wrapper + %li.sticky-logo-tn + %a.title-item.logo-tn{:href => "/", :title => "Todo Noticias"} Todo Noticias + %li.has-submenu.sections-menu.touch-menu + %span.title-item Secciones + .sub-menu.hide-menu + .menu-content.clearfix.wrapper + .sub-menu-block.block-microsites + .block-title Categorías + %ul.block-list + %li + %a{:href => "/todapasion", :title => "Toda Pasión"} Toda Pasión + %li + %a{:href => "/laviola", :title => "La Viola"} La Viola + %li + %a{:href => "/famosos", :title => "Famosos"} Famosos + %li + %a{:href => "/tecno", :title => "Tecno"} Tecno + %li + %a{:href => "/tnylagente", :title => "TN y La Gente"} TN y La Gente + %li + %a{:href => "/videos", :title => "TN Videos"} TN Videos + .sub-menu-block + .block-title Secciones + %ul.block-list + %li + %a{:href => "/politica", :title=>"Política"} Política + %li + %a{:href => "/policiales",:title =>"Policiales"} Policiales + %li + %a{:href => "/espectaculos",:title => "Espectáculos"} Espectáculos + %li + %a{:href => "/internacional",:title => "Internacional"} Internacional + %li + %a{:href => "/sociedad",:title =>"Sociedad"} Sociedad + %li + %a{:href => "/secciones",:title =>"Más secciones"} Más Secciones + .sub-menu-block + .block-title Servicios + %ul.block-list + %li + %a{:href => "/clima",:title =>"Clima"} Clima + %li + %a{:href => "/transito",:title =>"Transito"} Tránsito + %li + %a{:href => "/loterias",:title =>"Quinielas"} Quinielas + %li + %a{:href => "/deportes/resultados",:title =>"Resultados deportivos"} Resultados Deportivos + %li + %a{:href => "/cine",:title =>"Cartelera de cine"} Cartelera de Cine + %li + %a{:href => "/teatro",:title =>"Cartelera de teatro"} Cartelera de Teatro + %li + %a{:href => "/feriados",:title =>"Feriados"} Feriados + %li + %a{:href => "http://interactivo.tn.com.ar/",:title =>"TN interactivo"} TN Interactivo + .sub-menu-block + .block-title Programas + %ul.block-list + %li + %a{:href => "/programas/a-dos-voces",:title =>"A Dos Voces"} A Dos Voces + %li + %a{:href => "/programas/agenda-nacional",:title =>"Agenda Nacional"} Agenda Nacional + %li + %a{:href => "/programas/argentina-para-armar",:title =>"Argentina para Armar"} Argentina para Armar + %li + %a{:href => "/programas/codigo-politico",:title =>"Código Polí­tico"} Código Polí­tico + %li + %a{:href => "/programas/colectivo-imaginario",:title =>"Colectivo Imaginario"} Colectivo Imaginario + %li + %a{:href => "/programas/desde-el-llano",:title =>"Desde el Llano"} Desde el Llano + %li + %a{:href => "/programas/208060",:title =>"Diarios de Motoneta"} Diarios de Motoneta + %li + %a{:href => "/programas",:title =>"Más Programas"} Más Programas + .sub-menu-block.no-right + .block-title Apps + %ul.block-list + %li + %a{:href => "https://play.google.com/store/apps/details?id=com.tn&feature=search_result#?t=W251bGwsMSwxLDEsImNvbS50biJd",:title =>"Android"} Android + %li + %a{:href => "https://itunes.apple.com/us/app/tn-hd/id391803698?mt=8",:title =>"iPad"} iPad + %li + %a{:href => "https://itunes.apple.com/us/app/tn/id391573980?mt=8",:title =>"iPhone"} iPhone + %li + %a{:href => "http://www.windowsphone.com/es-es/store/app/tn/f497841e-7d12-4fc4-8596-bcd9c9fa4cf1",:title =>"Windows"} Windows + %li + %a{:href => "http://appworld.blackberry.com/webstore/content/46472890/?lang=es&countrycode=AR",:title =>"Blackberry"} Blackberry + %li + %a{:href => "http://tn.com.ar/flip",:title =>"TN Flip"} TN Flip + %li + %a{:href => "http://flpbd.it/todonoticias",:title =>"Flipboard"} Flipboard + %li + %a{:href => "https://chrome.google.com/webstore/detail/tn-todo-noticias/mfdljeahedcobnjhjkabpeafoicpkcgm",:title =>"Chrome"} Chrome + + %li.live + %a.title-item{:href => "/envivo/24hs", :title=>"En Vivo"} En Vivo + + %li.item-right.first-child.login-item + %a#user-image.title-item{:data=>{:url=> "ajax/user_image"}, :href => "http://tn.com.ar/user", :title => "Conectate a TN y la Gente"} + %img.small-avatar{:alt=> "usuario", :src=>"images/usertnylgt.svg"} + %span.hidden usuario + + %li.item-right.has-submenu.search + %span.title-item{:title => "Buscar en TN"} Buscar + .sub-menu + %form.wrapper{:action=> "/buscar", :method=> "post"} + %input.input-text{:maxlength=> "100", :name=> "keys", :placeholder=> "Buscar", :required=> "required", :type=> "input"} + %input.submit.button.red{:type=> "submit", :value=> "Buscar"} + + %li.item-right.traffic + %a.title-item{:href => "/transito", :title => "Tránsito"} Tránsito + + %li.item-right.weather-icon + %a.title-item{:href => "/clima", :title => "Clima"} Clima \ No newline at end of file diff --git a/source/stylesheets/_fonts.scss b/source/stylesheets/_fonts.scss index 8b137891..3db5d8fe 100644 --- a/source/stylesheets/_fonts.scss +++ b/source/stylesheets/_fonts.scss @@ -1 +1,83 @@ +/* Canvas fonts */ +@font-face { + font-family: 'blokletters_viltstifviltstift'; + src: font-url('../fonts/blokletters-viltstift.eot'); + src: font-url('../fonts/blokletters-viltstift.eot?#iefix') format('embedded-opentype'), + font-url('../fonts/blokletters-viltstift.woff') format('woff'), + font-url('../fonts/blokletters-viltstift.ttf') format('truetype'), + font-url('../fonts/blokletters-viltstift.svg#blokletters_viltstifviltstift') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Impact'; + src: font-url('../fonts/Impact.eot'); + src: font-url('../fonts/Impact.eot?#iefix') format('embedded-opentype'), + font-url('../fonts/Impact.woff') format('woff'), + font-url('../fonts/Impact.ttf') format('truetype'), + font-url('../fonts/Impact.svg#Impact') format('svg'); + font-weight: normal; + font-style: normal; + +} + +@font-face { + font-family: 'museo-300'; + src: font-url('../fonts/museo-300.eot'); + src: font-url('../fonts/museo-300.eot?#iefix') format('embedded-opentype'), + font-url('../fonts/museo-300.woff') format('woff'), + font-url('../fonts/museo-300.ttf') format('truetype'), + font-url('../fonts/museo-300.svg#museo300') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'museo-700'; + src: font-url('../fonts/museo-700.eot'); + src: font-url('../fonts/museo-700.eot?#iefix') format('embedded-opentype'), + font-url('../fonts/museo-700.woff') format('woff'), + font-url('../fonts/museo-700.ttf') format('truetype'), + font-url('../fonts/museo-700.svg#museo700') format('svg'); + font-weight: normal; + font-style: normal; + +} + +@font-face { + font-family: 'museo-sans-300'; + src: font-url('../fonts/museosans-300.eot'); + src: font-url('../fonts/museosans-300.eot?#iefix') format("embedded-opentype"), + font-url('../fonts/museosans-300.woff') format("woff"), + font-url('../fonts/museosans-300.ttf') format("truetype"), + font-url('../fonts/museosans-300.svg#museo_sans300') format("svg"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'museo-sans-900'; + src: font-url('../fonts/museosans-900.eot'); + src: font-url('../fonts/museosans-900.eot?#iefix') format('embedded-opentype'), + font-url('../fonts/museosans-900.woff') format('woff'), + font-url('../fonts/museosans-900.ttf') format('truetype'), + font-url('../fonts/museosans-900.svg#museo_sans900') format('svg'); + font-weight: normal; + font-style: normal; + +} + +/* Base fonts */ + +@font-face { + font-family: 'museo-sans-700'; + src: font-url('../fonts/museosans-700.eot'); + src: font-url('../fonts/museosans-700.eot?#iefix') format("embedded-opentype"), + font-url('../fonts/museosans-700.woff') format("woff"), + font-url('../fonts/museosans-700.ttf') format("truetype"), + font-url('../fonts/museosans-700.svg#museo_sans700') format("svg"); + font-weight: bold; + font-style: normal; +} diff --git a/source/stylesheets/_globals.scss b/source/stylesheets/_globals.scss index ad0d33cd..c42fb1b8 100644 --- a/source/stylesheets/_globals.scss +++ b/source/stylesheets/_globals.scss @@ -1,10 +1,10 @@ // global declarations +/* * { -moz-box-sizing: border-box; box-sizing: border-box; } - body { background-color: #fff; color: $default-text-color; @@ -33,8 +33,8 @@ body.noselect { .cf:before, .cf:after { - content: " "; /* 1 */ - display: table; /* 2 */ + content: " "; + display: table; } .cf:after { clear: both; @@ -42,3 +42,4 @@ body.noselect { .cf { *zoom: 1; } +*/ \ No newline at end of file diff --git a/source/stylesheets/_vars.scss b/source/stylesheets/_vars.scss index eccf1162..01dc6fe2 100644 --- a/source/stylesheets/_vars.scss +++ b/source/stylesheets/_vars.scss @@ -22,3 +22,5 @@ $sidebar-width-narrow : 160px; $default-font-size : 16px; $default-line-height : (25px/$default-font-size); + +$sprite: image-url("images/sprite-meme.png") no-repeat; \ No newline at end of file diff --git a/source/stylesheets/main.scss b/source/stylesheets/main.scss index 2d94e22c..fae2f1ef 100644 --- a/source/stylesheets/main.scss +++ b/source/stylesheets/main.scss @@ -1,11 +1,14 @@ @charset "utf-8"; @import 'compass'; +@import 'tn/mixin'; @import 'vars'; @import 'fonts'; @import 'globals'; -@import 'modules/m-meme'; -@import 'modules/m-canvas'; -@import 'modules/m-editor'; -@import 'modules/forms'; + +@import 'tn/normalize'; +@import 'tn/base'; +@import 'tn/style'; +@import 'tn/mediaqueries-base'; +@import 'tn/mediaqueries-style'; \ No newline at end of file diff --git a/source/stylesheets/modules/_forms.scss b/source/stylesheets/modules/_forms.scss deleted file mode 100644 index c510b12d..00000000 --- a/source/stylesheets/modules/_forms.scss +++ /dev/null @@ -1,49 +0,0 @@ -form { - h2 { - font-size: 16px; - font-weight: 700; - margin: 0 0 0.25em; - } - - select, - textarea, - input[type="text"], - input[type="range"], - .checkbox-group { - margin-bottom: 1.5em; - width: 100%; - } - - .checkbox-group label { - font-size: 0.8em; - font-weight: normal; - margin-bottom: 0; - } - - textarea, - input[type="text"] { - border: 1px solid #efefef; - outline: 0; - padding: 6px 5px; - - &:focus { - border: 1px solid lighten($theme-color, 40); - } - } - - textarea { - height: 6em; - } - - select, - option { - border: 1px solid #cfcfcf; - border-radius: 0; - } - - fieldset { - border: none; - margin: 0 auto; - padding: 0; - } -} diff --git a/source/stylesheets/modules/_m-canvas.scss b/source/stylesheets/modules/_m-canvas.scss deleted file mode 100644 index b06b1136..00000000 --- a/source/stylesheets/modules/_m-canvas.scss +++ /dev/null @@ -1,38 +0,0 @@ -$m: '.m-canvas'; - -#{$m} { - @media screen and (min-width: 700px) { - width: 70%; - } - - #{$m}__canvas { - background: #fcfcfc; - - canvas { - max-width: 100% !important; - } - } - - #{$m}__download a { - background: $theme-color; - border: none; - border-radius: 5px; - color: #fff; - display: block; - font-weight: 700; - line-height: 50px; - text-align: center; - text-decoration: none; - @include transition (background-color ease-in-out 0.3s); - - &:hover { - background: lighten($theme-color, 25); - } - } - - #{$m}__download-note { - color: #777; - font-size: 12px; - font-style: italic; - } -} diff --git a/source/stylesheets/modules/_m-editor.scss b/source/stylesheets/modules/_m-editor.scss deleted file mode 100644 index 8c8f0a0b..00000000 --- a/source/stylesheets/modules/_m-editor.scss +++ /dev/null @@ -1,122 +0,0 @@ -$m: '.m-editor'; - -#{$m} { - margin-bottom: 30px; - - @media screen and (min-width: 700px) { - @include box-sizing(border-box); - float: right; - padding-left: 20px; - width: 30%; - } - - .dropzone { - background-color: #fcfcfc; - border: 2px dashed #cfcfcf; - border-radius: 10px; - color: #6a6a69; - display: block; - font-size: 18px; - font-weight: 700; - height: 80px; - line-height: 80px; - margin-bottom: 1em; - text-align: center; - vertical-align: middle; - - &.pulse { - -webkit-animation: pulsate 0.3s infinite; - -webkit-animation-direction: alternate; - -webkit-animation-timing-function: ease-in-out; - -moz-animation: pulsate 0.3s infinite; - -moz-animation-direction: alternate; - -moz-animation-timing-function: ease-in-out; - -o-animation: pulsate 0.3s infinite; - -o-animation-direction: alternate; - -o-animation-timing-function: ease-in-out; - animation: pulsate 0.3s infinite; - animation-direction: alternate; - animation-timing-function: ease-in-out; - } - } - - .text-align, - .font-size, - .font-family, - .text-shadow, - .watermark { - display: none; - } - - #{$m}__overlay { - display: none; - - // Mini-clearfix: - &:before, - &:after { - content: " "; - display: table; - } - &:after { - clear: both; - } - - ul { - list-style: none; - margin: 0; - padding: 0; - - label { - display: block; - float: left; - height: 20px; - line-height: 20px; - } - } - } - - #{$m}__swatch { - @include appearance(none); - background-color: #000; - border-radius: 3px; - cursor: pointer; - display: block; - height: 100%; - margin: 0; - margin-left: 1em; - outline: none; - text-align: center; - width: 30px; - - &:checked:before { - content: 'x'; - color: white; - font-size: 18px; - vertical-align: center; - } - } -} - -@mixin pulsate-keyframe() { - 0% { - background-color: #fcfcfc; - border-color: #cfcfcf; - } - 100% { - background-color: lighten($theme-color, 40); - border-color: $theme-color; - } -} - -@-webkit-keyframes pulsate { - @include pulsate-keyframe(); -} -@-moz-keyframes pulsate { - @include pulsate-keyframe(); -} -@-o-keyframes pulsate { - @include pulsate-keyframe(); -} -@keyframes pulsate { - @include pulsate-keyframe(); -} diff --git a/source/stylesheets/modules/_m-meme.scss b/source/stylesheets/modules/_m-meme.scss deleted file mode 100644 index 591fd523..00000000 --- a/source/stylesheets/modules/_m-meme.scss +++ /dev/null @@ -1,21 +0,0 @@ -$m: '.m-meme'; - -body { - margin: 0; - padding: 0 20px; -} - -#{$m} { - margin: 20px auto 50px; - max-width: 990px; - - // Mini-clearfix: - &:before, - &:after { - content: " "; - display: table; - } - &:after { - clear: both; - } -} \ No newline at end of file diff --git a/source/stylesheets/tn/_base.scss b/source/stylesheets/tn/_base.scss new file mode 100755 index 00000000..80fe91bf --- /dev/null +++ b/source/stylesheets/tn/_base.scss @@ -0,0 +1,583 @@ +body { + /*background: url("../images/backgrounds/tweed.png");*/ + background: image-url("images/backgrounds/tweed.png"); + + position:relative; +} + +.wrapper { + width: (1180%/1280*100); + /*width: 1130px;*/ + margin: 0 auto; + position: relative; +} + + +#footer { + .legal { + color: #fff; + text-align: center; + font-size: .8em; + line-height: .8em; + a { + color: rgba(255, 255, 255, .5); + text-decoration: none; + } + } +} + + + +#header { + position: relative; + padding-top: (48em/16); + margin-bottom: (5em/16); + height: (69em/16); + + &.fixed { + #sticky{ + position:fixed; + } + } + + .header-title { + text-transform: uppercase; + color: #fff; + font-family: museo-sans-700; + font-size: (36rem/16); + position: relative; + z-index: 1; + display: table; + margin: 0 auto; + padding-right: (197rem/16); + + &:before{ + position: absolute; + content: ""; + height: 39px; + width: 185px; + top:(4rem/16); + left: (117rem/16); + background: $sprite 0 bottom; + } + } + + .header-link { + color: #8CD13F; + text-decoration: none; + display:block; + } + + .header-top { + margin-top: (20em/16); + text-align: center; + + .header-subtitle { + color: #0099DB; + float: left; + font-family: museo-sans-700; + font-size: 2.1875em; + height: 1.4em; + line-height: 1.4em; + text-transform: uppercase; + margin-left: (10em/16); + position: relative; + z-index: 1; + } + .link-section { + color: #73CAEC; + float: left; + font-family: museo-sans-700; + font-size: 2.1875em; + height: 1.4em; + line-height: 1.4em; + text-transform: uppercase; + margin-left: (10em/16); + text-decoration: none; + padding-left: .5em; + position: relative; + + &:before{ + position: absolute; + content: ""; + background:#73CAEC; + width: 2px; + left: 0; + top: 3px; + z-index: 999; + height: 1.2em; + } + &:hover{ + color: #0099DB; + } + + } + + } + /* + .shares { + position:absolute; + right:0; + top:(11.5em/16); + line-height: 2em; + padding-left: 34px; + z-index:999; + + &:before { + $h:21px; + background: $sprite -94px -91px; + width: 27px; + height: $h; + content: ""; + position:absolute; + left:0; + top:50%; + margin-top: ($h/-2); + } + + &:hover, + &.hover { + .share { + display: block; + } + } + + .text { + color: #fff; + } + + .share { + background: none repeat scroll 0 0 #FFFFFF; + border: 1px solid #C5C5C5; + box-shadow: 0 0 3px 0 #A9A9A9; + font-size: (14em/16); + padding: 0 0.5em; + position: absolute; + display: none; + width: 8em; + z-index: 200; + right: 0; + + @include border_radius((3em/18)); + + .share-item { + text-align: left; + font-family: 'museo-sans-700', arial, sans-serif; + width: 100%; + border: 1px solid #ddd; + box-shadow: 0 1px 2px 0 #A9A9A9; + color: #4C4C4C; + cursor: pointer; + padding: .2em 0; + margin: .3em 0; + line-height: 1.5em; + text-indent: (32em/16); + position: relative; + + + @include gradient_v(#ffffff, #ededed); + @include border_radius((5em/18)); + + &:hover { + color: black !important; + @include gradient_v(#ffffff, #dfdfdf); + } + + &:before { + background: $sprite; + position:absolute; + display: block; + content: ""; + top: 7px; + left: 7px; + } + + &.tw:before { + $h:12px; + background-position: -74px -22px; + width: 15px; + height: $h; + } + &.fb:before { + $h:14px; + background-position: 0 -60px; + width: 7px; + height: $h; + } + &.gp:before { + $h:13px; + background-position: -74px -40px; + width: 15px; + height: $h; + } + + } + } + } + */ +} + +#main,#header{ + &.wrapper { + width: 100%; + max-width: (970rem/16); + margin: 0 auto; + position: relative; + } +} + +#main { + margin-bottom: (30em/16); + position: relative; +} + +#sticky { + background: #2D2D2D; + height: (48em/16); + width: 100%; + z-index: 999; + position: fixed; + top: 0; + @include box_shadow(0 2px 5px 0 #000000); +} + +#secondary-navigation { + font-size: (13em/16); + color: white; + text-transform: uppercase; + font-weight: bold; + font-family: 'museo-sans-700'; + position:static; + + .menu-content { + .sub-menu-block { + float: left; + margin: 0; + padding: 0 1%; + position: relative; + width: 19%; + line-height: (28em/13); + border-right: #797979 solid 1px; + height: (265em/13); + + .block-list { + a { + color: #BBBBBB; + display: block; + overflow: hidden; + padding: 0 0 0 0.53846em; + text-overflow: ellipsis; + text-transform: uppercase; + white-space: nowrap; + text-decoration: none; + + &:hover { + background: none repeat scroll 0 0 padding-box #2D2D2D; + border-radius: 5px; + } + } + } + + &:before { + background: none repeat scroll 0 0 #484848; + content: ""; + height: 100%; + position: absolute; + right: 0; + top: 0; + width: 1px; + } + + &.no-right { + border: none; + &:before { + background: none; + } + + } + + &.block-microsites { + border-right: #242424 solid 1px; + width: 8.25em; + + .block-list { + a { + color: white; + } + } + } + + .block-title { + padding-left: 0.5em; + font-size: (14em/13); + line-height: (33em/13);; + } + + } + } + + .search { + .sub-menu { + overflow: hidden; + padding: 1.875em 0; + + form { + position: relative; + width: 75%; + + .input-text { + font-family: 'museo-sans-700', arial, sans-serif; + float: left; + width: 80% !important; + height: 1.75em; + padding: 3px 10px; + border: 1px #555 solid; + font-size: 1em; + @include border_radius(5px); + @include background_clip(padding-box); + @include gradient_v(#e8e8e8, #ffffff); + } + + .button { + position: absolute; + &.red { + font-family: 'museo-sans-700', arial, sans-serif; + text-transform: uppercase; + border: 1px #df0202 solid; + color: white !important; + width: 17%; + height: 2.23077em; + padding: 0 1%; + margin-left: 1%; + line-height: 2.30769em; + text-shadow: 1px 1px 1px #930101; + background: #e00102; + @include box_shadow(0 3px 3px rgba(black, .5)); + @include gradient_v(#e00102, #c00202); + @include border_radius(3px); + &:hover { + border: 1px #8c0101 solid; + background: #c00202; + @include gradient_v(#c00202, #8c0101); + } + } + } + + } + + } + + } + + > li { + float: left; + height: (48em/13); + line-height: (48em/13); + display: block; + margin-right: (20em/13); + } + + .item-right { + float: right; + margin: 0; + border-left: 1px solid #585858; + border-right: 1px solid #000000; + + .title-item { + padding: 0 (9em/13); + } + + &.first-child { + border-right: none; + } + + &:last-child { + border-left: none; + } + } + + .title-item { + display: block; + position: relative; + height: 100%; + color: white; + text-decoration: none; + } + + .logo-tn { + text-indent: -999em; + overflow: hidden; + width: 80px; + + &:before { + $h: 45px; + $w: 76px; + width: $w; + height: $h; + background: $sprite 0 0; + content: ""; + position: absolute; + top:53%; + margin-top: ($h/-2); + left:5px; + } + } + + .sections-menu .title-item { + text-indent: (30em/13); + + &:before { + $h: 16px; + content: ""; + background: $sprite -47px -46px; + width: 19px; + height: $h; + position: absolute; + top: 50%; + margin-top: ($h/-2); + left: 0; + } + } + + .live { + width: (110em/13); + + @include gradient_v(#e00102, #c00202); + + .title-item { + text-indent: (40em/13); + + &:before { + $h: 23px; + content: ""; + background: $sprite -78px -46px; + width: 22px; + height: $h; + position: absolute; + top: 50%; + margin-top: ($h/-2); + left: (9em/13); + } + + } + } + + .login-item { + $w: (26em/13); + + .title-item { + width: $w; + padding-right: 0; + } + + .small-avatar { + width: $w; + height: $w; + top: 50%; + margin-top: ($w/-2); + position: absolute; + } + } + + .search, + .traffic { + .title-item { + text-indent: -999em; + + &:before { + content: ""; + background: $sprite; + top: 50%; + position: absolute; + left: (8em/13); + } + } + } + + .search .title-item { + $h: 21px; + $w: 20px; + width: $w; + + &:before { + width: $w; + height: $h; + background-position: -101px -46px; + margin-top: ($h/-2); + } + } + + .traffic .title-item { + $h: 25px; + $w: 14px; + width: $w; + + &:before { + width: $w; + height: $h; + background-position: -31px -46px; + margin-top: ($h/-2); + } + } + + .weather-icon { + .title-item { + padding-left: (43em/13); + + &:before { + $h: 28px; + content: ""; + background: $sprite -0px -46px; + width: 31px; + height: $h; + margin-top: ($h/-2); + top: 50%; + position: absolute; + left: (6em/13); + } + } + } + + .has-submenu { + &:hover { + .sub-menu { + display: block; + } + + .title-item:after { + border-bottom: 12px solid #535353; + border-left: 12px solid #2d2d2d; + border-right: 12px solid #2d2d2d; + bottom: 0; + content: " "; + display: block; + height: 0; + left: 50%; + margin: 0 0 0 -12px; + position: absolute; + width: 0; + z-index: 99999; + } + } + + .sub-menu { + display: none; + } + + .title-item { + cursor: pointer; + + &:after{ + display: none; + } + } + } + + .sub-menu { + background: red; + position: absolute; + left: 0; + width: 100%; + background: #535353; + } +} \ No newline at end of file diff --git a/source/stylesheets/tn/_mediaqueries-base.scss b/source/stylesheets/tn/_mediaqueries-base.scss new file mode 100755 index 00000000..638667cf --- /dev/null +++ b/source/stylesheets/tn/_mediaqueries-base.scss @@ -0,0 +1,240 @@ +/* +Media queries styles, This is Hell on Earth +*/ +@import 'tn/mixin'; +/* + Banner layout +*/ + +@media (max-width: 727px){ + body { + padding:0; + } + +} + +/* + 320 +*/ +@media (max-width: 767px) { + + + #header { + margin-bottom: (20em/16); + height: auto; + + /* + &:after{ + background: rgba(0, 0, 0, .5); + z-index: 0; + height: (93em/16); + content:""; + position: absolute; + width: 100%; + top:0; + } + */ + + + .header-title { + right: 1em; + position: fixed; + top: 0; + z-index: 9999; + color: #ffffff !important; + } + + .header-top { + padding: 0; + margin: 0 auto; + + .header-subtitle{ + margin-left: 0; + font-size: (30em/16); + } + } + + + .shares { + width: 100%; + position: static; + margin: (6em/12.8) 0 (17em/12.8) 0; + padding: 0; + @include show(); + + &:before { + @include hide(); + } + + .text { + @include hide(); + } + + .share { + @include show(); + width: 100%; + position: relative; + border: none; + padding:0; + @include box_shadow(none); + font-size: (18em/16); + background:none; + + .share-item { + float: left; + width: 32%; + margin:0 2% 0 0; + border: none; + text-align: center; + color: #ffffff; + text-indent: 0; + + background: none; + @include box_shadow(none); + + &:before { + @include hide(); + } + + &:last-child { + margin-right: 0; + } + + &.tw { + background: #00ADFA; + } + &.fb { + background: #1757BC; + } + &.gp { + background: #E00102; + } + } + } + } + } + + + + .wrapper { + width: (290%/320*100); + /*width: 290px;*/ + } + + #secondary-navigation { + li { + @include hide(); + } + + .sticky-logo-tn { + @include show(); + } + } + +} +/* +@media (min-width: 728px) and (max-width: 767px){ + #header{ + .header-title{ + position:absolute; + top:(-44em/28); + right: (-7em/28); + } + + &.fixed { + .header-title{ + position:fixed; + top:0; + right: 1em; + } + } + } +} +*/ +/* +768 layout +*/ + + + +/* 1024 */ + + +@media (min-width: 1000px) and (max-width: 1279px) { + + .wrapper { + width: (970%/1025*100); + /*width: 970px;*/ + } + +} + +@media (min-width: 768px) and (max-width: 860px) { + .networks #header .header-top .header-subtitle{ + @include hide(); + } +} + +@media (min-width: 768px) and (max-width: 1023px) { + + #header { + .shares { + height: (32em/16); + .text { + @include hide(); + } + + .share { + top: (32em/16); + } + } + } +} + + +@media (max-width: 390px) { + + + #footer { + .legal { + margin: 0 20px 20px; + line-height: 1.3em; + } + } + + +} + +@media (min-width: 391px) and (max-width: 689px) { + + + #footer { + .legal { + margin: 0 20px 20px; + line-height: 1.3em; + } + } + +} + + +@media (min-width: 960px) and (max-width: 1220px) { + + .wrapper { + width: (1230%/1280*100); + } + + + +} + +/* + BIG Layout +*/ + +@media (min-width: 1560px) { + body { + font-size: 1.3em; + } + +} diff --git a/source/stylesheets/tn/_mediaqueries-style.scss b/source/stylesheets/tn/_mediaqueries-style.scss new file mode 100755 index 00000000..e87d43f4 --- /dev/null +++ b/source/stylesheets/tn/_mediaqueries-style.scss @@ -0,0 +1,210 @@ +/* +Media queries styles, This is Hell on Earth +*/ + +@media (max-width: 969px) { + #meme-download, + .upload-wrapper, + .options { + margin-left: (5rem/16); + margin-right: (5rem/16); + } +} + +/* One column */ + +@media (max-width: 649px) { + + .options { + + fieldset { + width: 100%; + height: auto; + margin: (20rem/16) 0 0 0; + + &:first-child { + margin-top:0; + } + } + + #overlay { + label, + input { + width: (32rem/16); + right: 0; + margin: 0 auto; + } + } + + .items-group { + font-size: 0; + + li { + font-size: 1rem; + float:none; + display:inline-block; + text-align:center; + + width: (100%/6); + margin-left: 0; + + label:after { + right: 1px; + margin:0 auto; + } + } + } + + } +} + +/* overlay */ +@media (min-width: 460px) and (max-width: 649px) { + #overlay { + li { + width: (100%/9); + } + } +} + +@media (max-width: 499px) { + + .is-desktop { + .upload-image{ + + .drop, + .explore .icon-arrow-up { + font-size: 0; + + &:before{ + top:1rem; + } + } + } + + } + +} + +@media (max-width: 449px) { + #header .header-title{ + padding-right: 0; + + &:before { + display:none; + visibility: hidden; + } + } +} + +/* Two column */ +@media (min-width: 650px) and (max-width: 969px) { + .options { + + fieldset { + &:nth-child(1), + &:nth-child(2) { + width: 49%; + + } + &:nth-child(2) { + margin-left: 2%; + } + &:nth-child(3) { + margin: (20rem/16) 0 0 0; + width: 100%; + height: auto; + } + + } + + } + + #overlay { + font-size: 0; + + li { + font-size: 1rem; + float:none; + display:inline-block; + width: (100%/6); + margin-left: 0; + text-align: center; + } + + label, + input { + width: (32rem/16); + right: 0; + margin: 0 auto; + } + } + + + #emojis{ + font-size: 0; + li { + font-size: 1rem; + float:none; + display:inline-block; + text-align:center; + + width: (100%/9); + margin-left: 0; + + label:after { + right: 1px; + margin:0 auto; + } + + /* + margin-left: (68%/837*100); + + &:first-child, + &:nth-child(10) { + margin-left:0; + } + + &:nth-child(-n+9){ + margin-top:0; + } + */ + } + } + +} + +/* Three column */ +@media (min-width: 970px) { + +} + + + +/* Fix ratios */ +@media (max-width: 969px) { + #meme-canvas.ratio-tn { + width: 100%; + } + #meme-canvas-view { + overflow: hidden; + } +} +@media (max-width: 509px) { + #meme-canvas.ratio-instagram { + width: 100%; + padding-bottom: 100%; + } + #meme-canvas-view { + overflow: hidden; + } +} +@media (max-width: 505px) { + #meme-canvas.ratio-twitter { + width: 100%; + padding-bottom: (253%/506*100); + } + #meme-canvas-view { + overflow: hidden; + } +} \ No newline at end of file diff --git a/source/stylesheets/tn/_mixin.scss b/source/stylesheets/tn/_mixin.scss new file mode 100755 index 00000000..2fec909d --- /dev/null +++ b/source/stylesheets/tn/_mixin.scss @@ -0,0 +1,121 @@ +@mixin hide() { + display: none; + visibility: hidden; +} + +@mixin show() { + display: block !important; + visibility: visible !important; + opacity: 1 !important; +} + +@mixin ff($name, $file){ + font-family: $name; + src: url('../fonts/' + $file + '-eot.eot'); + src: url('../fonts/' + $file + '-eot.eot?#iefix') format('embedded-opentype'), + url('../fonts/' + $file + '-woff.woff') format('woff'), + url('../fonts/' + $file + '-ttf.ttf') format('truetype'), + url('../fonts/' + $file + '-svg.svg#' + $name) format('svg'); +} + +@mixin background_clip($value) { + -webkit-background-clip: $value; + -moz-background-clip: $value; + background-clip: $value; +} + +@mixin border_radius($radius: 10px) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + border-radius: $radius; +} + +@mixin box_shadow($value...) { + -webkit-box-shadow: $value; + -moz-box-shadow: $value; + -o-box-shadow: $value; + box-shadow: $value; +} + +@mixin text_shadow($value...) { + -webkit-text-shadow: $value; + -moz-text-shadow: $value; + text-shadow: $value; +} + +@mixin outline($color) { + -webkit-text-shadow: 0 -1px 0 $color, 1px 0 0 $color, 0 1px 0 $color, -1px 0 0 $color; + -moz-text-shadow: 0 -1px 0 $color, 1px 0 0 $color, 0 1px 0 $color, -1px 0 0 $color; + text-shadow: 0 -1px 1px $color, 1px 0 1px $color, 0 1px 1px $color, -1px 0 1px $color; +} + +@mixin box_sizing($value) { + -webkit-box-sizing: $value; /* Safari/Chrome, other WebKit */ + -moz-box-sizing: $value; /* Firefox, other Gecko */ + box-sizing: $value; /* Opera/IE 8+ */ +} + +@mixin gradient_v($top: black, $bottom: white) { + background: $top; /* Old browsers */ + background: -moz-linear-gradient(top, $top 0%, $bottom 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $top), color-stop(100%, $bottom)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, $top 0%, $bottom 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, $top 0%, $bottom 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, $top 0%, $bottom 100%); /* IE10+ */ + background: linear-gradient(top, $top 0%, $bottom 100%); /* W3C */ +} + +@mixin gradient_h($top: black, $bottom: white) { + background: $top; /* Old browsers */ + background: -moz-linear-gradient(left, $top 0%, $bottom 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, right top, color-stop(0%, $top), color-stop(100%, $bottom)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, $top 0%, $bottom 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(left, $top 0%, $bottom 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(left, $top 0%, $bottom 100%); /* IE10+ */ + background: linear-gradient(left, $top 0%, $bottom 100%); /* W3C */ +} + +@mixin transition($value...) { + -moz-transition: $value; + -webkit-transition: $value; + -o-transition: $value; + transition-property: $value; +} + +@mixin transform($value) { + -moz-transform: $value; + -webkit-transform: $value; + transform: $value; +} + +@mixin small_article(){ + padding-bottom: (20em/16); + + figure { + padding-bottom: (163%/290*100); + } + + .dropline { + font-size: (13em/16); + word-spacing: (3em/12); + } + + .entry-title { + font-size: (22em/16); + margin-top: (10em/22); + } +} + +@mixin author_watermark(){ + .watermark { + width: (50em/16); + padding-bottom: (50em/16); + height: 0; + /*float: left;*/ + margin-right: (3em/16); + background-size: 64%; + position: absolute; + left: 0; + top: 0; + } +} \ No newline at end of file diff --git a/source/stylesheets/tn/_normalize.scss b/source/stylesheets/tn/_normalize.scss new file mode 100755 index 00000000..87fdd2ec --- /dev/null +++ b/source/stylesheets/tn/_normalize.scss @@ -0,0 +1,617 @@ +/*! normalize.css v1.1.3 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. + */ + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. + * Known issue: no IE 6 support. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using + * `em` units. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-size: 100%; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Address `font-family` inconsistency between `textarea` and other form + * elements. + */ + +html, +button, +input, +select, +textarea { + font-family: sans-serif; +} + +/** + * Address margins handled incorrectly in IE 6/7. + */ + +body { + margin:0; + padding: 0; + font-family: 'museo-sans-300', arial, sans-serif; + overflow-x:hidden; + position: relative; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/** + * Address font sizes and margins set differently in IE 6/7. + * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, + * and Chrome. + */ + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + font-size: 1em; +} + +article { + word-wrap:break-word; +} + + +/** + * Address styling not present in IE 7/8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +blockquote { + margin: 0; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + * Known issue: no IE 6/7 normalization. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +iframe { + border:none; +} + +/** + * Address styling not present in IE 6/7/8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address margins set differently in IE 6/7. + */ + +p, +pre { + margin: 1em 0; +} + +/** + * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/** + * Address CSS quotes not supported in IE 6/7. + */ + +q { + quotes: none; +} + +/** + * Address `quotes` property not supported in Safari 4. + */ + +q:before, +q:after { + content: ''; + content: none; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Lists + ========================================================================== */ + +/** + * Address margins set differently in IE 6/7. + */ + +dl, +menu, +ol, +ul { + margin: 0; + padding: 0; + list-style: none; +} + +dd { + margin: 0; +} + +/** + * Correct list images handled incorrectly in IE 7. + */ + +nav ul, +nav ol { + list-style: none; + list-style-image: none; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/** + * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. + * 2. Improve image quality when scaled in IE 7. + */ + +img { + border: 0; /* 1 */ + -ms-interpolation-mode: bicubic; /* 2 */ +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/** + * Correct margin displayed oddly in IE 6/7. + */ + +form { + margin: 0; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct color not being inherited in IE 6/7/8/9. + * 2. Correct text not wrapping in Firefox 3. + * 3. Correct alignment displayed oddly in IE 6/7. + */ + +legend { + border: 0; /* 1 */ + padding: 0; + white-space: normal; /* 2 */ + *margin-left: -7px; /* 3 */ +} + +/** + * 1. Correct font size not being inherited in all browsers. + * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, + * and Chrome. + * 3. Improve appearance and consistency in all browsers. + */ + +button, +input, +select, +textarea { + font-size: 100%; /* 1 */ + margin: 0; /* 2 */ + vertical-align: baseline; /* 3 */ + *vertical-align: middle; /* 3 */ +} + +/** + * Address Firefox 3+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + * 4. Remove inner spacing in IE 7 without affecting normal text inputs. + * Known issue: inner spacing remains in IE 6. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ + *overflow: visible; /* 4 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to content-box in IE 8/9. + * 2. Remove excess padding in IE 8/9. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Remove inner padding and border in Firefox 3+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 6/7/8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */ + +html, +button, +input, +select, +textarea { + color: #222; +} + +html { + line-height: 1.4; +} + +::-moz-selection { + background: #b3d4fc; + text-shadow: none; +} + +::selection { + background: #b3d4fc; + text-shadow: none; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +audio, +canvas, +img, +video { + vertical-align: middle; +} + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +textarea { + resize: vertical; +} + +.browsehappy { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + +/* ========================================================================== + Helper classes + ========================================================================== */ + +.hidden { + display: none !important; + visibility: hidden; +} + +.visuallyhidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; +} + +.invisible { + visibility: hidden; +} + +.clearfix:before, +.clearfix:after { + content: " "; + display: table; +} + +.clearfix:after { + clear: both; +} + +.clearfix { + *zoom: 1; +} \ No newline at end of file diff --git a/source/stylesheets/tn/_style.scss b/source/stylesheets/tn/_style.scss new file mode 100755 index 00000000..245f7d50 --- /dev/null +++ b/source/stylesheets/tn/_style.scss @@ -0,0 +1,495 @@ +@import 'mixin'; + +@mixin emoji($i){ + background-position: (-30px*$i) 0; +} + +body { + overflow-x: hidden; +} + +canvas { + display: block; + background: black; + position: absolute; + width: 100% !important; + height: 100% !important; + left: 0; + top: 0; + +} + +.form-input { + input:focus, + textarea:focus { + -webkit-user-modify: read-write-plaintext-only; + } +} + + +.is-touch { + #dropzone { + display:none; + visibility: hidden; + } + + .upload-image { + .form-input { + width: 100%; + } + + .explore { + @include border_radius((5rem/16)); + } + } +} + +.upload-image { + .upload-wrapper { + margin-bottom: (36rem/16); + } + + .form-input { + float: left; + width: 50%; + text-transform: uppercase; + font-size: (18rem/16); + color: #999999; + line-height: (65rem/16); + position: relative; + text-align: center; + @include box_sizing(border-box); + } + + label { + height: 100%; + display: table; + margin: 0 auto; + } + + .image-upload { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + } + + .drop { + border: 3px dotted #999; + border-right: none; + position: relative; + + @include border_radius(5px 0 0 5px); + + &:before{ + content: ""; + position: relative; + width: 38px; + height: 31px; + background: $sprite -125px 0; + top:(8rem/16); + left: (-4rem/16); + display: inline-block; + } + + } + .explore { + border: 3px solid #999; + @include border_radius(0 (5rem/16) (5rem/16) 0); + + .icon-arrow-up{ + display: block; + width: 100%; + height: 100%; + + &:before{ + content: ""; + position: relative; + width: 22px; + height: 31px; + background: $sprite -99px 0; + top:(8rem/16); + left: (-8rem/16); + display: inline-block; + } + + } + } + +} + +#meme-canvas-view { + background: #1A1A1A; + position: relative; + + + &:before { + background: none repeat scroll 0 0 #1a1a1a; + content: ""; + height: 100%; + left: 100%; + position: absolute; + top: 0; + width: 100%; + } + &:after { + background: none repeat scroll 0 0 #1a1a1a; + content: ""; + height: 100%; + right: 100%; + position: absolute; + top: 0; + width: 100%; + } + +} + +#meme-canvas { + position: relative; + width: 100%; + height: 0; + margin: 0 auto; + @include transition(all .25s linear); + + &.ratio-tn { + width: (970rem/16); + padding-bottom: (545%/970*100); + } + &.ratio-instagram { + width: (510rem/16); + padding-bottom: (510rem/16); + } + &.ratio-twitter { + width: (506rem/16); + padding-bottom: (253rem/16); + } + +} + +.options { + margin-top: (20rem/16); + + fieldset { + width: (310rem/16); + float: left; + height: (405rem/16); + @include border_radius(10px); + border: solid 1px #808080; + position: relative; + padding: (10rem/16); + margin-left: (20%/970*100); + box-sizing: border-box; + + &:first-child { + margin-left:0; + } + } + + h2 { + text-transform: uppercase; + color: #ffffff; + text-align: center; + position: relative; + font-weight: 300; + margin-bottom: (10rem/16); + + &:before { + background:#808080; + bottom: 0; + content: ""; + height: 1px; + left: 1%; + position: absolute; + width: 98%; + } + } + + .form-title{ + text-transform: uppercase; + font-size: (14rem/16); + color: #ffffff; + display: block; + } + /* + .two-columns { + margin-top: (10rem/16); + + .form-input{ + margin-top:0; + } + } + */ + .form-input{ + margin-top: (10rem/16); + + input[type='range'], + input.text, + select, + textarea{ + width: 100%; + border: none; + resize: none; + @include box_sizing(border-box); + } + + input.text, + select, + textarea{ + border: none; + background: #ffffff; + font-size: (14rem/16); + padding: (10rem/16); + @include border_radius(5px); + } + + input.text, + select{ + padding: 0 (10rem/16); + height: (40rem/16); + line-height: (40rem/16); + } + } + + .items-group{ + li { + float:left; + width: (32rem/16); + height: (32rem/16); + position: relative; + cursor: pointer; + margin-top: (10rem/16); + margin-left: (19.2%/288*100); + + &:nth-child(-n+6){ + margin-top:0; + } + &:nth-child(6n+1) { + margin-left: 0; + } + } + label { + width: 100%; + height: 100%; + text-indent: -999em; + overflow: hidden; + display: block; + position: relative; + cursor: pointer; + + &:before{ + position: absolute; + width: 100%; + height: 100%; + border:solid (1rem/16) white; + left: 0; + top: 0; + content:""; + box-sizing: border-box; + z-index: 9; + + display:none; + visibility: hidden; + } + } + input { + position: absolute; + width: 100%; + height: 100%; + opacity: 0; + z-index: 2; + top:0; + left: 0; + cursor: pointer; + + &:checked ~ label:before { + display:block; + visibility: visible; + border-color:white !important; + } + } + + .items-group-none:before { + content:"X"; + color:#999; + line-height: (32rem/16); + text-align: center; + border-color:#999 !important; + text-indent: 0; + display:block; + visibility: visible; + } + + } + + .two-columns{ + + .form-input{ + float: left; + width: 48%; + + &:last-child{ + float: right; + } + } + } + + .checkbox-item{ + position: relative; + height: (30rem/16); + float:left; + cursor: pointer; + + label{ + display:block; + margin-left: (35rem/16); + height: (30rem/16); + line-height: (30rem/16); + cursor: pointer; + + &:after, + &:before { + content: ""; + position: absolute; + } + + &:before{ + width: (30rem/16); + height: (30rem/16); + background: #ffffff; + top: 0; + left: 0; + @include border_radius(5px); + } + + &:after { + $h:10px; + background: $sprite -131px -46px; + width: 12px; + height: $h; + top:50%; + left:(9rem/16); + margin-top: ($h/-2); + + @include hide(); + } + } + + + input{ + + width: (30rem/16); + height: (30rem/16); + left: 0; + position: absolute; + top: 0; + z-index: 2; + opacity: 0; + cursor: pointer; + + &:checked ~ label:after { + display:block; + visibility: visible; + } + } + + + + + + } +} + +#meme-download{ + background: #000000; + @include border_radius(10px); + color: #ffffff; + text-transform: uppercase; + font-size: (18rem/16); + text-align: center; + margin-top: (20rem/16); + line-height: (70rem/16); + cursor: pointer; + + &:before{ + content: ""; + position: relative; + width: 21px; + height: 31px; + background: $sprite -77px 0; + top:(8rem/16); + left: (-8rem/16); + display: inline-block; + } +} + + +#emojis { + label:after { + background: image-url("images/emojis/emojis-editor.png") left top no-repeat; + width: 30px; + height: 30px; + content:""; + position: absolute; + left: 1px; + top:1px; + + } + + .items-group-none:after { + background: none; + } + + .emoji-0:after{ + @include emoji(0); + } + .emoji-1:after{ + @include emoji(1); + } + .emoji-2:after{ + @include emoji(2); + } + .emoji-3:after{ + @include emoji(3); + } + .emoji-4:after{ + @include emoji(4); + } + .emoji-5:after{ + @include emoji(5); + } + .emoji-6:after{ + @include emoji(6); + } + .emoji-7:after{ + @include emoji(7); + } + .emoji-8:after{ + @include emoji(8); + } + .emoji-9:after{ + @include emoji(9); + } + .emoji-10:after{ + @include emoji(10); + } + .emoji-11:after{ + @include emoji(11); + } + .emoji-12:after{ + @include emoji(12); + } + .emoji-13:after{ + @include emoji(13); + } + .emoji-14:after{ + @include emoji(14); + } + .emoji-15:after{ + @include emoji(15); + } + .emoji-16:after{ + @include emoji(16); + } +}