diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000000..106995cb90 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +.idea +.DS_Store +.sass-cache +_site +node_modules +_drafts diff --git a/404.html b/404.html new file mode 100644 index 0000000000..ad85682741 --- /dev/null +++ b/404.html @@ -0,0 +1,19 @@ +--- +layout: default +permalink: /404.html +--- + + + +
+ 404 - Page not found +

Page not found :(

+

I'm sorry. We couldn't find the page you are looking for.

+
diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000000..f5371803ff --- /dev/null +++ b/Gemfile @@ -0,0 +1,5 @@ +source 'https://rubygems.org' + +gem 'rouge' +gem 'jekyll' +gem 'jemoji' diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 0000000000..d019c0cdae --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,78 @@ +GEM + remote: https://rubygems.org/ + specs: + activesupport (4.2.9) + i18n (~> 0.7) + minitest (~> 5.1) + thread_safe (~> 0.3, >= 0.3.4) + tzinfo (~> 1.1) + addressable (2.5.1) + public_suffix (~> 2.0, >= 2.0.2) + colorator (1.1.0) + ffi (1.9.18) + forwardable-extended (2.6.0) + gemoji (3.0.0) + html-pipeline (2.6.0) + activesupport (>= 2) + nokogiri (>= 1.4) + i18n (0.8.6) + jekyll (3.5.1) + addressable (~> 2.4) + colorator (~> 1.0) + jekyll-sass-converter (~> 1.0) + jekyll-watch (~> 1.1) + kramdown (~> 1.3) + liquid (~> 4.0) + mercenary (~> 0.3.3) + pathutil (~> 0.9) + rouge (~> 1.7) + safe_yaml (~> 1.0) + jekyll-redirect-from (0.12.1) + jekyll (~> 3.3) + jekyll-sass-converter (1.5.0) + sass (~> 3.4) + jekyll-watch (1.5.0) + listen (~> 3.0, < 3.1) + jemoji (0.8.0) + activesupport (~> 4.0) + gemoji (~> 3.0) + html-pipeline (~> 2.2) + jekyll (>= 3.0) + kramdown (1.14.0) + liquid (4.0.0) + listen (3.0.8) + rb-fsevent (~> 0.9, >= 0.9.4) + rb-inotify (~> 0.9, >= 0.9.7) + mercenary (0.3.6) + mini_portile2 (2.2.0) + minitest (5.10.3) + nokogiri (1.8.0) + mini_portile2 (~> 2.2.0) + pathutil (0.14.0) + forwardable-extended (~> 2.6) + public_suffix (2.0.5) + rb-fsevent (0.10.2) + rb-inotify (0.9.10) + ffi (>= 0.5.0, < 2) + rouge (1.11.1) + safe_yaml (1.0.4) + sass (3.5.1) + sass-listen (~> 4.0.0) + sass-listen (4.0.0) + rb-fsevent (~> 0.9, >= 0.9.4) + rb-inotify (~> 0.9, >= 0.9.7) + thread_safe (0.3.6) + tzinfo (1.2.3) + thread_safe (~> 0.1) + +PLATFORMS + ruby + +DEPENDENCIES + jekyll + jekyll-redirect-from + jemoji + rouge + +BUNDLED WITH + 1.15.3 diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000000..239d35d7f9 --- /dev/null +++ b/LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2017 Thiago Rossener +http://www.rossener.com/ + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000000..76c9772881 --- /dev/null +++ b/_config.yml @@ -0,0 +1,43 @@ +# Site Settings +title: Your Blog Title +email: youremail@xyz.com +description: Some text about your blog. +baseurl: "" +url: "https://www.your-blog-url.com" +google_analytics: "UA-XXXXXXXX-X" + +# User Settings +username: Your Name +user_description: Some text about you. +disqus_username: disqus_username + +# Social Media +# Remove the item if you don't need it +github_username: github_username +facebook_username: facebook_username +twitter_username: twitter_username +instagram_username: instagram_username +linkedin_username: linkedin_username +medium_username: medium_username + +# Build settings +markdown: kramdown +highlighter: rouge +permalink: /:title/ + +# Plugins +gems: + - jemoji + +# Links to include in menu navigation +# For external links add external: true +links: + - title: Home + url: / + - title: About + url: /about/ + - title: Contact + url: /contact/ + +# Exclude my node related stuff +exclude: ['package.json', 'src', 'node_modules'] diff --git a/_includes/author.html b/_includes/author.html new file mode 100644 index 0000000000..f55fa23660 --- /dev/null +++ b/_includes/author.html @@ -0,0 +1,42 @@ + diff --git a/_includes/comments.html b/_includes/comments.html new file mode 100644 index 0000000000..d1c9a75339 --- /dev/null +++ b/_includes/comments.html @@ -0,0 +1,26 @@ +
+

Comments

+
+
+ diff --git a/_includes/date.html b/_includes/date.html new file mode 100644 index 0000000000..9168477d5e --- /dev/null +++ b/_includes/date.html @@ -0,0 +1,4 @@ +{% assign months = "January,February,Mark,April,May,June,July,August,September,October,November,December" | split: "," %} +{% assign month_number = include.date | date: "%-m" | minus: 1 %} + +{{ months[month_number] }} {{ include.date | date: "%-d" }}, {{ include.date | date: "%Y" }} diff --git a/_includes/footer.html b/_includes/footer.html new file mode 100644 index 0000000000..adf571b439 --- /dev/null +++ b/_includes/footer.html @@ -0,0 +1,43 @@ + + +{% include stats.html %} diff --git a/_includes/head.html b/_includes/head.html new file mode 100644 index 0000000000..56b2182b78 --- /dev/null +++ b/_includes/head.html @@ -0,0 +1,67 @@ + + + + + + {% if page.title %}{{ page.title }} | {{ site.username }}{% else %}{{ site.title }}{% endif %} + + + + + + + + {% if page.image %} + + {% else %} + + {% endif %} + + + + + {% if page.image %} + + {% else %} + + {% endif %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_includes/header.html b/_includes/header.html new file mode 100644 index 0000000000..034927a379 --- /dev/null +++ b/_includes/header.html @@ -0,0 +1,18 @@ +
+ + + + + + +

+ + {{ site.title }} + +

+
+ +
+ +{% include menu.html %} +{% include search.html %} diff --git a/_includes/menu.html b/_includes/menu.html new file mode 100644 index 0000000000..2db6c57d65 --- /dev/null +++ b/_includes/menu.html @@ -0,0 +1,11 @@ + diff --git a/_includes/minutes-to-read.html b/_includes/minutes-to-read.html new file mode 100644 index 0000000000..6284af2a55 --- /dev/null +++ b/_includes/minutes-to-read.html @@ -0,0 +1,9 @@ +{% assign words = content | number_of_words %} + +{% if words < 360 %} + {% assign totalMinutes = 1 %} +{% else %} + {% assign totalMinutes = words | divided_by:180 %} +{% endif %} + +{% assign minutesText = totalMinutes | append: ' min to read' %} diff --git a/_includes/new-post-tag.html b/_includes/new-post-tag.html new file mode 100644 index 0000000000..26e850ca15 --- /dev/null +++ b/_includes/new-post-tag.html @@ -0,0 +1,7 @@ +{% capture weekago %}{{ "now" | date: "%s" | minus: 604800 }}{% endcapture %} +{% capture posttime %}{{ include.date | date: "%s" }}{% endcapture %} +{% if posttime > weekago %} +{% assign isnewpost = true %} +{% else %} +{% assign isnewpost = false %} +{% endif %} diff --git a/_includes/search.html b/_includes/search.html new file mode 100644 index 0000000000..59f73243f5 --- /dev/null +++ b/_includes/search.html @@ -0,0 +1,7 @@ +
+
+ + +
    +
    +
    diff --git a/_includes/share.html b/_includes/share.html new file mode 100644 index 0000000000..45e6fec5f7 --- /dev/null +++ b/_includes/share.html @@ -0,0 +1,15 @@ +
    +

    Share

    + + + + + + + + + +
    diff --git a/_includes/stats.html b/_includes/stats.html new file mode 100644 index 0000000000..eb2a692a56 --- /dev/null +++ b/_includes/stats.html @@ -0,0 +1,11 @@ + + diff --git a/_includes/svg-icons.html b/_includes/svg-icons.html new file mode 100644 index 0000000000..987c4edc11 --- /dev/null +++ b/_includes/svg-icons.html @@ -0,0 +1 @@ + diff --git a/_layouts/compress.html b/_layouts/compress.html new file mode 100644 index 0000000000..ec8c03aa2c --- /dev/null +++ b/_layouts/compress.html @@ -0,0 +1,8 @@ +--- +# Jekyll layout that compresses HTML +# v1.4.0 +# http://jch.penibelst.de/ +# © 2014–2015 Anatol Broder +# MIT License +--- +{% if site.compress_html.ignore.envs contains jekyll.environment %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd p rt rp optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% assign _pre_befores = _content | split: "" %}{% case _pres.size %}{% when 2 %}{% capture _content %}{{ _content }}{{ _pres.last | split: " " | join: " " }}{% endcapture %}{% when 1 %}{% capture _content %}{{ _content }}{{ _pres.last | split: " " | join: " " }}{% endcapture %}{% endcase %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% assign _comment_befores = _content | split: _comments.first %}{% for _comment_before in _comment_befores %}{% assign _comment_content = _comment_before | split: _comments.last | first %}{% if _comment_content %}{% capture _comment %}{{ _comments.first }}{{ _comment_content }}{{ _comments.last }}{% endcapture %}{% assign _content = _content | remove: _comment %}{% endif %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " ;; ;" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %}
    Step Bytes
    raw {{ content | size }}{% if _profile_endings %}
    endings {{ _profile_endings }}{% endif %}{% if _profile_collapse %}
    collapse {{ _profile_collapse }}{% endif %}{% if _profile_comments %}
    comments {{ _profile_comments }}{% endif %}{% if _profile_clippings %}
    clippings {{ _profile_clippings }}{% endif %}
    {% endif %}{% endif %} diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000000..819610481c --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,17 @@ +--- +layout: compress +--- + + + + {% include head.html %} + + {% include svg-icons.html %} + {% include header.html %} +
    + {{ content }} +
    + {% include footer.html %} + + + diff --git a/_layouts/main.html b/_layouts/main.html new file mode 100644 index 0000000000..a11e77ee40 --- /dev/null +++ b/_layouts/main.html @@ -0,0 +1,17 @@ +--- +layout: compress +--- + + + + {% include head.html %} + + {% include svg-icons.html %} + {% include header.html %} +
    + {{ content }} +
    + {% include footer.html %} + + + diff --git a/_layouts/minimal.html b/_layouts/minimal.html new file mode 100644 index 0000000000..3d84b4084e --- /dev/null +++ b/_layouts/minimal.html @@ -0,0 +1,20 @@ +--- +layout: compress +--- + + + + {% include head.html %} + + {% include svg-icons.html %} + {% include header.html %} +
    + +
    + {{ content }} +
    + + {% include footer.html %} +
    + + diff --git a/_layouts/page.html b/_layouts/page.html new file mode 100644 index 0000000000..0329e26434 --- /dev/null +++ b/_layouts/page.html @@ -0,0 +1,11 @@ +--- +layout: default +--- + +
    + +
    + {{ content }} +
    + +
    diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 0000000000..9fbe1c0a69 --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,46 @@ + + + {% include head.html %} + + {% include minutes-to-read.html %} + {% include svg-icons.html %} + {% include header.html %} +
    + +
    +

    + {% if page.date %} + + + {% endif %} + + {{ minutesText }} +

    +

    {{ page.title }}

    +

    {{ page.description }}

    + + {% if page.image %} + Imagem de capa + {% endif %} + + {{ content }} +
    + +
    + + +
    + + +
    +
    + + {% include share.html %} + {% include author.html %} + {% include comments.html %} + {% include footer.html %} +
    + + diff --git a/_posts/2012-10-10-seja-bem-vindo.md b/_posts/2012-10-10-seja-bem-vindo.md new file mode 100644 index 0000000000..6751bac9fb --- /dev/null +++ b/_posts/2012-10-10-seja-bem-vindo.md @@ -0,0 +1,27 @@ +--- +layout: post +title: Seja bem-vindo +description: Criei esse blog para compartilhar. +image: 'http://res.cloudinary.com/dm7h7e8xj/image/upload/c_scale,w_760/v1504807239/morpheus_xdzgg1.jpg' +category: 'blog' +twitter_text: 'Seja bem-vindo ao meu blog.' +introduction: 'Mensagem de boas-vindas.' +--- + +Eaí? + +Seja bem-vindo. Nesse blog eu quero compartilhar com você parte da minha +experiência com programação, a qual eu tenho obtido durante essa longa jornada +chamada... **vida**. + +Muitos dos códigos que eu desenvolvo no meu dia-a-dia, todas as dificuldades e +soluções que eu encontro no caminho acabam ficando perdidas nas areias do +tempo. Eu venho aqui pra te dizer uma coisa: não-mais. + +A minha ideia é colocar aqui tudo aquilo que eu suei o meu sangue pra pesquisar, +pegar e fazer, e de alguma maneira, me deu experiência. Eu quero passar isso pra +VOCÊ. + +Espero que você curta o conteúdo. + +— Thiago. diff --git a/_posts/2015-05-08-diga-ola-para-o-trcurrencytextfield-um-componente-com-valor.md b/_posts/2015-05-08-diga-ola-para-o-trcurrencytextfield-um-componente-com-valor.md new file mode 100644 index 0000000000..07f9571188 --- /dev/null +++ b/_posts/2015-05-08-diga-ola-para-o-trcurrencytextfield-um-componente-com-valor.md @@ -0,0 +1,146 @@ +--- +layout: post +title: 'Diga olá para o TRCurrencyTextField: Um componente com valor.' +description: Um componente iOS para te ajudar a criar campos com formatação de moeda. +image: 'http://res.cloudinary.com/dm7h7e8xj/image/upload/c_scale,w_760/v1504807365/now-you-see-me_wtv89q.jpg' +category: 'mobile' +twitter_text: 'Um componente para formatar moeda no iOS.' +introduction: 'Criei esse componente para me ajudar a formatar campos monetários no iOS.' +tags: + - componente + - ios + - cocoapods +--- +Está vivo. + +![Imagem de um médico maluco gritando Está Vivo!](//i1310.photobucket.com/albums/s647/rossener/its_alive_zpsqiuydofr.jpg) + +Depois de alguns dias codando e testando essa belezinha, eu finalmente posso dizer: valeu a pena. Se você está procurando por um componente como um campo de texto onde você pode apertar um dígito e magicamente formatá-lo para QUALQUER moeda do mundo, você pode deixar cair seu queixo agora. Você-o-encontrou. + +Graças ao Peter Boni, cujo trabalho me inspirou a fazer isso, eu posso apresentar a vocês, o TRCurrencyTextField. + +TRCurrencyTextField é um componente de código aberto facilmente encontrado no GitHub, e facilmente utilizável com CocoaPods. + +O que isso faz? Eu posso explicar... ou melhor, eu posso mostrar pra você em 12 passos. Aqui. E agora. Bora começar. + +## 1. Valor vazio formatado para zero + +Os exemplos aqui estão todos em BRL, ou seja, em reais. Porém, se você segurar as pontas aí por mais uns minutos eu te digo como vamos mudar isso. + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img01_zpsinzq5ss5.png) + +Então, nós começamos aqui, no zero. Como você pode ver, esse é o valor quando não temos nenhum valor. O queee? Exatamente. O componente não deixa você apagar o texto. + +> Rossener, mas eu quero apagar o texto ou meu iPhone vai explodir em mil pedaços. + +Espero que você tenha uma vassoura meu amigo. + +## 2. Dígitos vêm da direita + +Você aperta a tecla 1 no teclado numérico, o texto muda pra R$ 0,01 + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img02_zpsrn6cxq1j.png) + +## 3. E continuam vindo da direita + +Então você aperta a tecla 2 no teclado numérico e o texto vira R$ 0,12 + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img03_zpsedto9ab7.png) + +## 4. Você não precisa apertar a "vírgula" + +Você aperta a tecla 3 no teclado numérico e o texto muda pra R$ 1,23 + +Em reais, vírgula é o separador de decimal, e nós não precisamos apertar ela. Acredite em mim, ela já aparece lá. + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img04_zpsxpr0tzyx.png) + +## 5. Você não precisa apertar o "ponto" + +Como ponto é o separador de grupo em reais, quando você aperta 1-2-3-4-5-6, nós temos R$ 1.234,56 + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img05_zps42syiq7u.png) + +## 6. Deletar-desloca-dígitos + +Você deleta. Essa coisa desloca. + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img06_zpsgxq0ldgl.png) + +## 7. Edite de qualquer lugar + +> "Rossener, eu não quero reiniciar a minha vida pra corrigir um único erro." + +Você tem certeza? Bem, você não precisa. + +Você coloca o cursor depois do 1 e aperta Deletar, nós temos R$ 23,45 + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img07_zpss3rlth5k.png) + +## 8. Cole de qualquer lugar + +Você é um cara preguiçoso e quer colar um valor da sua app de calculadora? Você pode. + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img08_zpsg9ro8kx4.png) + +Cole 1000 de qualquer lugar, ele vira R$ 1.000,00 + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img09_zps1kdphsqv.png) + +## 9. Mude a moeda. Mude o formato. + +> "Finalmente, não aguento mais ver tudo em reais." + +Vamos mudar isso. + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img10_zpswkfhmoan.png) + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img11_zpsnppxg3sb.png) + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/img12-1_zpsztjq8ujg.png) + +## 10. Como também, o País + +> "Eu não conheço o código da minha moeda." + +Você deveria. Mas, nós podemos cuidar disso. + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img12_zpsd0imf4w2.png) + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img13_zpsggnl1vxb.png) + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img14_zpsqt6xafhj.png) + +## 11. Como também, o Locale + +Algumas vezes você tem um país ou uma moeda que possui mais de um único Locale, e dependendo do Locale, os símbolos são diferentes... bom, problema resolvido. + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img15_zpsssnre625.png) + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img16_zpssndryuos.png) + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img17_zpsdn9j2hqm.png) + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img18_zps3xldov0j.png) + +## 12. Finalmente, o Valor + +> "Rossener, você está mandando muito bem, tá tudo ótimo, esse componente vai salvar minha vida e meu casamento. MAS, e o valor?" + +Meu caro amigo, eu deixei o melhor para o final. Uma vez que você atribuiu alguma coisa ao componente, você pode fazer qualquer coisa que quiser. É como o milagre dos 5 pães e 2 peixes. Com poucas coisas, você pode conseguir muitas coisas. + +Deixa eu explicar. + +Uma vez que você mudou a moeda para USD, você pode pegar do componente, não um, mas TODOS os países que usam essa moeda, como também pode pegar o texto mostrado pelo componente na tela e aquela coisa que você mais quer: **o valor numérico**. + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img19_zpspklsiodw.png) + +![Imagem de um iPhone exibindo o exemplo](http://i1310.photobucket.com/albums/s647/rossener/TRCurrencyTextField/nova-img20_zpsr3g6hyiy.png) + +Além de tudo isso, você pode também, se você quer o *espaço em branco* próximo do símbolo da moeda e o *número máximo de dígitos* que você quer deixar seu usuário digitar. + +TRCurrencyTextField é um componente aberto. Você pode enviar *pull requests* pra ele. Você pode *forkar* ele. Você pode amar ele. Vamos fazer ele melhor juntos. + +Dúvidas? Comentários? Hi-fives? Por favor, deixe eles aqui. Estou ansioso pra saber sua opinião. + +PS: Você saber detalhes sobre o uso, instalação e outras coisas no GitHub. diff --git a/_posts/2015-09-06-desafio-aceito-fazendo-uma-app-do-dribbble-do-zero.md b/_posts/2015-09-06-desafio-aceito-fazendo-uma-app-do-dribbble-do-zero.md new file mode 100644 index 0000000000..4ecd2cfcd0 --- /dev/null +++ b/_posts/2015-09-06-desafio-aceito-fazendo-uma-app-do-dribbble-do-zero.md @@ -0,0 +1,100 @@ +--- +layout: post +title: Desafio aceito. Fazendo uma app do Dribbble do zero +description: Um amigo me enviou esse desafio, eu aceitei. +image: 'http://res.cloudinary.com/dm7h7e8xj/image/upload/c_scale,w_760/v1504807658/barney-stinson_eqt7kc.jpg' +category: 'mobile' +twitter_text: 'Um amigo me convidou para este desafio, eu aceitei.' +introduction: 'Um amigo me convidou para este desafio, eu aceitei.' +tags: + - app + - mobile + - ios + - desafio +--- + +Eaí galera, + +Há alguns dias atrás, um amigo meu, Bruno Gabriel, me enviou um link de um recrutamento de uma empresa de tecnologia onde eles pedem aos candidatos para fazerem uma app com a API do Dribbble desenvolvendo algumas features pré-definidas e outras como bonus. + +Eu fiz isso aqui. + +![Tom Cruise atendendo o celular](http://i1310.photobucket.com/albums/s647/rossener/Dribbble%20Challenge/your-mission_zpskxns2mho.png) +*Sua missão, caso deseje aceitá-la é: fazer uma app do Dribbble com as seguintes funcionalidades.* + +### Seu aplicativo deve conter + + - Os shots mais populares, apresentando eles como esse mock. + +![Imagem de exemplo do aplicativo](http://i1310.photobucket.com/albums/s647/rossener/Dribbble%20Challenge/mock_zpsie1ik4uo.png) + + - Arquivo .gitignore + - Gerenciador de dependência de projeto. Ex: CocoaPods + - Framework para se comunicar com a API. Ex: AFNetworking + - Mapeamento JSON -> Objeto. Ex: Mantle + - API de lista de shots + - Paginação automática (scroll infinito) na lista de shots + - Paginação que deve detectar quando chegou na última página e para de pedir mais + - Pull to refresh + - Mostrar detalhes do shot em uma nova tela quando o shot é selecionado na lista + - A tela de detalhes do shot deve conter o nome do autor e a foto e descrição do shot + +### Bonus + +- Testes unitários. Ex: XCTests / Spectra + Expecta +- Testes funcionais. Ex: KIF +- Ser uma app universal. Fazer funcionar com iPad \| iPhone \| Paisagem \| Retrato (classes de tamanho) +- Cache de imagens. Ex: SDWebImage +- Compartilhar shots no Facebook e no Twitter + +Bom, como eu precisava minhas novas habilidades de iOS. + +![Meme Challenge Accepted](http://i1310.photobucket.com/albums/s647/rossener/Dribbble%20Challenge/challenge-accepted_zpsqwnlacvu.jpg) + +Eu não fiz **todas** a funcionalidades bonus listadas acima, como testes e compartilhar nas redes sociais. MAS, eu fiz um layout bem legal e efeitos pra aprender coisas como views personalizadas, barra de navegação personalizada, botão de voltar personalizado, layout usando diferentes tamanhos de células numa tabela, além de bibliotecas que eu nunca tinha usado antes :) + +Aqui está a tela inicial, do que eu chamei, **Simple Dribbble**. + +![Tela de abertura do aplicativo SimpleDribbble](http://i1310.photobucket.com/albums/s647/rossener/launch-screen_zpskx1mm4gd.png) + +A lista de shots ficou assim. + +![Tela de inicial do aplicativo SimpleDribbble](http://i1310.photobucket.com/albums/s647/rossener/shots-list_zps3pe3rabs.png) + +Quando você seleciona um desses shots (e somente dentro do shot, não na célula toda), você tem esse efeito. + +![Exemplo de transição quando o usuário clica no elemento](http://i1310.photobucket.com/albums/s647/rossener/selecting_zpsiycsug49.png) + +Quando a requisição falha. + +![Mensagem quando ocorre um erro](http://i1310.photobucket.com/albums/s647/rossener/Dribbble%20Challenge/error-message_zpsylifpclp.png) + +Quando você sai do aplicativo antes dele carregar algum shot e o aplicativo volta do background, a lista é automaticamente carregada. + +![Tela com loading](http://i1310.photobucket.com/albums/s647/rossener/Dribbble%20Challenge/auto-load_zpsi1xc9oi7.png) + +Quando o shot está carregando, tem esse placeholder com um ícone do Dribbble girando pra representar que está carregando a imagem. + +![Exemplo de elemento com placeholder](http://i1310.photobucket.com/albums/s647/rossener/Dribbble%20Challenge/loading-placeholder_zpsbbby7aoj.png) + +Quando você já viu todas as páginas e faz um pull to refresh. + +![Tela com Pull to Refresh](http://i1310.photobucket.com/albums/s647/rossener/Dribbble%20Challenge/pull-to-request_zpsep94dnws.png) + +![Tela com Pull to Refresh](http://i1310.photobucket.com/albums/s647/rossener/Dribbble%20Challenge/release-to-refresh_zpstqhgajpu.png) + +![Tela quando não há mais atualizações](http://i1310.photobucket.com/albums/s647/rossener/Dribbble%20Challenge/end-push-to-refresh_zpslmgvdgps.png) + +Quando todas as páginas já foram vistas e você tenta carregar mais. + +![Mensagem quando não há mais shots para carregar](http://i1310.photobucket.com/albums/s647/rossener/Dribbble%20Challenge/end-infinity-scroll_zpswdkleaoo.png) + +E então, a tela de detalhes. + +![Tela de detalhes](http://i1310.photobucket.com/albums/s647/rossener/shots-details_zpsuzqh4brt.png) + +Nessa última tela você deve ter notado três partes, as quais eu fiz usando um UITableViewController com 3 células. A primeira tem um tamanho fixo contendo a foto e o título do shot, a segunda célula também é fixa e contem a foto do autor e seu nome, e a última é flexível, contem uma web view que carrega a descrição e seu tamanho é adaptável dependendo do conteúdo. + +Esse aplicativo é de longe bem simples, e você pode fazer UM MONTE de coisas legais usando a API do Dribbble, como o aplicativo nesse vídeo. Mas para fins de aprendizado, é um desafio bem legal. + +Até mais! diff --git a/_posts/2017-05-11-minhas-primeiras-5-impressoes-sobre-django.md b/_posts/2017-05-11-minhas-primeiras-5-impressoes-sobre-django.md new file mode 100644 index 0000000000..9c68ce5280 --- /dev/null +++ b/_posts/2017-05-11-minhas-primeiras-5-impressoes-sobre-django.md @@ -0,0 +1,101 @@ +--- +layout: post +title: Minhas primeiras 5 impressões sobre Django +description: Fiz um curso de Django, e essa é minha opinião. +image: 'http://res.cloudinary.com/dm7h7e8xj/image/upload/v1504809708/django_g7djdj.jpg' +category: 'django' +twitter_text: 'Fiz um curso de Django, e essa é minha opinião.' +introduction: 'Fiz um curso de Django, e aqui eu conto o que achei desse framework Python.' +tags: + - django +--- + +Fala galera! + +Tem um tempo que não escrevo aqui. Estou nesse momento passando por um período de transição na minha carreira, onde basicamente eu apostei 2 anos e muito $$$ na minha startup e bem... não deu certo. :( + +Foto do Leo me dando os parabéns +*Valeu Leo 👍* + +A vida segue, e oportunidade é o que não falta por aí. No meio desse período nebuloso e "sem rumo" decidi parar pra pensar um pouco na vida e na minha carreira, agora que a minha aposta de 5 anos fez como o Matthew McConaughey em *Interstellar*, e foi pro espaço. + +
    + +Pensando e pensando e pensando decidi duas coisas que quero pra minha vida: 1. quero trabalhar com o que eu gosto de fazer, que é desenvolver pra Web e 2. quero viajar. Por que não juntar os dois? + +> Eaí Rossener, quando você vai começar a falar sobre o título do post? + +Calma que eu chego lá. Comecei a pesquisar sobre o que estava rolando no mercado hoje e prontamente duas coisas surgem em todo lugar como um consenso: Ruby on Rails e Django (também tem as SPAs, mas vou pular elas). + +Lendo muitas comparações, conversando com alguns amigos e dando uma olhada nos dois frameworks, dei o primeiro passo ousado rumo ao desconhecido, e fui de encontro a ele. + +![Imagem do Django](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1501101216/django-1024x576_xi2qq9.jpg) +*Django. (música de faroeste de fundo)* + +Logo encontrei o curso **gratuito** do Gileno Filho, que é muito bom, e comecei a brincar com essa belezinha. Por isso, meu caro leitor, com o intuito de despertar *curiosidade* pra que você busque por mais informações, irei te dizer as minhas primeiras impressões sobre esse framework em Python. + +Vamos lá: + +### 1 - Setup na manteiga + +Em 10 minutos, começando do ZERO, você já tem todo o seu ambiente configurado lindamente pra criar sua aplicação com o Django. + +Quer saber como? Segue esse tutorial das meninas do Django Girls aqui. + +### 2 - Organizado e legível + +Achei incrivelmente organizado o projeto. Os módulos são separados por aplicações, e cada aplicação tem uma estrutura mais ou menos assim: + + - É **form**? Fica em *forms.py* + - É **modelo**? Fica em *models.py* + - É **tela**? Fica em *views.py* + - É **url**? Fica em *urls.py* + - É **html**? Fica numa pasta separada só pra templates daquela aplicação. + +Simples, hã? + +![Screenshot do urls.py](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1501101482/Screen-Shot-2017-05-11-at-7.57.23-PM-1024x725_mkxqjb.png) + +### 3 - Leve um framework, ganhe os CRUDs + +Quem gosta de ficar fazendo aquelas telas de CRUD (*Create-Read-Update-Delete*) que são todas iguais e só consome o seu tempo? + +É, meu amigo, a coisa toda já vem pronta! O Django já traz nele uma aplicação só pra você manipular seus modelos. O negócio é *LO-KO*. + +![Screenshot da tela de admin do Django](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1501101516/django-admin_qjkqsa.png) + +### 4 - Filtros que fazem de tudo + +Do pouco que eu explorei achei coisas muito interessantes que não lembro de ter visto enquanto trabalhava por 2 anos e meio com Java e JSP. No máximo, vi algo parecido em PHP e Angular, mas enfim, achei bem legal. + +São os filtros. Eles poupam um trabalho gigantesco se você conhecê-los e souber usá-los bem. + +Pra citar alguns exemplos temos: + +![Imagem de filtros de parágrafo do Django](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1501101548/filtros-django_qxbf51.png) +*Esse cara pega um texto que você inseriu num formulário e monta o texto com as tags html <p> e <br> pra deixar os parágrafos formatados automaticamente.* + +![Imagem do filtro pluralize do Django](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1501101632/filtro2_pjurss.png) +*Esse filtro permite que você altere o final de uma palavra que está no plural de acordo com sua variável numérica. Digamos que você tenha um contador de visualizações. Com esse filtro, facilmente você alterna entre "1 visualização" e "2 visualizações" sem encher o código de ifs :)* + +![Imagem do filtro timesince do Django](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1501101706/filtro3_tyvzgd.png) +*Como último exemplo tem o **timesince**, esse eu achei fantástico. Esse filtro é capaz de dizer a diferença de tempo entre a data atual e a data que você passa, facilitando a você escrever textos assim "à 2 minutos atrás" como de comentários ou respostas em fóruns.* + +### 5 - A comunidade + +Não há palavras que expressem o tamanho disso. PONTO. + +![Comunidade Python](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1501101809/comunidade_esnapp.jpg) +*Foto ilustrativa* + +A comunidade Django, na verdade, a comunidade Python no geral, é gigantesca. Tem gente disposta a te ajudar de todas as cidades, estados, países, continentes e universos, todas as raças, credos, orientação sexual e orientação política, de todo tipo de fã clube, status de relacionamento e lado da Força, tem gente de tudo-que-é-jeito. É incrível. + +Pra entender, só mesmo entrando nesse mundo. Eu comecei há pouco tempo, mas pretendo em breve, entender um pouco mais e participar mais dos eventos e da comunidade. + +### Conclusão + +Tenho estudado o Django há 2 semanas, e tenho ficado cada vez mais impressionado com o universo de possibilidades que acompanham esse framework. Com certeza não cheguei nem perto de explorar tudo o que o Django pode fazer, mas espero que tenha despertado a sua curiosidade. + +Essa semana comecei a fazer o curso do **Henrique Bastos**, o Welcome to the Django, com a intenção de mergulhar de uma vez nesse mundo e, principalmente, adquirir autonomia. Provavelmente, em breve, estarei postando mais coisas sobre essa nova aventura por aqui. + +Até lá! diff --git a/_posts/2017-06-04-como-fazer-um-hello-world-com-vue-js-2.md b/_posts/2017-06-04-como-fazer-um-hello-world-com-vue-js-2.md new file mode 100644 index 0000000000..c1d2ad1491 --- /dev/null +++ b/_posts/2017-06-04-como-fazer-um-hello-world-com-vue-js-2.md @@ -0,0 +1,167 @@ +--- +layout: post +title: Como fazer um Hello World com Vue.js 2 +description: É simples, é rápido, é sensacional. +image: 'http://res.cloudinary.com/dm7h7e8xj/image/upload/v1504810464/hello-world-vue_ibatoy.jpg' +category: 'tutorial' +twitter_text: 'Aprenda rapidamente a fazer um Hello World usando Vue.js' +introduction: 'Um simples tutorial para ensinar o básico desse framework Javascript incrível.' +tags: + - vuejs + - javascript + - tutorial +--- + +Esse mês venho fazendo um curso de Vue.js 2 pelo Udemy e me apaixonando cada vez mais por esse framework que reúne o melhor do Angular 1 e do React. + +O mais legal é que você não precisa ser nenhum expert em JS, nem ter estudado Angular ou React antes de começar a trabalhar com o Vue, ele é super intuitivo. + +Nesse curto tutorial vou te ensinar como dar o primeiro passo para aprender a programar com Vue.js 2. Vamos lá! + +## O que é o Vue? + +Antes de começar, queria explicar rapidinho, afinal, o que é o Vue? Lê-se "viu". + +O **Vue.js** é um framework progressivo para a construção de interfaces. + +> Legal Rossener, mas o que é um framework progressivo? + +Simples, segundo a definição do próprio Evan You, criador do Vue.js, um framework progressivo é um framework que você pode inserir no seu projeto conforme vai sentindo a necessidade dele. + +Ou seja, ao contrário dos frameworks que temos disponíveis hoje, que são recheados de funcionalidades e com uma grande curva de aprendizado, o Vue.js foi feito para ser fácil você adotá-lo em seu projeto, por mais complexo que ele seja. + +Agora que você já sabe o que é o Vue.js, vou direto pra prática, como fazer um Hello World usando Vue.js 2? + +## Como faz? + +Primeiro, vamos criar um arquivo HTML qualquer, vou chamá-lo de **hello-world-vue.html** + +```html + + + + + Hello World - Vue.js 2 + + + + + +``` + +Aí importamos o Vue.js na nossa página, para podermos utilizá-lo. + +```html + + + + + Hello World - Vue.js 2 + + + + + + +``` + +Então inserimos uma `
    `, que será onde a nossa aplicação Vue será montada. Ou seja, o pedaço do HTML que queremos que o Vue.js observe e utilize para renderizar nossos elementos. + +```html + + + + + Hello World - Vue.js 2 + + + +
    + + +``` + +Agora já podemos começar a escrever o código com o Vue. A primeira coisa a fazer é instanciar uma nova aplicação Vue, dizendo para qual elemento do nosso HTML queremos que ele olhe. + +Fazemos isso usando `new Vue()`, passando como parâmetro a chave `el` com o valor `#app`. No caso, o valor é usado como qualquer outro seletor CSS, de preferência sendo o id de um elemento, por ser algo único. + +> **Nota:** colocamos o script **após** o elemento que será utilizado para renderização para que se torne conhecido pelo Vue quando este usar o seletor. Se colocássemos o script no cabeçalho da página, o elemento #app não seria reconhecido. + +```html + + + + + Hello World - Vue.js 2 + + + +
    + + + +``` + +Vamos fazer a nossa página exibir a mensagem que desejamos. Para isso, colocaremos nossa mensagem no campo `data` da aplicação Vue. + +O campo `data` recebe um objeto javascript com os dados que serão manipulados no contexto da nossa aplicação, ou seja, os dados de tudo que estiver dentro da nossa `
    `. + +Vou criar a variável `message` e atribuir o valor **"Hello World!"** para que possamos exibir essa mensagem no HTML posteriormente. + +```html + + + + + Hello World - Vue.js 2 + + + +
    + + + +``` + +Finalmente, dizemos ao HTML que queremos exibir o conteúdo de **"message"** na página. Fazemos isso colocando a variável "message" entre duplas chaves **\{\{ \}\}**, que são os caracteres usados pelo Vue para interpolar um valor dentro do HTML. + +```html + + + + + Hello World - Vue.js 2 + + + +
    + + + +``` + +Salva, abre a página, e pronto! + +![Screenshot do resultado do Hello World em Vue.js](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1501102890/hello-world-browser_hjbuhl.png) + +### ATUALIZAÇÃO + +O Ibrahim Brumate me passou um link muito legal da versão PT-BR da documentação do Vue que eu não sabia que existia! Então se quiser saber mais sobre o Vue em português é só clicar aqui e ser feliz :) diff --git a/_posts/2017-06-08-por-que-o-sketch-vale-3-tanques-de-gasolina.md b/_posts/2017-06-08-por-que-o-sketch-vale-3-tanques-de-gasolina.md new file mode 100644 index 0000000000..2a3080659e --- /dev/null +++ b/_posts/2017-06-08-por-que-o-sketch-vale-3-tanques-de-gasolina.md @@ -0,0 +1,146 @@ +--- +layout: post +title: Por que o Sketch vale 3 tanques de gasolina? +description: Uma conta rápida de papel de pão pra mostrar o quanto essa ferramenta ajuda. +category: 'webdev' +twitter_text: 'O Sketch não é barato, mas fazendo as contas, vale a pena comprar.' +introduction: 'Comparando o preço do Sketch com o preço da gasolina eu procuro mostrar o quanto vale a pena adquirir essa ferramenta.' +tags: + - design + - sketch +image: 'https://res.cloudinary.com/dm7h7e8xj/image/upload/c_fill,h_399,w_760/v1501102987/sketch-fuel_eiwjbz.png' +--- + +Há 1 mês atrás comecei a desenvolver o novo site da imobiliária Aloísio Imóveis (ainda não está no ar). + +Basicamente, estou fazendo tudo do zero. No entanto, antes de terminar todo o sistema do site para entregar, decidi primeiro entregar um novo layout funcional, responsivo e moderno. + +Durante os últimos 5 anos, tudo o que eu fazia em relação a layouts era no **Photoshop**. Não sou nenhum profissional na ferramenta, mas consigo criar uns memes e melhorar umas fotos. + +Porém, hoje estou focado em produtividade. Isso tem consumido a minha vida nesse último mês, e estou buscando formas de fazer o mesmo trabalho com qualidade e em menos tempo. + +Bem, como você deve imaginar, é aí que entra o Sketch. + +Essa ferramenta foi apresentada para mim por um amigo. Confesso que no começo não dei muita bola, principalmente porque ela custa **99 dólares**, e esse não é um dinheiro que a gente tem toda hora pra pagar à vista por um software que você acha que não precisa. + +O Sketch é um software só para MacOS, o que já sugere que ele tem excelência na usabilidade, como todo produto da Apple. Mesmo assim, pagar 99 *trumps* por um software quando existem tantos outros gratuitos no mercado? *Eu devo estar ficando louco*. + +Antes de tudo, não, esse não é um post patrocinado. Eu estou aqui fazendo propaganda de graça e *salvando a sua vida*. + +
    + +Lá fui eu usar o trial do **Sketch por um mês**, o tempo todo com o pensamento "me convença". Fiz um tutorial de 5 partes pra entender o poder que esse software oferece, e mais abaixo mostrarei meus resultados. + +## Meu carro faz 11,6 km/l + +Eu possuo um Palio Attractive 1.6 ano 2013. É um carro relativamente novo, comprei ele 0km, mas hoje em dia ele dá umas engasgadas pra ligar. + +Nesse último mês tenho abastecido ele só com gasolina, e ele obteve uma autonomia de **11,6 km/l**. Mas nos últimos meses abasteci ele somente com álcool. + +> Beleza Rossener, onde você quer chegar com isso? + +Fazendo uma matemática simples: + +A gasolina está hoje a **R$ 3,19** aqui em Taubaté (minha cidade natal). Já o álcool está por volta dos **R$ 2,19**, normalmente tem ficado em 1 real de diferença. + +O tanque do meu carro tem **48 litros**. + +Isso significa que se eu encher o tanque com **gasolina** o total fica **R$ 153,12**, e se eu encher com **álcool** fica **R$ 105,12**. + +Digamos que a autonomia de que falei é uma média, então digamos que eu coloque meio tanque de gasolina e meio tanque de álcool, logo: + +*1 tanque = R$ 129,12* + +**Guarde esse número.** + +## O Sketch salvou o meu dia + +Essa semana eu estava melhorando o conteúdo do meu blog, principalmente na sessão "O Autor". Como eu pretendo trabalhar como freelancer nesses próximos meses, precisava demonstrar de forma clara qual é a minha capacidade e minhas habilidades atuais. + +Tentei escrever de várias formas as tecnologias que eu conheço e o meu tempo de experiência com cada uma delas. **Sem sucesso**. + +Foi aí que surgiu a ideia de montar um mapa, em que batendo o olho qualquer um saberia dizer o que eu sei e o que eu não sei fazer. O mapa foi esse aqui: + +![Meus conhecimentos em Front-end](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1501103240/frontend1_tvsefn.png) + +![Meus conhecimentos em Back-end](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1501103276/backend_cdzzmc.png) + +![Meus conhecimentos em Mobile](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1501103319/mobile_t8zskz.png) + +![Meus conhecimentos em Bancos de Dados](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1501103361/databases_o4cx3s.png) + +![Meus conhecimentos em Ferraments](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1501103411/tools_zh6zkl.png) + +Por uma questão de hábito, sem que eu percebesse, comecei a fazer o mapa no Photoshop. + +> Edição de imagem? Claro! Tenho o Photoshop aqui. + +Eu não sei se você já montou um layout alguma vez na sua vida, mas não é algo que você faz, digamos, de primeira. O resultado final parece ser simples, mas ele só é obtido depois de testes e mais testes e mais testes, até chegar num ponto que você fica satisfeito. + +
    + +Foram **3 horas** colocando e tirando elementos, arrastando, redimensionando, encaixando, refazendo. E não estava pronto, eu não estava satisfeito. + +E então me lembrei. *Puts, Eu tenho o Sketch!* + +Coitado, esquecido, jogado num canto depois de eu ter feito o tutorial e montado as páginas da Aloísio Imóveis, eu simplesmente esqueci o quanto ele me ajudou. + +Abri a app e me deparei com a mensagem dizendo que a minha versão trial havia expirado. + +Estava com pressa. Peguei meu cartão de crédito, preenchi os dados e antes de clicar no botão submeter, hesitei. + +> Cara, eu to gastando 3 tanques de gasolina nesse software. + +Cliquei em comprar. Usei o serial number fornecido, **20 minutos** depois, a imagem estava pronta. + +## Autonomia é tudo + +Lembra da conta? + + - *1 tanque = R$ 129,12* + - *3 tanques = R$ 387,36* + - **1 Sketch = US$ 99.00 = R$ 340,00 + IOF (R$ 21,69) = R$ 361,69** + +OU + + - *1 tanque = 557Km* + - *3 tanques = 1670Km* + - **1 Sketch = 1560Km** + +Na Dutra posso andar a **110 Km/h**. + +*1 Sketch = 1560 / 110 = 14 horas de viagem* + +Preste atenção nesse número, então comprar o Sketch é equivalente a *14 HORAS* dirigindo na estrada. + +Vamos ver, o tempo que eu gastei com 1 layout: + +*No Photoshop = 180 minutos* + +*No Sketch = 20 minutos* + +Para efeito de conta, digamos que para **1 layout** eu cobre **R$ 150,00**, em 14 horas: + +*No Photoshop = 4,7 layouts = R$ 705,00* + +**No Sketch = 42 layouts = R$ 6.300,00** + +Não se convenceu ainda? + +O que eu estou tentando dizer é que com **3 layouts**, o Sketch está **pago** e você ganhou, no mesmo tempo, **9x MAIS**. + +## Conclusão + +Voltando ao exemplo do carro. Digamos que o Sketch e o Photoshop sejam marcas de carro. Com os 3 tanques: + + - *O Sketch percorreria 1560Km.* + - *O Photoshop percorreria 174Km.* + +Em **14 horas**, isso é o equivalente a: + + - *Sketch faria uma velocidade média de 111Km/h.* + - *Photoshop faria uma velocidade média de 12Km/h.* + +Aí eu te pergunto: + +Se você tivesse que ir de São Paulo até o Rio de Janeiro, iria sentado dirigindo um Palio 1.6 ou iria *correndo*? diff --git a/_posts/2017-07-29-como-migrar-seus-posts-do-wordpress-para-o-jekyll.md b/_posts/2017-07-29-como-migrar-seus-posts-do-wordpress-para-o-jekyll.md new file mode 100644 index 0000000000..3dbe19c727 --- /dev/null +++ b/_posts/2017-07-29-como-migrar-seus-posts-do-wordpress-para-o-jekyll.md @@ -0,0 +1,164 @@ +--- +layout: post +title: "Como migrar seus posts do Wordpress para o Jekyll de um jeito simples" +date: 2017-07-29 13:24:49 +image: 'https://res.cloudinary.com/dm7h7e8xj/image/upload/c_scale,w_760/v1501345962/wordpress-to-jekyll_mx4ddm.png' +description: Um script para migrar seus posts do Wordpress para o Jekyll sem dores de cabeça. +category: 'blog' +tags: +- jekyll +- wordpress +- blog +twitter_text: Um script para migrar seus posts do Wordpress para o Jekyll sem dores de cabeça. +introduction: Exportar seus posts do Wordpress para o Jekyll pode ser muito mais fácil usando esse script. +--- + +Foram 24 horas contabilizadas entre ter o primeiro contato com o Jekyll, fazer o novo +layout do blog e migrar todos os posts do meu antigo blog em Wordpress. + +O mais chato de fazer em toda essa jornada eu diria que foi a **migração**. + +O site oficial do Jekyll [passa um comando configurável](http://import.jekyllrb.com/docs/wordpress/) para trazer todos os posts +do Wordpress para o Jekyll: + +```ruby +ruby -rubygems -e 'require "jekyll-import"; + JekyllImport::Importers::WordPress.run({ + "dbname" => "", + "user" => "", + "password" => "", + "host" => "localhost", + "port" => "3306", + "socket" => "", + "table_prefix" => "wp_", + "site_prefix" => "", + "clean_entities" => true, + "comments" => false, + "categories" => false, + "tags" => false, + "more_excerpt" => false, + "more_anchor" => false, + "extension" => "md", + "status" => ["publish"] + })' +``` + +Porém, apesar de tentar enxugar o máximo de coisas possível, a saída desse +comando ainda é um arquivo cheio de coisas que você vai perder tempo apagando e +o pior, não estará formatado em markdown: + +![Imagem do arquivo de saída com a importação do Jekyll](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1501341957/migracao-com-jekyll_cvdiks.png) + +> **A solução:** Exportar um arquivo .xml com os posts do Wordpress e [pegar esse script muito maroto aqui](https://gist.github.com/evanwalsh/6131008) para fazer a importação no Jekyll. + +Mesmo assim, como esse script ainda insere um monte de sujeira, fiz a minha própria +versão dele, deixando somente o que achei necessário, e passando o nome do arquivo +de exportação via argumento na linha de comando. + +Assim, o arquivo fica formatado em markdown, incluse as imagens! Olha só como fica +mais enxuto e agradável: + +![Imagem do arquivo de saída com a exportação via script](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1501341957/migracao-com-script_jnozbt.png) + +Então vamos lá, o que você precisa fazer é: + +1\. Abra o painel de administração do Wordpress e vá em **Ferramentas > Exportar** + +![Screenshot da tela do Wordpress](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1501342670/Screen_Shot_2017-07-29_at_12.37.15_PM_ugbtrn.png) + +2\. Selecione somente os posts e clique em **Download do arquivo de exportação** + +![Screenshot da tela do Wordpress](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1501342736/Screen_Shot_2017-07-29_at_12.38.19_PM_b7opb2.png) + +3\. Coloque o arquivo **.xml** baixado na raiz do seu projeto Jekyll + +4\. Crie um arquivo `import.rb` também na raiz do seu projeto Jekyll e cole esse código, +que também deixei disponível no [Github](https://github.com/thiagorossener/wordpress-to-jekyll-import): + +```ruby +# coding: utf-8 + +require 'hpricot' +require 'fileutils' +require 'safe_yaml' +require 'html2markdown' + +module JekyllImport + # This importer takes a *.xml file, which can be exported from your + # wordpress.com blog (/wp-admin/export.php). + module WordpressDotCom + def self.process(filename = {:source => ARGV[0]}) + import_count = Hash.new(0) + doc = Hpricot::XML(File.read(filename[:source])) + + (doc/:channel/:item).each do |item| + title = item.at(:title).inner_text.strip + permalink_title = item.at('wp:post_name').inner_text.gsub("/","-") + # Fallback to "prettified" title if post_name is empty (can happen) + if permalink_title == "" + permalink_title = sluggify(title) + end + + if item.at('wp:post_date') + begin + date = Time.parse(item.at('wp:post_date').inner_text) + rescue + date = Time.now + end + else + date = Time.now + end + + name = "#{date.strftime('%Y-%m-%d')}-#{permalink_title}.md" + type = item.at('wp:post_type').inner_text + tags = item.search('category[@domain="post_tag"]').map{|t| t.inner_text}.uniq + + header = { + 'layout' => type, + 'title' => title, + 'tags' => tags + } + + begin + FileUtils.mkdir_p "_#{type}s" + filename = "_#{type}s/#{name}" + File.open(filename, "w") do |f| + f.puts header.to_yaml + f.puts '---' + f.puts item.at('content:encoded').inner_text + end + p = HTMLPage.new(contents: File.read(filename)) + File.open(filename, "w") { |f| f.puts p.markdown } + rescue => e + puts "Couldn't import post!" + puts "Title: #{title}" + puts "Name/Slug: #{name}\n" + puts "Error: #{e.message}" + next + end + + import_count[type] += 1 + end + + import_count.each do |key, value| + puts "Imported #{value} #{key}s" + end + end + + def self.sluggify(title) + title.gsub(/[^[:alnum:]]+/, '-').downcase + end + end +end + +JekyllImport::WordpressDotCom.process +``` + +5\. No terminal, no diretório do seu blog, rode o comando `ruby import.rb nome-do-seu-arquivo-exportado.xml` + +> **Nota:** Se você não possui o ruby instalado, dá uma olhada nesse [link aqui de como instalar o Ruby](https://www.ruby-lang.org/pt/documentation/installation/). Talvez você também precise instalar as gems necessárias para rodar o +arquivo, você pode fazer isso rodando `gem install hpricot fileutils safe_yaml html2markdown` + +Pronto! Seus posts no Wordpress estão todos importados e formatados em markdown. + + diff --git a/_posts/2017-08-07-fazendo-um-formulario-de-contato-no-jekyll-com-vue.js.md b/_posts/2017-08-07-fazendo-um-formulario-de-contato-no-jekyll-com-vue.js.md new file mode 100644 index 0000000000..f32f2407e4 --- /dev/null +++ b/_posts/2017-08-07-fazendo-um-formulario-de-contato-no-jekyll-com-vue.js.md @@ -0,0 +1,405 @@ +--- +layout: post +title: "Fazendo um formulário de Contato no Jekyll com Vue.js" +date: 2017-08-07 23:04:08 +image: 'http://res.cloudinary.com/dm7h7e8xj/image/upload/c_scale,w_760/v1502208952/contact-post_gnaojy.png' +description: Um formulário de contato para o Jekyll usando o Formspree e fazendo a validação com Vue.js +category: 'tutorial' +tags: +- vuejs +- jekyll +- blog +twitter_text: Um formulário de contato para o Jekyll fazendo a validação com Vue.js +introduction: Nesse tutorial explico como fazer o formulário que uso aqui no blog com o Vue.js para a validação dos dados. +--- + +Fala pessoal! + +Semana passada, depois de divulgar meu artigo sobre o [novíssimo +layout do blog usando o Jekyll](https://www.rossener.com/novo-layout-blogando-como-um-dev-com-jekyll/), +pedi alguns feedbacks para a galera do [WTTD](https://welcometothedjango.com.br/), +e o [Eder Christian](https://twitter.com/ederchristian92) apontou algumas coisinhas na página, entre elas, a falta de +validação no formulário da página de **Contato**, que estava enviando a mensagem mesmo +com o *form* vazio. + +Pensando nisso, resolvi fazer algo a mais e treinar meus conhecimentos no framework +javascript que está pegando no momento, o Vue.js. + +Pra quem não conhece, eu dou uma rápida explicação sobre o Vue.js nesse [tutorial de +Hello World](https://www.rossener.com/como-fazer-um-hello-world-com-vue-js-2/) que +fiz há algumas semanas. + +Bom, então para começar, vamos ver como fazer um formulário de Contato simples no +Jekyll. + +A primeira pergunta que devemos responder é: + +> Se o Jekyll é um gerador de páginas estáticas, para onde vamos submeter o formulário? + +Para isso, existem [algumas opções de serviços no mercado](http://www.formcandy.com/static-sites/), +eu vou optar aqui por utilizar o [Formspree](https://formspree.io/), que achei bem legal por ser gratuito até 1000 submissões +por mês e, principalmente, porque é [Open Source](https://github.com/formspree/formspree)! + +O **Formspree** é bem simples de usar, no nosso formulário vamos colocar 3 campos para +o usuário preencher: *Nome*, *E-mail* e *Mensagem*. E na `action` do formulário +colocamos a url do Formspree com o e-mail para o qual queremos que a mensagem seja +enviada. + +```html +
    +
    + + + + + + + +
    +
    +``` + +Com esse simples formulário já temos tudo funcionando, a mensagem será submetida +para o Formspree, que vai lidar com o envio da mesma para o nosso e-mail usando +o [SendGrid](https://sendgrid.com/). + +A primeira vez que você for enviar um e-mail terá de confirmar o e-mail configurado, +mas depois disso as próximas mensagens serão enviadas sem problemas, como essa aqui: + +![Imagem do e-mail](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1502208783/resultado-email_cjewki.png) + +O legal é que quando você cria um campo no formulário com `name="email"` ou o `name="_replyto"`, +ele automaticamente já coloca o e-mail que o usuário preencheu como o e-mail de resposta +para a mensagem. + +Agora que já está funcionando, vamos colocar alguns campos especiais para melhorar +a experiência do usuário. + +O Formspree fornece 3 parâmetros interessantes para configurarmos o formulário: + +#### _subject + +Nesse campo, como você deve imaginar, vai o assunto do e-mail. + +#### _next + +Aqui colocamos a url da *página de sucesso* que desejamos exibir para o usuário após +ele enviar a mensagem. + +#### _language + +Finalmente, o idioma que queremos que o texto esteja na tela de *reCAPTCHA*, necessária +para evitar spams. + +Vamos adicionar esses campos como sendo do tipo `hidden` para serem submetidos junto +com a mensagem no nosso formulário e não serem exibidos para o usuário: + +```html +
    +
    + + + + + + + + + + + +
    +
    +``` + +Adicionando algum estilo ao formulário, temos o resultado: + +

    See the Pen Formulário de Contato Simples by Thiago Rossener (@thiagorossener) on CodePen.

    + + +## Validando o formulário com Vue.js + +Até aqui o nosso formulário de contato envia a mensagem perfeitamente, porém ainda +está faltando a validação dos dados. + +Vamos fazer isso usando o framework [Vue.js](https://vuejs.org/) e um plugin de validação chamado [VeeValidate](http://vee-validate.logaretm.com/). + +Entre todos os plugins de validação com o Vue.js que pesquisei, esse foi o que mais +me agradou, todo o trabalho fica no HTML, só temos que fazer algumas coisinhas realmente +no javascript. + +### 1. Configurando a aplicação Vue e plugando o VeeValidate + +Para começar, vamos inserir os javascripts e ativar o plugin no final da nossa +página: + +```html + + + +``` + +Agora, vamos instanciar a nossa aplicação Vue, montando-a na div com o id `#form`. + +E aqui vem um macete. O Vue.js tem como interpolador padrão o `{% raw %}{{ }}{% endraw %}`, e o template engine **Liquid** +usa o mesmo interpolador, por isso se tentarmos usar o Vue.js no Jekyll, teremos conflitos. + +Para resolver este problema, vamos alterar o interpolador do Vue.js para ser `${ }` ao invés de `{% raw %}{{ }}{% endraw %}`. + +```html + + + +``` + +Pronto! Agora com tudo configurado, podemos partir para a validação efetivamente. + +### 2. Inserindo `v-validate` nos campos + +A primeira coisa que temos de fazer é envolver o formulário com a div de id `#form` +onde a aplicação Vue será montada: + +```html +
    +
    +
    + ... +
    +
    +
    +``` + +E então podemos inserir as validações. O plugin VeeValidate tem uma +[série de validações disponíveis](http://vee-validate.logaretm.com/index.html#available-rules), +e vamos usar só algumas delas. + +Para isso, para cada campo de preenchimento vamos acrescentar o atributo `v-validate`. + +Este atributo permite ao plugin analisar os dados no formulário em tempo de execução, +fazendo as validações necessárias conforme o usuário digita. + +Se houver erros na validação, o nome do campo é inserido em um objeto chamado `errors`. E +podemos verificar esse objeto usando o método `errors.has('nome-do-campo')` para +exibirmos ou não a mensagem de erro. + +```html +
    +
    +
    + + + + + + ${ errors.first('nome') } + + + ${ errors.first('email') } + + + ${ errors.first('mensagem') } + + +
    +
    +
    +``` + +Em todos os campos adicionamos um validador de obrigatoriedade `v-validate="'required'"` e +no campo e-mail adicionamos um validador extra, o validador de e-mail `v-validate="'required|email'"`. + +Preste atenção que os valores dentro do atributo estão dentro de aspas simples `' '`, +isso é muito importante, pois sem as aspas o validador não funciona. + +Abaixo de cada campo, colocamos um `` com um `v-if`, que ficará ouvindo as alterações +no objeto de erros, e, caso retorne verdadeiro, irá exibir a mensagem. + +É bacana observar uma funcionalidade no objeto de erros. Ele possui um método +chamado `first()`, que, dado o nome do campo, ele retorna a primeira mensagem +de erro encontrada. Assim, se você inserir vários validadores em um campo, ele não +vai exibir uma lista de erros embaixo do campo, simplesmente exibirá um por vez. + +### 3. Submetendo o formulário quando não há erros + +As validações estão ok, porém o comportamento do formulário ainda não é o esperado. +Se você tentar submeter o formulário nesse ponto, irá conseguir. + +Precisamos que o formulário só seja submetido quando não há erros, e para fazer +isso devemos evitar o comportamento padrão do formulário e fazer uma checagem +do objeto de erros antes da submissão. + +Então, no javascript, vamos criar um método que será chamado quando o usuário +tentar submeter o formulário: + +```html + + + +``` + +O que esse método faz é: + +1. Chamar o método `validateAll()` do validador do VeeValidate para atualizar o objeto `errors`. +2. Checar se existe qualquer erro usando o método `any()` do objeto de erros. +3. Se não há erros, pega o objeto da aplicação Vue que possui a referência `contato` e chama o método `submit()`. + +Agora falta atualizar o nosso formulário para chamar este método: + +```html +
    +
    +
    + ... +
    +
    +
    +``` + +Perceba que adicionamos na declaração do formulário um *listener* `v-on:submit.prevent="validateBeforeSubmit"`, que é a parte +que evita o comportamento padrão ao submeter o formulário, e chama o método `validateBeforeSubmit()`. + +Também adicionamos `ref="contato"` para podermos recuperar o objeto javascript do formulário, +e assim executarmos o método `submit()`. + +### 4. Melhorando a UX + +Pra finalizar este tutorial, vamos melhorar a experiência do usuário adicionando +alguma cor e personalizando as mensagens de erro. + +Vou utilizar a classe `has-error` para colocar o estilo. + +```html +
    +
    +
    + + + + + + ${ errors.first('nome') } + + + ${ errors.first('email') } + + + ${ errors.first('mensagem') } + + +
    +
    +
    +``` + +E, finalmente, para personalizar as mensagens de erro padrão do plugin, precisamos alterar +o dicionário de mensagens do validador do VeeValidate. + +Mais detalhes de como fazer isso você [encontra aqui](http://vee-validate.logaretm.com/localization.html). + +```html + + + +``` + +É isso! Esse é o resultado final: + +

    See the Pen Formulário de Contato com Vue.js by Thiago Rossener (@thiagorossener) on CodePen.

    + + +Espero que tenha gostado :) + +## Antes de ir embora + +Tive uma ideia de começar a colocar mensagens de reflexão no final dos posts +como incentivo para procurarmos evoluir e sermos não só desenvolvedores melhores, +mas pessoas melhores. + +Eu tenho lido bastante e queria compartilhar com vocês essas mensagens. Então, +para inaugurar esse novo estilo, aqui vai a primeira: + +> 90% da vida é sobre se manter calmo. - **Dr. Chris Feudtner** + + + + + + + + + + + + + + + + + + + + diff --git a/_posts/2017-08-14-box-shadow-ou-filter-drop-shadow.md b/_posts/2017-08-14-box-shadow-ou-filter-drop-shadow.md new file mode 100644 index 0000000000..68786c7cd4 --- /dev/null +++ b/_posts/2017-08-14-box-shadow-ou-filter-drop-shadow.md @@ -0,0 +1,137 @@ +--- +layout: post +title: "box-shadow ou filter: drop-shadow?" +date: 2017-08-14 22:55:45 +image: 'http://res.cloudinary.com/dm7h7e8xj/image/upload/c_scale,w_760/v1502757949/o-sombra_xyw4wq.jpg' +description: Duas escolhas, um único efeito. Saiba quando usar o estilo certo na hora certa. +category: 'css' +tags: + - css + - frontend +twitter_text: Duas escolhas, um único efeito. Saiba quando usar o estilo certo na hora certa. +introduction: Descubra em que casos é melhor escolher um estilo ou o outro para fazer um efeito de sombra. +--- + +Ta aí uma dúvida legal de responder. + +Essa semana estive fazendo um trabalho como freelancer onde a ideia era desenvolver +um componente totalmente personalizado. Eis que o componente em questão era esse +aqui: + +![Imagem do componente](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1502758928/componente_d4u8hh.png) + +Como você pode ver, não é trivial. Nunca tinha feito um componente com tantas +características singulares como esse, mas como eu não sou de abandonar um bom +desafio, lá fui eu. + +
    + +Primeira questão: por onde começar? + +A voz da experiência logo me falou "comece pelo mais difícil". + +E a voz da diversão sem limites disse "comece pelo mais legal". + +E aí, na minha audácia e espírito de rebeldia falei "e se eu fizesse os dois?" 😎 + +
    + +~~Ok, talvez eu não tenha falado isso em voz alta.~~ + +Então escolhi a aba em formato de seta. + +Foi um elemento bastante interessante de fazer, o mais desafiador, +sem dúvida, foi fazer o lado esquerdo num formato irregular, o lado direito também +num formato irregular e o conteúdo da seta com largura flexível. + +Eu normalmente faria isso usando imagens, mas dessa vez inovei, e usei SVG para poder +deixar essa faixa colorida na lateral dinâmica, assim não tenho que fazer uma imagem +nova sempre que quiser mudar de cor. + +Como fiz isso vou deixar para outro post, mas o que eu quero focar nesse aqui é +só num desses problemas: **a sombra**. + +Imagine que temos um componente onde dois lados tem um formato totalmente não-quadrado, +e no centro tem um `
    ` que se ajusta com o conteúdo. + +![Imagem de um elemento irregular](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1502795756/no-shadow_tnqdm8.jpg) + +A nossa sombra tem que ficar fluída, e contornando todo o componente de acordo com +seu formato, certo? + +Beleza, pra fazer uma sombra, o CSS oferece dois atributos nos quais podemos fazer +esse efeito, são eles o `box-shadow` e o `filter: drop-shadow`. + +Vamos ver na prática a diferença. + +Se aplicarmos a esse elemento o **box-shadow**, teremos o seguinte resultado: + +![Resultado com o box-shadow](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1502795862/box-shadow_dkh7o5.jpg) + +Porém, se aplicarmos ao mesmo elemento o **filter: drop-shadow**, temos esse resultado: + +![Resultado com o drop-shadow](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1502795717/filter-drop-shadow_nrhzex.jpg) + +A diferença é clara, o filtro *drop-shadow* é capaz de perceber o formato da imagem +que está sendo renderizada para aplicar a sombra, e isso também é válido se ao invés +de uma imagem com fundo transparente, tivermos um SVG. + +

    See the Pen box-shadow vs filter: drop-shadow by Thiago Rossener (@thiagorossener) on CodePen.

    + + +## Vantagens e desvantagens + +Você provavelmente deve estar pensando: + +> Demorou! Vou usar o **drop-shadow** _SEMPRE_! + +Acontece que infelizmente nem tudo é leite ninho com Nutella nessa vida. + +O `box-shadow` é suportado por mais navegadores que o `filter: drop-shadow`, e +principalmente por quais? Exatamente, navegadores da *Microsoft*. + +Dá uma olhada no suporte desses caras: + +![Suporte para box-shadow](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1502757053/box-shadow_ldmnmo.jpg) +*[Clique aqui para ver mais detalhes](http://caniuse.com/#feat=css-boxshadow)* + +![Suporte para drop-shadow](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1502757056/drop-shadow_zxpgoj.png) +*[Clique aqui para ver mais detalhes](http://caniuse.com/#feat=css-filters)* + +## Conclusão + +Os dois estilos matam a pau o problema das sombras, mas se encaixam em diferentes +situações. + +Para um caso onde a sombra é trivial, o `box-shadow` resolve o problema, mesmo porque +ele tem outras vantagens como a possibilidade de criar sombras internas, e aplicar mais +de uma sombra ao mesmo elemento. + +Porém, se você precisa que a sombra seja aplicada a elementos com formatos +diferentões é muito mais negócio ficar com o `drop-shadow`, que possibilita o mesmo +efeito para esses casos. + +Espero que esse artigo curtinho tenha deixado mais claro em quais situações é +melhor usar cada um deles. + +Ficou com alguma dúvida? Tem alguma crítica? Pode mandar aqui nos comentários que ficarei +feliz em respondê-las. ✌️ + +> Não importa o quão devagar você vá, desde que você não pare. +> +> -- **Confúcio** + + + + + + + + + + + + + + + diff --git a/_posts/2017-08-19-como-quase-cai-num-golpe-no-facebook-e-como-desviar-deles.md b/_posts/2017-08-19-como-quase-cai-num-golpe-no-facebook-e-como-desviar-deles.md new file mode 100644 index 0000000000..64879f5598 --- /dev/null +++ b/_posts/2017-08-19-como-quase-cai-num-golpe-no-facebook-e-como-desviar-deles.md @@ -0,0 +1,145 @@ +--- +layout: post +title: "Como quase cai num golpe no Facebook e como desviar deles" +date: 2017-08-19 12:26:40 +image: 'http://res.cloudinary.com/dm7h7e8xj/image/upload/c_fill,h_399,w_760/v1503153729/golpe_ghb84o.jpg' +description: Um guia para escapar de gente esperta tentando roubar seu dinheiro. +category: 'vida' +tags: +- vida +- dicas +twitter_text: Um guia para escapar de gente esperta tentando roubar seu dinheiro. +introduction: Navegando na minha timeline fui atraído por um anúncio que quase me levou R$ 188,00. Aqui eu conto como descobri o esquema. +--- + +Hoje quase perdi **R$ 188,00** olhando a minha timeline no Facebook. + +Esse artigo é pra alertar quem costuma comprar coisas legais pela internet para +ficar atento a alguns pontos e não perder dinheiro navegando. + +Em 2007 comprei um MP4 da China que levou 3 meses pra chegar, paguei um imposto quase +mais caro que o aparelho, e a bateria durava 1h. + +![Genius](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1503151642/genius_foabwg.png) + +Aparentemente não aprendi muita coisa, pois estava quase perdendo dinheiro de novo. + +Sábado de manhã, estava dando aquela passada rápida na timeline do Facebook quando +pintou na tela esse anúncio: + +![Imagem do Anúncio](http://res.cloudinary.com/dm7h7e8xj/image/upload/q_80/v1503151704/anuncio_etpxre.jpg) + +O vídeo do anúncio é esse aqui: + + + +Assisti ao vídeo e achei a mochila sensacional, quando viajei pra Europa em 2014 era +exatamente uma mochila assim que estava procurando! + +Cliquei no anúncio. + +![Imagem do site com o Anúncio](http://res.cloudinary.com/dm7h7e8xj/image/upload/c_scale,q_80,w_800/v1503151756/side-com-anuncio_qzhqir.jpg) + +O preço não estava nenhum absurdo pra uma mochila a prova d'água, anti-furto, +carregadora de celulares, protetora de notebooks, porta-canetas e salvadora de dores +nas costas. Era praticamente a mochila da *Daenerys Targaryen*. + +Alguns segundos depois, uma roleta apareceu na tela, era só colocar o e-mail +ali e rodar a roleta que eu ainda poderia ganhar um desconto. + +Rodei a parada, e *voilà*, cupom de **5% de desconto**. Precisava pensar duas vezes? + +![Shut up and take my money](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1503152309/shut-up-and-take-my-money_xgnw7v.jpg) + +Cliquei em adicionar ao carrinho, preenchi meus dados e meu endereço, eu estava quase lá. +Quando chegou a parte do cartão de crédito, uma voz, da consciência ou da conta bancária, +saiu do meio das nuvens dizendo: + +![Mufasa saindo das nuvens](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1503152427/mufasa_n4vl2g.jpg) +*Verificarás a origem do site para não te arrependeres* + +**Fechei tudo.** + +Então parei pra pensar *"Calma, a mochila é daora, mas são quase R$ 200,00, dá uma pesquisada nos caras antes"*. + +Cliquei no **About Us** e dei de cara com essa página. + +![Imagem da página do About Us](http://res.cloudinary.com/dm7h7e8xj/image/upload/c_scale,q_80,w_600/v1503152541/about-us_axqwzg.jpg) + +Cliquei com o *botão direito do mouse na primeira foto > Copiar endereço da imagem*. + +Abri a busca do [Google Imagens](https://images.google.com/) e colei o endereço. + +E então aquele suspiro de alívio de quem economizou R$ 188,00... Esse foi o resultado da +busca: + +![Imagem do resultado da busca](http://res.cloudinary.com/dm7h7e8xj/image/upload/c_scale,q_80,w_600/v1503152630/resultado_da_busca_kuvtlr.jpg) + +15 sites com o mesmo **About Us**, mesmas imagens, só mudava o texto, o endereço +do site e o título da página. Estranho? Suspeito? No mínimo um golpe super fácil +de aplicar. É só comprar um domínio, instalar o mesmo template, mudar o nome do site, +jogar uma promoção que chame atenção no anúncio do Facebook e pronto, esperar o +dinheiro cair na conta vindo diretamente do interior de SP. + +Se der algo errado, é fechar o site e abrir um novo. + + + +Para ter certeza mesmo bastou jogar na busca o "nome do site + é de confiança". Nesse +caso em inglês "Dudes Gadget is reliable" para provar que se tratava de um esquema. + +- Avaliações no [TrustPilot](https://www.trustpilot.com/review/dudegadgets.com) +- Reclamações no [#reportscam](https://reportscam.com/dudegadgetscom/) + +Só uma nota 5, o restante só notas 1 e com comentários como esses: + +![Comentário 1](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1503153240/avaliacao-1_cd09uq.jpg) +*Eu nunca recebi meu pedido. Esperando por 3 meses!!! E nenhuma resposta da companhia.* + +![Comentário 2](http://res.cloudinary.com/dm7h7e8xj/image/upload/v1503153294/avaliacao-2_ieolhs.jpg) +*FRAUDE... NÃO USE. O produto nunca chegou e foi dito que eles não oferecem reembolso a menos que o produto seja retornado.* + +## Conclusão + +Tome muito cuidado com os anúncios do Facebook. Para evitar esse tipo de golpe +sempre faça *no mínimo* essas perguntas: + +### A página no Facebook está coerente com o nome da empresa e com o que eles estão vendendo? + +No meu caso a página da empresa tinha na imagem de perfil um gato usando óculos de sol +e na capa a foto de uma vista para o mar. O nome da página no anúncio era "Super Cool Stuffs" (*Coisas Super Legais*), enquanto o nome do site no link era "Dudes Gadget", não tem porque ser diferente se +a empresa é séria. + +### Que empresa é essa? + +Dê uma olhada no "About Us" ou no "Sobre Nós", tente descobrir há quanto tempo essa +empresa está ativa. Pegue a foto que aparece lá, seja do dono, ou de um funcionário, +jogue na [busca do Google por imagens]((https://images.google.com/)) e veja se essa foto não foi tirada de outro site. + +### Procure no Google + +Parece um conselho óbvio, mas se você é impulsivo como eu, e vez ou outra acaba +caindo nessas estratégias de engenharia social para te vender qualquer coisa na +internet, faça uma busca com palavras-chave como "nome da empresa + *é confiável*, +*é boa*, *entrega o produto*". + +E se for uma empresa de fora, faça essa busca em inglês. + +Leia os comentários de avaliações (não do site do anúncio!) e reclamações que você achar e tire suas conclusões, muitos comentários sem resposta da empresa não é um bom sinal. + +## Alguma outra dica? + +Se conhece alguma outra dica para evitar cair nesse tipo de golpe deixa nos +comentários aqui embaixo pra ~~me ajudar~~ ajudar a galera a não cometer mais +esses erros :) + +> A dúvida é o princípio da sabedoria. **- Aristóteles** + + + + + + + + + diff --git a/about.md b/about.md new file mode 100644 index 0000000000..2fa3767e0a --- /dev/null +++ b/about.md @@ -0,0 +1,17 @@ +--- +layout: page +title: About +description: Some description. +permalink: /about/ +--- + +Your Name + +## About + +Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod +tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo +consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse +cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non +proident, sunt in culpa qui officia deserunt mollit anim id est laborum. diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000000..0b312e88e7 --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,3 @@ +html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner, +[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring, +[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}a{-webkit-tap-highlight-color:rgba(0,0,0,0)}h1,h2,h3,h4{font-family:'Titillium Web','Helvetica Neue',Helvetica,sans-serif;font-weight:700;font-style:normal}.text-center{text-align:center}.flex-grid article{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0}.flex-grid article.shown{-ms-filter:none;-webkit-filter:none;filter:none;opacity:1}.flex-grid article.animate{-webkit-animation:moveUp .65s;animation:moveUp .65s;-ms-filter:none;-webkit-filter:none;filter:none;opacity:1}@-webkit-keyframes moveUp{from{-webkit-transform:translateY(200px);transform:translateY(200px)}to{-webkit-transform:translateY(0);transform:translateY(0);-ms-filter:none;-webkit-filter:none;filter:none;opacity:1}}@keyframes moveUp{from{-webkit-transform:translateY(200px);transform:translateY(200px)}to{-webkit-transform:translateY(0);transform:translateY(0);-ms-filter:none;-webkit-filter:none;filter:none;opacity:1}}.icons-home{text-align:center;}.icons-home a{display:inline-block;padding:.938rem;margin:.125rem;border-radius:50%;border:.125rem solid #fff;line-height:0;-webkit-transition:all .7s;transition:all .7s;}.icons-home a .icon{fill:#fff;width:18px;height:18px;}@media only screen and (min-width:37.5rem){.icons-home a .icon{width:30px;height:30px}}.icons-home a:hover{background:#fff;}.icons-home a:hover .icon{fill:#333}.down{position:absolute;bottom:50px;width:100%;display:block;text-align:center;}.down .icon{position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100px;height:100px;fill:#fff;-webkit-animation:pulse 1.3s infinite;animation:pulse 1.3s infinite}*,*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box}body.has-push-menu,body.has-push-menu aside,body.has-push-menu .progress-bar{-webkit-transition:all .3s ease;-webkit-transition:all .3s ease;transition:all .3s ease}body.has-push-menu{overflow-x:hidden;position:relative;left:0;}body.has-push-menu.push-menu-to-right{left:15rem;}body.has-push-menu.push-menu-to-right .progress-bar{left:15rem}aside{position:fixed;width:15rem;height:100%;top:0;left:-15rem;background-color:#fff;z-index:20;}@media only screen and (min-width:37.5rem){aside{padding:.625rem 0 0}}aside.open{left:0}aside h2{margin:0 1.25rem 0;font-family:'Titillium Web','Helvetica Neue',Helvetica,sans-serif;font-weight:400;font-style:normal;font-size:1.125rem;color:#141414;border-bottom:1px solid #141414;line-height:50px;}@media only screen and (min-width:37.5rem){aside h2{font-size:1.25rem}}aside nav ul{padding:0;margin:.313rem 0;}@media only screen and (min-width:37.5rem){aside nav ul{margin:.625rem 0}}aside nav li{margin:0;list-style-type:none;}aside nav li a{width:100%;display:block;padding:.938rem 1.25rem;text-decoration:none;font-family:'Titillium Web','Helvetica Neue',Helvetica,sans-serif;font-weight:300;font-style:normal;color:#141414;}aside nav li a:hover{color:#fff;background:#ff0a16}.search-wrapper{position:fixed;top:30px;width:100%;padding-right:5%;padding-left:5%;-webkit-transform:translateY(-200px);transform:translateY(-200px);z-index:19;}.search-wrapper.active{-webkit-transform:translateY(0);transform:translateY(0)}.search-form{position:relative;top:0;width:100%;-webkit-transform:translateX(-200px);transform:translateX(-200px);-webkit-transition:all 200ms 100ms cubic-bezier(0,.6,.4,1);transition:all 200ms 100ms cubic-bezier(0,.6,.4,1);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;z-index:19;}.search-form .search-field{width:100%;height:2.5rem;line-height:1.875rem;font-family:'Titillium Web','Helvetica Neue',Helvetica,sans-serif;font-weight:300;font-style:normal;font-size:1.25rem;color:#141414;background-color:#fff;border:0;border-radius:1.25rem;padding:.313rem 1.563rem;outline:0;}.search-form .search-field:focus{outline:0}.search-form.active{top:0;-webkit-transform:translateX(0);transform:translateX(0);-ms-filter:none;-webkit-filter:none;filter:none;opacity:1}.search-form .search-list{position:absolute;width:100%;font-family:'Titillium Web','Helvetica Neue',Helvetica,sans-serif;font-weight:300;font-style:normal;display:none;padding:0 1.25rem;margin:1.25rem 0;list-style-type:none;}.active .search-form .search-list{display:block}@media only screen and (max-width:37.5rem){.search-form .search-list{height:380px;overflow:scroll}}.search-form .search-list .entry-date{float:right;display:none;font-size:.875rem;}@media only screen and (min-width:37.5rem){.search-form .search-list .entry-date{display:inline}}.search-form .search-list .entry-category{text-transform:uppercase;background-color:#ff0a16;margin-right:.313rem;height:1.25rem;border-radius:.625rem;font-size:.75rem;padding:.125rem .5rem;color:#fff}.search-form .search-list a{color:#fff;text-decoration:none;display:block;padding:.938rem 0;width:100%;border-bottom:1px solid #333;-webkit-transition:all .3s;transition:all .3s;line-height:1.563rem;}.search-form .search-list a:hover{color:#ff0a16;}.search-form .search-list a:hover .entry-category{color:#fff}.search-form .icon-remove-sign{position:absolute;top:0;right:0;display:block;width:1.625rem;height:1.625rem;padding:.313rem;fill:#fff;background-color:#ff0a16;border-radius:13px;margin:.438rem;cursor:pointer;outline:0;z-index:1}.search-overlay{overflow:hidden;}.search-overlay:after{position:fixed;top:0;left:0;width:100%;height:100%;min-height:100%;background-color:#141414;content:'';z-index:18}.img-rounded{border-radius:50%}html,body{height:100%}.bar-header{background-color:#141414;padding:.625rem .938rem;position:fixed;width:100%;z-index:10;-webkit-transition:top .5s;transition:top .5s;}@media only screen and (min-width:37.5rem){.bar-header{padding:.938rem 0}}.bar-header .logo{margin:0;height:2rem;line-height:2rem}.bar-header .logo a{color:#fff;text-decoration:none;font-size:2rem}.bar-header .icon-menu{float:left;cursor:pointer;margin:.313rem 1.25rem .313rem 0;width:1.25rem;height:1.25rem;fill:#fff;}@media only screen and (min-width:37.5rem){.bar-header .icon-menu{margin:.313rem 1.25rem .313rem 1.563rem}}.bar-header .dosearch{float:right;display:inline-block;width:1.875rem;height:1.875rem;cursor:pointer;margin:0 0 0 0;}@media only screen and (min-width:37.5rem){.bar-header .dosearch{margin:0 1.25rem 0 0}}.bar-header .icon-search{width:1.25rem;height:1.25rem;fill:#fff;margin:.313rem}body.main-page{background-color:#141414;}body.main-page .bar-header{background-color:rgba(0,0,0,0.7)}.overlay{position:fixed;width:100%;height:100%;top:0;right:0;left:0;bottom:0;pointer-events:none;background:rgba(0,0,0,0.6);z-index:17;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;-webkit-transition:all .3s;transition:all .3s;}.overlay.show{pointer-events:auto;-ms-filter:none;-webkit-filter:none;filter:none;opacity:1}main{font-family:'Titillium Web','Helvetica Neue',Helvetica,sans-serif;font-weight:400;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding-top:5rem;}@media only screen and (min-width:37.5rem){main{padding-top:6.25rem}}.row{width:auto;max-width:100%;float:none;display:block;margin-right:auto;margin-left:auto;padding-left:0;padding-right:0;margin:0 10px}.row::after{content:'';display:table;clear:both}.flex-grid{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap}.title-category{width:auto;max-width:62.5rem;float:none;display:block;margin-right:auto;margin-left:auto;padding-left:0;padding-right:0;font-size:2.5rem;margin-top:0;text-transform:uppercase;padding:0 .938rem}.title-category::after{content:'';display:table;clear:both}.box-item{-ms-flex:1 0 300px;-webkit-box-flex:1;flex:1 0 300px;margin:0 0 1.875rem;display:inline-block;min-height:17.813rem;-webkit-transition:all .3s;transition:all .3s;position:relative;z-index:1;}@media only screen and (min-width:37.5rem){.box-item{margin:0 .938rem 1.875rem}}.box-item:hover{z-index:2;-webkit-transform:scale(1.1);transform:scale(1.1);}.box-item:hover img{-webkit-filter:grayscale(100%);filter:grayscale(100%);-webkit-transform:scale(1.05);transform:scale(1.05)}.box-item:hover .box-body time,.box-item:hover .box-body p{color:#fff}.box-item:hover .box-body .new-post:after{background-color:#000}.box-item:hover .box-body .cover a:before{-ms-filter:none;-webkit-filter:none;filter:none;opacity:1}.box-item a{text-decoration:none;display:block}.box-item .category{display:block;height:2.25rem;line-height:2.25rem;text-transform:uppercase;font-weight:bold;font-size:1.125rem;padding:0 .938rem;}.box-item .category a{color:#fff}.box-item .box-body img{width:100%;height:auto;margin:0 auto;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.box-item .box-body time{font-weight:300;font-size:1rem;color:#797979;pointer-events:none}.box-item .box-body h2{margin:.625rem 0;font-size:1.5rem;font-family:'Titillium Web','Helvetica Neue',Helvetica,sans-serif;font-weight:800;font-style:normal;color:#fff;line-height:1.875rem;}.box-item .box-body p{margin:0 0 1.875rem;color:#c2c2c2;font-size:1.063rem;line-height:1.625rem}.box-item .box-body .tags a{height:1.875rem;line-height:1.625rem;color:#fff;padding:0 .625rem;border:1px solid #fff;border-radius:15px;display:inline-block;margin:0 .625rem .625rem 0;z-index:50;}.box-item .box-body .tags a:hover{color:#141414;background:#fff;border-color:#fff}.box-item .box-body .new-post:after{content:'New post';text-transform:uppercase;display:inline-block;background:#ff0a16;color:#fff;font-size:.813rem;font-weight:700;line-height:1.5rem;padding:0 .5rem;position:absolute;margin-top:-2.187rem}.box-item .box-body .cover{position:relative;}.box-item .box-body .cover a:before{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;background-color:rgba(0,0,0,0.7);background-image:url("../../assets/img/icons/read.svg");background-size:48px;background-repeat:no-repeat;background-position:center center;content:'';display:block;width:5rem;height:5rem;border-radius:40px;position:absolute;top:50%;left:50%;margin-top:-2.5rem;margin-left:-2.5rem;border:2px solid #fff;z-index:1000}.box-item .box-body .cover .preload{background:url("../../assets/img/icons/preloader.svg") center center no-repeat}.box-item .box-info{padding:.938rem}.post{position:relative;top:1.875rem;background:#fff;}@media only screen and (min-width:37.5rem){.post{top:3.125rem}}.post-content{padding:2.5rem 0;}.post-content img{max-width:100%;margin:0 auto;display:block;padding:10px 0;}.post-content img.emoji{display:inline;padding:0}.post-content img.post-cover{margin-bottom:1.25rem;}@media only screen and (min-width:37.5rem){.post-content img.post-cover{margin-bottom:1.813rem}}.post-content img + em{display:block;color:#a9a9a9;text-align:center;font-family:'Titillium Web','Helvetica Neue',Helvetica,sans-serif;font-weight:300;font-style:normal}.post-content p,.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content ul,.post-content ol,.post-content iframe{width:auto;max-width:50rem;float:none;display:block;margin-right:auto;margin-left:auto;padding-left:0;padding-right:0;font-family:'Titillium Web','Helvetica Neue',Helvetica,sans-serif;font-weight:400;font-style:normal;font-size:1.125rem;line-height:2.188rem;padding:0 1.25rem;margin:0 auto 1.25rem;letter-spacing:.05rem;}.post-content p::after,.post-content h1::after,.post-content h2::after,.post-content h3::after,.post-content h4::after,.post-content ul::after,.post-content ol::after,.post-content iframe::after{content:'';display:table;clear:both}@media only screen and (min-width:37.5rem){.post-content p,.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content ul,.post-content ol,.post-content iframe{font-size:1.25rem;line-height:2.5rem;margin:0 auto 1.813rem}}.post-content h1.post-title{margin:0 auto;line-height:2.5rem;}@media only screen and (min-width:37.5rem){.post-content h1.post-title{line-height:3.75rem;margin:0 auto .625rem}}.post-content p.subtitle{color:#a9a9a9;font-size:1.125rem;margin:0 auto .625rem;line-height:1.875rem;}@media only screen and (min-width:37.5rem){.post-content p.subtitle{font-size:1.25rem;line-height:2.5rem}}.post-content p.post-info{font-family:'Titillium Web','Helvetica Neue',Helvetica,sans-serif;font-weight:300;font-style:normal;font-size:.813rem;letter-spacing:0;color:#a9a9a9;margin:0 auto;}@media only screen and (min-width:37.5rem){.post-content p.post-info{font-size:1rem}}.post-content p.post-info span,.post-content p.post-info time{vertical-align:middle}.post-content p.post-info time{margin-right:.625rem;}@media only screen and (min-width:37.5rem){.post-content p.post-info time{margin-right:1.875rem}}.post-content li{padding:.625rem 0;ulmargin-bottom:0}.post-content p,.post-content li{color:#333;}.post-content p code,.post-content li code{color:#bf616a;word-wrap:break-word;background:#f2f2f2;padding:.188rem .313rem;border-radius:3px;font-size:1.125rem}.post-content a{color:#00e;text-decoration:none}.post-content iframe{margin-top:1.875rem;width:100%}.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5{font-family:'Titillium Web','Helvetica Neue',Helvetica,sans-serif;font-weight:700;font-style:normal}.post-content h1{font-size:2rem;line-height:1.4;}@media only screen and (min-width:37.5rem){.post-content h1{font-size:2.938rem}}.post-content h2{font-size:1.5rem;line-height:1.4;}@media only screen and (min-width:37.5rem){.post-content h2{font-size:2.313rem}}.post-content h3{font-size:1.25rem;line-height:1.4;}@media only screen and (min-width:37.5rem){.post-content h3{font-size:1.688rem}}.post-content ul,.post-content ol{padding-left:2.5rem}.post-content ul.post-list{padding:0;}.post-content ul.post-list.svg-serie p{padding:0}@media only screen and (max-width:37.5rem){.post-content ul.post-list{padding:0 1.25rem}}.post-content blockquote{width:auto;max-width:45.625rem;float:none;display:block;margin-right:auto;margin-left:auto;padding-left:0;padding-right:0;border-left:.313rem solid #333;padding:0 1.875rem;margin:3.125rem auto;}.post-content blockquote::after{content:'';display:table;clear:both}@media only screen and (max-width:37.5rem){.post-content blockquote{width:90%}}.post-content blockquote p{color:rgba(0,0,0,0.6);margin:0;}@media only screen and (max-width:37.5rem){.post-content blockquote p{font-size:1.25rem;line-height:1.5;padding:0}}.post-content hr{width:auto;max-width:47.5rem;float:none;display:block;margin-right:auto;margin-left:auto;padding-left:0;padding-right:0;border:1px solid #f2f2f2;margin:50px auto}.post-content hr::after{content:'';display:table;clear:both}.post-content > table{margin:3.125rem auto;}@media only screen and (max-width:37.5rem){.post-content > table{display:none}}.post-content > table th,.post-content > table td{border:.125rem solid #ccc;padding:.313rem}.post-content td > pre{padding:0;margin:0}.post-content td.gutter.gl{padding-right:1.563rem;line-height:1.5rem}.progress-bar{position:fixed;left:0;right:0;bottom:-100%;display:block;width:100%;background-color:#fff;padding:.625rem;-webkit-transition:bottom .5s;transition:bottom .5s;border-top:1px solid #f2f2f2;}.progress-bar .bar{display:block;width:100%;height:1.125rem;padding:.313rem 3.125rem}.progress-bar .completed{float:left;display:block;height:8px;background-color:#ff0a16}.progress-bar .remaining{float:left;display:block;height:.5rem;background-color:#ccc}.progress-bar .time-completed,.progress-bar .time-remaining{color:#333}.progress-bar .time-completed{float:left}.progress-bar .time-remaining{float:right}.icon-clock,.icon-calendar{width:.938rem;height:.938rem;fill:#a9a9a9;vertical-align:middle;margin-right:.188rem}.post-content .tags{width:auto;max-width:50rem;float:none;display:block;margin-right:auto;margin-left:auto;padding-left:0;padding-right:0;font-family:'Titillium Web','Helvetica Neue',Helvetica,sans-serif;font-weight:400;font-style:normal;font-size:1.125rem;margin:0 auto 1.813rem;margin-top:1.875rem;letter-spacing:.01rem;line-height:2.5rem;}.post-content .tags::after{content:'';display:table;clear:both}@media only screen and (min-width:37.5rem){.post-content .tags{font-size:1.25rem;letter-spacing:.05rem}}.post-content .tags a{font-size:.875rem;color:#141414;display:inline-block;border:1px solid #141414;border-radius:1.25rem;padding:0 .625rem;margin-right:.125rem;margin-bottom:.5rem;text-decoration:none;-webkit-transition:all .3s;transition:all .3s;}.post-content .tags a:hover{color:#fff;border:1px solid #141414;background-color:#141414}.post-content .tag-title{font-family:'Titillium Web','Helvetica Neue',Helvetica,sans-serif;font-weight:300;font-style:normal;font-size:2.375rem;margin-top:3.75rem;width:auto;max-width:50rem;float:none;display:block;margin-right:auto;margin-left:auto;padding-left:0;padding-right:0;}.post-content .tag-title::after{content:'';display:table;clear:both}@media only screen and (max-width:37.5rem){.post-content .tag-title{font-size:1.875rem;margin-top:1.25rem;padding:0 1.25rem}}.post-content .post-list{list-style:none;margin:1.563rem auto;}@media only screen and (max-width:37.5rem){.post-content .post-list{padding:0 1.25rem}}.post-content .post-list a{display:block;border-bottom:1px solid #dadada;padding:.625rem 0;text-decoration:none;-webkit-transition:all .5s;transition:all .5s;font-size:1.125rem;}.post-content .post-list a:hover{border-bottom:1px solid #ff0a16}.post-content .post-list .entry-date{float:right;}@media only screen and (max-width:37.5rem){.post-content .post-list .entry-date{display:none}}.share{width:auto;max-width:800px;float:none;display:block;margin-right:auto;margin-left:auto;padding-left:0;padding-right:0;text-align:center;border-top:1px solid #f2f2f2;padding-top:1.25rem;}.share::after{content:'';display:table;clear:both}article .share{border-top:none}.share svg{margin:.938rem;width:35px;height:35px}.share a{text-decoration:none;border:none}.share .icon{-webkit-transition:all .3s;transition:all .3s}.share .icon-twitter:hover{fill:#1da1f3}.share .icon-facebook:hover{fill:#3b5998}.share .icon-google-plus:hover{fill:#d34836}pre{background:#222;width:100%;padding:1.25rem 0;color:#fff;margin:1.875rem 0;font-size:.875rem;}@media only screen and (min-width:37.5rem){pre{font-size:1rem;padding:2.5rem 0;margin:3.125rem 0}}pre code{width:auto;max-width:50rem;float:none;display:block;margin-right:auto;margin-left:auto;padding-left:0;padding-right:0;padding:0 1.25rem;}pre code::after{content:'';display:table;clear:both}@media only screen and (max-width:37.5rem){pre code{overflow-x:scroll}}pre span{line-height:1.5rem;font-family:'Monaco','Consolas','Menlo',monospace}.highlight{margin:1.25rem 0;}@media only screen and (min-width:37.5rem){.highlight{word-wrap:break-word}}.highlight .hll{background-color:#333}.highlight .c,.highlight .cm,.highlight .cp,.highlight .c1,.highlight .cs{color:#75715e}.highlight .err{color:#960050;background-color:#1e0010}.highlight .k,.highlight .kc,.highlight .kd,.highlight .kp,.highlight .kr,.highlight .kt,.highlight .no{color:#66d9ef}.highlight .l,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo,.highlight .se,.highlight .il{color:#ae81ff}.highlight .o,.highlight .p{color:#f7f7f2}.highlight .m,.highlight .n,.highlight .nb,.highlight .ni,.highlight .nl,.highlight .nn,.highlight .py,.highlight .nv,.highlight .w,.highlight .bp,.highlight .vc,.highlight .vg,.highlight .vi{color:#a4d043}.highlight .kn,.highlight .nt,.highlight .ow{color:#f92672}.highlight .ge{font-style:italic}.highlight .gs{font-weight:bold}.highlight .ld,.highlight .s,.highlight .sb,.highlight .sc,.highlight .sd,.highlight .s2,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:#e6db74}.highlight .na,.highlight .nc,.highlight .nd,.highlight .ne,.highlight .nf,.highlight .nx{color:#a6e22e}.contact-form{font-family:'Titillium Web','Helvetica Neue',Helvetica,sans-serif;font-weight:700;font-style:normal;padding:.625rem;}.contact-form fieldset{border:none;font-weight:normal}.contact-form input[type="text"],.contact-form input[type="email"],.contact-form textarea{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;display:block;color:#333;width:100%;padding:7px;border:none;border-bottom:1px solid #ddd;margin-bottom:10px;font-family:inherit;font-size:1.125rem;height:2.813rem;}.contact-form input[type="text"].has-error,.contact-form input[type="email"].has-error,.contact-form textarea.has-error{border-color:#f04242}.contact-form textarea{height:12.5rem}.contact-form span{display:block;font-size:.875rem;color:#f04242;padding-bottom:.625rem}.contact-form button[type="submit"]{display:block;padding:19px 39px 18px 39px;color:#fff;background:#ff0a16;font-size:1.125rem;width:100%;border:1px solid #ba0009;border-width:1px 1px 3px;margin-top:3.125rem;margin-bottom:.625rem;cursor:pointer;-webkit-transition:all .3s;transition:all .3s;outline:none;}.contact-form button[type="submit"]:hover{background:#d4000a}.contact-form [v-cloak]{display:none}.author{background:#f2f2f2;display:table;width:100%;padding:2.5rem 0;margin:2.5rem 0;}@media only screen and (min-width:37.5rem){.author{padding:3.125rem 0}}.author .details{margin:auto;max-width:50rem;padding:0 1.25rem;}@media only screen and (max-width:37.5rem){.author .details{text-align:center}}.author svg{width:25px;height:25px;margin-right:.625rem}.author a{fill:#a9a9a9;text-decoration:none;border:none;-webkit-transition:all .3s;transition:all .3s;}.author a:hover{fill:#ff0a16}.author img{width:11.25rem;border-radius:50%;display:block;margin:auto;}@media only screen and (min-width:37.5rem){.author img{float:left;margin-right:3.125rem}}.author .def{color:#808080;font-size:1.125rem;font-family:'Titillium Web','Helvetica Neue',Helvetica,sans-serif;font-weight:300;font-style:normal;margin:.625rem;}@media only screen and (min-width:37.5rem){.author .def{margin:0}}.author .name{margin:0;}.author .name a{font-family:'Titillium Web','Helvetica Neue',Helvetica,sans-serif;font-weight:700;font-style:normal;text-decoration:none;color:#000;font-size:1.875rem;}.author .name a:hover{color:#333}@media only screen and (min-width:37.5rem){.author .name a{font-size:2.813rem}}.author .desc{font-family:'Titillium Web','Helvetica Neue',Helvetica,sans-serif;font-weight:300;font-style:normal;margin:.625rem;font-size:1rem;line-height:1.563rem;}@media only screen and (min-width:37.5rem){.author .desc{font-size:1.125rem}}.comments{width:auto;max-width:50rem;float:none;display:block;margin-right:auto;margin-left:auto;padding-left:0;padding-right:0;padding:0 1.25rem;}.comments::after{content:'';display:table;clear:both}.comments h3{margin:0 0 1.875rem;font-size:1.875rem}footer{width:auto;max-width:50rem;float:none;display:block;margin-right:auto;margin-left:auto;padding-left:0;padding-right:0;border-top:1px solid #e6e6e6;background:#fff;padding:1.25rem 1.563rem;margin-top:3.125rem;margin-bottom:2.5rem;font-family:'Titillium Web','Helvetica Neue',Helvetica,sans-serif;font-weight:300;font-style:normal;}footer::after{content:'';display:table;clear:both}@media only screen and (min-width:37.5rem){footer{margin-top:6.25rem}}footer p{text-decoration:none;color:#141414;font-size:1rem;line-height:1.563rem}footer span{font-weight:700}footer svg{width:28px;height:28px;display:inline-block;vertical-align:middle;margin-right:.625rem;}@media only screen and (min-width:37.5rem){footer svg{margin-right:1.25rem}}footer svg.love{width:20px;height:20px;fill:#ff0a16;margin-top:-.125rem;margin-left:.188rem;margin-right:.188rem}footer a{fill:#808080;-webkit-transition:all .3s ease;transition:all .3s ease;text-decoration:none;color:#808080;}footer a:hover{fill:#ff0a16}footer a.creator:hover{text-decoration:underline}footer ul{padding:0;list-style-type:none;}footer ul li{margin-bottom:.625rem}footer ul a{text-decoration:none;font-size:.938rem;}footer ul a:hover{text-decoration:underline}.main-page footer{background:#141414;border-top:1px solid #2c2c2c;}.main-page footer p{color:#fff} \ No newline at end of file diff --git a/assets/img/404.gif b/assets/img/404.gif new file mode 100644 index 0000000000..9eed1fdfa4 Binary files /dev/null and b/assets/img/404.gif differ diff --git a/assets/img/blog-image.png b/assets/img/blog-image.png new file mode 100644 index 0000000000..e155473c8a Binary files /dev/null and b/assets/img/blog-image.png differ diff --git a/assets/img/icons/apple-icon-72x72.png b/assets/img/icons/apple-icon-72x72.png new file mode 100644 index 0000000000..e17429cc99 Binary files /dev/null and b/assets/img/icons/apple-icon-72x72.png differ diff --git a/assets/img/icons/apple-touch-icon-114x114.png b/assets/img/icons/apple-touch-icon-114x114.png new file mode 100644 index 0000000000..eec57d8918 Binary files /dev/null and b/assets/img/icons/apple-touch-icon-114x114.png differ diff --git a/assets/img/icons/apple-touch-icon-120x120.png b/assets/img/icons/apple-touch-icon-120x120.png new file mode 100644 index 0000000000..a622228eed Binary files /dev/null and b/assets/img/icons/apple-touch-icon-120x120.png differ diff --git a/assets/img/icons/apple-touch-icon-144x144.png b/assets/img/icons/apple-touch-icon-144x144.png new file mode 100644 index 0000000000..52737e43cb Binary files /dev/null and b/assets/img/icons/apple-touch-icon-144x144.png differ diff --git a/assets/img/icons/apple-touch-icon-152x152.png b/assets/img/icons/apple-touch-icon-152x152.png new file mode 100644 index 0000000000..53bdbbf793 Binary files /dev/null and b/assets/img/icons/apple-touch-icon-152x152.png differ diff --git a/assets/img/icons/apple-touch-icon-57x57.png b/assets/img/icons/apple-touch-icon-57x57.png new file mode 100644 index 0000000000..395cf5d47e Binary files /dev/null and b/assets/img/icons/apple-touch-icon-57x57.png differ diff --git a/assets/img/icons/apple-touch-icon-60x60.png b/assets/img/icons/apple-touch-icon-60x60.png new file mode 100644 index 0000000000..51a1c568ad Binary files /dev/null and b/assets/img/icons/apple-touch-icon-60x60.png differ diff --git a/assets/img/icons/apple-touch-icon.png b/assets/img/icons/apple-touch-icon.png new file mode 100644 index 0000000000..395cf5d47e Binary files /dev/null and b/assets/img/icons/apple-touch-icon.png differ diff --git a/assets/img/icons/favicon-16x16.png b/assets/img/icons/favicon-16x16.png new file mode 100644 index 0000000000..888aab5588 Binary files /dev/null and b/assets/img/icons/favicon-16x16.png differ diff --git a/assets/img/icons/favicon-32x32.png b/assets/img/icons/favicon-32x32.png new file mode 100644 index 0000000000..2eac24e4b9 Binary files /dev/null and b/assets/img/icons/favicon-32x32.png differ diff --git a/assets/img/icons/favicon-64x64.png b/assets/img/icons/favicon-64x64.png new file mode 100644 index 0000000000..9a64b75008 Binary files /dev/null and b/assets/img/icons/favicon-64x64.png differ diff --git a/assets/img/icons/largetile.png b/assets/img/icons/largetile.png new file mode 100644 index 0000000000..5b9872547b Binary files /dev/null and b/assets/img/icons/largetile.png differ diff --git a/assets/img/icons/mediumtile.png b/assets/img/icons/mediumtile.png new file mode 100644 index 0000000000..5c71d66f5f Binary files /dev/null and b/assets/img/icons/mediumtile.png differ diff --git a/assets/img/icons/preloader.svg b/assets/img/icons/preloader.svg new file mode 100644 index 0000000000..c568c5705d --- /dev/null +++ b/assets/img/icons/preloader.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/icons/read.svg b/assets/img/icons/read.svg new file mode 100644 index 0000000000..ef2db187b4 --- /dev/null +++ b/assets/img/icons/read.svg @@ -0,0 +1,2 @@ + + diff --git a/assets/img/icons/smalltile.png b/assets/img/icons/smalltile.png new file mode 100644 index 0000000000..2d0fbfcd9b Binary files /dev/null and b/assets/img/icons/smalltile.png differ diff --git a/assets/img/icons/widetile.png b/assets/img/icons/widetile.png new file mode 100644 index 0000000000..88d8040083 Binary files /dev/null and b/assets/img/icons/widetile.png differ diff --git a/assets/img/message.gif b/assets/img/message.gif new file mode 100644 index 0000000000..9ec0b7182c Binary files /dev/null and b/assets/img/message.gif differ diff --git a/assets/img/placeholder.png b/assets/img/placeholder.png new file mode 100644 index 0000000000..607bcaf624 Binary files /dev/null and b/assets/img/placeholder.png differ diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000000..15a3e0a8b2 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1 @@ +var Zepto=function(){function t(t){return null==t?String(t):B[V.call(t)]||"object"}function e(e){return"function"==t(e)}function n(t){return null!=t&&t==t.window}function r(t){return null!=t&&t.nodeType==t.DOCUMENT_NODE}function i(e){return"object"==t(e)}function o(t){return i(t)&&!n(t)&&Object.getPrototypeOf(t)==Object.prototype}function s(t){return"number"==typeof t.length}function a(t){return L.call(t,function(t){return null!=t})}function c(t){return t.length>0?S.fn.concat.apply([],t):t}function u(t){return t.replace(/::/g,"/").replace(/([A-Z]+)([A-Z][a-z])/g,"$1_$2").replace(/([a-z\d])([A-Z])/g,"$1_$2").replace(/_/g,"-").toLowerCase()}function l(t){return t in k?k[t]:k[t]=new RegExp("(^|\\s)"+t+"(\\s|$)")}function f(t,e){return"number"!=typeof e||R[u(t)]?e:e+"px"}function h(t){var e,n;return A[t]||(e=P.createElement(t),P.body.appendChild(e),n=getComputedStyle(e,"").getPropertyValue("display"),e.parentNode.removeChild(e),"none"==n&&(n="block"),A[t]=n),A[t]}function p(t){return"children"in t?N.call(t.children):S.map(t.childNodes,function(t){return 1==t.nodeType?t:void 0})}function d(t,e,n){for(E in e)n&&(o(e[E])||X(e[E]))?(o(e[E])&&!o(t[E])&&(t[E]={}),X(e[E])&&!X(t[E])&&(t[E]=[]),d(t[E],e[E],n)):e[E]!==x&&(t[E]=e[E])}function m(t,e){return null==e?S(t):S(t).filter(e)}function v(t,n,r,i){return e(n)?n.call(t,r,i):n}function g(t,e,n){null==n?t.removeAttribute(e):t.setAttribute(e,n)}function y(t,e){var n=t.className||"",r=n&&n.baseVal!==x;return e===x?r?n.baseVal:n:void(r?n.baseVal=e:t.className=e)}function b(t){try{return t?"true"==t||"false"!=t&&("null"==t?null:+t+""==t?+t:/^[\[\{]/.test(t)?S.parseJSON(t):t):t}catch(e){return t}}function w(t,e){e(t);for(var n=0,r=t.childNodes.length;r>n;n++)w(t.childNodes[n],e)}var x,E,S,C,T,j,O=[],N=O.slice,L=O.filter,P=window.document,A={},k={},R={"column-count":1,columns:1,"font-weight":1,"line-height":1,opacity:1,"z-index":1,zoom:1},_=/^\s*<(\w+|!)[^>]*>/,D=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,I=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,H=/^(?:body|html)$/i,F=/([A-Z])/g,q=["val","css","html","text","data","width","height","offset"],z=["after","prepend","before","append"],Z=P.createElement("table"),M=P.createElement("tr"),$={tr:P.createElement("tbody"),tbody:Z,thead:Z,tfoot:Z,td:M,th:M,"*":P.createElement("div")},J=/complete|loaded|interactive/,U=/^[\w-]*$/,B={},V=B.toString,Q={},Y=P.createElement("div"),W={tabindex:"tabIndex",readonly:"readOnly",for:"htmlFor",class:"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},X=Array.isArray||function(t){return t instanceof Array};return Q.matches=function(t,e){if(!e||!t||1!==t.nodeType)return!1;var n=t.webkitMatchesSelector||t.mozMatchesSelector||t.oMatchesSelector||t.matchesSelector;if(n)return n.call(t,e);var r,i=t.parentNode,o=!i;return o&&(i=Y).appendChild(t),r=~Q.qsa(i,e).indexOf(t),o&&Y.removeChild(t),r},T=function(t){return t.replace(/-+(.)?/g,function(t,e){return e?e.toUpperCase():""})},j=function(t){return L.call(t,function(e,n){return t.indexOf(e)==n})},Q.fragment=function(t,e,n){var r,i,s;return D.test(t)&&(r=S(P.createElement(RegExp.$1))),r||(t.replace&&(t=t.replace(I,"<$1>")),e===x&&(e=_.test(t)&&RegExp.$1),e in $||(e="*"),s=$[e],s.innerHTML=""+t,r=S.each(N.call(s.childNodes),function(){s.removeChild(this)})),o(n)&&(i=S(r),S.each(n,function(t,e){q.indexOf(t)>-1?i[t](e):i.attr(t,e)})),r},Q.Z=function(t,e){return t=t||[],t.__proto__=S.fn,t.selector=e||"",t},Q.isZ=function(t){return t instanceof Q.Z},Q.init=function(t,n){var r;if(!t)return Q.Z();if("string"==typeof t)if("<"==(t=t.trim())[0]&&_.test(t))r=Q.fragment(t,RegExp.$1,n),t=null;else{if(n!==x)return S(n).find(t);r=Q.qsa(P,t)}else{if(e(t))return S(P).ready(t);if(Q.isZ(t))return t;if(X(t))r=a(t);else if(i(t))r=[t],t=null;else if(_.test(t))r=Q.fragment(t.trim(),RegExp.$1,n),t=null;else{if(n!==x)return S(n).find(t);r=Q.qsa(P,t)}}return Q.Z(r,t)},S=function(t,e){return Q.init(t,e)},S.extend=function(t){var e,n=N.call(arguments,1);return"boolean"==typeof t&&(e=t,t=n.shift()),n.forEach(function(n){d(t,n,e)}),t},Q.qsa=function(t,e){var n,i="#"==e[0],o=!i&&"."==e[0],s=i||o?e.slice(1):e,a=U.test(s);return r(t)&&a&&i?(n=t.getElementById(s))?[n]:[]:1!==t.nodeType&&9!==t.nodeType?[]:N.call(a&&!i?o?t.getElementsByClassName(s):t.getElementsByTagName(e):t.querySelectorAll(e))},S.contains=P.documentElement.contains?function(t,e){return t!==e&&t.contains(e)}:function(t,e){for(;e&&(e=e.parentNode);)if(e===t)return!0;return!1},S.type=t,S.isFunction=e,S.isWindow=n,S.isArray=X,S.isPlainObject=o,S.isEmptyObject=function(t){var e;for(e in t)return!1;return!0},S.inArray=function(t,e,n){return O.indexOf.call(e,t,n)},S.camelCase=T,S.trim=function(t){return null==t?"":String.prototype.trim.call(t)},S.uuid=0,S.support={},S.expr={},S.map=function(t,e){var n,r,i,o=[];if(s(t))for(r=0;r=0?t:t+this.length]},toArray:function(){return this.get()},size:function(){return this.length},remove:function(){return this.each(function(){null!=this.parentNode&&this.parentNode.removeChild(this)})},each:function(t){return O.every.call(this,function(e,n){return!1!==t.call(e,n,e)}),this},filter:function(t){return e(t)?this.not(this.not(t)):S(L.call(this,function(e){return Q.matches(e,t)}))},add:function(t,e){return S(j(this.concat(S(t,e))))},is:function(t){return this.length>0&&Q.matches(this[0],t)},not:function(t){var n=[];if(e(t)&&t.call!==x)this.each(function(e){t.call(this,e)||n.push(this)});else{var r="string"==typeof t?this.filter(t):s(t)&&e(t.item)?N.call(t):S(t);this.forEach(function(t){r.indexOf(t)<0&&n.push(t)})}return S(n)},has:function(t){return this.filter(function(){return i(t)?S.contains(this,t):S(this).find(t).size()})},eq:function(t){return-1===t?this.slice(t):this.slice(t,+t+1)},first:function(){var t=this[0];return t&&!i(t)?t:S(t)},last:function(){var t=this[this.length-1];return t&&!i(t)?t:S(t)},find:function(t){var e=this;return t?"object"==typeof t?S(t).filter(function(){var t=this;return O.some.call(e,function(e){return S.contains(e,t)})}):1==this.length?S(Q.qsa(this[0],t)):this.map(function(){return Q.qsa(this,t)}):S()},closest:function(t,e){var n=this[0],i=!1;for("object"==typeof t&&(i=S(t));n&&!(i?i.indexOf(n)>=0:Q.matches(n,t));)n=n!==e&&!r(n)&&n.parentNode;return S(n)},parents:function(t){for(var e=[],n=this;n.length>0;)n=S.map(n,function(t){return(t=t.parentNode)&&!r(t)&&e.indexOf(t)<0?(e.push(t),t):void 0});return m(e,t)},parent:function(t){return m(j(this.pluck("parentNode")),t)},children:function(t){return m(this.map(function(){return p(this)}),t)},contents:function(){return this.map(function(){return N.call(this.childNodes)})},siblings:function(t){return m(this.map(function(t,e){return L.call(p(e.parentNode),function(t){return t!==e})}),t)},empty:function(){return this.each(function(){this.innerHTML=""})},pluck:function(t){return S.map(this,function(e){return e[t]})},show:function(){return this.each(function(){"none"==this.style.display&&(this.style.display=""),"none"==getComputedStyle(this,"").getPropertyValue("display")&&(this.style.display=h(this.nodeName))})},replaceWith:function(t){return this.before(t).remove()},wrap:function(t){var n=e(t);if(this[0]&&!n)var r=S(t).get(0),i=r.parentNode||this.length>1;return this.each(function(e){S(this).wrapAll(n?t.call(this,e):i?r.cloneNode(!0):r)})},wrapAll:function(t){if(this[0]){S(this[0]).before(t=S(t));for(var e;(e=t.children()).length;)t=e.first();S(t).append(this)}return this},wrapInner:function(t){var n=e(t);return this.each(function(e){var r=S(this),i=r.contents(),o=n?t.call(this,e):t;i.length?i.wrapAll(o):r.append(o)})},unwrap:function(){return this.parent().each(function(){S(this).replaceWith(S(this).children())}),this},clone:function(){return this.map(function(){return this.cloneNode(!0)})},hide:function(){return this.css("display","none")},toggle:function(t){return this.each(function(){var e=S(this);(t===x?"none"==e.css("display"):t)?e.show():e.hide()})},prev:function(t){return S(this.pluck("previousElementSibling")).filter(t||"*")},next:function(t){return S(this.pluck("nextElementSibling")).filter(t||"*")},html:function(t){return 0 in arguments?this.each(function(e){var n=this.innerHTML;S(this).empty().append(v(this,t,e,n))}):0 in this?this[0].innerHTML:null},text:function(t){return 0 in arguments?this.each(function(e){var n=v(this,t,e,this.textContent);this.textContent=null==n?"":""+n}):0 in this?this[0].textContent:null},attr:function(t,e){var n;return"string"!=typeof t||1 in arguments?this.each(function(n){if(1===this.nodeType)if(i(t))for(E in t)g(this,E,t[E]);else g(this,t,v(this,e,n,this.getAttribute(t)))}):this.length&&1===this[0].nodeType?!(n=this[0].getAttribute(t))&&t in this[0]?this[0][t]:n:x},removeAttr:function(t){return this.each(function(){1===this.nodeType&&t.split(" ").forEach(function(t){g(this,t)},this)})},prop:function(t,e){return t=W[t]||t,1 in arguments?this.each(function(n){this[t]=v(this,e,n,this[t])}):this[0]&&this[0][t]},data:function(t,e){var n="data-"+t.replace(F,"-$1").toLowerCase(),r=1 in arguments?this.attr(n,e):this.attr(n);return null!==r?b(r):x},val:function(t){return 0 in arguments?this.each(function(e){this.value=v(this,t,e,this.value)}):this[0]&&(this[0].multiple?S(this[0]).find("option").filter(function(){return this.selected}).pluck("value"):this[0].value)},offset:function(t){if(t)return this.each(function(e){var n=S(this),r=v(this,t,e,n.offset()),i=n.offsetParent().offset(),o={top:r.top-i.top,left:r.left-i.left};"static"==n.css("position")&&(o.position="relative"),n.css(o)});if(!this.length)return null;var e=this[0].getBoundingClientRect();return{left:e.left+window.pageXOffset,top:e.top+window.pageYOffset,width:Math.round(e.width),height:Math.round(e.height)}},css:function(e,n){if(arguments.length<2){var r,i=this[0];if(!i)return;if(r=getComputedStyle(i,""),"string"==typeof e)return i.style[T(e)]||r.getPropertyValue(e);if(X(e)){var o={};return S.each(e,function(t,e){o[e]=i.style[T(e)]||r.getPropertyValue(e)}),o}}var s="";if("string"==t(e))n||0===n?s=u(e)+":"+f(e,n):this.each(function(){this.style.removeProperty(u(e))});else for(E in e)e[E]||0===e[E]?s+=u(E)+":"+f(E,e[E])+";":this.each(function(){this.style.removeProperty(u(E))});return this.each(function(){this.style.cssText+=";"+s})},index:function(t){return t?this.indexOf(S(t)[0]):this.parent().children().indexOf(this[0])},hasClass:function(t){return!!t&&O.some.call(this,function(t){return this.test(y(t))},l(t))},addClass:function(t){return t?this.each(function(e){if("className"in this){C=[];var n=y(this);v(this,t,e,n).split(/\s+/g).forEach(function(t){S(this).hasClass(t)||C.push(t)},this),C.length&&y(this,n+(n?" ":"")+C.join(" "))}}):this},removeClass:function(t){return this.each(function(e){if("className"in this){if(t===x)return y(this,"");C=y(this),v(this,t,e,C).split(/\s+/g).forEach(function(t){C=C.replace(l(t)," ")}),y(this,C.trim())}})},toggleClass:function(t,e){return t?this.each(function(n){var r=S(this);v(this,t,n,y(this)).split(/\s+/g).forEach(function(t){(e===x?!r.hasClass(t):e)?r.addClass(t):r.removeClass(t)})}):this},scrollTop:function(t){if(this.length){var e="scrollTop"in this[0];return t===x?e?this[0].scrollTop:this[0].pageYOffset:this.each(e?function(){this.scrollTop=t}:function(){this.scrollTo(this.scrollX,t)})}},scrollLeft:function(t){if(this.length){var e="scrollLeft"in this[0];return t===x?e?this[0].scrollLeft:this[0].pageXOffset:this.each(e?function(){this.scrollLeft=t}:function(){this.scrollTo(t,this.scrollY)})}},position:function(){if(this.length){var t=this[0],e=this.offsetParent(),n=this.offset(),r=H.test(e[0].nodeName)?{top:0,left:0}:e.offset();return n.top-=parseFloat(S(t).css("margin-top"))||0,n.left-=parseFloat(S(t).css("margin-left"))||0,r.top+=parseFloat(S(e[0]).css("border-top-width"))||0,r.left+=parseFloat(S(e[0]).css("border-left-width"))||0,{top:n.top-r.top,left:n.left-r.left}}},offsetParent:function(){return this.map(function(){for(var t=this.offsetParent||P.body;t&&!H.test(t.nodeName)&&"static"==S(t).css("position");)t=t.offsetParent;return t})}},S.fn.detach=S.fn.remove,["width","height"].forEach(function(t){var e=t.replace(/./,function(t){return t[0].toUpperCase()});S.fn[t]=function(i){var o,s=this[0];return i===x?n(s)?s["inner"+e]:r(s)?s.documentElement["scroll"+e]:(o=this.offset())&&o[t]:this.each(function(e){(s=S(this)).css(t,v(this,i,e,s[t]()))})}}),z.forEach(function(e,n){var r=n%2;S.fn[e]=function(){var e,i,o=S.map(arguments,function(n){return"object"==(e=t(n))||"array"==e||null==n?n:Q.fragment(n)}),s=this.length>1;return o.length<1?this:this.each(function(t,e){i=r?e:e.parentNode,e=0==n?e.nextSibling:1==n?e.firstChild:2==n?e:null;var a=S.contains(P.documentElement,i);o.forEach(function(t){if(s)t=t.cloneNode(!0);else if(!i)return S(t).remove();i.insertBefore(t,e),a&&w(t,function(t){null==t.nodeName||"SCRIPT"!==t.nodeName.toUpperCase()||t.type&&"text/javascript"!==t.type||t.src||window.eval.call(window,t.innerHTML)})})})},S.fn[r?e+"To":"insert"+(n?"Before":"After")]=function(t){return S(t)[e](this),this}}),Q.Z.prototype=S.fn,Q.uniq=j,Q.deserializeValue=b,S.zepto=Q,S}();window.Zepto=Zepto,void 0===window.$&&(window.$=Zepto),function(t){function e(t){return t._zid||(t._zid=h++)}function n(t,n,o,s){if((n=r(n)).ns)var a=i(n.ns);return(v[e(t)]||[]).filter(function(t){return!(!t||n.e&&t.e!=n.e||n.ns&&!a.test(t.ns)||o&&e(t.fn)!==e(o)||s&&t.sel!=s)})}function r(t){var e=(""+t).split(".");return{e:e[0],ns:e.slice(1).sort().join(" ")}}function i(t){return new RegExp("(?:^| )"+t.replace(" "," .* ?")+"(?: |$)")}function o(t,e){return t.del&&!y&&t.e in b||!!e}function s(t){return w[t]||y&&b[t]||t}function a(n,i,a,c,l,h,p){var d=e(n),m=v[d]||(v[d]=[]);i.split(/\s/).forEach(function(e){if("ready"==e)return t(document).ready(a);var i=r(e);i.fn=a,i.sel=l,i.e in w&&(a=function(e){var n=e.relatedTarget;return!n||n!==this&&!t.contains(this,n)?i.fn.apply(this,arguments):void 0}),i.del=h;var d=h||a;i.proxy=function(t){if(!(t=u(t)).isImmediatePropagationStopped()){t.data=c;var e=d.apply(n,t._args==f?[t]:[t].concat(t._args));return!1===e&&(t.preventDefault(),t.stopPropagation()),e}},i.i=m.length,m.push(i),"addEventListener"in n&&n.addEventListener(s(i.e),i.proxy,o(i,p))})}function c(t,r,i,a,c){var u=e(t);(r||"").split(/\s/).forEach(function(e){n(t,e,i,a).forEach(function(e){delete v[u][e.i],"removeEventListener"in t&&t.removeEventListener(s(e.e),e.proxy,o(e,c))})})}function u(e,n){return(n||!e.isDefaultPrevented)&&(n||(n=e),t.each(C,function(t,r){var i=n[t];e[t]=function(){return this[r]=x,i&&i.apply(n,arguments)},e[r]=E}),(n.defaultPrevented!==f?n.defaultPrevented:"returnValue"in n?!1===n.returnValue:n.getPreventDefault&&n.getPreventDefault())&&(e.isDefaultPrevented=x)),e}function l(t){var e,n={originalEvent:t};for(e in t)S.test(e)||t[e]===f||(n[e]=t[e]);return u(n,t)}var f,h=1,p=Array.prototype.slice,d=t.isFunction,m=function(t){return"string"==typeof t},v={},g={},y="onfocusin"in window,b={focus:"focusin",blur:"focusout"},w={mouseenter:"mouseover",mouseleave:"mouseout"};g.click=g.mousedown=g.mouseup=g.mousemove="MouseEvents",t.event={add:a,remove:c},t.proxy=function(n,r){var i=2 in arguments&&p.call(arguments,2);if(d(n)){var o=function(){return n.apply(r,i?i.concat(p.call(arguments)):arguments)};return o._zid=e(n),o}if(m(r))return i?(i.unshift(n[r],n),t.proxy.apply(null,i)):t.proxy(n[r],n);throw new TypeError("expected function")},t.fn.bind=function(t,e,n){return this.on(t,e,n)},t.fn.unbind=function(t,e){return this.off(t,e)},t.fn.one=function(t,e,n,r){return this.on(t,e,n,r,1)};var x=function(){return!0},E=function(){return!1},S=/^([A-Z]|returnValue$|layer[XY]$)/,C={preventDefault:"isDefaultPrevented",stopImmediatePropagation:"isImmediatePropagationStopped",stopPropagation:"isPropagationStopped"};t.fn.delegate=function(t,e,n){return this.on(e,t,n)},t.fn.undelegate=function(t,e,n){return this.off(e,t,n)},t.fn.live=function(e,n){return t(document.body).delegate(this.selector,e,n),this},t.fn.die=function(e,n){return t(document.body).undelegate(this.selector,e,n),this},t.fn.on=function(e,n,r,i,o){var s,u,h=this;return e&&!m(e)?(t.each(e,function(t,e){h.on(t,n,r,e,o)}),h):(m(n)||d(i)||!1===i||(i=r,r=n,n=f),(d(r)||!1===r)&&(i=r,r=f),!1===i&&(i=E),h.each(function(f,h){o&&(s=function(t){return c(h,t.type,i),i.apply(this,arguments)}),n&&(u=function(e){var r,o=t(e.target).closest(n,h).get(0);return o&&o!==h?(r=t.extend(l(e),{currentTarget:o,liveFired:h}),(s||i).apply(o,[r].concat(p.call(arguments,1)))):void 0}),a(h,e,i,r,n,u||s)}))},t.fn.off=function(e,n,r){var i=this;return e&&!m(e)?(t.each(e,function(t,e){i.off(t,n,e)}),i):(m(n)||d(r)||!1===r||(r=n,n=f),!1===r&&(r=E),i.each(function(){c(this,e,r,n)}))},t.fn.trigger=function(e,n){return e=m(e)||t.isPlainObject(e)?t.Event(e):u(e),e._args=n,this.each(function(){e.type in b&&"function"==typeof this[e.type]?this[e.type]():"dispatchEvent"in this?this.dispatchEvent(e):t(this).triggerHandler(e,n)})},t.fn.triggerHandler=function(e,r){var i,o;return this.each(function(s,a){(i=l(m(e)?t.Event(e):e))._args=r,i.target=a,t.each(n(a,e.type||e),function(t,e){return o=e.proxy(i),!i.isImmediatePropagationStopped()&&void 0})}),o},"focusin focusout focus blur load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select keydown keypress keyup error".split(" ").forEach(function(e){t.fn[e]=function(t){return 0 in arguments?this.bind(e,t):this.trigger(e)}}),t.Event=function(t,e){m(t)||(e=t,t=e.type);var n=document.createEvent(g[t]||"Events"),r=!0;if(e)for(var i in e)"bubbles"==i?r=!!e[i]:n[i]=e[i];return n.initEvent(t,r,!0),u(n)}}(Zepto),function(t){function e(e,n,r){var i=t.Event(n);return t(e).trigger(i,r),!i.isDefaultPrevented()}function n(t,n,r,i){return t.global?e(n||y,r,i):void 0}function r(e){e.global&&0==t.active++&&n(e,null,"ajaxStart")}function i(e){e.global&&!--t.active&&n(e,null,"ajaxStop")}function o(t,e){var r=e.context;return!1!==e.beforeSend.call(r,t,e)&&!1!==n(e,r,"ajaxBeforeSend",[t,e])&&void n(e,r,"ajaxSend",[t,e])}function s(t,e,r,i){var o=r.context,s="success";r.success.call(o,t,s,e),i&&i.resolveWith(o,[t,s,e]),n(r,o,"ajaxSuccess",[e,r,t]),c(s,e,r)}function a(t,e,r,i,o){var s=i.context;i.error.call(s,r,e,t),o&&o.rejectWith(s,[r,e,t]),n(i,s,"ajaxError",[r,i,t||e]),c(e,r,i)}function c(t,e,r){var o=r.context;r.complete.call(o,e,t),n(r,o,"ajaxComplete",[e,r]),i(r)}function u(){}function l(t){return t&&(t=t.split(";",2)[0]),t&&(t==S?"html":t==E?"json":w.test(t)?"script":x.test(t)&&"xml")||"text"}function f(t,e){return""==e?t:(t+"&"+e).replace(/[&?]{1,2}/,"?")}function h(e){e.processData&&e.data&&"string"!=t.type(e.data)&&(e.data=t.param(e.data,e.traditional)),!e.data||e.type&&"GET"!=e.type.toUpperCase()||(e.url=f(e.url,e.data),e.data=void 0)}function p(e,n,r,i){return t.isFunction(n)&&(i=r,r=n,n=void 0),t.isFunction(r)||(i=r,r=void 0),{url:e,data:n,success:r,dataType:i}}function d(e,n,r,i){var o,s=t.isArray(n),a=t.isPlainObject(n);t.each(n,function(n,c){o=t.type(c),i&&(n=r?i:i+"["+(a||"object"==o||"array"==o?n:"")+"]"),!i&&s?e.add(c.name,c.value):"array"==o||!r&&"object"==o?d(e,c,r,n):e.add(n,c)})}var m,v,g=0,y=window.document,b=/)<[^<]*)*<\/script>/gi,w=/^(?:text|application)\/javascript/i,x=/^(?:text|application)\/xml/i,E="application/json",S="text/html",C=/^\s*$/,T=y.createElement("a");T.href=window.location.href,t.active=0,t.ajaxJSONP=function(e,n){if(!("type"in e))return t.ajax(e);var r,i,c=e.jsonpCallback,u=(t.isFunction(c)?c():c)||"jsonp"+ ++g,l=y.createElement("script"),f=window[u],h=function(e){t(l).triggerHandler("error",e||"abort")},p={abort:h};return n&&n.promise(p),t(l).on("load error",function(o,c){clearTimeout(i),t(l).off().remove(),"error"!=o.type&&r?s(r[0],p,e,n):a(null,c||"error",p,e,n),window[u]=f,r&&t.isFunction(f)&&f(r[0]),f=r=void 0}),!1===o(p,e)?(h("abort"),p):(window[u]=function(){r=arguments},l.src=e.url.replace(/\?(.+)=\?/,"?$1="+u),y.head.appendChild(l),e.timeout>0&&(i=setTimeout(function(){h("timeout")},e.timeout)),p)},t.ajaxSettings={type:"GET",beforeSend:u,success:u,error:u,complete:u,context:null,global:!0,xhr:function(){return new window.XMLHttpRequest},accepts:{script:"text/javascript, application/javascript, application/x-javascript",json:E,xml:"application/xml, text/xml",html:S,text:"text/plain"},crossDomain:!1,timeout:0,processData:!0,cache:!0},t.ajax=function(e){var n,i=t.extend({},e||{}),c=t.Deferred&&t.Deferred();for(m in t.ajaxSettings)void 0===i[m]&&(i[m]=t.ajaxSettings[m]);r(i),i.crossDomain||(n=y.createElement("a"),n.href=i.url,n.href=n.href,i.crossDomain=T.protocol+"//"+T.host!=n.protocol+"//"+n.host),i.url||(i.url=window.location.toString()),h(i);var p=i.dataType,d=/\?.+=\?/.test(i.url);if(d&&(p="jsonp"),!1!==i.cache&&(e&&!0===e.cache||"script"!=p&&"jsonp"!=p)||(i.url=f(i.url,"_="+Date.now())),"jsonp"==p)return d||(i.url=f(i.url,i.jsonp?i.jsonp+"=?":!1===i.jsonp?"":"callback=?")),t.ajaxJSONP(i,c);var g,b=i.accepts[p],w={},x=function(t,e){w[t.toLowerCase()]=[t,e]},E=/^([\w-]+:)\/\//.test(i.url)?RegExp.$1:window.location.protocol,S=i.xhr(),j=S.setRequestHeader;if(c&&c.promise(S),i.crossDomain||x("X-Requested-With","XMLHttpRequest"),x("Accept",b||"*/*"),(b=i.mimeType||b)&&(b.indexOf(",")>-1&&(b=b.split(",",2)[0]),S.overrideMimeType&&S.overrideMimeType(b)),(i.contentType||!1!==i.contentType&&i.data&&"GET"!=i.type.toUpperCase())&&x("Content-Type",i.contentType||"application/x-www-form-urlencoded"),i.headers)for(v in i.headers)x(v,i.headers[v]);if(S.setRequestHeader=x,S.onreadystatechange=function(){if(4==S.readyState){S.onreadystatechange=u,clearTimeout(g);var e,n=!1;if(S.status>=200&&S.status<300||304==S.status||0==S.status&&"file:"==E){p=p||l(i.mimeType||S.getResponseHeader("content-type")),e=S.responseText;try{"script"==p?(0,eval)(e):"xml"==p?e=S.responseXML:"json"==p&&(e=C.test(e)?null:t.parseJSON(e))}catch(t){n=t}n?a(n,"parsererror",S,i,c):s(e,S,i,c)}else a(S.statusText||null,S.status?"error":"abort",S,i,c)}},!1===o(S,i))return S.abort(),a(null,"abort",S,i,c),S;if(i.xhrFields)for(v in i.xhrFields)S[v]=i.xhrFields[v];var O=!("async"in i)||i.async;S.open(i.type,i.url,O,i.username,i.password);for(v in w)j.apply(S,w[v]);return i.timeout>0&&(g=setTimeout(function(){S.onreadystatechange=u,S.abort(),a(null,"timeout",S,i,c)},i.timeout)),S.send(i.data?i.data:null),S},t.get=function(){return t.ajax(p.apply(null,arguments))},t.post=function(){var e=p.apply(null,arguments);return e.type="POST",t.ajax(e)},t.getJSON=function(){var e=p.apply(null,arguments);return e.dataType="json",t.ajax(e)},t.fn.load=function(e,n,r){if(!this.length)return this;var i,o=this,s=e.split(/\s/),a=p(e,n,r),c=a.success;return s.length>1&&(a.url=s[0],i=s[1]),a.success=function(e){o.html(i?t("
    ").html(e.replace(b,"")).find(i):e),c&&c.apply(o,arguments)},t.ajax(a),this};var j=encodeURIComponent;t.param=function(e,n){var r=[];return r.add=function(e,n){t.isFunction(n)&&(n=n()),null==n&&(n=""),this.push(j(e)+"="+j(n))},d(r,e,n),r.join("&").replace(/%20/g,"+")}}(Zepto),function(t){t.fn.serializeArray=function(){var e,n,r=[],i=function(t){return t.forEach?t.forEach(i):void r.push({name:e,value:t})};return this[0]&&t.each(this[0].elements,function(r,o){n=o.type,(e=o.name)&&"fieldset"!=o.nodeName.toLowerCase()&&!o.disabled&&"submit"!=n&&"reset"!=n&&"button"!=n&&"file"!=n&&("radio"!=n&&"checkbox"!=n||o.checked)&&i(t(o).val())}),r},t.fn.serialize=function(){var t=[];return this.serializeArray().forEach(function(e){t.push(encodeURIComponent(e.name)+"="+encodeURIComponent(e.value))}),t.join("&")},t.fn.submit=function(e){if(0 in arguments)this.bind("submit",e);else if(this.length){var n=t.Event("submit");this.eq(0).trigger(n),n.isDefaultPrevented()||this.get(0).submit()}return this}}(Zepto),function(t){"__proto__"in{}||t.extend(t.zepto,{Z:function(e,n){return e=e||[],t.extend(e,t.fn),e.selector=n||"",e.__Z=!0,e},isZ:function(e){return"array"===t.type(e)&&"__Z"in e}});try{getComputedStyle(void 0)}catch(t){var e=getComputedStyle;window.getComputedStyle=function(t){try{return e(t)}catch(t){return null}}}}(Zepto),function(t){"use strict";function e(t){return new RegExp("(^|\\s+)"+t+"(\\s+|$)")}function n(t,e){(r(t,e)?o:i)(t,e)}var r,i,o;"classList"in document.documentElement?(r=function(t,e){return t.classList.contains(e)},i=function(t,e){t.classList.add(e)},o=function(t,e){t.classList.remove(e)}):(r=function(t,n){return e(n).test(t.className)},i=function(t,e){r(t,e)||(t.className=t.className+" "+e)},o=function(t,n){t.className=t.className.replace(e(n)," ")});var s={hasClass:r,addClass:i,removeClass:o,toggleClass:n,has:r,add:i,remove:o,toggle:n};"function"==typeof define&&define.amd?define(s):t.classie=s}(window),function(){"use strict";var t=document.querySelector(".post-content"),e=document.querySelector(".progress-bar");if(t&&e){var n=0,r=t.scrollHeight,i=e.querySelector(".completed"),o=e.querySelector(".remaining"),s=e.querySelector(".time-completed"),a=e.querySelector(".time-remaining");document.addEventListener("scroll",function(){var t=window.pageYOffset||document.documentElement.scrollTop;if(e.style.bottom=t>n?"0%":"-100%",t<=r){var c=t/r,u=(100*c).toFixed(2),l=100-parseFloat(u);i.style.width=u.toString()+"%",o.style.width=l.toString()+"%";var f=60*parseInt(e.getAttribute("data-minutes")),h=parseInt(c*f),p=parseInt(h/60),d=parseInt(60*(h/60-p)),m=f-h,v=parseInt(m/60),g=parseInt(60*(m/60-v));p=p<10?"0"+p:p,d=d<10?"0"+d:d,v=v<10?"0"+v:v,g=g<10?"0"+g:g,s.innerText=p+":"+d,a.innerText=v+":"+g}else{i.style.width="100%",o.style.width="0%";var y=parseInt(e.getAttribute("data-minutes"));y=y<10?"0"+y:y,s.innerText="00:00",a.innerText=y+":00"}n=t})}}(),function(t){"use strict";function e(){var e=c.clientHeight,n=t.innerHeight;return e=s}function o(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);return t}function s(t){if(t){var e=new Image;e.onload=function(){t.src=e.src},e.src=t.getAttribute("data-url")}}function a(t,e){this.el=t,this.options=o(this.defaults,e),this._init()}var c=t.document.documentElement;a.prototype={defaults:{minDuration:0,maxDuration:0,viewportFactor:0},_init:function(){this.items=Array.prototype.slice.call(document.querySelectorAll("#"+this.el.id+" > article")),this.itemsCount=this.items.length,this.itemsRenderedCount=0,this.didScroll=!1;var e=this;e.items.forEach(function(t,n){i(t)&&(e._checkTotalRendered(),classie.add(t,"shown"),s(t.querySelector(".preload")))}),t.addEventListener("scroll",function(){e._onScrollFn()},!1),t.addEventListener("resize",function(){e._resizeHandler()},!1)},_onScrollFn:function(){var t=this;this.didScroll||(this.didScroll=!0,setTimeout(function(){t._scrollPage()},60))},_scrollPage:function(){var t=this;this.items.forEach(function(r,o){classie.has(r,"shown")||classie.has(r,"animate")||!i(r,t.options.viewportFactor)||setTimeout(function(){var i=n()+e()/2;if(t.el.style.WebkitPerspectiveOrigin="50% "+i+"px",t.el.style.MozPerspectiveOrigin="50% "+i+"px",t.el.style.perspectiveOrigin="50% "+i+"px",t._checkTotalRendered(),t.options.minDuration&&t.options.maxDuration){var o=Math.random()*(t.options.maxDuration-t.options.minDuration)+t.options.minDuration+"s";r.style.WebkitAnimationDuration=o,r.style.MozAnimationDuration=o,r.style.animationDuration=o}classie.add(r,"animate"),s(r.querySelector(".preload"))},25)}),this.didScroll=!1},_resizeHandler:function(){var t=this;this.resizeTimeout&&clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout(function(){t._scrollPage(),t.resizeTimeout=null},1e3)},_checkTotalRendered:function(){++this.itemsRenderedCount===this.itemsCount&&t.removeEventListener("scroll",this._onScrollFn)}},t.AnimOnScroll=a}(window),function(t){t.fn.simpleJekyllSearch=function(e){function n(){u.keyup(function(e){t(this).val().length?i(r(t(this).val())):o()})}function r(e){var n=[];return t.each(c,function(t,r){for(var t=0;t',searchResults:".search-results",limit:"10",noResults:"

    Puuuts! Não encontramos nada :(

    "},e),a=s.jsonFormat.split(","),c=[],u=this,l=t(s.searchResults);s.jsonFile.length&&l.length&&t.ajax({type:"GET",url:s.jsonFile,dataType:"json",success:function(t,e,r){c=t,n()},error:function(t,e,n){console.log("***ERROR in simpleJekyllSearch.js***"),console.log(t),console.log(e),console.log(n)}})}}(Zepto),function(t,e){"function"==typeof define&&define.amd?define([],e(t)):"object"==typeof exports?module.exports=e(t):t.smoothScroll=e(t)}("undefined"!=typeof global?global:this.window||this.global,function(t){"use strict";var e,n,r,i,o={},s="querySelector"in document&&"addEventListener"in t,a={selector:"[data-scroll]",selectorHeader:"[data-scroll-header]",speed:500,easing:"easeInOutCubic",offset:0,updateURL:!0,callback:function(){}},c=function(){var t={},e=!1,n=0,r=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(e=arguments[0],n++);for(;n1&&(r=!0,n[1]=n[1].replace(/"/g,"").replace(/'/g,""));t&&t!==document;t=t.parentNode){if("."===i)if(o){if(t.classList.contains(e.substr(1)))return t}else if(new RegExp("(^|\\s)"+e.substr(1)+"(\\s|$)").test(t.className))return t;if("#"===i&&t.id===e.substr(1))return t;if("["===i&&t.hasAttribute(n[0])){if(!r)return t;if(t.getAttribute(n[0])===n[1])return t}if(t.tagName.toLowerCase()===e)return t}return null},f=function(t){for(var e,n=String(t),r=n.length,i=-1,o="",s=n.charCodeAt(0);++i=1&&e<=31||127==e||0===i&&e>=48&&e<=57||1===i&&e>=48&&e<=57&&45===s?o+="\\"+e.toString(16)+" ":o+=e>=128||45===e||95===e||e>=48&&e<=57||e>=65&&e<=90||e>=97&&e<=122?n.charAt(i):"\\"+n.charAt(i)}return o},h=function(t,e){var n;return"easeInQuad"===t&&(n=e*e),"easeOutQuad"===t&&(n=e*(2-e)),"easeInOutQuad"===t&&(n=e<.5?2*e*e:(4-2*e)*e-1),"easeInCubic"===t&&(n=e*e*e),"easeOutCubic"===t&&(n=--e*e*e+1),"easeInOutCubic"===t&&(n=e<.5?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1),"easeInQuart"===t&&(n=e*e*e*e),"easeOutQuart"===t&&(n=1- --e*e*e*e),"easeInOutQuart"===t&&(n=e<.5?8*e*e*e*e:1-8*--e*e*e*e),"easeInQuint"===t&&(n=e*e*e*e*e),"easeOutQuint"===t&&(n=1+--e*e*e*e*e),"easeInOutQuint"===t&&(n=e<.5?16*e*e*e*e*e:1+16*--e*e*e*e*e),n||e},p=function(t,e,n){var r=0;if(t.offsetParent)do{r+=t.offsetTop,t=t.offsetParent}while(t);return(r=r-e-n)>=0?r:0},d=function(){return Math.max(t.document.body.scrollHeight,t.document.documentElement.scrollHeight,t.document.body.offsetHeight,t.document.documentElement.offsetHeight,t.document.body.clientHeight,t.document.documentElement.clientHeight)},m=function(t){return t&&"object"==typeof JSON&&"function"==typeof JSON.parse?JSON.parse(t):{}},v=function(e,n){t.history.pushState&&(n||"true"===n)&&"file:"!==t.location.protocol&&t.history.pushState(null,null,[t.location.protocol,"//",t.location.host,t.location.pathname,t.location.search,e].join(""))},g=function(t){return null===t?0:u(t)+t.offsetTop};o.animateScroll=function(e,n,o){var s=m(e?e.getAttribute("data-options"):null),u=c(u||a,o||{},s),l="#"===(n="#"+f(n.substr(1)))?t.document.documentElement:t.document.querySelector(n),y=t.pageYOffset;r||(r=t.document.querySelector(u.selectorHeader)),i||(i=g(r));var b,w,x,E=p(l,i,parseInt(u.offset,10)),S=E-y,C=d(),T=0;v(n,u.updateURL);var j=function(r,i,o){var s=t.pageYOffset;(r==i||s==i||t.innerHeight+s>=C)&&(clearInterval(o),l.focus(),u.callback(e,n))},O=function(){w=(T+=16)/parseInt(u.speed,10),w=w>1?1:w,x=y+S*h(u.easing,w),t.scrollTo(0,Math.floor(x)),j(x,E,b)};0===t.pageYOffset&&t.scrollTo(0,0),b=setInterval(O,16)};var y=function(t){var n=l(t.target,e.selector);n&&"a"===n.tagName.toLowerCase()&&(t.preventDefault(),o.animateScroll(n,n.hash,e))},b=function(t){n||(n=setTimeout(function(){n=null,i=g(r)},66))};return o.destroy=function(){e&&(t.document.removeEventListener("click",y,!1),t.removeEventListener("resize",b,!1),e=null,n=null,r=null,i=null)},o.init=function(n){s&&(o.destroy(),e=c(a,n||{}),r=t.document.querySelector(e.selectorHeader),i=g(r),t.document.addEventListener("click",y,!1),r&&t.addEventListener("resize",b,!1))},o}),function(){for(var t=document.links,e=0,n=t.length;e=1&&new AnimOnScroll(document.getElementById("grid"),{minDuration:.4,maxDuration:.7,viewportFactor:.2}),smoothScroll.init({selectorHeader:".bar-header",speed:500,updateURL:!1})}(Zepto,window); \ No newline at end of file diff --git a/contact.md b/contact.md new file mode 100644 index 0000000000..7f5c881112 --- /dev/null +++ b/contact.md @@ -0,0 +1,69 @@ +--- +layout: page +title: Contact +description: Let's talk. +permalink: /contact/ +--- + + + +
    + +

    Talk to me

    + +
    +
    +
    + + + + + + ${ errors.first('name') } + + + ${ errors.first('email') } + + + ${ errors.first('message') } + + +
    +
    +
    + +
    + + + + + + diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000..a3b33c8f94 Binary files /dev/null and b/favicon.ico differ diff --git a/feed.xml b/feed.xml new file mode 100644 index 0000000000..37ee0ff86f --- /dev/null +++ b/feed.xml @@ -0,0 +1,30 @@ +--- +layout: null +--- + + + + {{ site.title | xml_escape }} + {{ site.description | xml_escape }} + {{ site.url }}{{ site.baseurl }}/ + + {{ site.time | date_to_rfc822 }} + {{ site.time | date_to_rfc822 }} + Jekyll v{{ jekyll.version }} + {% for post in site.posts limit:30 %} + + {{ post.title | xml_escape }} + {{ post.content | xml_escape | strip_html | truncatewords:100 }} + {{ post.date | date_to_rfc822 }} + {{ post.url | prepend: site.baseurl | prepend: site.url }} + {{ post.url | prepend: site.baseurl | prepend: site.url }} + {% for tag in post.tags %} + {{ tag | xml_escape }} + {% endfor %} + {% for cat in post.categories %} + {{ cat | xml_escape }} + {% endfor %} + + {% endfor %} + + diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000000..f3aef1ba44 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,96 @@ +var env = require('minimist')(process.argv.slice(2)), + gulp = require('gulp'), + plumber = require('gulp-plumber'), + browserSync = require('browser-sync'), + stylus = require('gulp-stylus'), + uglify = require('gulp-uglify'), + concat = require('gulp-concat'), + jeet = require('jeet'), + rupture = require('rupture'), + koutoSwiss = require('kouto-swiss'), + prefixer = require('autoprefixer-stylus'), + imagemin = require('gulp-imagemin'), + cp = require('child_process'); + +var messages = { + jekyllBuild: 'Running: $ jekyll build' +}; + +/** + * Build the Jekyll Site + */ +gulp.task('jekyll-build', function (done) { + browserSync.notify(messages.jekyllBuild); + return cp.spawn('bundle', ['exec', 'jekyll build'], {stdio: 'inherit'}) + .on('close', done); +}); + +/** + * Rebuild Jekyll & do page reload + */ +gulp.task('jekyll-rebuild', ['jekyll-build'], function () { + browserSync.reload(); +}); + +/** + * Wait for jekyll-build, then launch the Server + */ +gulp.task('browser-sync', ['jekyll-build'], function() { + browserSync({ + server: { + baseDir: '_site' + } + }); +}); + +/** + * Stylus task + */ +gulp.task('stylus', function(){ + gulp.src('src/styl/main.styl') + .pipe(plumber()) + .pipe(stylus({ + use:[koutoSwiss(), prefixer(), jeet(), rupture()], + compress: true + })) + .pipe(gulp.dest('_site/assets/css/')) + .pipe(browserSync.reload({stream:true})) + .pipe(gulp.dest('assets/css')); +}); + +/** + * Javascript Task + */ +gulp.task('js', function(){ + return gulp.src((env.p) ? 'src/js/**/*.js' : ['src/js/**/*.js', '!src/js/analytics.js']) + .pipe(plumber()) + .pipe(concat('main.js')) + .pipe(uglify()) + .pipe(gulp.dest('assets/js/')); +}); + +/** + * Imagemin Task + */ +gulp.task('imagemin', function() { + return gulp.src('src/img/**/*.{jpg,png,gif}') + .pipe(plumber()) + .pipe(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })) + .pipe(gulp.dest('assets/img/')); +}); + +/** + * Watch stylus files for changes & recompile + * Watch html/md files, run jekyll & reload BrowserSync + */ +gulp.task('watch', function () { + gulp.watch('src/styl/**/*.styl', ['stylus']); + gulp.watch('src/js/**/*.js', ['js']); + gulp.watch(['**/*.html','index.html', '_includes/*.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']); +}); + +/** + * Default task, running just `gulp` will compile the stylus, + * compile the jekyll site, launch BrowserSync & watch files. + */ +gulp.task('default', ['js', 'stylus', 'browser-sync', 'watch']); diff --git a/index.md b/index.md new file mode 100644 index 0000000000..236393e740 --- /dev/null +++ b/index.md @@ -0,0 +1,46 @@ +--- +layout: main +--- + +
    +
    + {% for post in site.posts %} + + {% endfor %} +
    +
    diff --git a/initdraft.sh b/initdraft.sh new file mode 100644 index 0000000000..d6e07492d0 --- /dev/null +++ b/initdraft.sh @@ -0,0 +1,162 @@ +#!/usr/bin/env bash + +# ------------------------------------------------------------------------------ +# +# Program: initdraft.sh +# Author: Thiago Rossener +# Description: script to create an initial structure for my drafts. +# +# Usage: ./initdraft.sh [options] +# +# Options: +# -h, --help output instructions +# -c, --create create post +# +# Alias: alias newdraft="bash ~/path/to/script/initdraft.sh" +# +# Example: +# ./initdraft.sh -c How to replace strings with sed +# +# Important Notes: +# - This script was created to generate new markdown files for my blog. +# +# ------------------------------------------------------------------------------ + + +# ------------------------------------------------------------------------------ +# | VARIABLES | +# ------------------------------------------------------------------------------ + +# CORE: Do not change these lines +# ---------------------------------------------------------------- +POST_TITLE="${@:2:$(($#-1))}" +POST_NAME="$(echo ${@:2:$(($#-1))} | sed -e 's/ /-/g' | sed "y/ABCDEFGHIJKLMNOPQRSTUVWXYZ/abcdefghijklmnopqrstuvwxyz/")" +CURRENT_DATE="$(date -u +'%Y-%m-%d')" +TIME=$(date -u +"%T") +FILE_NAME="${CURRENT_DATE}-${POST_NAME}.md" +# ---------------------------------------------------------------- + + +# SETTINGS: your configuration goes here +# ---------------------------------------------------------------- + +# Set your destination folder +BINPATH=$(cd `dirname $0`; pwd) +POSTPATH="${BINPATH}/_drafts" +DIST_FOLDER="$POSTPATH" + +# Set your blog URL +BLOG_URL="https://www.rossener.com/" + +# Set your assets URL +ASSETS_URL="assets/img/" +# ---------------------------------------------------------------- + + + +# ------------------------------------------------------------------------------ +# | UTILS | +# ------------------------------------------------------------------------------ + +# Header logging +e_header() { + printf "$(tput setaf 38)→ %s$(tput sgr0)\n" "$@" +} + +# Success logging +e_success() { + printf "$(tput setaf 76)✔ %s$(tput sgr0)\n" "$@" +} + +# Error logging +e_error() { + printf "$(tput setaf 1)✖ %s$(tput sgr0)\n" "$@" +} + +# Warning logging +e_warning() { + printf "$(tput setaf 3)! %s$(tput sgr0)\n" "$@" +} + + + +# ------------------------------------------------------------------------------ +# | MAIN FUNCTIONS | +# ------------------------------------------------------------------------------ + +# Everybody need some help +initdraft_help() { + +cat < +Options: + -h, --help output instructions + -c, --create create post +Example: + ./initdraft.sh -c How to replace strings with sed +Important Notes: + - This script was created to generate new text files to my blog. +Copyright (c) Thiago Rossener +Licensed under the MIT license. +------------------------------------------------------------------------------ +EOT + +} + +# Initial Content +initdraft_content() { + +echo "---" +echo "layout: post" +echo "title: \"${POST_TITLE}\"" +echo "date: ${CURRENT_DATE} ${TIME}" +echo "image: ''" +echo "description:" +echo "category: ''" +echo "tags:" +echo "twitter_text:" +echo "introduction:" +echo "---" + +} + +# Create file +initdraft_file() { + if [ ! -f "$FILE_NAME" ]; then + e_header "Creating template..." + initdraft_content > "${DIST_FOLDER}/${FILE_NAME}" + e_success "Initial draft successfully created!" + else + e_warning "File already exist." + exit 1 + fi + +} + + + +# ------------------------------------------------------------------------------ +# | INITIALIZE PROGRAM | +# ------------------------------------------------------------------------------ + +main() { + + # Show help + if [[ "${1}" == "-h" || "${1}" == "--help" ]]; then + initdraft_help ${1} + exit + fi + + # Create + if [[ "${1}" == "-c" || "${1}" == "--create" ]]; then + initdraft_file $* + exit + fi + +} + +# Initialize +main $* diff --git a/initpost.sh b/initpost.sh new file mode 100644 index 0000000000..9088e10b9c --- /dev/null +++ b/initpost.sh @@ -0,0 +1,162 @@ +#!/usr/bin/env bash + +# ------------------------------------------------------------------------------ +# +# Program: initpost.sh +# Author: Vitor Britto +# Description: script to create an initial structure for my posts. +# +# Usage: ./initpost.sh [options] +# +# Options: +# -h, --help output instructions +# -c, --create create post +# +# Alias: alias newpost="bash ~/path/to/script/initpost.sh" +# +# Example: +# ./initpost.sh -c How to replace strings with sed +# +# Important Notes: +# - This script was created to generate new markdown files for my blog. +# +# ------------------------------------------------------------------------------ + + +# ------------------------------------------------------------------------------ +# | VARIABLES | +# ------------------------------------------------------------------------------ + +# CORE: Do not change these lines +# ---------------------------------------------------------------- +POST_TITLE="${@:2:$(($#-1))}" +POST_NAME="$(echo ${@:2:$(($#-1))} | sed -e 's/ /-/g' | sed "y/ABCDEFGHIJKLMNOPQRSTUVWXYZ/abcdefghijklmnopqrstuvwxyz/")" +CURRENT_DATE="$(date -u +'%Y-%m-%d')" +TIME=$(date -u +"%T") +FILE_NAME="${CURRENT_DATE}-${POST_NAME}.md" +# ---------------------------------------------------------------- + + +# SETTINGS: your configuration goes here +# ---------------------------------------------------------------- + +# Set your destination folder +BINPATH=$(cd `dirname $0`; pwd) +POSTPATH="${BINPATH}/_posts" +DIST_FOLDER="$POSTPATH" + +# Set your blog URL +BLOG_URL="https://www.rossener.com/" + +# Set your assets URL +ASSETS_URL="assets/img/" +# ---------------------------------------------------------------- + + + +# ------------------------------------------------------------------------------ +# | UTILS | +# ------------------------------------------------------------------------------ + +# Header logging +e_header() { + printf "$(tput setaf 38)→ %s$(tput sgr0)\n" "$@" +} + +# Success logging +e_success() { + printf "$(tput setaf 76)✔ %s$(tput sgr0)\n" "$@" +} + +# Error logging +e_error() { + printf "$(tput setaf 1)✖ %s$(tput sgr0)\n" "$@" +} + +# Warning logging +e_warning() { + printf "$(tput setaf 3)! %s$(tput sgr0)\n" "$@" +} + + + +# ------------------------------------------------------------------------------ +# | MAIN FUNCTIONS | +# ------------------------------------------------------------------------------ + +# Everybody need some help +initpost_help() { + +cat < +Options: + -h, --help output instructions + -c, --create create post +Example: + ./initpost.sh -c How to replace strings with sed +Important Notes: + - This script was created to generate new text files to my blog. +Copyright (c) Vitor Britto +Licensed under the MIT license. +------------------------------------------------------------------------------ +EOT + +} + +# Initial Content +initpost_content() { + +echo "---" +echo "layout: post" +echo "title: \"${POST_TITLE}\"" +echo "date: ${CURRENT_DATE} ${TIME}" +echo "image: ''" +echo "description:" +echo "category: ''" +echo "tags:" +echo "twitter_text:" +echo "introduction:" +echo "---" + +} + +# Create file +initpost_file() { + if [ ! -f "$FILE_NAME" ]; then + e_header "Creating template..." + initpost_content > "${DIST_FOLDER}/${FILE_NAME}" + e_success "Initial post successfully created!" + else + e_warning "File already exist." + exit 1 + fi + +} + + + +# ------------------------------------------------------------------------------ +# | INITIALIZE PROGRAM | +# ------------------------------------------------------------------------------ + +main() { + + # Show help + if [[ "${1}" == "-h" || "${1}" == "--help" ]]; then + initpost_help ${1} + exit + fi + + # Create + if [[ "${1}" == "-c" || "${1}" == "--create" ]]; then + initpost_file $* + exit + fi + +} + +# Initialize +main $* diff --git a/msg-success.md b/msg-success.md new file mode 100644 index 0000000000..49029c7f81 --- /dev/null +++ b/msg-success.md @@ -0,0 +1,19 @@ +--- +layout: default +permalink: /contact/message-sent/ +--- + + + +
    + Message sent! +

    Message sent!

    +

    Thank you for sending me a message. I'm going to answer ASAP.

    +
    diff --git a/package.json b/package.json new file mode 100644 index 0000000000..e89f927c63 --- /dev/null +++ b/package.json @@ -0,0 +1,42 @@ +{ + "name": "thiagorossener.github.io", + "version": "1.0.0", + "description": "Blog pessoal de Thiago Rossener.", + "main": "gulpfile.js", + "scripts": { + "test": "test" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/thiagorossener/thiagorossener.github.io.git" + }, + "keywords": [ + "jekyll", + "blog", + "css", + "js", + "gulp", + "stylus" + ], + "author": "Thiago Rossener", + "license": "ISC", + "bugs": { + "url": "https://github.com/thiagorossener/thiagorossener.github.io/issues" + }, + "homepage": "https://github.com/thiagorossener/thiagorossener.github.io#readme", + "devDependencies": { + "autoprefixer-stylus": "^0.14.0", + "browser-sync": "^2.18.13", + "child_process": "^1.0.2", + "gulp": "^3.9.1", + "gulp-concat": "^2.6.1", + "gulp-imagemin": "^3.3.0", + "gulp-plumber": "^1.1.0", + "gulp-stylus": "^2.6.0", + "gulp-uglify": "^3.0.0", + "jeet": "^7.1.0", + "kouto-swiss": "^1.1.0", + "minimist": "^1.2.0", + "rupture": "^0.6.2" + } +} diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000000..ee2cc216a6 --- /dev/null +++ b/robots.txt @@ -0,0 +1,3 @@ +# robotstxt.org/ + +User-agent: * diff --git a/search.json b/search.json new file mode 100644 index 0000000000..dec782de38 --- /dev/null +++ b/search.json @@ -0,0 +1,13 @@ +--- +--- +[ + {% for post in site.posts %} + { + "title" : "{{ post.title | escape }}", + "tags" : "{{ post.tags | array_to_sentence_string }}", + "categories" : "{{ post.category }}", + "url" : "{{ site.baseurl }}{{ post.url }}", + "date" : "{{ post.date | date: '%m/%d/%Y'}}" + } {% unless forloop.last %},{% endunless %} + {% endfor %} +] diff --git a/sitemap.xml b/sitemap.xml new file mode 100644 index 0000000000..e6e281fe0e --- /dev/null +++ b/sitemap.xml @@ -0,0 +1,16 @@ +--- +layout: null +--- + + + {% for page in site.pages %} + + {{ page.url | prepend: site.baseurl | prepend: site.url }} + + {% endfor %} + {% for post in site.posts %} + + {{ post.url | prepend: site.baseurl | prepend: site.url }} + + {% endfor %} + diff --git a/src/js/azepto.js b/src/js/azepto.js new file mode 100644 index 0000000000..c248c446e3 --- /dev/null +++ b/src/js/azepto.js @@ -0,0 +1,2 @@ +/* Zepto v1.1.6 - zepto event ajax form ie - zeptojs.com/license */ +var Zepto=function(){function L(t){return null==t?String(t):j[S.call(t)]||"object"}function Z(t){return"function"==L(t)}function _(t){return null!=t&&t==t.window}function $(t){return null!=t&&t.nodeType==t.DOCUMENT_NODE}function D(t){return"object"==L(t)}function M(t){return D(t)&&!_(t)&&Object.getPrototypeOf(t)==Object.prototype}function R(t){return"number"==typeof t.length}function k(t){return s.call(t,function(t){return null!=t})}function z(t){return t.length>0?n.fn.concat.apply([],t):t}function F(t){return t.replace(/::/g,"/").replace(/([A-Z]+)([A-Z][a-z])/g,"$1_$2").replace(/([a-z\d])([A-Z])/g,"$1_$2").replace(/_/g,"-").toLowerCase()}function q(t){return t in f?f[t]:f[t]=new RegExp("(^|\\s)"+t+"(\\s|$)")}function H(t,e){return"number"!=typeof e||c[F(t)]?e:e+"px"}function I(t){var e,n;return u[t]||(e=a.createElement(t),a.body.appendChild(e),n=getComputedStyle(e,"").getPropertyValue("display"),e.parentNode.removeChild(e),"none"==n&&(n="block"),u[t]=n),u[t]}function V(t){return"children"in t?o.call(t.children):n.map(t.childNodes,function(t){return 1==t.nodeType?t:void 0})}function B(n,i,r){for(e in i)r&&(M(i[e])||A(i[e]))?(M(i[e])&&!M(n[e])&&(n[e]={}),A(i[e])&&!A(n[e])&&(n[e]=[]),B(n[e],i[e],r)):i[e]!==t&&(n[e]=i[e])}function U(t,e){return null==e?n(t):n(t).filter(e)}function J(t,e,n,i){return Z(e)?e.call(t,n,i):e}function X(t,e,n){null==n?t.removeAttribute(e):t.setAttribute(e,n)}function W(e,n){var i=e.className||"",r=i&&i.baseVal!==t;return n===t?r?i.baseVal:i:void(r?i.baseVal=n:e.className=n)}function Y(t){try{return t?"true"==t||("false"==t?!1:"null"==t?null:+t+""==t?+t:/^[\[\{]/.test(t)?n.parseJSON(t):t):t}catch(e){return t}}function G(t,e){e(t);for(var n=0,i=t.childNodes.length;i>n;n++)G(t.childNodes[n],e)}var t,e,n,i,C,N,r=[],o=r.slice,s=r.filter,a=window.document,u={},f={},c={"column-count":1,columns:1,"font-weight":1,"line-height":1,opacity:1,"z-index":1,zoom:1},l=/^\s*<(\w+|!)[^>]*>/,h=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,p=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,d=/^(?:body|html)$/i,m=/([A-Z])/g,g=["val","css","html","text","data","width","height","offset"],v=["after","prepend","before","append"],y=a.createElement("table"),x=a.createElement("tr"),b={tr:a.createElement("tbody"),tbody:y,thead:y,tfoot:y,td:x,th:x,"*":a.createElement("div")},w=/complete|loaded|interactive/,E=/^[\w-]*$/,j={},S=j.toString,T={},O=a.createElement("div"),P={tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},A=Array.isArray||function(t){return t instanceof Array};return T.matches=function(t,e){if(!e||!t||1!==t.nodeType)return!1;var n=t.webkitMatchesSelector||t.mozMatchesSelector||t.oMatchesSelector||t.matchesSelector;if(n)return n.call(t,e);var i,r=t.parentNode,o=!r;return o&&(r=O).appendChild(t),i=~T.qsa(r,e).indexOf(t),o&&O.removeChild(t),i},C=function(t){return t.replace(/-+(.)?/g,function(t,e){return e?e.toUpperCase():""})},N=function(t){return s.call(t,function(e,n){return t.indexOf(e)==n})},T.fragment=function(e,i,r){var s,u,f;return h.test(e)&&(s=n(a.createElement(RegExp.$1))),s||(e.replace&&(e=e.replace(p,"<$1>")),i===t&&(i=l.test(e)&&RegExp.$1),i in b||(i="*"),f=b[i],f.innerHTML=""+e,s=n.each(o.call(f.childNodes),function(){f.removeChild(this)})),M(r)&&(u=n(s),n.each(r,function(t,e){g.indexOf(t)>-1?u[t](e):u.attr(t,e)})),s},T.Z=function(t,e){return t=t||[],t.__proto__=n.fn,t.selector=e||"",t},T.isZ=function(t){return t instanceof T.Z},T.init=function(e,i){var r;if(!e)return T.Z();if("string"==typeof e)if(e=e.trim(),"<"==e[0]&&l.test(e))r=T.fragment(e,RegExp.$1,i),e=null;else{if(i!==t)return n(i).find(e);r=T.qsa(a,e)}else{if(Z(e))return n(a).ready(e);if(T.isZ(e))return e;if(A(e))r=k(e);else if(D(e))r=[e],e=null;else if(l.test(e))r=T.fragment(e.trim(),RegExp.$1,i),e=null;else{if(i!==t)return n(i).find(e);r=T.qsa(a,e)}}return T.Z(r,e)},n=function(t,e){return T.init(t,e)},n.extend=function(t){var e,n=o.call(arguments,1);return"boolean"==typeof t&&(e=t,t=n.shift()),n.forEach(function(n){B(t,n,e)}),t},T.qsa=function(t,e){var n,i="#"==e[0],r=!i&&"."==e[0],s=i||r?e.slice(1):e,a=E.test(s);return $(t)&&a&&i?(n=t.getElementById(s))?[n]:[]:1!==t.nodeType&&9!==t.nodeType?[]:o.call(a&&!i?r?t.getElementsByClassName(s):t.getElementsByTagName(e):t.querySelectorAll(e))},n.contains=a.documentElement.contains?function(t,e){return t!==e&&t.contains(e)}:function(t,e){for(;e&&(e=e.parentNode);)if(e===t)return!0;return!1},n.type=L,n.isFunction=Z,n.isWindow=_,n.isArray=A,n.isPlainObject=M,n.isEmptyObject=function(t){var e;for(e in t)return!1;return!0},n.inArray=function(t,e,n){return r.indexOf.call(e,t,n)},n.camelCase=C,n.trim=function(t){return null==t?"":String.prototype.trim.call(t)},n.uuid=0,n.support={},n.expr={},n.map=function(t,e){var n,r,o,i=[];if(R(t))for(r=0;r=0?e:e+this.length]},toArray:function(){return this.get()},size:function(){return this.length},remove:function(){return this.each(function(){null!=this.parentNode&&this.parentNode.removeChild(this)})},each:function(t){return r.every.call(this,function(e,n){return t.call(e,n,e)!==!1}),this},filter:function(t){return Z(t)?this.not(this.not(t)):n(s.call(this,function(e){return T.matches(e,t)}))},add:function(t,e){return n(N(this.concat(n(t,e))))},is:function(t){return this.length>0&&T.matches(this[0],t)},not:function(e){var i=[];if(Z(e)&&e.call!==t)this.each(function(t){e.call(this,t)||i.push(this)});else{var r="string"==typeof e?this.filter(e):R(e)&&Z(e.item)?o.call(e):n(e);this.forEach(function(t){r.indexOf(t)<0&&i.push(t)})}return n(i)},has:function(t){return this.filter(function(){return D(t)?n.contains(this,t):n(this).find(t).size()})},eq:function(t){return-1===t?this.slice(t):this.slice(t,+t+1)},first:function(){var t=this[0];return t&&!D(t)?t:n(t)},last:function(){var t=this[this.length-1];return t&&!D(t)?t:n(t)},find:function(t){var e,i=this;return e=t?"object"==typeof t?n(t).filter(function(){var t=this;return r.some.call(i,function(e){return n.contains(e,t)})}):1==this.length?n(T.qsa(this[0],t)):this.map(function(){return T.qsa(this,t)}):n()},closest:function(t,e){var i=this[0],r=!1;for("object"==typeof t&&(r=n(t));i&&!(r?r.indexOf(i)>=0:T.matches(i,t));)i=i!==e&&!$(i)&&i.parentNode;return n(i)},parents:function(t){for(var e=[],i=this;i.length>0;)i=n.map(i,function(t){return(t=t.parentNode)&&!$(t)&&e.indexOf(t)<0?(e.push(t),t):void 0});return U(e,t)},parent:function(t){return U(N(this.pluck("parentNode")),t)},children:function(t){return U(this.map(function(){return V(this)}),t)},contents:function(){return this.map(function(){return o.call(this.childNodes)})},siblings:function(t){return U(this.map(function(t,e){return s.call(V(e.parentNode),function(t){return t!==e})}),t)},empty:function(){return this.each(function(){this.innerHTML=""})},pluck:function(t){return n.map(this,function(e){return e[t]})},show:function(){return this.each(function(){"none"==this.style.display&&(this.style.display=""),"none"==getComputedStyle(this,"").getPropertyValue("display")&&(this.style.display=I(this.nodeName))})},replaceWith:function(t){return this.before(t).remove()},wrap:function(t){var e=Z(t);if(this[0]&&!e)var i=n(t).get(0),r=i.parentNode||this.length>1;return this.each(function(o){n(this).wrapAll(e?t.call(this,o):r?i.cloneNode(!0):i)})},wrapAll:function(t){if(this[0]){n(this[0]).before(t=n(t));for(var e;(e=t.children()).length;)t=e.first();n(t).append(this)}return this},wrapInner:function(t){var e=Z(t);return this.each(function(i){var r=n(this),o=r.contents(),s=e?t.call(this,i):t;o.length?o.wrapAll(s):r.append(s)})},unwrap:function(){return this.parent().each(function(){n(this).replaceWith(n(this).children())}),this},clone:function(){return this.map(function(){return this.cloneNode(!0)})},hide:function(){return this.css("display","none")},toggle:function(e){return this.each(function(){var i=n(this);(e===t?"none"==i.css("display"):e)?i.show():i.hide()})},prev:function(t){return n(this.pluck("previousElementSibling")).filter(t||"*")},next:function(t){return n(this.pluck("nextElementSibling")).filter(t||"*")},html:function(t){return 0 in arguments?this.each(function(e){var i=this.innerHTML;n(this).empty().append(J(this,t,e,i))}):0 in this?this[0].innerHTML:null},text:function(t){return 0 in arguments?this.each(function(e){var n=J(this,t,e,this.textContent);this.textContent=null==n?"":""+n}):0 in this?this[0].textContent:null},attr:function(n,i){var r;return"string"!=typeof n||1 in arguments?this.each(function(t){if(1===this.nodeType)if(D(n))for(e in n)X(this,e,n[e]);else X(this,n,J(this,i,t,this.getAttribute(n)))}):this.length&&1===this[0].nodeType?!(r=this[0].getAttribute(n))&&n in this[0]?this[0][n]:r:t},removeAttr:function(t){return this.each(function(){1===this.nodeType&&t.split(" ").forEach(function(t){X(this,t)},this)})},prop:function(t,e){return t=P[t]||t,1 in arguments?this.each(function(n){this[t]=J(this,e,n,this[t])}):this[0]&&this[0][t]},data:function(e,n){var i="data-"+e.replace(m,"-$1").toLowerCase(),r=1 in arguments?this.attr(i,n):this.attr(i);return null!==r?Y(r):t},val:function(t){return 0 in arguments?this.each(function(e){this.value=J(this,t,e,this.value)}):this[0]&&(this[0].multiple?n(this[0]).find("option").filter(function(){return this.selected}).pluck("value"):this[0].value)},offset:function(t){if(t)return this.each(function(e){var i=n(this),r=J(this,t,e,i.offset()),o=i.offsetParent().offset(),s={top:r.top-o.top,left:r.left-o.left};"static"==i.css("position")&&(s.position="relative"),i.css(s)});if(!this.length)return null;var e=this[0].getBoundingClientRect();return{left:e.left+window.pageXOffset,top:e.top+window.pageYOffset,width:Math.round(e.width),height:Math.round(e.height)}},css:function(t,i){if(arguments.length<2){var r,o=this[0];if(!o)return;if(r=getComputedStyle(o,""),"string"==typeof t)return o.style[C(t)]||r.getPropertyValue(t);if(A(t)){var s={};return n.each(t,function(t,e){s[e]=o.style[C(e)]||r.getPropertyValue(e)}),s}}var a="";if("string"==L(t))i||0===i?a=F(t)+":"+H(t,i):this.each(function(){this.style.removeProperty(F(t))});else for(e in t)t[e]||0===t[e]?a+=F(e)+":"+H(e,t[e])+";":this.each(function(){this.style.removeProperty(F(e))});return this.each(function(){this.style.cssText+=";"+a})},index:function(t){return t?this.indexOf(n(t)[0]):this.parent().children().indexOf(this[0])},hasClass:function(t){return t?r.some.call(this,function(t){return this.test(W(t))},q(t)):!1},addClass:function(t){return t?this.each(function(e){if("className"in this){i=[];var r=W(this),o=J(this,t,e,r);o.split(/\s+/g).forEach(function(t){n(this).hasClass(t)||i.push(t)},this),i.length&&W(this,r+(r?" ":"")+i.join(" "))}}):this},removeClass:function(e){return this.each(function(n){if("className"in this){if(e===t)return W(this,"");i=W(this),J(this,e,n,i).split(/\s+/g).forEach(function(t){i=i.replace(q(t)," ")}),W(this,i.trim())}})},toggleClass:function(e,i){return e?this.each(function(r){var o=n(this),s=J(this,e,r,W(this));s.split(/\s+/g).forEach(function(e){(i===t?!o.hasClass(e):i)?o.addClass(e):o.removeClass(e)})}):this},scrollTop:function(e){if(this.length){var n="scrollTop"in this[0];return e===t?n?this[0].scrollTop:this[0].pageYOffset:this.each(n?function(){this.scrollTop=e}:function(){this.scrollTo(this.scrollX,e)})}},scrollLeft:function(e){if(this.length){var n="scrollLeft"in this[0];return e===t?n?this[0].scrollLeft:this[0].pageXOffset:this.each(n?function(){this.scrollLeft=e}:function(){this.scrollTo(e,this.scrollY)})}},position:function(){if(this.length){var t=this[0],e=this.offsetParent(),i=this.offset(),r=d.test(e[0].nodeName)?{top:0,left:0}:e.offset();return i.top-=parseFloat(n(t).css("margin-top"))||0,i.left-=parseFloat(n(t).css("margin-left"))||0,r.top+=parseFloat(n(e[0]).css("border-top-width"))||0,r.left+=parseFloat(n(e[0]).css("border-left-width"))||0,{top:i.top-r.top,left:i.left-r.left}}},offsetParent:function(){return this.map(function(){for(var t=this.offsetParent||a.body;t&&!d.test(t.nodeName)&&"static"==n(t).css("position");)t=t.offsetParent;return t})}},n.fn.detach=n.fn.remove,["width","height"].forEach(function(e){var i=e.replace(/./,function(t){return t[0].toUpperCase()});n.fn[e]=function(r){var o,s=this[0];return r===t?_(s)?s["inner"+i]:$(s)?s.documentElement["scroll"+i]:(o=this.offset())&&o[e]:this.each(function(t){s=n(this),s.css(e,J(this,r,t,s[e]()))})}}),v.forEach(function(t,e){var i=e%2;n.fn[t]=function(){var t,o,r=n.map(arguments,function(e){return t=L(e),"object"==t||"array"==t||null==e?e:T.fragment(e)}),s=this.length>1;return r.length<1?this:this.each(function(t,u){o=i?u:u.parentNode,u=0==e?u.nextSibling:1==e?u.firstChild:2==e?u:null;var f=n.contains(a.documentElement,o);r.forEach(function(t){if(s)t=t.cloneNode(!0);else if(!o)return n(t).remove();o.insertBefore(t,u),f&&G(t,function(t){null==t.nodeName||"SCRIPT"!==t.nodeName.toUpperCase()||t.type&&"text/javascript"!==t.type||t.src||window.eval.call(window,t.innerHTML)})})})},n.fn[i?t+"To":"insert"+(e?"Before":"After")]=function(e){return n(e)[t](this),this}}),T.Z.prototype=n.fn,T.uniq=N,T.deserializeValue=Y,n.zepto=T,n}();window.Zepto=Zepto,void 0===window.$&&(window.$=Zepto),function(t){function l(t){return t._zid||(t._zid=e++)}function h(t,e,n,i){if(e=p(e),e.ns)var r=d(e.ns);return(s[l(t)]||[]).filter(function(t){return!(!t||e.e&&t.e!=e.e||e.ns&&!r.test(t.ns)||n&&l(t.fn)!==l(n)||i&&t.sel!=i)})}function p(t){var e=(""+t).split(".");return{e:e[0],ns:e.slice(1).sort().join(" ")}}function d(t){return new RegExp("(?:^| )"+t.replace(" "," .* ?")+"(?: |$)")}function m(t,e){return t.del&&!u&&t.e in f||!!e}function g(t){return c[t]||u&&f[t]||t}function v(e,i,r,o,a,u,f){var h=l(e),d=s[h]||(s[h]=[]);i.split(/\s/).forEach(function(i){if("ready"==i)return t(document).ready(r);var s=p(i);s.fn=r,s.sel=a,s.e in c&&(r=function(e){var n=e.relatedTarget;return!n||n!==this&&!t.contains(this,n)?s.fn.apply(this,arguments):void 0}),s.del=u;var l=u||r;s.proxy=function(t){if(t=j(t),!t.isImmediatePropagationStopped()){t.data=o;var i=l.apply(e,t._args==n?[t]:[t].concat(t._args));return i===!1&&(t.preventDefault(),t.stopPropagation()),i}},s.i=d.length,d.push(s),"addEventListener"in e&&e.addEventListener(g(s.e),s.proxy,m(s,f))})}function y(t,e,n,i,r){var o=l(t);(e||"").split(/\s/).forEach(function(e){h(t,e,n,i).forEach(function(e){delete s[o][e.i],"removeEventListener"in t&&t.removeEventListener(g(e.e),e.proxy,m(e,r))})})}function j(e,i){return(i||!e.isDefaultPrevented)&&(i||(i=e),t.each(E,function(t,n){var r=i[t];e[t]=function(){return this[n]=x,r&&r.apply(i,arguments)},e[n]=b}),(i.defaultPrevented!==n?i.defaultPrevented:"returnValue"in i?i.returnValue===!1:i.getPreventDefault&&i.getPreventDefault())&&(e.isDefaultPrevented=x)),e}function S(t){var e,i={originalEvent:t};for(e in t)w.test(e)||t[e]===n||(i[e]=t[e]);return j(i,t)}var n,e=1,i=Array.prototype.slice,r=t.isFunction,o=function(t){return"string"==typeof t},s={},a={},u="onfocusin"in window,f={focus:"focusin",blur:"focusout"},c={mouseenter:"mouseover",mouseleave:"mouseout"};a.click=a.mousedown=a.mouseup=a.mousemove="MouseEvents",t.event={add:v,remove:y},t.proxy=function(e,n){var s=2 in arguments&&i.call(arguments,2);if(r(e)){var a=function(){return e.apply(n,s?s.concat(i.call(arguments)):arguments)};return a._zid=l(e),a}if(o(n))return s?(s.unshift(e[n],e),t.proxy.apply(null,s)):t.proxy(e[n],e);throw new TypeError("expected function")},t.fn.bind=function(t,e,n){return this.on(t,e,n)},t.fn.unbind=function(t,e){return this.off(t,e)},t.fn.one=function(t,e,n,i){return this.on(t,e,n,i,1)};var x=function(){return!0},b=function(){return!1},w=/^([A-Z]|returnValue$|layer[XY]$)/,E={preventDefault:"isDefaultPrevented",stopImmediatePropagation:"isImmediatePropagationStopped",stopPropagation:"isPropagationStopped"};t.fn.delegate=function(t,e,n){return this.on(e,t,n)},t.fn.undelegate=function(t,e,n){return this.off(e,t,n)},t.fn.live=function(e,n){return t(document.body).delegate(this.selector,e,n),this},t.fn.die=function(e,n){return t(document.body).undelegate(this.selector,e,n),this},t.fn.on=function(e,s,a,u,f){var c,l,h=this;return e&&!o(e)?(t.each(e,function(t,e){h.on(t,s,a,e,f)}),h):(o(s)||r(u)||u===!1||(u=a,a=s,s=n),(r(a)||a===!1)&&(u=a,a=n),u===!1&&(u=b),h.each(function(n,r){f&&(c=function(t){return y(r,t.type,u),u.apply(this,arguments)}),s&&(l=function(e){var n,o=t(e.target).closest(s,r).get(0);return o&&o!==r?(n=t.extend(S(e),{currentTarget:o,liveFired:r}),(c||u).apply(o,[n].concat(i.call(arguments,1)))):void 0}),v(r,e,u,a,s,l||c)}))},t.fn.off=function(e,i,s){var a=this;return e&&!o(e)?(t.each(e,function(t,e){a.off(t,i,e)}),a):(o(i)||r(s)||s===!1||(s=i,i=n),s===!1&&(s=b),a.each(function(){y(this,e,s,i)}))},t.fn.trigger=function(e,n){return e=o(e)||t.isPlainObject(e)?t.Event(e):j(e),e._args=n,this.each(function(){e.type in f&&"function"==typeof this[e.type]?this[e.type]():"dispatchEvent"in this?this.dispatchEvent(e):t(this).triggerHandler(e,n)})},t.fn.triggerHandler=function(e,n){var i,r;return this.each(function(s,a){i=S(o(e)?t.Event(e):e),i._args=n,i.target=a,t.each(h(a,e.type||e),function(t,e){return r=e.proxy(i),i.isImmediatePropagationStopped()?!1:void 0})}),r},"focusin focusout focus blur load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select keydown keypress keyup error".split(" ").forEach(function(e){t.fn[e]=function(t){return 0 in arguments?this.bind(e,t):this.trigger(e)}}),t.Event=function(t,e){o(t)||(e=t,t=e.type);var n=document.createEvent(a[t]||"Events"),i=!0;if(e)for(var r in e)"bubbles"==r?i=!!e[r]:n[r]=e[r];return n.initEvent(t,i,!0),j(n)}}(Zepto),function(t){function h(e,n,i){var r=t.Event(n);return t(e).trigger(r,i),!r.isDefaultPrevented()}function p(t,e,i,r){return t.global?h(e||n,i,r):void 0}function d(e){e.global&&0===t.active++&&p(e,null,"ajaxStart")}function m(e){e.global&&!--t.active&&p(e,null,"ajaxStop")}function g(t,e){var n=e.context;return e.beforeSend.call(n,t,e)===!1||p(e,n,"ajaxBeforeSend",[t,e])===!1?!1:void p(e,n,"ajaxSend",[t,e])}function v(t,e,n,i){var r=n.context,o="success";n.success.call(r,t,o,e),i&&i.resolveWith(r,[t,o,e]),p(n,r,"ajaxSuccess",[e,n,t]),x(o,e,n)}function y(t,e,n,i,r){var o=i.context;i.error.call(o,n,e,t),r&&r.rejectWith(o,[n,e,t]),p(i,o,"ajaxError",[n,i,t||e]),x(e,n,i)}function x(t,e,n){var i=n.context;n.complete.call(i,e,t),p(n,i,"ajaxComplete",[e,n]),m(n)}function b(){}function w(t){return t&&(t=t.split(";",2)[0]),t&&(t==f?"html":t==u?"json":s.test(t)?"script":a.test(t)&&"xml")||"text"}function E(t,e){return""==e?t:(t+"&"+e).replace(/[&?]{1,2}/,"?")}function j(e){e.processData&&e.data&&"string"!=t.type(e.data)&&(e.data=t.param(e.data,e.traditional)),!e.data||e.type&&"GET"!=e.type.toUpperCase()||(e.url=E(e.url,e.data),e.data=void 0)}function S(e,n,i,r){return t.isFunction(n)&&(r=i,i=n,n=void 0),t.isFunction(i)||(r=i,i=void 0),{url:e,data:n,success:i,dataType:r}}function C(e,n,i,r){var o,s=t.isArray(n),a=t.isPlainObject(n);t.each(n,function(n,u){o=t.type(u),r&&(n=i?r:r+"["+(a||"object"==o||"array"==o?n:"")+"]"),!r&&s?e.add(u.name,u.value):"array"==o||!i&&"object"==o?C(e,u,i,n):e.add(n,u)})}var i,r,e=0,n=window.document,o=/)<[^<]*)*<\/script>/gi,s=/^(?:text|application)\/javascript/i,a=/^(?:text|application)\/xml/i,u="application/json",f="text/html",c=/^\s*$/,l=n.createElement("a");l.href=window.location.href,t.active=0,t.ajaxJSONP=function(i,r){if(!("type"in i))return t.ajax(i);var f,h,o=i.jsonpCallback,s=(t.isFunction(o)?o():o)||"jsonp"+ ++e,a=n.createElement("script"),u=window[s],c=function(e){t(a).triggerHandler("error",e||"abort")},l={abort:c};return r&&r.promise(l),t(a).on("load error",function(e,n){clearTimeout(h),t(a).off().remove(),"error"!=e.type&&f?v(f[0],l,i,r):y(null,n||"error",l,i,r),window[s]=u,f&&t.isFunction(u)&&u(f[0]),u=f=void 0}),g(l,i)===!1?(c("abort"),l):(window[s]=function(){f=arguments},a.src=i.url.replace(/\?(.+)=\?/,"?$1="+s),n.head.appendChild(a),i.timeout>0&&(h=setTimeout(function(){c("timeout")},i.timeout)),l)},t.ajaxSettings={type:"GET",beforeSend:b,success:b,error:b,complete:b,context:null,global:!0,xhr:function(){return new window.XMLHttpRequest},accepts:{script:"text/javascript, application/javascript, application/x-javascript",json:u,xml:"application/xml, text/xml",html:f,text:"text/plain"},crossDomain:!1,timeout:0,processData:!0,cache:!0},t.ajax=function(e){var a,o=t.extend({},e||{}),s=t.Deferred&&t.Deferred();for(i in t.ajaxSettings)void 0===o[i]&&(o[i]=t.ajaxSettings[i]);d(o),o.crossDomain||(a=n.createElement("a"),a.href=o.url,a.href=a.href,o.crossDomain=l.protocol+"//"+l.host!=a.protocol+"//"+a.host),o.url||(o.url=window.location.toString()),j(o);var u=o.dataType,f=/\?.+=\?/.test(o.url);if(f&&(u="jsonp"),o.cache!==!1&&(e&&e.cache===!0||"script"!=u&&"jsonp"!=u)||(o.url=E(o.url,"_="+Date.now())),"jsonp"==u)return f||(o.url=E(o.url,o.jsonp?o.jsonp+"=?":o.jsonp===!1?"":"callback=?")),t.ajaxJSONP(o,s);var C,h=o.accepts[u],p={},m=function(t,e){p[t.toLowerCase()]=[t,e]},x=/^([\w-]+:)\/\//.test(o.url)?RegExp.$1:window.location.protocol,S=o.xhr(),T=S.setRequestHeader;if(s&&s.promise(S),o.crossDomain||m("X-Requested-With","XMLHttpRequest"),m("Accept",h||"*/*"),(h=o.mimeType||h)&&(h.indexOf(",")>-1&&(h=h.split(",",2)[0]),S.overrideMimeType&&S.overrideMimeType(h)),(o.contentType||o.contentType!==!1&&o.data&&"GET"!=o.type.toUpperCase())&&m("Content-Type",o.contentType||"application/x-www-form-urlencoded"),o.headers)for(r in o.headers)m(r,o.headers[r]);if(S.setRequestHeader=m,S.onreadystatechange=function(){if(4==S.readyState){S.onreadystatechange=b,clearTimeout(C);var e,n=!1;if(S.status>=200&&S.status<300||304==S.status||0==S.status&&"file:"==x){u=u||w(o.mimeType||S.getResponseHeader("content-type")),e=S.responseText;try{"script"==u?(1,eval)(e):"xml"==u?e=S.responseXML:"json"==u&&(e=c.test(e)?null:t.parseJSON(e))}catch(i){n=i}n?y(n,"parsererror",S,o,s):v(e,S,o,s)}else y(S.statusText||null,S.status?"error":"abort",S,o,s)}},g(S,o)===!1)return S.abort(),y(null,"abort",S,o,s),S;if(o.xhrFields)for(r in o.xhrFields)S[r]=o.xhrFields[r];var N="async"in o?o.async:!0;S.open(o.type,o.url,N,o.username,o.password);for(r in p)T.apply(S,p[r]);return o.timeout>0&&(C=setTimeout(function(){S.onreadystatechange=b,S.abort(),y(null,"timeout",S,o,s)},o.timeout)),S.send(o.data?o.data:null),S},t.get=function(){return t.ajax(S.apply(null,arguments))},t.post=function(){var e=S.apply(null,arguments);return e.type="POST",t.ajax(e)},t.getJSON=function(){var e=S.apply(null,arguments);return e.dataType="json",t.ajax(e)},t.fn.load=function(e,n,i){if(!this.length)return this;var a,r=this,s=e.split(/\s/),u=S(e,n,i),f=u.success;return s.length>1&&(u.url=s[0],a=s[1]),u.success=function(e){r.html(a?t("
    ").html(e.replace(o,"")).find(a):e),f&&f.apply(r,arguments)},t.ajax(u),this};var T=encodeURIComponent;t.param=function(e,n){var i=[];return i.add=function(e,n){t.isFunction(n)&&(n=n()),null==n&&(n=""),this.push(T(e)+"="+T(n))},C(i,e,n),i.join("&").replace(/%20/g,"+")}}(Zepto),function(t){t.fn.serializeArray=function(){var e,n,i=[],r=function(t){return t.forEach?t.forEach(r):void i.push({name:e,value:t})};return this[0]&&t.each(this[0].elements,function(i,o){n=o.type,e=o.name,e&&"fieldset"!=o.nodeName.toLowerCase()&&!o.disabled&&"submit"!=n&&"reset"!=n&&"button"!=n&&"file"!=n&&("radio"!=n&&"checkbox"!=n||o.checked)&&r(t(o).val())}),i},t.fn.serialize=function(){var t=[];return this.serializeArray().forEach(function(e){t.push(encodeURIComponent(e.name)+"="+encodeURIComponent(e.value))}),t.join("&")},t.fn.submit=function(e){if(0 in arguments)this.bind("submit",e);else if(this.length){var n=t.Event("submit");this.eq(0).trigger(n),n.isDefaultPrevented()||this.get(0).submit()}return this}}(Zepto),function(t){"__proto__"in{}||t.extend(t.zepto,{Z:function(e,n){return e=e||[],t.extend(e,t.fn),e.selector=n||"",e.__Z=!0,e},isZ:function(e){return"array"===t.type(e)&&"__Z"in e}});try{getComputedStyle(void 0)}catch(e){var n=getComputedStyle;window.getComputedStyle=function(t){try{return n(t)}catch(e){return null}}}}(Zepto); diff --git a/src/js/classie.js b/src/js/classie.js new file mode 100644 index 0000000000..eff797902b --- /dev/null +++ b/src/js/classie.js @@ -0,0 +1,80 @@ +/*! + * classie - class helper functions + * from bonzo https://github.com/ded/bonzo + * + * classie.has( elem, 'my-class' ) -> true/false + * classie.add( elem, 'my-new-class' ) + * classie.remove( elem, 'my-unwanted-class' ) + * classie.toggle( elem, 'my-class' ) + */ + +/*jshint browser: true, strict: true, undef: true */ +/*global define: false */ + +( function( window ) { + +'use strict'; + +// class helper functions from bonzo https://github.com/ded/bonzo + +function classReg( className ) { + return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); +} + +// classList support for class management +// altho to be fair, the api sucks because it won't accept multiple classes at once +var hasClass, addClass, removeClass; + +if ( 'classList' in document.documentElement ) { + hasClass = function( elem, c ) { + return elem.classList.contains( c ); + }; + addClass = function( elem, c ) { + elem.classList.add( c ); + }; + removeClass = function( elem, c ) { + elem.classList.remove( c ); + }; +} +else { + hasClass = function( elem, c ) { + return classReg( c ).test( elem.className ); + }; + addClass = function( elem, c ) { + if ( !hasClass( elem, c ) ) { + elem.className = elem.className + ' ' + c; + } + }; + removeClass = function( elem, c ) { + elem.className = elem.className.replace( classReg( c ), ' ' ); + }; +} + +function toggleClass( elem, c ) { + var fn = hasClass( elem, c ) ? removeClass : addClass; + fn( elem, c ); +} + +var classie = { + // full names + hasClass: hasClass, + addClass: addClass, + removeClass: removeClass, + toggleClass: toggleClass, + // short names + has: hasClass, + add: addClass, + remove: removeClass, + toggle: toggleClass +}; + +// transport +if ( typeof define === 'function' && define.amd ) { + // AMD + define( classie ); +} else { + // browser global + window.classie = classie; +} + +})( window ); \ No newline at end of file diff --git a/src/js/progressBar.js b/src/js/progressBar.js new file mode 100644 index 0000000000..fc01139eb3 --- /dev/null +++ b/src/js/progressBar.js @@ -0,0 +1,64 @@ +(function () { + 'use strict'; + + var post = document.querySelector('.post-content'); + var progressBar = document.querySelector('.progress-bar'); + + if (post && progressBar) { + var lastScrollTop = 0; + var maxScrollTop = post.scrollHeight; + + var completed = progressBar.querySelector('.completed'); + var remaining = progressBar.querySelector('.remaining'); + var timeCompleted = progressBar.querySelector('.time-completed'); + var timeRemaining = progressBar.querySelector('.time-remaining'); + + document.addEventListener('scroll', function() { + var scrollTop = window.pageYOffset || document.documentElement.scrollTop; + + if (scrollTop > lastScrollTop) { + progressBar.style.bottom = '0%'; + } else { + progressBar.style.bottom = '-100%'; + } + + if (scrollTop <= maxScrollTop) { + var percentage = scrollTop/maxScrollTop; + + var completedVal = (percentage * 100).toFixed(2); + var remainingVal = 100 - parseFloat(completedVal); + completed.style.width = completedVal.toString() + '%'; + remaining.style.width = remainingVal.toString() + '%'; + + var totalSeconds = parseInt(progressBar.getAttribute('data-minutes')) * 60; + + var completedTime = parseInt(percentage * totalSeconds); + var completedMin = parseInt(completedTime/60); + var completedSec = parseInt((completedTime/60 - completedMin) * 60); + + var remainingTime = totalSeconds - completedTime; + var remainingMin = parseInt(remainingTime/60); + var remainingSec = parseInt((remainingTime/60 - remainingMin) * 60); + + completedMin = (completedMin < 10) ? '0' + completedMin : completedMin; + completedSec = (completedSec < 10) ? '0' + completedSec : completedSec; + remainingMin = (remainingMin < 10) ? '0' + remainingMin : remainingMin; + remainingSec = (remainingSec < 10) ? '0' + remainingSec : remainingSec; + + timeCompleted.innerText = completedMin + ':' + completedSec; + timeRemaining.innerText = remainingMin + ':' + remainingSec; + } else { + completed.style.width = '100%'; + remaining.style.width = '0%'; + + var minutes = parseInt(progressBar.getAttribute('data-minutes')); + minutes = (minutes < 10) ? '0' + minutes : minutes; + + timeCompleted.innerText = '00:00'; + timeRemaining.innerText = minutes + ':00'; + } + + lastScrollTop = scrollTop; + }); + } +})(); diff --git a/src/js/scrollanimation.js b/src/js/scrollanimation.js new file mode 100644 index 0000000000..4103f27440 --- /dev/null +++ b/src/js/scrollanimation.js @@ -0,0 +1,180 @@ +/** + * animOnScroll.js v1.0.0 + * http://www.codrops.com + * + * Licensed under the MIT license. + * http://www.opensource.org/licenses/mit-license.php + * + * Copyright 2013, Codrops + * http://www.codrops.com + */ +;( function( window ) { + + 'use strict'; + + var docElem = window.document.documentElement; + + function getViewportH() { + var client = docElem['clientHeight'], + inner = window['innerHeight']; + + if( client < inner ) + return inner; + else + return client; + } + + function scrollY() { + return window.pageYOffset || docElem.scrollTop; + } + + // http://stackoverflow.com/a/5598797/989439 + function getOffset( el ) { + var offsetTop = 0, offsetLeft = 0; + do { + if ( !isNaN( el.offsetTop ) ) { + offsetTop += el.offsetTop; + } + if ( !isNaN( el.offsetLeft ) ) { + offsetLeft += el.offsetLeft; + } + } while( el = el.offsetParent ) + + return { + top : offsetTop, + left : offsetLeft + } + } + + function inViewport( el, h ) { + var elH = el.offsetHeight, + scrolled = scrollY(), + viewed = scrolled + getViewportH(), + elTop = getOffset(el).top, + elBottom = elTop + elH, + // if 0, the element is considered in the viewport as soon as it enters. + // if 1, the element is considered in the viewport only when it's fully inside + // value in percentage (1 >= h >= 0) + h = h || 0; + + return (elTop + elH * h) <= viewed && (elBottom - elH * h) >= scrolled; + } + + function extend( a, b ) { + for( var key in b ) { + if( b.hasOwnProperty( key ) ) { + a[key] = b[key]; + } + } + return a; + } + + function loadImageUrl(img) { + if (img) { + var image = new Image(); + image.onload = function () { + img.src = image.src; + }; + image.src = img.getAttribute('data-url'); + } + } + + function AnimOnScroll( el, options ) { + this.el = el; + this.options = extend( this.defaults, options ); + this._init(); + } + + AnimOnScroll.prototype = { + defaults : { + // Minimum and a maximum duration of the animation (random value is chosen) + minDuration : 0, + maxDuration : 0, + // The viewportFactor defines how much of the appearing item has to be visible in order to trigger the animation + // if we'd use a value of 0, this would mean that it would add the animation class as soon as the item is in the viewport. + // If we were to use the value of 1, the animation would only be triggered when we see all of the item in the viewport (100% of it) + viewportFactor : 0 + }, + _init : function() { + this.items = Array.prototype.slice.call( document.querySelectorAll( '#' + this.el.id + ' > article' ) ); + this.itemsCount = this.items.length; + this.itemsRenderedCount = 0; + this.didScroll = false; + + var self = this; + // the items already shown... + self.items.forEach( function( el, i ) { + if( inViewport( el ) ) { + self._checkTotalRendered(); + classie.add( el, 'shown' ); + + loadImageUrl(el.querySelector('.preload')); + } + } ); + + // animate on scroll the items inside the viewport + window.addEventListener( 'scroll', function() { + self._onScrollFn(); + }, false ); + window.addEventListener( 'resize', function() { + self._resizeHandler(); + }, false ); + }, + _onScrollFn : function() { + var self = this; + if( !this.didScroll ) { + this.didScroll = true; + setTimeout( function() { self._scrollPage(); }, 60 ); + } + }, + _scrollPage : function() { + var self = this; + this.items.forEach( function( el, i ) { + if( !classie.has( el, 'shown' ) && !classie.has( el, 'animate' ) && inViewport( el, self.options.viewportFactor ) ) { + setTimeout( function() { + var perspY = scrollY() + getViewportH() / 2; + self.el.style.WebkitPerspectiveOrigin = '50% ' + perspY + 'px'; + self.el.style.MozPerspectiveOrigin = '50% ' + perspY + 'px'; + self.el.style.perspectiveOrigin = '50% ' + perspY + 'px'; + + self._checkTotalRendered(); + + if( self.options.minDuration && self.options.maxDuration ) { + var randDuration = ( Math.random() * ( self.options.maxDuration - self.options.minDuration ) + self.options.minDuration ) + 's'; + el.style.WebkitAnimationDuration = randDuration; + el.style.MozAnimationDuration = randDuration; + el.style.animationDuration = randDuration; + } + + classie.add( el, 'animate' ); + + loadImageUrl(el.querySelector('.preload')); + + }, 25 ); + } + }); + this.didScroll = false; + }, + _resizeHandler : function() { + var self = this; + function delayed() { + self._scrollPage(); + self.resizeTimeout = null; + } + if ( this.resizeTimeout ) { + clearTimeout( this.resizeTimeout ); + } + this.resizeTimeout = setTimeout( delayed, 1000 ); + }, + _checkTotalRendered : function() { + ++this.itemsRenderedCount; + if( this.itemsRenderedCount === this.itemsCount ) { + window.removeEventListener( 'scroll', this._onScrollFn ); + } + } + } + + // add to global namespace + window.AnimOnScroll = AnimOnScroll; + +} )( window ); diff --git a/src/js/simpleJekyllSearch.js b/src/js/simpleJekyllSearch.js new file mode 100644 index 0000000000..13f2f25dac --- /dev/null +++ b/src/js/simpleJekyllSearch.js @@ -0,0 +1,88 @@ +(function($) { + $.fn.simpleJekyllSearch = function(options) { + var settings = $.extend({ + jsonFile : '/search.json', + jsonFormat : 'title,tags,categories,url,date', + template : '
    • ', + searchResults : '.search-results', + limit : '10', + noResults : '

    Puuuts! Não encontramos nada :(

    ' + }, options); + + var properties = settings.jsonFormat.split(','); + + var jsonData = [], + origThis = this, + searchResults = $(settings.searchResults); + + if(settings.jsonFile.length && searchResults.length){ + $.ajax({ + type: "GET", + url: settings.jsonFile, + dataType: 'json', + success: function(data, textStatus, jqXHR) { + jsonData = data; + registerEvent(); + }, + error: function(x,y,z) { + console.log("***ERROR in simpleJekyllSearch.js***"); + console.log(x); + console.log(y); + console.log(z); + // x.responseText should have what's wrong + } + }); + } + + + function registerEvent(){ + origThis.keyup(function(e){ + if($(this).val().length){ + writeMatches( performSearch($(this).val())); + }else{ + clearSearchResults(); + } + }); + } + + function performSearch(str){ + var matches = []; + + $.each(jsonData,function(i,entry){ + for(var i=0;i= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F || + // If the character is the first character and is in the range [0-9] + // (U+0030 to U+0039), […] + (index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) || + // If the character is the second character and is in the range [0-9] + // (U+0030 to U+0039) and the first character is a `-` (U+002D), […] + ( + index === 1 && + codeUnit >= 0x0030 && codeUnit <= 0x0039 && + firstCodeUnit === 0x002D + ) + ) { + // http://dev.w3.org/csswg/cssom/#escape-a-character-as-code-point + result += '\\' + codeUnit.toString(16) + ' '; + continue; + } + + // If the character is not handled by one of the above rules and is + // greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or + // is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to + // U+005A), or [a-z] (U+0061 to U+007A), […] + if ( + codeUnit >= 0x0080 || + codeUnit === 0x002D || + codeUnit === 0x005F || + codeUnit >= 0x0030 && codeUnit <= 0x0039 || + codeUnit >= 0x0041 && codeUnit <= 0x005A || + codeUnit >= 0x0061 && codeUnit <= 0x007A + ) { + // the character itself + result += string.charAt(index); + continue; + } + + // Otherwise, the escaped character. + // http://dev.w3.org/csswg/cssom/#escape-a-character + result += '\\' + string.charAt(index); + + } + return result; + }; + + /** + * Calculate the easing pattern + * @private + * @link https://gist.github.com/gre/1650294 + * @param {String} type Easing pattern + * @param {Number} time Time animation should take to complete + * @returns {Number} + */ + var easingPattern = function ( type, time ) { + var pattern; + if ( type === 'easeInQuad' ) pattern = time * time; // accelerating from zero velocity + if ( type === 'easeOutQuad' ) pattern = time * (2 - time); // decelerating to zero velocity + if ( type === 'easeInOutQuad' ) pattern = time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration + if ( type === 'easeInCubic' ) pattern = time * time * time; // accelerating from zero velocity + if ( type === 'easeOutCubic' ) pattern = (--time) * time * time + 1; // decelerating to zero velocity + if ( type === 'easeInOutCubic' ) pattern = time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration + if ( type === 'easeInQuart' ) pattern = time * time * time * time; // accelerating from zero velocity + if ( type === 'easeOutQuart' ) pattern = 1 - (--time) * time * time * time; // decelerating to zero velocity + if ( type === 'easeInOutQuart' ) pattern = time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration + if ( type === 'easeInQuint' ) pattern = time * time * time * time * time; // accelerating from zero velocity + if ( type === 'easeOutQuint' ) pattern = 1 + (--time) * time * time * time * time; // decelerating to zero velocity + if ( type === 'easeInOutQuint' ) pattern = time < 0.5 ? 16 * time * time * time * time * time : 1 + 16 * (--time) * time * time * time * time; // acceleration until halfway, then deceleration + return pattern || time; // no easing, no acceleration + }; + + /** + * Calculate how far to scroll + * @private + * @param {Element} anchor The anchor element to scroll to + * @param {Number} headerHeight Height of a fixed header, if any + * @param {Number} offset Number of pixels by which to offset scroll + * @returns {Number} + */ + var getEndLocation = function ( anchor, headerHeight, offset ) { + var location = 0; + if (anchor.offsetParent) { + do { + location += anchor.offsetTop; + anchor = anchor.offsetParent; + } while (anchor); + } + location = location - headerHeight - offset; + return location >= 0 ? location : 0; + }; + + /** + * Determine the document's height + * @private + * @returns {Number} + */ + var getDocumentHeight = function () { + return Math.max( + root.document.body.scrollHeight, root.document.documentElement.scrollHeight, + root.document.body.offsetHeight, root.document.documentElement.offsetHeight, + root.document.body.clientHeight, root.document.documentElement.clientHeight + ); + }; + + /** + * Convert data-options attribute into an object of key/value pairs + * @private + * @param {String} options Link-specific options as a data attribute string + * @returns {Object} + */ + var getDataOptions = function ( options ) { + return !options || !(typeof JSON === 'object' && typeof JSON.parse === 'function') ? {} : JSON.parse( options ); + }; + + /** + * Update the URL + * @private + * @param {Element} anchor The element to scroll to + * @param {Boolean} url Whether or not to update the URL history + */ + var updateUrl = function ( anchor, url ) { + if ( root.history.pushState && (url || url === 'true') && root.location.protocol !== 'file:' ) { + root.history.pushState( null, null, [root.location.protocol, '//', root.location.host, root.location.pathname, root.location.search, anchor].join('') ); + } + }; + + var getHeaderHeight = function ( header ) { + return header === null ? 0 : ( getHeight( header ) + header.offsetTop ); + }; + + /** + * Start/stop the scrolling animation + * @public + * @param {Element} toggle The element that toggled the scroll event + * @param {Element} anchor The element to scroll to + * @param {Object} options + */ + smoothScroll.animateScroll = function ( toggle, anchor, options ) { + + // Options and overrides + var overrides = getDataOptions( toggle ? toggle.getAttribute('data-options') : null ); + var settings = extend( settings || defaults, options || {}, overrides ); // Merge user options with defaults + anchor = '#' + escapeCharacters(anchor.substr(1)); // Escape special characters and leading numbers + + // Selectors and variables + var anchorElem = anchor === '#' ? root.document.documentElement : root.document.querySelector(anchor); + var startLocation = root.pageYOffset; // Current location on the page + if ( !fixedHeader ) { fixedHeader = root.document.querySelector( settings.selectorHeader ); } // Get the fixed header if not already set + if ( !headerHeight ) { headerHeight = getHeaderHeight( fixedHeader ); } // Get the height of a fixed header if one exists and not already set + var endLocation = getEndLocation( anchorElem, headerHeight, parseInt(settings.offset, 10) ); // Scroll to location + var animationInterval; // interval timer + var distance = endLocation - startLocation; // distance to travel + var documentHeight = getDocumentHeight(); + var timeLapsed = 0; + var percentage, position; + + // Update URL + updateUrl(anchor, settings.updateURL); + + /** + * Stop the scroll animation when it reaches its target (or the bottom/top of page) + * @private + * @param {Number} position Current position on the page + * @param {Number} endLocation Scroll to location + * @param {Number} animationInterval How much to scroll on this loop + */ + var stopAnimateScroll = function (position, endLocation, animationInterval) { + var currentLocation = root.pageYOffset; + if ( position == endLocation || currentLocation == endLocation || ( (root.innerHeight + currentLocation) >= documentHeight ) ) { + clearInterval(animationInterval); + anchorElem.focus(); + settings.callback( toggle, anchor ); // Run callbacks after animation complete + } + }; + + /** + * Loop scrolling animation + * @private + */ + var loopAnimateScroll = function () { + timeLapsed += 16; + percentage = ( timeLapsed / parseInt(settings.speed, 10) ); + percentage = ( percentage > 1 ) ? 1 : percentage; + position = startLocation + ( distance * easingPattern(settings.easing, percentage) ); + root.scrollTo( 0, Math.floor(position) ); + stopAnimateScroll(position, endLocation, animationInterval); + }; + + /** + * Set interval timer + * @private + */ + var startAnimateScroll = function () { + animationInterval = setInterval(loopAnimateScroll, 16); + }; + + /** + * Reset position to fix weird iOS bug + * @link https://github.com/cferdinandi/smooth-scroll/issues/45 + */ + if ( root.pageYOffset === 0 ) { + root.scrollTo( 0, 0 ); + } + + // Start scrolling animation + startAnimateScroll(); + + }; + + /** + * If smooth scroll element clicked, animate scroll + * @private + */ + var eventHandler = function (event) { + var toggle = getClosest( event.target, settings.selector ); + if ( toggle && toggle.tagName.toLowerCase() === 'a' ) { + event.preventDefault(); // Prevent default click event + smoothScroll.animateScroll( toggle, toggle.hash, settings); // Animate scroll + } + }; + + /** + * On window scroll and resize, only run events at a rate of 15fps for better performance + * @private + * @param {Function} eventTimeout Timeout function + * @param {Object} settings + */ + var eventThrottler = function (event) { + if ( !eventTimeout ) { + eventTimeout = setTimeout(function() { + eventTimeout = null; // Reset timeout + headerHeight = getHeaderHeight( fixedHeader ); // Get the height of a fixed header if one exists + }, 66); + } + }; + + /** + * Destroy the current initialization. + * @public + */ + smoothScroll.destroy = function () { + + // If plugin isn't already initialized, stop + if ( !settings ) return; + + // Remove event listeners + root.document.removeEventListener( 'click', eventHandler, false ); + root.removeEventListener( 'resize', eventThrottler, false ); + + // Reset varaibles + settings = null; + eventTimeout = null; + fixedHeader = null; + headerHeight = null; + }; + + /** + * Initialize Smooth Scroll + * @public + * @param {Object} options User settings + */ + smoothScroll.init = function ( options ) { + + // feature test + if ( !supports ) return; + + // Destroy any existing initializations + smoothScroll.destroy(); + + // Selectors and variables + settings = extend( defaults, options || {} ); // Merge user options with defaults + fixedHeader = root.document.querySelector( settings.selectorHeader ); // Get the fixed header + headerHeight = getHeaderHeight( fixedHeader ); + + // When a toggle is clicked, run the click handler + root.document.addEventListener('click', eventHandler, false ); + if ( fixedHeader ) { root.addEventListener( 'resize', eventThrottler, false ); } + + }; + + + // + // Public APIs + // + + return smoothScroll; + +}); \ No newline at end of file diff --git a/src/js/target_blank.js b/src/js/target_blank.js new file mode 100644 index 0000000000..02555b14f2 --- /dev/null +++ b/src/js/target_blank.js @@ -0,0 +1,8 @@ +(function() { + var links = document.links; + for (var i = 0, linksLength = links.length; i < linksLength; i++) { + if (links[i].hostname != window.location.hostname) { + links[i].target = '_blank'; + } + } +})(); diff --git a/src/js/zmain.js b/src/js/zmain.js new file mode 100644 index 0000000000..d6fb323a5b --- /dev/null +++ b/src/js/zmain.js @@ -0,0 +1,60 @@ +(function( $, window, undefined ) { + // Menu + $("#menu").click(function() { + $("body").addClass("push-menu-to-right"); + $("#sidebar").addClass("open"); + $(".overlay").addClass("show"); + }); + + $("#mask").click(function() { + $("body").removeClass("push-menu-to-right"); + $("#sidebar").removeClass("open"); + $(".overlay").removeClass("show"); + }); + + // Search + var bs = { + close: $(".icon-remove-sign"), + searchform: $(".search-form"), + canvas: $("body"), + dothis: $('.dosearch') + }; + + bs.dothis.on('click', function() { + $('.search-wrapper').toggleClass('active'); + bs.searchform.toggleClass('active'); + bs.searchform.find('input').focus(); + bs.canvas.toggleClass('search-overlay'); + $('.search-field').simpleJekyllSearch(); + }); + + function close_search() { + $('.search-wrapper').toggleClass('active'); + bs.searchform.toggleClass('active'); + bs.canvas.removeClass('search-overlay'); + } + + bs.close.on('click', close_search); + + // Closing menu with ESC + document.addEventListener('keyup', function(e){ + if(e.keyCode == 27 && $('.search-overlay').length) { + close_search(); + } + }); + + if (document.getElementsByClassName('home').length >=1 ) { + new AnimOnScroll( document.getElementById( 'grid' ), { + minDuration : 0.4, + maxDuration : 0.7, + viewportFactor : 0.2 + }); + } + + smoothScroll.init({ + selectorHeader: '.bar-header', // Selector for fixed headers (must be a valid CSS selector) + speed: 500, // Integer. How fast to complete the scroll in milliseconds + updateURL: false, // Boolean. Whether or not to update the URL with the anchor hash on scroll + }); + +})( Zepto, window ); diff --git a/src/styl/_animations.styl b/src/styl/_animations.styl new file mode 100644 index 0000000000..298b7bd5d7 --- /dev/null +++ b/src/styl/_animations.styl @@ -0,0 +1,16 @@ +.flex-grid article + opacity 0 +.flex-grid article.shown + opacity 1 +.flex-grid article.animate + animation moveUp 0.65s + opacity 1 + +@keyframes moveUp + from { + transform translateY(200px) + } + to { + transform: translateY(0); + opacity: 1; + } diff --git a/src/styl/_author.styl b/src/styl/_author.styl new file mode 100644 index 0000000000..5e26214345 --- /dev/null +++ b/src/styl/_author.styl @@ -0,0 +1,57 @@ +.author + background lightGray + display table + width 100% + padding rem(40px) 0 + margin rem(40px) 0 + +above(cut) + padding rem(50px) 0 + .details + margin auto + max-width rem(800px) + padding 0 rem(20px) + +below(cut) + text-align center + svg + size(25,25) + margin-right rem(10px) + a + fill darken(lightGray, 30%) + text-decoration none + border none + transition all .3s + &:hover + fill themeColor + img + width rem(180px) + border-radius 50% + display block + margin auto + +above(cut) + float left + margin-right 3.125rem + .def + color gray + font-size rem(18px) + mainFont(300) + margin rem(10px) + +above(cut) + margin 0 + .name + margin 0 + a + mainFont() + text-decoration none + color black + font-size rem(30px) + &:hover + color texts + +above(cut) + font-size rem(45px) + .desc + mainFont(300) + margin rem(10px) + font-size rem(16px) + line-height rem(25px) + +above(cut) + font-size rem(18px) diff --git a/src/styl/_elements.styl b/src/styl/_elements.styl new file mode 100644 index 0000000000..d1f5814c71 --- /dev/null +++ b/src/styl/_elements.styl @@ -0,0 +1,2 @@ +.img-rounded + border-radius 50% diff --git a/src/styl/_footer.styl b/src/styl/_footer.styl new file mode 100644 index 0000000000..475ff649f4 --- /dev/null +++ b/src/styl/_footer.styl @@ -0,0 +1,63 @@ +.comments + center(rem(800px)) + padding 0 rem(20px) + h3 + margin 0 0 rem(30px) + font-size rem(30px) + +footer + center(rem(800px)) + border-top 1px solid darken(accentDark, 10%) + background accentDark + padding rem(20px) rem(25px) + margin-top rem(50px) + margin-bottom rem(40px) + mainFont(300) + +above(cut) + margin-top rem(100px) + p + text-decoration none + color primaryDark + font-size rem(16px) + line-height rem(25px) + span + font-weight 700 + svg + size(28,28) + display inline-block + vertical-align middle + margin-right rem(10px) + +above(cut) + margin-right rem(20px) + &.love + size(20,20) + fill themeColor + margin-top rem(-2px) + margin-left rem(3px) + margin-right rem(3px) + a + fill #808080 + transition all .3s ease + text-decoration none + color #808080 + &:hover + fill themeColor + &.creator:hover + text-decoration underline + ul + padding 0 + list-style-type none + li + margin-bottom rem(10px) + a + text-decoration none + font-size rem(15px) + &:hover + text-decoration underline + +.main-page + footer + background primaryDark + border-top 1px solid lighten(primaryDark, 10%) + p + color accentDark diff --git a/src/styl/_form.styl b/src/styl/_form.styl new file mode 100644 index 0000000000..a4931f85aa --- /dev/null +++ b/src/styl/_form.styl @@ -0,0 +1,46 @@ +.contact-form + mainFont() + padding rem(10px) + fieldset + border none + font-weight normal + input[type="text"], input[type="email"], textarea + box-sizing border-box + outline none + display block + color #333333 + width 100% + padding 7px + border none + border-bottom 1px solid #ddd + margin-bottom 10px + font-family inherit + font-size rem(18px) + height rem(45px) + &.has-error + border-color #f04242 + textarea + height rem(200px) + span + display block + font-size rem(14px) + color #f04242 + padding-bottom rem(10px) + button[type="submit"] + display block + padding 19px 39px 18px 39px + color #ffffff + background themeColor + font-size rem(18px) + width 100% + border 1px solid darken(themeColor, 30%) + border-width 1px 1px 3px + margin-top rem(50px) + margin-bottom rem(10px) + cursor pointer + transition all .3s + outline none + &:hover + background darken(themeColor, 20%) + [v-cloak] + display none diff --git a/src/styl/_header.styl b/src/styl/_header.styl new file mode 100644 index 0000000000..45780c7502 --- /dev/null +++ b/src/styl/_header.styl @@ -0,0 +1,67 @@ +html, +body + height 100% + +.bar-header + background-color #141414 + padding rem(10px) rem(15px) + position fixed + width 100% + z-index 10 + transition top 0.5s + +above(cut) + padding rem(15px) rem(0px) + .logo + margin 0 + height rem(32px) + line-height rem(32px) + .logo a + color accentDark + text-decoration none + font-size rem(32px) + .icon-menu + float left + cursor pointer + margin rem(5px) rem(20px) rem(5px) 0 + width rem(20px) + height rem(20px) + fill accentDark + +above(cut) + margin rem(5px) rem(20px) rem(5px) rem(25px) + .dosearch + float right + display inline-block + width rem(30px) + height rem(30px) + cursor pointer + margin 0 0 0 0 + +above(cut) + margin 0 rem(20px) 0 0 + + .icon-search + width rem(20px) + height rem(20px) + fill accentDark + margin rem(5px) + +body.main-page + background-color #141414 + .bar-header + background-color rgba(0,0,0,.7) + +.overlay + position fixed + width 100% + height 100% + top 0 + right 0 + left 0 + bottom 0 + pointer-events none + background rgba(0, 0, 0, 0.6) + z-index 17 + opacity 0 + transition all 0.3s + &.show + pointer-events auto + opacity 1 diff --git a/src/styl/_highlight.styl b/src/styl/_highlight.styl new file mode 100644 index 0000000000..8721a42fa2 --- /dev/null +++ b/src/styl/_highlight.styl @@ -0,0 +1,107 @@ +pre + background #222 + width 100% + padding rem(20px) 0 + color accentDark + margin rem(30px) 0 + font-size rem(14px) + +above(cut) + font-size rem(16px) + padding rem(40px) 0 + margin rem(50px) 0 + code + center(rem(800)) + padding 0 rem(20px) + +below(cut) + overflow-x: scroll; + span + line-height 1.5rem + font-family 'Monaco','Consolas','Menlo',monospace + +.highlight + margin rem(20px) 0 + +above(cut) + word-wrap break-word + .hll + background-color #333 + .c, // Comment + .cm, // Comment.Multiline + .cp, // Comment.Preproc + .c1, // Comment.Single + .cs // Comment.Special + color #75715e + + // Error + .err + color #960050 + background-color #1e0010 + + .k, // Keyword + .kc, // Keyword.Constant + .kd, // Keyword.Declaration + .kp, // Keyword.Pseudo + .kr, // Keyword.Reserved + .kt, // Keyword.Type + .no // Name.Constant + color #66d9ef + + .l, // Literal + .mf, // Literal.Number.Float + .mh, // Literal.Number.Hex + .mi, // Literal.Number.Integer + .mo, // Literal.Number.Oct + .se, // Literal.String.Escape + .il // Literal.Number.Integer.Long + color #ae81ff + + .o, // Operator + .p // Punctuation + color #f7f7f2 + + .m, // Literal.Number + .n, // Name + .nb, // Name.Builtin + .ni, // Name.Entity + .nl, // Name.Label + .nn, // Name.Namespace + .py, // Name.Property + .nv, // Name.Variable + .w, // Text.Whitespace + .bp, // Name.Builtin.Pseudo + .vc, // Name.Variable.Class + .vg, // Name.Variable.Global + .vi // Name.Variable.Instance + color #a4d043 + + .kn, // Keyword.Namespace + .nt, // Name.Tag + .ow // Operator.Word + color #f92672 + + .ge // Generic.Emph + font-style italic + + .gs // Generic.Strong + font-weight bold + + .ld, // Literal.Date + .s, // Literal.String + .sb, // Literal.String.Backtick + .sc, // Literal.String.Char + .sd, // Literal.String.Doc + .s2, // Literal.String.Double + .sh, // Literal.String.Heredoc + .si, // Literal.String.Interpol + .sx, // Literal.String.Other + .sr, // Literal.String.Regex + .s1, // Literal.String.Single + .ss // Literal.String.Symbol + color #e6db74 + + .na, // Name.Attribute + .nc, // Name.Class + .nd, // Name.Decorator + .ne, // Name.Exception + .nf, // Name.Function + .nx // Name.Other + color #a6e22e diff --git a/src/styl/_home.styl b/src/styl/_home.styl new file mode 100644 index 0000000000..d9935643d4 --- /dev/null +++ b/src/styl/_home.styl @@ -0,0 +1,137 @@ +main + mainFont(400) + -webkit-font-smoothing antialiased + -moz-osx-font-smoothing grayscale + padding-top rem(80px) + +above(cut) + padding-top rem(100px) + +.row + center(100%) + margin 0px 10px + +.flex-grid + display flex + flex-flow row wrap + +.title-category + center(rem(1000px)) + font-size rem(40px) + margin-top 0 + text-transform uppercase + padding 0 rem(15px) + +.box-item + flex 1 0 300px + margin 0 0 rem(30px) + display inline-block + min-height rem(285px) + transition all .3s + position relative + z-index 1 + +above(cut) + margin 0 rem(15px) rem(30px) + &:hover + z-index 2 + transform scale(1.1) + img + -webkit-filter grayscale(100%) + filter grayscale(100%) + transform scale(1.05) + .box-body + time, p + color accentDark + .new-post:after + background-color #000 + .cover + a:before + opacity 1 + a + text-decoration none + display block + .category + display block + height rem(36px) + line-height rem(36px) + text-transform uppercase + font-weight bold + font-size rem(18px) + padding 0 rem(15px) + a + color accentDark + .box-body + img + width 100% + height auto + margin 0 auto + transition all .2s ease-in-out + time + font-weight 300 + font-size rem(16px) + color darken(lightGray, 50%) + pointer-events none + h2 + margin rem(10px) 0 + font-size rem(24px) + mainFont(800) + color accentDark + line-height rem(30px) + span + color + p + margin 0 0 rem(30px) + color darken(lightGray, 20%) + font-size rem(17px) + line-height rem(26px) + .tags a + height rem(30px) + line-height rem(26px) + color accentDark + padding 0 rem(10px) + border 1px solid accentDark + border-radius 15px + display inline-block + margin 0 rem(10px) rem(10px) 0 + z-index 50 + &:hover + color primaryDark + background accentDark + border-color accentDark + .new-post:after + content 'New post' + text-transform uppercase + display inline-block + background themeColor + color #fff + font-size rem(13px) + font-weight 700 + line-height rem(24px) + padding 0 rem(8px) + position absolute + margin-top rem(-35px) + .cover + position relative + a:before + opacity 0 + background-color rgba(0, 0, 0, 0.7) + background-image url(../../assets/img/icons/read.svg) + background-size 48px + background-repeat no-repeat + background-position center center + content '' + display block + width rem(80px) + height rem(80px) + border-radius 40px + position absolute + top 50% + left 50% + margin-top rem(-40px) + margin-left rem(-40px) + border 2px solid #fff + z-index 1000 + .preload + background url(../../assets/img/icons/preloader.svg) center center no-repeat + + .box-info + padding rem(15px) diff --git a/src/styl/_icons.styl b/src/styl/_icons.styl new file mode 100644 index 0000000000..93fe347803 --- /dev/null +++ b/src/styl/_icons.styl @@ -0,0 +1,35 @@ +size(width = 30, height = 30) + width width px + height height px + +.icons-home + text-align center + a + display inline-block + padding rem(15px) + margin rem(2px) + border-radius 50% + border rem(2px) solid accentDark + line-height 0 + transition all .7s + .icon + fill accentDark + size(18,18) + +above(cut) + size() + &:hover + background accentDark + .icon + fill texts + +.down + position absolute + bottom 50px + width 100% + display block + text-align center + .icon + align(both) + size(100,100) + fill accentDark + animation pulse 1.3s infinite diff --git a/src/styl/_menu.styl b/src/styl/_menu.styl new file mode 100644 index 0000000000..a804db61ad --- /dev/null +++ b/src/styl/_menu.styl @@ -0,0 +1,61 @@ +*, *:before, *:after + -moz-box-sizing border-box + -webkit-box-sizing border-box + box-sizing border-box + +body.has-push-menu, +body.has-push-menu aside, +body.has-push-menu .progress-bar + -webkit-transition all 0.3s ease + -moz-transition all 0.3s ease + transition all 0.3s ease + +body.has-push-menu + overflow-x hidden + position relative + left 0 + &.push-menu-to-right + left rem(240px) + .progress-bar + left rem(240px) + +aside + position fixed + width rem(240px) + height 100% + top 0 + left rem(-240px) + background-color accentDark + z-index 20 + +above(cut) + padding rem(10px) 0 0 + &.open + left 0 + h2 + margin 0 rem(20px) 0 + mainFont(400) + font-size rem(18px) + color primaryDark + border-bottom 1px solid primaryDark + line-height 50px + +above(cut) + font-size rem(20px) + nav + ul + padding 0 + margin rem(5px) 0 + +above(cut) + margin rem(10px) 0 + li + margin 0 + list-style-type none + a + width 100% + display block + padding rem(15px) rem(20px) + text-decoration none + mainFont(300) + color primaryDark + &:hover + color accentDark + background themeColor diff --git a/src/styl/_post.styl b/src/styl/_post.styl new file mode 100644 index 0000000000..719bedf32e --- /dev/null +++ b/src/styl/_post.styl @@ -0,0 +1,243 @@ +.post + position relative + top rem(30px) + background #fff + +above(cut) + top rem(50px) + +.post-content + padding rem(40px) 0 + img + max-width 100% + margin rem(0px) auto + display block + padding 10px 0 + &.emoji + display inline + padding 0px + &.post-cover + margin-bottom rem(20px) + +above(cut) + margin-bottom rem(29px) + img + em + display block + color darken(lightGray,30%) + text-align center + mainFont(300) + p, h1, h2, h3, h4,ul,ol, iframe + center(rem(800px)) + mainFont(400) + font-size rem(18px) + line-height rem(35px) + padding 0 rem(20px) + margin 0 auto rem(20px) + letter-spacing 0.05rem + +above(cut) + font-size rem(20px) + line-height rem(40px) + margin 0 auto rem(29px) + h1.post-title + margin 0 auto + line-height rem(40px) + +above(cut) + line-height rem(60px) + margin 0 auto rem(10px) + p.subtitle + color: darken(lightGray,30%) + font-size: rem(18px) + margin 0 auto rem(10px) + line-height rem(30px) + +above(cut) + font-size rem(20px) + line-height rem(40px) + p.post-info + mainFont(300) + font-size rem(13px) + letter-spacing 0 + color: darken(lightGray,30%) + margin 0 auto + +above(cut) + font-size rem(16px) + span, time + vertical-align middle + time + margin-right rem(10px) + +above(cut) + margin-right rem(30px) + li + padding rem(10px) 0 + ul + margin-bottom 0 + p, li + color texts + code + color #bf616a + word-wrap break-word + background lightGray + padding rem(3px) rem(5px) + border-radius 3px + font-size rem(18px) + a + color #0000ee + text-decoration none + iframe + margin-top rem(30px) + width 100% + h1, h2, h3, h4, h5 + mainFont(700) + h1 + font-size rem(32px) + line-height 1.4 + +above(cut) + font-size rem(47px) + h2 + font-size rem(24px) + line-height 1.4 + +above(cut) + font-size rem(37px) + h3 + font-size rem(20px) + line-height 1.4 + +above(cut) + font-size rem(27px) + ul, ol + padding-left rem(40px) + ul.post-list + padding 0 + &.svg-serie p + padding 0 + +below(cut) + padding 0 rem(20px) + blockquote + center(rem(730px)) + border-left rem(5px) solid texts + padding 0 rem(30px) + margin rem(50px) auto + +below(cut) + width 90% + p + color rgba(0,0,0,0.6) + margin 0 + +below(cut) + font-size rem(20px) + line-height 1.5 + padding 0 + hr + center(rem(760px)) + border 1px solid lightGray + margin 50px auto + + > table + margin rem(50px) auto + +below(cut) + display none + th, td + border rem(2px) solid #ccc + padding rem(5px) + + td > pre + padding 0 + margin 0 + + td.gutter.gl + padding-right rem(25px) + line-height rem(24px) + +/* Progress bar */ + +.progress-bar + position fixed + left 0 + right 0 + bottom -100% + display block + width 100% + background-color #fff + padding rem(10px) + transition bottom .5s + border-top 1px solid #f2f2f2 + .bar + display block + width 100% + height rem(18px) + padding rem(5px) rem(50px) + .completed + float left + display block + height 8px + background-color themeColor + .remaining + float left + display block + height rem(8px) + background-color #ccc + .time-completed, .time-remaining + color texts + .time-completed + float left + .time-remaining + float right + +.icon-clock, .icon-calendar + width rem(15px) + height rem(15px) + fill darken(lightGray,30%) + vertical-align middle + margin-right rem(3px) + +/* Tags */ + +.post-content + .tags + center(rem(800px)) + mainFont(400) + font-size rem(18px) + margin 0 auto rem(29px) + margin-top rem(30px) + letter-spacing 0.01rem + line-height rem(40px) + +above(cut) + font-size rem(20px) + letter-spacing 0.05rem + a + font-size rem(14px) + color primaryDark + display inline-block + border 1px solid primaryDark + border-radius rem(20px) + padding 0 rem(10px) + margin-right rem(2px) + margin-bottom rem(8px) + text-decoration none + transition all .3s + &:hover + color accentDark + border 1px solid primaryDark + background-color primaryDark + .tag-title + mainFont(300) + font-size rem(38px) + margin-top rem(60px) + center(rem(800px)) + +below(cut) + font-size rem(30px) + margin-top rem(20px) + padding 0 rem(20px) + .post-list + list-style none + margin rem(25px) auto + +below(cut) + padding 0 rem(20px) + a + display block + border-bottom 1px solid darken(lightGray,10%) + padding rem(10px) 0 + text-decoration none + transition all .5s + font-size rem(18px) + &:hover + border-bottom 1px solid themeColor + .entry-date + float right + +below(cut) + display none diff --git a/src/styl/_search.styl b/src/styl/_search.styl new file mode 100644 index 0000000000..84af3d37bf --- /dev/null +++ b/src/styl/_search.styl @@ -0,0 +1,106 @@ +.search-wrapper + position fixed + top 30px + width 100% + padding-right 5% + padding-left 5% + transform translateY(-200px) + z-index 19 + &.active + transform translateY(0) + +.search-form + position relative + top 0 + width 100% + transform translateX(-200px) + transition all 200ms 100ms cubic-bezier(0,0.6,0.4,1) + opacity 0 + z-index 19 + .search-field + width 100% + height rem(40px) + line-height rem(30px) + mainFont(300) + font-size rem(20px) + color primaryDark + background-color accentDark + border 0 + border-radius rem(20px) + padding rem(5px) rem(25px) + outline 0 + &:focus + outline 0 + &.active + top 0 + transform translateX(0) + opacity 1 + .search-list + position absolute + width 100% + mainFont(300) + display none + padding 0 rem(20px) + margin rem(20px) 0 + list-style-type none + .active & + display block + +below(cut) + height 380px + overflow scroll + .entry-date + float right + display none + font-size rem(14px) + +above(cut) + display inline + .entry-category + text-transform uppercase + background-color themeColor + margin-right rem(5px) + height rem(20px) + border-radius rem(10px) + font-size rem(12px) + padding rem(2px) rem(8px) + color #ffffff + a + color accentDark + text-decoration none + display block + padding rem(15px) 0 + width 100% + border-bottom 1px solid darken(accentDark, 80%) + transition all .3s + line-height rem(25px) + &:hover + color themeColor + .entry-category + color #ffffff + .icon-remove-sign + position absolute + top 0 + right 0 + display block + width rem(26px) + height rem(26px) + padding rem(5px) + fill accentDark + background-color themeColor + border-radius 13px + margin rem(7px) + cursor pointer + outline 0 + z-index 1 + +.search-overlay + overflow hidden + &:after + position fixed + top 0 + left 0 + width 100% + height 100% + min-height 100% + background-color primaryDark + content '' + z-index 18 diff --git a/src/styl/_share.styl b/src/styl/_share.styl new file mode 100644 index 0000000000..7305649e04 --- /dev/null +++ b/src/styl/_share.styl @@ -0,0 +1,21 @@ +.share + center(800px) + text-align center + border-top 1px solid lightGray + padding-top rem(20px) + article & + border-top none + svg + margin rem(15px) + size(35,35) + a + text-decoration none + border none + .icon + transition all .3s + .icon-twitter:hover + fill #1da1f3 + .icon-facebook:hover + fill #3b5998 + .icon-google-plus:hover + fill #d34836 diff --git a/src/styl/_typo.styl b/src/styl/_typo.styl new file mode 100644 index 0000000000..b5c00f754b --- /dev/null +++ b/src/styl/_typo.styl @@ -0,0 +1,13 @@ +a + -webkit-tap-highlight-color: rgba(0,0,0,0); + +mainFont(weight = 700) + font-family 'Titillium Web', 'Helvetica Neue', Helvetica, sans-serif + font-weight weight + font-style normal + +h1,h2,h3,h4 + mainFont() + +.text-center + text-align center diff --git a/src/styl/_variables.styl b/src/styl/_variables.styl new file mode 100644 index 0000000000..315a181a64 --- /dev/null +++ b/src/styl/_variables.styl @@ -0,0 +1,9 @@ +// Colors +themeColor = #ff0a16 +primaryDark = #141414 +accentDark = #ffffff +lightGray = #f2f2f2 +texts = #333333 + +// Resolution +cut = 37.5rem diff --git a/src/styl/main.styl b/src/styl/main.styl new file mode 100644 index 0000000000..9b6e15d166 --- /dev/null +++ b/src/styl/main.styl @@ -0,0 +1,38 @@ +/* Syntax Quick Reference for Jeet + -------------------------- + column(ratios = 1, offset = 0, cycle = 0, uncycle = 0, gutter = jeet.gutter) + span(ratio = 1, offset = 0) + shift(ratios = 0, col_or_span = column, gutter = jeet.gutter) + unshift() + edit() + center(max_width = 1410px, pad = 0) + stack(pad = 0, align = false) + unstack() + align(direction = both) + cf() + + For more info see: + Kouto Swiss Doc: http://kouto-swiss.io/ + Jeet Doc: http://jeet.gs + + And of course, look in node_modules for axis-css and jeet +*/ + +@import "kouto-swiss" +@import "jeet" +normalize() +@import "_variables" +@import "_typo" +@import "_animations" +@import "_icons" +@import "_menu" +@import "_search" +@import "_elements" +@import "_header" +@import "_home" +@import "_post" +@import "_share" +@import "_highlight" +@import "_form" +@import "_author" +@import "_footer" diff --git a/tags.html b/tags.html new file mode 100644 index 0000000000..f8023122a8 --- /dev/null +++ b/tags.html @@ -0,0 +1,36 @@ +--- +layout: minimal +title: "#Tags" +permalink: /tags/index.html +description: "Procure por sua #tag favorita." +--- + +
    +{% assign tags_list = site.tags %} + {% if tags_list.first[0] == null %} + {% for tag in tags_list %} + {{ tag }} + {% endfor %} + {% else %} + {% for tag in tags_list %} + {{ tag[0] }} + {% endfor %} + {% endif %} +{% assign tags_list = nil %} +
    + +{% for tag in site.tags %} + {{ tag[0] }} +
      + {% assign pages_list = tag[1] %} + {% for post in pages_list reversed %} + {% if post.title != null %} + {% if group == null or group == post.group %} +
    • {{ post.title }}
      • + {% endif %} + {% endif %} + {% endfor %} + {% assign pages_list = nil %} + {% assign group = nil %} +
    +{% endfor %}