├── .gitignore ├── CNAME ├── LICENSE ├── Readme.md ├── _config.yml ├── _includes ├── author.html ├── comments.html ├── footer.html ├── head.html ├── header-default.html ├── header-post.html ├── menu-search.html ├── share.html └── svg-icons.html ├── _layouts ├── compress.html ├── default.html ├── minimal.html ├── page.html └── post.html ├── _posts ├── 2015-01-07-dica-rapida-1.md ├── 2015-01-08-por-que-usar-svg.md ├── 2015-02-09-social-meta-tags.md ├── 2015-12-04-analisando-seu-codigo-js-com-linter.md ├── 2016-05-08-how-to-use.md └── 2016-05-08-welcome-to-jekyll.md ├── about.html ├── assets ├── css │ └── main.css ├── img │ ├── blog-author.jpg │ ├── blog-image.png │ ├── external.svg │ └── icons │ │ ├── apple-touch-icon-114x114.png │ │ ├── apple-touch-icon-120x120.png │ │ ├── apple-touch-icon-144x144.png │ │ ├── apple-touch-icon-152x152.png │ │ ├── apple-touch-icon-57x57.png │ │ ├── apple-touch-icon-60x60.png │ │ ├── apple-touch-icon-72x72.png │ │ ├── apple-touch-icon-76x76.png │ │ ├── apple-touch-icon.png │ │ ├── favicon.ico │ │ ├── largetile.png │ │ ├── mediumtile.png │ │ ├── smalltile.png │ │ └── widetile.png └── js │ └── main.js ├── category ├── css.html ├── dev.html ├── html.html ├── jekyll.html ├── js.html ├── misc.html └── svg.html ├── feed.xml ├── gulpfile.js ├── index.html ├── initpost.sh ├── package.json ├── robots.txt ├── screenshot.png ├── search.json ├── series.html ├── sitemap.xml ├── src ├── img │ ├── blog-author.jpg │ ├── blog-image.png │ └── icons │ │ ├── apple-touch-icon-114x114.png │ │ ├── apple-touch-icon-120x120.png │ │ ├── apple-touch-icon-144x144.png │ │ ├── apple-touch-icon-152x152.png │ │ ├── apple-touch-icon-57x57.png │ │ ├── apple-touch-icon-60x60.png │ │ ├── apple-touch-icon-72x72.png │ │ ├── apple-touch-icon-76x76.png │ │ ├── apple-touch-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon-64x64.png │ │ ├── favicon.ico │ │ ├── largetile.png │ │ ├── mediumtile.png │ │ ├── smalltile.png │ │ └── widetile.png ├── js │ ├── azepto.js │ ├── classie.js │ ├── scrollanimation.js │ ├── simpleJekyllSearch.js │ ├── smoothscroll.js │ ├── target_blank.js │ └── zmain.js └── styl │ ├── _author.styl │ ├── _elements.styl │ ├── _footer.styl │ ├── _header.styl │ ├── _hightlight.styl │ ├── _home.styl │ ├── _icons.styl │ ├── _menu.styl │ ├── _post.styl │ ├── _search.styl │ ├── _share.styl │ ├── _theme-colors.styl │ ├── _typo.styl │ ├── _variables.styl │ └── main.styl └── tags.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | _site 3 | node_modules 4 | _drafts -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/CNAME -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Willian Justen 4 | http://willianjusten.com.br 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | ⚠️⚠️ This project is not maintained anymore ⚠️⚠️ 2 | 3 | ## Cards Jekyll Template - [Demo](https://willianjusten.github.io/cards-jekyll-template) 4 | 5 | ![Screenshot](screenshot.png) 6 | 7 | This is a simple and minimalist template for Jekyll designed for developers that want to write blog posts but don't want to care about frontend stuff. 8 | 9 | The Theme features: 10 | 11 | - Gulp 12 | - Stylus (Jeet, Rupture, Kouto Swiss) 13 | - Live Search 14 | - Offcanvas Menu 15 | - SVG icons 16 | - Very very small and fast! 17 | - Shell Script to create posts 18 | - Tags page 19 | - Series page 20 | - About Me page 21 | - Feed RSS 22 | - Sitemap.xml 23 | - Color Customization 24 | - Info Customization 25 | 26 | If you want to see this template in real action, take a look at my [original site](http://willianjusten.com.br/). 27 | 28 | ## Basic Setup 29 | 30 | 1. [Install Jekyll](http://jekyllrb.com) (use the command ```sudo gem install jekyll```) 31 | 2. Fork the [Cards Jekyll Template](https://github.com/willianjusten/cards-jekyll-template/fork) 32 | 3. Clone the repo you just forked. 33 | 4. Edit `_config.yml` to personalize your site. 34 | 5. Check out the sample posts in `_posts` to see examples for assigning categories and tags, and other YAML data. 35 | 6. Read the documentation below for further customization pointers and documentation. 36 | 7. **Remember to compile your assets files with Gulp.** 37 | 38 | ## Site and User Settings 39 | 40 | You have to fill some informations on `_config.yml` to customize your site. 41 | 42 | ``` 43 | # Site settings 44 | title: Willian Justen - Desenvolvedor Front End 45 | description: A blog about lorem ipsum dolor sit amet 46 | baseurl: "" # the subpath of your site, e.g. /blog/ or empty. 47 | url: "http://localhost:3000" # the base hostname & protocol for your site 48 | 49 | # User settings 50 | username: Lorem Ipsum 51 | user_description: Anon Developer at Lorem Ipsum Dolor 52 | email: anon@anon.com 53 | twitter_username: lorem_ipsum 54 | github_username: lorem_ipsum 55 | gplus_username: lorem_ipsum 56 | disqus_username: lorem_ipsum 57 | ``` 58 | 59 | ## Header Name 60 | 61 | To use the power of CSS Content and media query, the header name is defined on [src/styl/_header.styl](src/styl/_header.styl). Change to your prefered name. 62 | 63 | ## Color customization 64 | 65 | All color variables are in [src/styl/_variables.styl](src/styl/_variables.styl). To change the main color, just set the new value at `main` assignment. Another colors are for texts and the code background color. 66 | 67 | ## Theme Colors 68 | 69 | Every post has a main color that is defined on [src/styl/_theme-colors.styl](src/styl/_theme-colors.styl). Just create a new color with the prefix `post-` and define your main-class: 'css' and color: '#2DA0C3' on every post you create. 70 | 71 | ## Creating posts 72 | 73 | You can use the `initpost.sh` to create your new posts. Just follow the command: 74 | 75 | ``` 76 | ./initpost.sh -c Post Title 77 | ``` 78 | 79 | The new file will be created at `_posts` with this format `date-title.md`. 80 | 81 | ## Front-matter 82 | 83 | When you create a new post, you need to fill the post information in the front-matter, follow this example: 84 | 85 | ``` 86 | --- 87 | layout: post 88 | title: "Falando sobre RSCSS" 89 | date: 2016-02-07 18:48:16 90 | image: '/assets/img/rscss/rscss.png' 91 | description: 'Escrevendo CSS sem perder a sanidade. Aprenda uma metodologia que pode salvar muitas dores de cabeça.' 92 | main-class: 'css' 93 | color: '#2DA0C3' 94 | tags: 95 | - css 96 | - metodologia 97 | - frontend 98 | categories: 99 | twitter_text: 'Escrevendo CSS sem perder a sanidade.' 100 | introduction: 'Escrevendo CSS sem perder a sanidade. Com essa introdução, Rico St. Cruz o criador chama a atenção de todos sobre uma metodologia melhor para se escrever CSS.' 101 | --- 102 | ``` 103 | 104 | ## Running the blog in local 105 | 106 | In order to compile the assets and run Jekyll on local you need to follow those steps: 107 | 108 | - Install [NodeJS](https://nodejs.org/) (remember to use the latest version) 109 | - Run `npm install` 110 | - Run `npm install -g gulp gulp-cli` 111 | - Run `gulp` 112 | 113 | ## Questions 114 | 115 | Having a problem getting something to work or want to know why I setup something in a certain way? Ping me on Twitter [@willian_justen](https://twitter.com/willian_justen) or file a [GitHub Issue](https://github.com/willianjusten/will-jekyll-template/issues/new). 116 | 117 | 118 | ## Donation 119 | 120 | If you liked my work, buy me a coffee <3 121 | 122 | [![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=UTMFZUHX6EUGE) 123 | 124 | ## License 125 | 126 | This theme is free and open source software, distributed under the The MIT License. So feel free to use this Jekyll theme on your site without linking back to me or using a disclaimer. 127 | 128 | If you’d like to give me credit somewhere on your blog or tweet a shout out to [@willian_justen](https://twitter.com/willian_justen), that would be pretty sweet. 129 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Site settings 2 | title: Willian Justen - Desenvolvedor Front End 3 | description: A blog about lorem ipsum dolor sit amet 4 | baseurl: "/cards-jekyll-template" # the subpath of your site, e.g. /blog 5 | url: "https://willianjusten.com.br" # the base hostname & protocol for your site e.g. http://willianjusten.com.br 6 | 7 | # User settings 8 | username: Lorem Ipsum 9 | user_description: Anon Developer at Lorem Ipsum Dolor 10 | email: anon@anon.com 11 | twitter_username: lorem_ipsum 12 | github_username: lorem_ipsum 13 | gplus_username: lorem_ipsum 14 | disqus_username: lorem_ipsum 15 | 16 | # Build settings 17 | markdown: kramdown 18 | highlighter: rouge 19 | permalink: /:title/ 20 | 21 | 22 | # html minify 23 | compress_html: 24 | clippings: all 25 | comments: all 26 | endings: [] 27 | profile: false 28 | 29 | # Links to include in menu navigation 30 | # For external links add external: true 31 | links: 32 | - title: Home 33 | url: / 34 | - title: Series 35 | url: /series 36 | - title: Tags 37 | url: /tags 38 | - title: About Me 39 | url: /about 40 | 41 | # exclude my node related stuff 42 | exclude: ['package.json', 'src', 'node_modules'] 43 | -------------------------------------------------------------------------------- /_includes/author.html: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /_includes/comments.html: -------------------------------------------------------------------------------- 1 |
2 |

Comments

3 |
4 |
5 | 27 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %} 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | {% if page.image %} 18 | 19 | {% else %} 20 | 21 | {% endif %} 22 | 23 | 24 | 25 | 26 | {% if page.image %} 27 | 28 | {% else %} 29 | 30 | {% endif %} 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /_includes/header-default.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | 4 |

5 |
6 | {% include menu-search.html %} -------------------------------------------------------------------------------- /_includes/header-post.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | 4 |

5 |
6 | {% include menu-search.html %} 7 | 8 | -------------------------------------------------------------------------------- /_includes/menu-search.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 |
    6 |
    7 |
    8 | 9 |
    10 | 11 | 12 | 13 | 14 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /_includes/share.html: -------------------------------------------------------------------------------- 1 |
    2 |

    Share

    3 | 5 | 6 | 7 | 9 | 10 | 11 | 13 | 14 | 15 |
    -------------------------------------------------------------------------------- /_includes/svg-icons.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /_layouts/compress.html: -------------------------------------------------------------------------------- 1 | --- 2 | # Jekyll layout that compresses HTML 3 | # v1.4.0 4 | # http://jch.penibelst.de/ 5 | # © 2014–2015 Anatol Broder 6 | # MIT License 7 | --- 8 | {% 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 %} -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: compress 3 | --- 4 | 5 | 6 | 7 | {% include head.html %} 8 | 9 | {% include svg-icons.html %} 10 | {% include header-default.html %} 11 |
    12 | {{ content }} 13 |
    14 | {% include footer.html %} 15 | 16 | 17 | -------------------------------------------------------------------------------- /_layouts/minimal.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: compress 3 | --- 4 | 5 | 6 | 7 | {% include head.html %} 8 | 9 | {% include svg-icons.html %} 10 | {% include header-post.html %} 11 |
    12 | 13 |
    14 | {{ content }} 15 |
    16 | 17 | {% include footer.html %} 18 |
    19 | 20 | 21 | -------------------------------------------------------------------------------- /_layouts/page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
    5 | 6 |
    7 |

    {{ page.title }}

    8 |
    9 | 10 |
    11 | {{ content }} 12 |
    13 | 14 |
    15 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% include head.html %} 4 | 5 | {% include svg-icons.html %} 6 | {% include header-post.html %} 7 |
    8 | 9 |
    10 | {{ content }} 11 |
    12 | 13 | {% include share.html %} 14 | {% include author.html %} 15 | {% if page.comments != false %} 16 | {% include comments.html %} 17 | {% endif %} 18 | {% include footer.html %} 19 |
    20 | 21 | 22 | -------------------------------------------------------------------------------- /_posts/2015-01-07-dica-rapida-1.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Dica rápida #1" 4 | date: 2015-01-07 21:31:05 5 | description: "Detalhes fazem a diferença, vamos falar sobre Favicons, Touch Icons e Tile Icons e como eles fazem a diferença." 6 | main-class: 'dev' 7 | color: '#637a91' 8 | tags: 9 | - "dicarapida" 10 | twitter_text: "Favicons, touch icons e tile icons..." 11 | introduction: "Qual a importância dos favicons, touch icons e tile icons. Como criá-los automáticamente e como usá-los em seu site." 12 | --- 13 | 14 | Já que estou participando da campanha do [Fernando Daciuk](http://blog.da2k.com.br/) que é o **#1postperday**, resolvi criar uma outra hashtag, que será a **#dicarapida**. Como o próprio nome diz, serão dicas rápidas, mas que as vezes a gente não faz ou esquece ou ninguém falou por ser "bobo". 15 | 16 | A minha ideia também será postar coisas em um nível também iniciante, assim ajuda uma galera nova, que está começando agora. 17 | 18 | ## Favicons 19 | 20 | ![Favicons](/assets/img/dica-rapida-1/favicons.png) 21 | 22 | Pequenos e bastante simples, mas que já ajudam a identificar um site sem necessidade de mais nenhuma informação. Aposto que você sabe todos os sites que estão abertos na imagem acima =) 23 | 24 | Antigamente os favicons eram somente na extensão `.ico` e possuiam um tamanho padrão de `16x16`. E a partir da windows 7, com a possibilidade de se adicionar sites na barra de tarefas o tamanho foi passado para 3 versões: 25 | 26 | * `16x16`: tamanho na barra de endereço 27 | * `32x32`: ícone na barra de tarefas ou atalhos 28 | * `24x24`: favorito no browser 29 | 30 | Mas se você acha que irá precisar criar então 3 arquivos diferentes, se enganou, a extensão `.ico` permite ter várias dimensões em um mesmo arquivo. E se você quiser gerar automático, tem esse [site aqui](http://www.favicomatic.com/). 31 | 32 | ### E como faço isso funcionar? 33 | 34 | Basta adicionar a seguinte `meta tag` no `head`: 35 | 36 | {% highlight html %} 37 | 38 | {% endhighlight %} 39 | 40 | Algumas pessoas apoiam utilizar um formato mais adaptável que é o `png` usando as novas meta tags com size, como mostrado no código abaixo: 41 | 42 | {% highlight html %} 43 | 44 | 45 | 46 | {% endhighlight %} 47 | 48 | ### Mas se pode usar png, por que você vem me falar para usar o formato .ico que é velho?? 49 | 50 | Simples! Nesse caso, eu digo que em time que se está ganhando não se mexe. É utilizado já deve ter uns 10 anos e funciona com suporte para browser novo, velho, ATÉ NO IE FUNCIONA! Então deixa eles felizes com um ícone pelo menos. 51 | 52 | ## Touch Icons 53 | 54 | Com o advento dos devices da apple, ela decidiu criar meta-tags para lerem ícones de diferentes tamanhos e formatos, possibilitando uma qualidade maior quando o ícone fosse colocado na *home screen* ou favoritado no safari. 55 | 56 | De acordo com as versões do iOS e o aparelho, temos os seguintes tamanhos: 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 |
    DeviceScreeniOS versionIcon size
    iPhoneClassic6 and prior57x57
    760x60
    Retina6 and prior114x114
    7120x120
    iPadClassic6 and prior72x72
    776x76
    Retina6 and prior144x144
    7152x152
    104 | 105 | ####JESUS, MARIA, JOSÉ, É IMAGEM PARA CARAMBA! NÃO VOU FAZER ISSO! 106 | 107 | Relaxa amigo, existem geradores na net, esses dois abaixo são muito bons: 108 | 109 | * [Real Favicon Generator](http://realfavicongenerator.net/) 110 | * [Iconogen](http://iconogen.com/) 111 | 112 | E como faço para os apps lerem isso aí? 113 | 114 | {% highlight html %} 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | {% endhighlight %} 124 | 125 | E prontinho, olha que legal, já funciona!! 126 | 127 | ![Imagem em um ipad](/assets/img/dica-rapida-1/icon-apple-circle.png) 128 | 129 | ## Tile Icons 130 | 131 | Com o desenvolvimento do windows 8 e do surface, agora temos aquela interface flat e os ícones também mudaram. Para se adaptar a isso, a M$ também resolveu criar suas meta tags e passou a definí-las como `tiles`. 132 | 133 | Para fazer funcionar, basta adicionar as seguintes linhas no head: 134 | 135 | {% highlight html %} 136 | 137 | 138 | {% endhighlight %} 139 | 140 | #### E como faço para testar se eu não uso essa porcaria de windows 8? 141 | 142 | Tem [esse site](http://www.buildmypinnedsite.com/), que cria o tile e ainda mostra um preview para você. 143 | 144 | ## Conclusão 145 | 146 | Pequenos detalhes fazem grandes diferenças e passam de simples sites feitos por sobrinhos, para sites profissionais. Se liga, faz um trabalho legal e será recompensado. 147 | 148 | Fica aqui a primeira #dicarapida, quer que eu fale de algum assunto? Manda para [@willian_justen](https://twitter.com/Willian_justen) com a hashtag ou comenta aqui embaixo. -------------------------------------------------------------------------------- /_posts/2015-01-08-por-que-usar-svg.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "#1 - Por que usar SVG?" 4 | date: 2015-01-08 08:39:47 5 | description: "O SVG finalmente começa dar o ar das graças e você vai saber aqui o porquê disso." 6 | main-class: 'svg' 7 | color: '#7D669E' 8 | tags: 9 | - svg 10 | - frontend 11 | - trend 12 | - "dicarapida" 13 | image: "/assets/img/por-que-usar-svg/coloridos.jpg" 14 | categories: 15 | - "O mundo mágico do SVG" 16 | twitter_text: "Por que você deveria estar usando SVG?" 17 | introduction: "Alguns motivos para se usar SVG no seu workflow e alguns exemplos bem bacanas de como outros já utilizam." 18 | --- 19 | 20 | ## Meu histórico 21 | 22 | Muita gente sabe que eu ❤ SVG e que venho tentado evangelizar de todas as formas essa tecnologia em todo lugar que eu passo. Meu primeiro trabalho foi a [Awesome-SVG](https://github.com/willianjusten/awesome-svg), que pode não parecer, mas deu um trabalho do caramba juntar todo conteúdo possível desse assunto, organizar, separar e ainda manter atualizado. 23 | 24 | Essa semana eu e meu amigo [Lucas Maia](https://github.com/lucasmaiaesilva) lançamos a tradução do [SVG Pocket Guide](http://svgpocketguide.com/) e que inclusive está [open source](https://github.com/jonitrythall/svgpocketguide/blob/master/svgpocketguide-ptbr.md) (Viu algum erro? Manda um Pull Request! É difícil fazer tudo sem nenhum errinho xD). 25 | 26 | Também palestrei no [Front in Bahia 2014](http://www.frontinbahia.com.br/) para substituir nosso amigo [Wilson Mendes](https://twitter.com/willmendesneto) que infelizmente não pôde participar. E foi lá que eu resolvi que iria contribuir mais com a comunidade, foi uma experiência tão boa e os feedbacks tão incríveis, que agora não quero mais parar =) 27 | 28 | Depois de ter feito essas coisas, algumas pessoas já ligam SVG a minha pessoa, como o Suissa diz: "o piá do SVG". E aí com isso, sempre recebo muitas perguntas e a principal delas é: 29 | 30 | ## Por que usar SVG? 31 | 32 | Bom, pretendo fazer desse post, uma série sobre SVG, então serei bastante breve nesse post e só mostrar alguns dos motivos, se depois de todos eles, você não se interessar...Posso fazer nada 33 | 34 | ### Rico em Detalhes e Cores 35 | 36 | ![Coração feito de ícones coloridos](/assets/img/por-que-usar-svg/coloridos.jpg) 37 | 38 | Fonte: [Designmodo](http://designmodo.com/flat/) 39 | 40 | ### Interativo e Estilizável via CSS 41 | 42 | ![Ícone de uma lâmpada](/assets/img/por-que-usar-svg/animacao.gif) 43 | 44 | Fonte: [tutsplus](http://tutsplus.github.io/Styling-Iconic/styling/index.html) 45 | 46 | ### Responsivo 47 | 48 | ![Imagem de uma logo em vários tamanhos](/assets/img/por-que-usar-svg/responsivo.png) 49 | 50 | Fonte: [Codrops](http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/) 51 | 52 | ### Animações de alto nível 53 | 54 | ![Animação desenhando uns frascos](/assets/img/por-que-usar-svg/animacao-2.gif) 55 | 56 | Fonte: [Panizzon](http://panizzon.ind.br/) 57 | 58 | ### Perfeito para representação Gráfica 59 | 60 | ![Gráfico](/assets/img/por-que-usar-svg/grafico.png) 61 | 62 | Fonte: [D3 example](http://bl.ocks.org/Caged/6476579) 63 | 64 | ### Efeitos e Filtros 65 | 66 | ![Uma imagem com diferentes efeitos](/assets/img/por-que-usar-svg/filtros.png) 67 | 68 | Fonte: [Web Platform](http://docs.webplatform.org/wiki/svg/tutorials/smarter_svg_filters) 69 | 70 | ### Mais qualidades? 71 | 72 | * [Boa Compatibilidade](http://caniuse.com/#search=svg) 73 | * Podem ser minificados (Gzip) 74 | * [Maior Acessibilidade](http://www.sitepoint.com/tips-accessible-svg/) 75 | * Elementos de DOM para serem editados separadamente 76 | * É tudo código!! =) 77 | 78 | ### Concluindo... 79 | 80 | Sabia de tudo? Se sabia porque não está usando?? Se está usando, se mostre! Contribue! Me chama no [twitter](http://twitter.com/Willian_justen), manda um Pull Request na [awesome-svg](https://github.com/willianjusten/awesome-svg), faz o caralho a 4 cara! 81 | 82 | Deixo para vocês uma última imagem e um link falando sobre quais as tendências de 2015, advinha quem aparece para caramba lá :p 83 | 84 | ![SVG Trends](https://ihatetomatoes.net/wp-content/uploads/2014/12/img_assets_svg.jpg) 85 | 86 | [Design Trends de 2015](http://foundersgrid.com/design-trends-2015) 87 | 88 | 89 | -------------------------------------------------------------------------------- /_posts/2015-02-09-social-meta-tags.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Social Meta Tags" 4 | date: 2015-02-09 19:33:48 5 | image: '/assets/img/dica-rapida-2/main.png' 6 | description: 'Aprenda como ser mais social, ter maior relevância nas redes sociais e atrair mais usuários.' 7 | main-class: 'html' 8 | color: '#EB7728' 9 | tags: 10 | - social 11 | - seo 12 | - tutorial 13 | categories: 14 | twitter_text: 'Aprenda a usar as meta tags sociais.' 15 | introduction: "Aprenda como ser mais social, ter maior relevância nas redes sociais e atrair mais usuários. Para isso, basta criar as meta tags corretas." 16 | --- 17 | 18 | ## Introdução 19 | 20 | Estou aqui de novo para mais uma **#dicarapida** sobre um assunto que é bastante importante, mas muita gente esquece ou não faz de forma correta, que são as Meta Tags Sociais. 21 | 22 | Hoje em dia, as redes sociais são fundamentais para que a gente consiga alcançar um maior número de pessoas. Antes isso ficava mais a cargo das pesquisas orgânicas, ads e outros modelos de divulgação (email marketing, spots de rádio, tv, etc). 23 | 24 | No meu blog, muito do acesso é dado pelas redes sociais, sendo o facebook o maior propagador, acho que é porque sigo os passos do [Fernando Daciuk](http://blog.da2k.com.br/) e mando spam para todos os grupos do face =p 25 | 26 | Segue o gráfico abaixo, indicando as origens de acessos do meu blog: 27 | 28 | ![Gráfico de Acessos do Blog por Origem](/assets/img/dica-rapida-2/canais.png) 29 | 30 | ## Mas e por que dessa tal de Meta Tag? 31 | 32 | Cada rede social possui um conjunto de informações para serem lidas e elas serão enviadas do seu site para as redes através dessas Meta Tags. Isso que permite que as redes leiam seu link e já preencham o post de informações. Elas podem ser visíveis para os outros usuários, como: imagem, título, descrição, hiperlink. Mas também podem ser informações somente para análise da rede social, como o tipo do site (blog, website, ecommerce), autor, hora de publicação, tags e etc. 33 | 34 | ## Facebook 35 | 36 | A maior rede social que temos hoje possui um conjunto de informações que é o chamado [Open Graph](https://developers.facebook.com/docs/sharing/best-practices?locale=pt_BR). A partir dela conseguimos organizar bastante as informações e inclusive fazer uma análise do nosso site utilizando o Facebook Insights. 37 | 38 | Existem vários tipos de Meta Tags que o Open Graph suporta e todas elas são sempre iniciadas com o prefixo `og:`, caso queira saber todas que tem, basta dar uma olhada lá no site do [Open Graph](https://developers.facebook.com/docs/sharing/best-practices#tags). 39 | 40 | Abaixo seguem algumas das tags principais, das quais inclusive utilizo no meu blog: 41 | 42 | {% highlight html %} 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | {% endhighlight %} 57 | 58 | Tendo esse conjunto de informações, quando você for colocar seu link em algum lugar do facebook, ele vai ler as informações e colocar semelhante a imagem abaixo: 59 | 60 | ![Imagem de um post no Facebook](/assets/img/dica-rapida-2/face-post.png) 61 | 62 | **AVISO:** o facebook é uma bosta para ler seus links corretamente, portanto, utilize a ferramenta de [debug](https://developers.facebook.com/tools/debug/og/object/), para que ele possa ler os dados e identificar se está tudo certinho. Lembre-se também de seguir as regras do facebook, como, por exemplo, tamanhos de imagem e dados passados. 63 | 64 | ## Twitter 65 | 66 | Outra grande rede social, um pouco mais simples, mas que também permite carregar certas informações. Esses dados são chamados de Twitter Cards e são iniciados com o prefixo `twitter:`. Para saber um pouquinho mais, [leia a documentação deles](https://dev.twitter.com/cards/overview) 67 | 68 | Seguem as tags básicas: 69 | 70 | {% highlight html %} 71 | 72 | 73 | 74 | 75 | 76 | 77 | {% endhighlight %} 78 | 79 | Para que o twitter passe a aceitar seus cards, você precisa validar [neste link aqui](https://cards-dev.twitter.com/validator). Após validado, quando você postar algum link do seu site, ele será visualizado conforme a imagem abaixo: 80 | 81 | ![Imagem de um post no twitter](/assets/img/dica-rapida-2/twitter-post.png) 82 | 83 | ## Google Plus 84 | 85 | Por último, mas não menos importante, vem o Google Plus. Apesar de muita gente achar inútil, ele tem uma indexação excelente e por ser do google, muitas vezes é favorecido, portanto, não vamos esquecer dele =p 86 | 87 | Ele segue o padrão do [Schema.org](http://schema.org/) e seguem abaixo as tags: 88 | 89 | {% highlight html %} 90 | 91 | 92 | 93 | 94 | 95 | {% endhighlight %} 96 | 97 | ## Conclusão 98 | 99 | Com isso fecho a **#dicarapida** de hoje, espero que tenham entendido a importância dessas meta tags e consigam mais relevância em suas postagens e/ou sites. Se tiverem alguma dúvida ou alguma informação a acrescentar, só falar nos comentários logo abaixo =) 100 | -------------------------------------------------------------------------------- /_posts/2015-12-04-analisando-seu-codigo-js-com-linter.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Analisando seu código JS com um linter" 4 | date: 2015-12-04 22:43:23 5 | image: '/assets/img/linter/errors-list.png' 6 | description: 'Valide seu código em JS/ES6 em busca de erros, warnings, códigos esquecidos e melhore a sua qualidade. Seu amiguinho agradece um código mais limpo.' 7 | main-class: 'js' 8 | color: '#D6BA32' 9 | tags: 10 | - js 11 | - linter 12 | - tutorial 13 | categories: 14 | twitter_text: 'Valide seu código em JS/ES6 em busca de erros e melhore a sua qualidade.' 15 | introduction: 'Valide seu código em JS/ES6 em busca de erros, warnings, códigos esquecidos e melhore a sua qualidade. Seu amiguinho agradece um código mais limpo.' 16 | --- 17 | 18 | ## Introdução 19 | 20 | Faaaala pessoal, fazia muito tempo que eu não escrevia e confesso que isso já estava me agoniando. Então resolvi voltar a falar besteiras escrever!! 21 | 22 | Como não poderia deixar de ser, estou escrevendo ouvindo música. A playlist de hoje é [Brains](https://open.spotify.com/user/spotifybrazilian/playlist/0nUucSaL2BGl2VZlbY5TwR), uma playlist que está sendo montada lá na [CCXP](http://www.ccxp.com.br/), muita música maneira! Bota para tocar e vai lendo =D 23 | 24 | ## Qualidade de Código 25 | 26 | Provavelmente você já passou horas escrevendo seu código lindo e aí, do nada, ele parou de funcionar. Então você ficou mais perdido que o John Travolta no Discurso da Dilma. 27 | 28 | ![John Travolta Meme](https://media.giphy.com/media/FWXpxEbWcOapq/giphy.gif) 29 | 30 | Você, então, em toda sua humildade, chegou para um amigo e pediu para ele dar uma olhada e ele falou frases assim: 31 | 32 | > Você esqueceu de colocar o ponto e vírgula no final da linha.
    33 | > Essa variável tá escrita errada, faltou um 'a' ali.
    34 | > Cara, esse método não existe nessa linguagem... 35 | 36 | Se você já ficou puto com isso, sinta-se abraçado, porque eu também já cansei de cometer esses erros bobos que dava vontade de bater com a cara na parede depois de descobrir. Mas não fui só eu, nem só você, isso é normal do ser humano, não somos máquinas e as vezes uns detalhes passam sem percerbermos. 37 | 38 | No momento você está igual o John Travolta de novo. 39 | 40 | ![John Question](https://media.giphy.com/media/FxufOs6bQwxO0/giphy.gif) 41 | 42 | ## Entendi seu ponto, mas como evitar isso? 43 | 44 | Pensando nisso, foram criadas várias ferramentas para fazer análise por você. Seguem as principais e mais famosas: 45 | 46 | - [JSlint](http://www.jslint.com/) 47 | - [JSHint](http://jshint.com/) 48 | - [Eslint](http://eslint.org/) 49 | 50 | Cada uma dessas ferramentas possui um módulo no npm e podem ser fácilmente instaladas. 51 | 52 | {% highlight bash %} 53 | 54 | npm install -g jslint 55 | 56 | npm install -g jshint 57 | 58 | ## para poder fazer lint de ES6 e JSX 59 | npm install -g eslint 60 | npm install -g babel-eslint 61 | 62 | {% endhighlight %} 63 | 64 | E todas elas também possuem integrações com vários editores de código como Sublime, Atom, Brackets, etc... 65 | 66 | ## Mas como elas funcionam? 67 | 68 | Cada uma dessas ferramentas lê seus arquivos desejados e percorre pelos mesmos buscando por erros ou definições que as próprias consideram como má prática e para cada um dos erros, elas reportam ao final. 69 | 70 | Para os próximos passos, vou ensinar utilizando o `eslint`, que julgo o melhor dos Linters na atualidade, visto que ele dá um ótimo suporte a `ES6` e `JSX`, além do padrão do JS. 71 | 72 | Após instalado o `eslint`, vá até o diretório do seu projeto, digite `eslint --init` e responda as perguntas de acordo com sua necessidade, segue abaixo o print de um uso meu. 73 | 74 | ![Print do eslint sendo usado](/assets/img/linter/eslint.png) 75 | 76 | Após isso, será criado um arquivo chamado `.eslintrc` dentro da pasta raiz do seu projeto, contendo informações parecidas com: 77 | 78 | {% highlight js %} 79 | module.exports = { 80 | "rules": { 81 | "indent": [ 82 | 2, 83 | 4 84 | ], 85 | "quotes": [ 86 | 2, 87 | "single" 88 | ], 89 | "linebreak-style": [ 90 | 2, 91 | "unix" 92 | ], 93 | "semi": [ 94 | 2, 95 | "always" 96 | ] 97 | }, 98 | "env": { 99 | "es6": true, 100 | "browser": true 101 | }, 102 | "extends": "eslint:recommended", 103 | "ecmaFeatures": { 104 | "jsx": true, 105 | "experimentalObjectRestSpread": true 106 | }, 107 | "plugins": [ 108 | "react" 109 | ] 110 | }; 111 | {% endhighlight %} 112 | 113 | Se você quiser entender tudo que ele escreveu ali, dá uma olhadinha na [documentação](http://eslint.org/docs/user-guide/configuring) é super detalhada e bem explicada. 114 | 115 | Tendo já o arquivo, basta você rodar no terminal em cima do arquivo desejado e ele fará o report se algum erro acontecer, como, por exemplo, tendo um arquivo js: 116 | 117 | {% highlight js %} 118 | (function () { 119 | 'use strict'; 120 | 121 | const a = 'will'; 122 | 123 | function() { 124 | console.log('Hello!') 125 | } 126 | 127 | })() 128 | {% endhighlight %} 129 | 130 | Se eu rodar o `eslint` no terminal analisando esse código, ele vai me retornar os seguintes erros: 131 | 132 | ![imagem mostrando os erros como variável não utilizada e falta de ponto e vírgula](/assets/img/linter/erro-1.png) 133 | 134 | Eu criei uma variável `a`, mas nunca utilizei no meu código, eu usei console.log num código que vai para produção e ainda esqueci de colocar o ponto e vírgula no final do código! 135 | 136 | Para um código pequeno desses, talvez não fizesse diferença, mas pense num código beeeem maior, ele pode ser uma mão na roda =D 137 | 138 | Mas rodar isso o tempo todo no terminal é ruim, até mesmo se colocarmos num gulp/grunt da vida, o legal é mostrar no nosso editor. Se você usa Sublime Text, continua lendo aí, que vou mostrar a cereja do bolo! 139 | 140 | ## Usando o eslint no Sublime 141 | 142 | Primeiro de tudo, espero que você tenha instalado o [Package Control](https://packagecontrol.io/installation) no seu Sublime. Depois disso, mande instalar o [SublimeLinter](http://sublimelinter.readthedocs.org/en/latest/installation.html#installing-via-pc) e o [SublimeLinter-contrib-eslint](https://github.com/roadhump/SublimeLinter-eslint#plugin-installation), que vão fazer toda a integração e mágica. 143 | 144 | Feito isso, reinicie o seu Sublime e comece a escrever seu código JS! Quando tiver algum erro, ele irá te notificar com marcadores ao lado do erro e na parte inferior irá te avisar o erro. Como na imagem abaixo: 145 | 146 | ![Sublime indicando os erros](/assets/img/linter/sublime.png) 147 | 148 | Se você for como eu e quiser ver todos os erros numa lista e poder navegar entre eles, aperte `cmd + shift + p` ou `ctrl + shift + p` e digite `linter show` e você verá uma opção igual da tela abaixo: 149 | 150 | ![Opção](/assets/img/linter/show.png) 151 | 152 | Com essa opção selecionada, cada vez que você salvar o código, irá ver uma lista da seguinte forma: 153 | 154 | ![Lista de erros](/assets/img/linter/errors-list.png) 155 | 156 | ## Habilitando o Sublime para entender código ES6 + Eslint 157 | 158 | Caso o seu Sublime não identifique ES6 junto com o Eslint e não faça o lint correto, basta que você instale o plugin do [Babel](https://github.com/babel/babel-sublime) no seu Sublime. Com esse plugin instalado, defina que todos os arquivos JS e JSX serão interpretados como Babel, seguindo os seguintes passos: 159 | 160 | 1) Abra um arquivo com a extensão JS ou JSX 161 | 2) Vá na opção View do Menu 162 | 3) Escolha Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel). 163 | 164 | Feito isso, seu Sublime já vai entender aquele código em ES6 e o lint passará a funcionar! Agora vai lá e comece a programar com qualidade! 165 | 166 | ![John Kissing](https://media.giphy.com/media/D4QLJVmdHB44g/giphy.gif) 167 | 168 | ## Conclusão 169 | 170 | Bom, é basicamente isso, se preocupe com seu código e evite demorar horas procurando o erro se uma ferramenta pode fazer por você. -------------------------------------------------------------------------------- /_posts/2016-05-08-how-to-use.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "How to Use" 4 | date: 2016-05-08 20:35:48 5 | image: '/assets/img/' 6 | description: 'How to use this template' 7 | main-class: 'misc' 8 | color: '#7AAB13' 9 | tags: 10 | - misc 11 | - jekyll 12 | categories: 13 | twitter_text: 'How to use this template' 14 | introduction: 'How to use this template' 15 | --- 16 | 17 | ## Cards Jekyll Template - [Demo](http://willianjusten.com.br/cards-jekyll-template) 18 | 19 | This is a simple and minimalist template for Jekyll designed for developers that want to write blog posts but don't want to care about frontend stuff. 20 | 21 | The Theme features: 22 | 23 | - Gulp 24 | - Stylus (Jeet, Rupture, Kouto Swiss) 25 | - Live Search 26 | - Offcanvas Menu 27 | - SVG icons 28 | - Very very small and fast! 29 | - Shell Script to create posts 30 | - Tags page 31 | - Series page 32 | - About Me page 33 | - Feed RSS 34 | - Sitemap.xml 35 | - Color Customization 36 | - Info Customization 37 | 38 | ## Basic Setup 39 | 40 | 1. [Install Jekyll](http://jekyllrb.com) 41 | 2. Fork the [Will Jekyll Template](https://github.com/willianjusten/will-jekyll-template/fork) 42 | 3. Clone the repo you just forked. 43 | 4. Edit `_config.yml` to personalize your site. 44 | 5. Check out the sample posts in `_posts` to see examples for assigning categories and tags, and other YAML data. 45 | 6. Read the documentation below for further customization pointers and documentation. 46 | 7. **Remember to compile your assets files with Gulp.** 47 | 48 | ## Site and User Settings 49 | 50 | You have to fill some informations on `_config.yml` to customize your site. 51 | 52 | ``` 53 | # Site settings 54 | description: A blog about lorem ipsum dolor sit amet 55 | baseurl: "" # the subpath of your site, e.g. /blog/ 56 | url: "http://localhost:3000" # the base hostname & protocol for your site 57 | 58 | # User settings 59 | username: Lorem Ipsum 60 | user_description: Anon Developer at Lorem Ipsum Dolor 61 | user_title: Anon Developer 62 | email: anon@anon.com 63 | twitter_username: lorem_ipsum 64 | github_username: lorem_ipsum 65 | gplus_username: lorem_ipsum 66 | disqus_username: lorem_ipsum 67 | ``` 68 | 69 | ## Header Name 70 | 71 | To use the power of CSS Content and media query, the header name is defined on [src/styl/_header.styl](). Change to your prefered name. 72 | 73 | ## Color customization 74 | 75 | All color variables are in `src/styl/variable`. To change the main color, just set the new value at `main` assignment. Another colors are for texts and the code background color. 76 | 77 | ## Theme Colors 78 | 79 | Every post has a main color that is defined on [src/styl/_theme-colors.styl](). Just create a new color with the prefix `post-` and define your main-class: 'css' and color: '#2DA0C3' on every post you create. 80 | 81 | ## Creating posts 82 | 83 | You can use the `initpost.sh` to create your new posts. Just follow the command: 84 | 85 | ``` 86 | ./initpost.sh -c Post Title 87 | ``` 88 | 89 | The new file will be created at `_posts` with this format `date-title.md`. 90 | 91 | ## Front-matter 92 | 93 | When you create a new post, you need to fill the post information in the front-matter, follow this example: 94 | 95 | ``` 96 | --- 97 | layout: post 98 | title: "Falando sobre RSCSS" 99 | date: 2016-02-07 18:48:16 100 | image: '/assets/img/rscss/rscss.png' 101 | description: 'Escrevendo CSS sem perder a sanidade. Aprenda uma metodologia que pode salvar muitas dores de cabeça.' 102 | main-class: 'css' 103 | color: '#2DA0C3' 104 | tags: 105 | - css 106 | - metodologia 107 | - frontend 108 | categories: 109 | twitter_text: 'Escrevendo CSS sem perder a sanidade.' 110 | introduction: 'Escrevendo CSS sem perder a sanidade. Com essa introdução, Rico St. Cruz o criador chama a atenção de todos sobre uma metodologia melhor para se escrever CSS.' 111 | --- 112 | ``` 113 | 114 | ## Running the blog in local 115 | 116 | In order to compile the assets and run Jekyll on local you need to follow those steps: 117 | 118 | - Install [NodeJS](https://nodejs.org/) 119 | - Run `npm install` 120 | - Run `gulp` 121 | 122 | ## Windows 10 Step 123 | 124 | If you use Windows 10, change this line on [gulpfile.js](https://github.com/willianjusten/will-jekyll-template/blob/gh-pages/gulpfile.js#L23) to `spawn('jekyll.bat', ['build'])`. 125 | 126 | ## Questions 127 | 128 | Having a problem getting something to work or want to know why I setup something in a certain way? Ping me on Twitter [@willian_justen](https://twitter.com/willian_justen) or file a [GitHub Issue](https://github.com/willianjusten/will-jekyll-template/issues/new). 129 | 130 | 131 | ## Donation 132 | 133 | If you liked my work, buy me a coffee <3 134 | 135 | [![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=UTMFZUHX6EUGE) 136 | 137 | ## License 138 | 139 | This theme is free and open source software, distributed under the The MIT License. So feel free to use this Jekyll theme on your site without linking back to me or using a disclaimer. 140 | 141 | If you’d like to give me credit somewhere on your blog or tweet a shout out to [@willian_justen](https://twitter.com/willian_justen), that would be pretty sweet. -------------------------------------------------------------------------------- /_posts/2016-05-08-welcome-to-jekyll.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Welcome to Jekyll" 4 | date: 2016-05-08 20:34:26 5 | image: '/assets/img/' 6 | description: 'Put your description here.' 7 | main-class: 'jekyll' 8 | color: '#B31917' 9 | tags: 10 | - jekyll 11 | categories: 12 | twitter_text: 'Put your twitter description here.' 13 | introduction: 'Put your description here.' 14 | --- 15 | 16 | You'll find this post in your `_posts` directory - edit this post and re-build (or run with the `-w` switch) to see your changes! 17 | To add new posts, simply add a file in the `_posts` directory that follows the convention: YYYY-MM-DD-name-of-post.ext. 18 | 19 | Jekyll also offers powerful support for code snippets: 20 | 21 | {% highlight ruby %} 22 | def print_hi(name) 23 | puts "Hi, #{name}" 24 | end 25 | print_hi('Tom') 26 | #=> prints 'Hi, Tom' to STDOUT. 27 | {% endhighlight %} 28 | 29 | Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll's GitHub repo][jekyll-gh]. 30 | 31 | [jekyll-gh]: https://github.com/mojombo/jekyll 32 | [jekyll]: http://jekyllrb.com 33 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: minimal 3 | title: "About me" 4 | permalink: /about/index.html 5 | description: "Some description about Lorem Ipsum..." 6 | --- 7 | 8 | Willian Justen 9 | 10 |

    About Me

    11 | 12 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 13 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 14 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 15 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 16 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 17 | proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    18 | 19 | 20 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 21 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 22 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 23 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 24 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 25 | proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    26 | 27 | 28 |

    Skills

    29 | 30 |
      31 |
    • HTML - Jade - Haml - Erb
      • 32 |
    • Design Responsivo (Mobile First)
      • 33 |
    • CSS (Stylus, Sass, Less)
      • 34 |
    • Css Frameworks (Bootstrap, Foundation)
      • 35 |
    • Javascript (Design Patterns, Testes)
      • 36 |
    • NodeJS
      • 37 |
    • AngularJS - ReactJS
      • 38 |
    • Grunt - Gulp - Yeoman
      • 39 |
    • Git
      • 40 |
    • PHP
      • 41 |
    • Python
      • 42 |
    • MySQL - MongoDB
      • 43 |
    • Scrum and Kanban
      • 44 |
    • TDD e Continuous Integration
      • 45 |
    46 | 47 |

    Projetos

    48 | 49 | -------------------------------------------------------------------------------- /assets/css/main.css: -------------------------------------------------------------------------------- 1 | html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}a{-webkit-tap-highlight-color:rgba(0,0,0,0)}h1,h2,h3,h4{font-family:'Open Sans',sans-serif;font-weight:800;font-style:normal}.text-center{text-align:center}.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;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:#005f97}.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{box-sizing:border-box}body{left:0;right:0;margin:auto}a,aside,.overlay,body{transition:all .25s ease}a.slideButton,.dosearch{position:fixed;display:block;width:40px;height:40px;top:10px;z-index:17}.slideButton{right:60px}.dosearch{right:10px;border-radius:.188rem;padding:.125rem .188rem}.icon-menu{cursor:pointer;padding:.313rem;border-radius:.188rem;width:2.5rem;height:2.5rem;fill:#005f97}.icon-search{width:2.188rem;height:2.188rem}.overlay{cursor:pointer}#close{display:none;fill:#fff}aside{position:fixed;height:100%;width:15rem;padding:2.5rem 0 0;top:0;right:-15rem;background-color:#005f97;z-index:20;box-shadow:inset -10px -1px 15px -9px rgba(0,0,0,0.5);}aside h2{text-align:center;margin:0 0 .625rem;font-family:'Open Sans',sans-serif;font-weight:800;font-style:normal;font-size:1.25rem;color:#fff}aside nav ul{padding:0}aside nav li{margin:0;list-style-type:none;}aside nav li a{width:100%;display:block;padding:1.25rem;text-decoration:none;font-family:'Open Sans',sans-serif;font-weight:300;font-style:normal;color:#fff;border-top:1px solid #fff;}aside nav li a:hover{color:#005f97;background:#fff}aside nav .feed{border-bottom:1px solid #fff}aside.slide{right:0}.slide #close{right:15.625rem;position:fixed;pointer-events:none}.overlay{position:fixed;width:100%;height:100%;top:0;right:0;pointer-events:none;background:transparent;z-index:17;}.overlay.slide{pointer-events:auto;right:240px;background:rgba(0,0,0,0.6)}input[type="search"]{-ms-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}.search-wrapper{z-index:19;}.search-wrapper.active{-webkit-transform:translateY(0);transform:translateY(0)}.search-form{position:relative;top:0;-webkit-transform:translateX(-200px);transform:translateX(-200px);z-index:19;width:100%;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;transition:all 200ms 100ms cubic-bezier(0,.6,.4,1);}.search-form h4{margin:.625rem 0}.search-form .search-field{width:100%;font-family:'Open Sans',sans-serif;font-weight:300;font-style:normal;font-size:1.625rem;color:#fff;background-color:transparent;border:0;border-bottom:1px solid #fff;border-radius:0;box-shadow:none;background-clip:padding-box;-webkit-appearance:none;}.search-form .search-field:focus{outline:0;box-shadow:none}.search-form.active{top:0;-webkit-transform:translateX(0);transform:translateX(0);-ms-filter:none;-webkit-filter:none;filter:none;opacity:1}.search-form.hidden{display:none}.search-form .icon-remove-sign{position:absolute;top:0;right:0;z-index:1;display:block;fill:#fff;width:30px;height:30px;text-align:center;cursor:pointer}.search-form::-webkit-input-placeholder{font-size:1.625rem}.search-form .search-field::-webkit-search-decoration,.search-form .search-field::-webkit-search-cancel-button,.search-form .search-field::-webkit-search-results-button,.search-form .search-field::-webkit-search-results-decoration{display:none}.search-form .search-list{position:absolute;width:100%;font-family:'Open Sans',sans-serif;font-weight:300;font-style:normal;display:none;}.active .search-form .search-list{display:block}.search-form h4,.search-form li,.search-form p,.search-form a,.search-form a:hover{color:#fff}body.search-overlay{overflow:hidden;}body.search-overlay:after{position:fixed;top:0;left:0;z-index:18;width:100%;height:100%;min-height:100%;background-color:rgba(0,0,0,0.6);content:'';}@media only screen and (max-width:37.5rem){body.search-overlay:after{background-color:#005f97}}.search-wrapper{position:fixed;top:50px;width:100%;padding-right:10%;padding-left:10%;-webkit-transform:translateY(-200px);transform:translateY(-200px);}.search-wrapper *zoom 1:after,.search-wrapper *zoom 1:before{display:table;line-height:0;content:""}.search-wrapper *zoom 1:after{clear:both}.search-wrapper:before,.search-wrapper:after{display:table;line-height:0;content:""}.search-list{padding:0;margin:0;list-style-type:none;}@media only screen and (max-width:37.5rem){.search-list{height:380px;overflow:scroll}}.search-list .entry-date{float:right;display:none;font-size:14px;text-transform:uppercase}.search-list a{text-decoration:none;display:block;padding:.938rem 0;width:100%;border-bottom:1px solid #fff;}.search-list a:hover{color:#b3b3b3;border-bottom:1px solid #b3b3b3}@media only screen and (min-width:48em){.search-wrapper{top:100px}.search-list .entry-date{display:inline}}.post-content .tags{margin-top:1.875rem;}.post-content .tags a{font-size:.875rem;color:#005f97;display:inline-block;border:1px solid #005f97;border-radius:.313rem;padding:.25rem .625rem;margin-right:.125rem;margin-bottom:.5rem;text-decoration:none;}.post-content .tags a:hover{color:#00395b;border:1px solid #00395b;background:#fff}.img-rounded{border-radius:50%}html,body{height:100%}.header-post{background-color:#005f97;}.header-post .content{width:95%;text-align:center;padding:8.75rem 0 4.125rem}.bar-header{background:#fff;padding:.625rem 1.25rem;box-shadow:0 -3px 9px #000;position:fixed;width:100%;z-index:10;}.bar-header .logo{margin:0;line-height:2.188rem}.bar-header .logo a{color:#005f97;text-decoration:none;font-size:1.75rem;}.bar-header .logo a:after{transition:all .4s;content:' AD';}@media only screen and (min-width:37.5rem){.bar-header .logo a:after{content:' Anon Developer'}}.header-post{min-height:31.25rem;position:fixed;width:100%;}.header-post .content{margin:auto;max-width:50rem}.header-post .subheader{display:table;padding:20px;}.header-post .subheader a{border:2px solid #fff;border-radius:20px;padding:0 10px;}@media only screen and (min-width:37.5rem){.header-post .subheader a{padding:0 10px}}.header-post .date{font-family:'Open Sans',sans-serif;font-weight:300;font-style:normal;font-size:1rem}.header-post h1{font-size:1.875rem;margin:0 0 30px;text-shadow:3px 3px #004c79;}@media only screen and (min-width:37.5rem){.header-post h1{font-size:3.75rem}}.header-post .subtitle{font-family:'Open Sans',sans-serif;font-weight:300;font-style:normal;font-size:1.25rem}.header-post h1,.header-post .subtitle,.header-post .date{color:#fff;text-align:center}.header-post a,.header-post p{color:#fff;text-decoration:none;font-family:'Open Sans',sans-serif;font-weight:300;font-style:normal;font-size:1.125rem}main{padding-top:6.25rem}.row{*zoom:1;width:auto;max-width:64.375rem;float:none;display:block;margin-right:auto;margin-left:auto;padding-left:0;padding-right:0}.row:before,.row:after{content:'';display:table}.row:after{clear:both}.flex-grid{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}.title-category{*zoom:1;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:before,.title-category:after{content:'';display:table}.title-category:after{clear:both}.box-item{-ms-flex:1 0 300px;flex:1 0 300px;margin:0 .938rem 3.125rem;display:inline-block;border:1px solid #eee;border-radius:5px;min-height:17.813rem;transition:all .3s;position:relative;cursor:pointer;}.box-item:hover{box-shadow:1px 2px 10px #eee}.box-item a{text-decoration:none;}.box-item a:hover .box-item{box-shadow:10px 10px 10px #eee}.box-item .box-body{padding:1.563rem;}.box-item .box-body time{font-size:.875rem;color:#b2bac2}.box-item .box-body h2{margin:.313rem 0 .938rem;font-size:1.25rem;font-family:'Open Sans',sans-serif;font-weight:800;font-style:normal;color:#005f97;}.box-item .box-body p{margin:0 0 1.25rem;color:#576366;font-size:.875rem;line-height:1.375rem}.box-item .box-body .tags a{color:#005f97;padding:.313rem .625rem;border-radius:3px;display:inline-block;margin:0 0 .313rem;z-index:50}.ribbon{position:absolute;right:-5px;top:-5px;z-index:1;overflow:hidden;width:75px;height:75px;text-align:right;}.ribbon span{font-size:.75rem;font-weight:bold;color:#fff;text-transform:uppercase;text-align:center;line-height:20px;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform:rotate(45deg);width:100px;display:block;background:#b31917;position:absolute;top:19px;right:-21px;}.ribbon span:before{content:"";position:absolute;left:0;top:100%;z-index:-1;border-left:3px solid #005f97;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid #005f97}.ribbon span:after{content:"";position:absolute;right:0;top:100%;z-index:-1;border-left:3px solid transparent;border-right:3px solid #005f97;border-bottom:3px solid transparent;border-top:3px solid #005f97}.post-content h1:before,.post-content h2:before,.post-content h3:before,.post-content h4:before,.post-content h5:before,.tag-title:before{display:block;content:" ";margin-top:-60px;height:75px;visibility:hidden}.post{position:relative;top:31.25rem;background:#fff}.post-content{padding:2.5rem 0;}.post-content img{max-width:100%;margin:1.875rem auto;display:block}.post-content p,.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content ul,.post-content ol,.post-content .tags,.post-content iframe,.post-content .button-post{*zoom:1;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;margin:0 auto 1.875rem;font-family:'Open Sans',sans-serif;font-weight:300;font-style:normal;font-size:1.125rem;line-height:2;letter-spacing:.01rem;}.post-content p:before,.post-content h1:before,.post-content h2:before,.post-content h3:before,.post-content h4:before,.post-content ul:before,.post-content ol:before,.post-content .tags:before,.post-content iframe:before,.post-content .button-post:before,.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 .tags:after,.post-content iframe:after,.post-content .button-post:after{content:'';display:table}.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 .tags:after,.post-content iframe:after,.post-content .button-post:after{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 .tags,.post-content iframe,.post-content .button-post{font-size:1.25rem}}.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:#005f97;word-wrap:break-word}.post-content a{color:#005f97;border-bottom:2px dashed #005f97;font-family:'Open Sans',sans-serif;font-weight:300;font-style:normal;text-decoration:none;transition:all .3s;}.post-content a:hover{background:#005f97;color:#fff}.post-content .externalLink:after{display:inline-block;content:'';color:#005f97;background-image:url("../img/external.svg");background-size:100%;margin-left:.313rem;width:1.125rem;height:1.125rem}.post-content iframe{margin-top:1.875rem;width:100%}.post-content #twitter-widget-0,.post-content .instagram-media{margin:auto !important}.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5{font-family:'Open Sans',sans-serif;font-weight:800;font-style:normal;}.post-content h1{font-size:1.875rem;line-height:1.4;}@media only screen and (min-width:37.5rem){.post-content h1{font-size:2.813rem}}.post-content h2{font-size:1.375rem;line-height:1.4;}@media only screen and (min-width:37.5rem){.post-content h2{font-size:2.188rem}}.post-content h3{font-size:1.125rem;line-height:1.4;}@media only screen and (min-width:37.5rem){.post-content h3{font-size:1.563rem}}.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{*zoom:1;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 #005f97;padding:0 1.875rem;margin:3.125rem auto;}.post-content blockquote:before,.post-content blockquote:after{content:'';display:table}.post-content blockquote:after{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.125rem;line-height:1.5;padding:0}}.post-content hr{*zoom:1;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:before,.post-content hr:after{content:'';display:table}.post-content hr:after{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}.tag-title{font-family:'Open Sans',sans-serif;font-weight:300;font-style:normal;font-size:2.25rem;margin-top:3.75rem;*zoom:1;width:auto;max-width:50rem;float:none;display:block;margin-right:auto;margin-left:auto;padding-left:0;padding-right:0;}.tag-title:before,.tag-title:after{content:'';display:table}.tag-title:after{clear:both}@media only screen and (max-width:37.5rem){.tag-title{font-size:1.75rem;margin-top:1.25rem;padding:0 1.25rem}}.post-list{list-style:none;margin:1.563rem auto;}@media only screen and (max-width:37.5rem){.post-list{padding:0 1.25rem}}.post-list a{display:block;border-bottom:1px solid #dadada;padding:.625rem 0;text-decoration:none;transition:all .5s;}.post-list a:hover{color:#002f4c;border-bottom:1px solid #002f4c;background:#fff}.post-list .entry-date{float:right;}@media only screen and (max-width:37.5rem){.post-list .entry-date{display:none}}.share{*zoom:1;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:before,.share:after{content:'';display:table}.share:after{clear:both}article .share{border-top:none}.share svg{margin:.938rem;width:35px;height:35px}.share a{text-decoration:none;border:none}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{*zoom:1;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:before,pre code:after{content:'';display:table}pre code:after{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}.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 img{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:'Open Sans',sans-serif;font-weight:300;font-style:normal;margin:.625rem;}@media only screen and (min-width:37.5rem){.author .def{margin:0;padding-top:1.563rem}}.author .name{margin:0;}.author .name a{font-family:'Open Sans',sans-serif;font-weight:800;font-style:normal;text-decoration:none;color:#000;font-size:1.875rem;}.author .name a:hover{color:#005f97}@media only screen and (min-width:37.5rem){.author .name a{font-size:2.813rem}}.author .desc{font-family:'Open Sans',sans-serif;font-weight:300;font-style:normal;margin:.625rem;font-size:1rem;}@media only screen and (min-width:37.5rem){.author .desc{font-size:1.25rem}}.author .email,.author .github{text-decoration:none;color:#005f97}.comments{*zoom:1;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:before,.comments:after{content:'';display:table}.comments:after{clear:both}.comments h3{margin:0 0 1.875rem;font-size:1.875rem}footer{background:#005f97;padding:1.563rem 0;margin-top:100px;}footer p,footer a{text-decoration:none;font-family:'Open Sans',sans-serif;font-weight:300;font-style:normal;color:#fff;text-align:center;margin:0}.post-jekyll .title-category{color:#b31917}.post-jekyll .post-content h1,.post-jekyll .post-content h2,.post-jekyll .post-content h3,.post-jekyll .post-content h4{color:#b31917}.post-jekyll .post-content a{color:#b31917;border-bottom:2px dashed #b31917;}.post-jekyll .post-content a:hover{background-color:#b31917;color:#fff}.post-jekyll .post-content strong{color:#b31917}.post-jekyll .post-content p code,.post-jekyll .post-content li code{color:#b31917}.post-jekyll .post-content blockquote{border-left:.313rem solid #b31917}.post-jekyll .header-post,.post-jekyll .header-site{background-color:#b31917;}.post-jekyll .header-post h1,.post-jekyll .header-site h1{text-shadow:3px 3px #8f1412}.post-jekyll .bar-header .logo a{color:#b31917}.post-jekyll .author .email,.post-jekyll .author .github{color:#b31917}.post-jekyll .share a:hover svg{fill:#b31917}@media only screen and (max-width:37.5rem){.post-jekyll body.search-overlay:after{background-color:#b31917}}.post-jekyll .icon-menu{fill:#b31917}.post-jekyll .box-body h2{color:#b31917}.post-jekyll .box-body .tags a{color:#b31917;border:1px solid #b31917;}.post-jekyll .box-body .tags a:hover{color:#fff;background:#b31917}.post-jekyll aside{background-color:#b31917;}.post-jekyll aside nav li a:hover{color:#b31917}.post-jekyll .ribbon span{background-color:#b31917;}.post-jekyll .ribbon span:before{border-left:3px solid #7d1210;border-top:3px solid #7d1210}.post-jekyll .ribbon span:after{border-right:3px solid #7d1210;border-top:3px solid #7d1210}.post-jekyll footer{background-color:#b31917}.post-css .title-category{color:#2da0c3}.post-css .post-content h1,.post-css .post-content h2,.post-css .post-content h3,.post-css .post-content h4{color:#2da0c3}.post-css .post-content a{color:#2da0c3;border-bottom:2px dashed #2da0c3;}.post-css .post-content a:hover{background-color:#2da0c3;color:#fff}.post-css .post-content strong{color:#2da0c3}.post-css .post-content p code,.post-css .post-content li code{color:#2da0c3}.post-css .post-content blockquote{border-left:.313rem solid #2da0c3}.post-css .header-post,.post-css .header-site{background-color:#2da0c3;}.post-css .header-post h1,.post-css .header-site h1{text-shadow:3px 3px #24809c}.post-css .bar-header .logo a{color:#2da0c3}.post-css .author .email,.post-css .author .github{color:#2da0c3}.post-css .share a:hover svg{fill:#2da0c3}@media only screen and (max-width:37.5rem){.post-css body.search-overlay:after{background-color:#2da0c3}}.post-css .icon-menu{fill:#2da0c3}.post-css .box-body h2{color:#2da0c3}.post-css .box-body .tags a{color:#2da0c3;border:1px solid #2da0c3;}.post-css .box-body .tags a:hover{color:#fff;background:#2da0c3}.post-css aside{background-color:#2da0c3;}.post-css aside nav li a:hover{color:#2da0c3}.post-css .ribbon span{background-color:#2da0c3;}.post-css .ribbon span:before{border-left:3px solid #207088;border-top:3px solid #207088}.post-css .ribbon span:after{border-right:3px solid #207088;border-top:3px solid #207088}.post-css footer{background-color:#2da0c3}.post-js .title-category{color:#d6ba32}.post-js .post-content h1,.post-js .post-content h2,.post-js .post-content h3,.post-js .post-content h4{color:#d6ba32}.post-js .post-content a{color:#d6ba32;border-bottom:2px dashed #d6ba32;}.post-js .post-content a:hover{background-color:#d6ba32;color:#fff}.post-js .post-content strong{color:#d6ba32}.post-js .post-content p code,.post-js .post-content li code{color:#d6ba32}.post-js .post-content blockquote{border-left:.313rem solid #d6ba32}.post-js .header-post,.post-js .header-site{background-color:#d6ba32;}.post-js .header-post h1,.post-js .header-site h1{text-shadow:3px 3px #b09823}.post-js .bar-header .logo a{color:#d6ba32}.post-js .author .email,.post-js .author .github{color:#d6ba32}.post-js .share a:hover svg{fill:#d6ba32}@media only screen and (max-width:37.5rem){.post-js body.search-overlay:after{background-color:#d6ba32}}.post-js .icon-menu{fill:#d6ba32}.post-js .box-body h2{color:#d6ba32}.post-js .box-body .tags a{color:#d6ba32;border:1px solid #d6ba32;}.post-js .box-body .tags a:hover{color:#fff;background:#d6ba32}.post-js aside{background-color:#d6ba32;}.post-js aside nav li a:hover{color:#d6ba32}.post-js .ribbon span{background-color:#d6ba32;}.post-js .ribbon span:before{border-left:3px solid #9a851f;border-top:3px solid #9a851f}.post-js .ribbon span:after{border-right:3px solid #9a851f;border-top:3px solid #9a851f}.post-js footer{background-color:#d6ba32}.post-html .title-category{color:#eb7728}.post-html .post-content h1,.post-html .post-content h2,.post-html .post-content h3,.post-html .post-content h4{color:#eb7728}.post-html .post-content a{color:#eb7728;border-bottom:2px dashed #eb7728;}.post-html .post-content a:hover{background-color:#eb7728;color:#fff}.post-html .post-content strong{color:#eb7728}.post-html .post-content p code,.post-html .post-content li code{color:#eb7728}.post-html .post-content blockquote{border-left:.313rem solid #eb7728}.post-html .header-post,.post-html .header-site{background-color:#eb7728;}.post-html .header-post h1,.post-html .header-site h1{text-shadow:3px 3px #c95d13}.post-html .bar-header .logo a{color:#eb7728}.post-html .author .email,.post-html .author .github{color:#eb7728}.post-html .share a:hover svg{fill:#eb7728}@media only screen and (max-width:37.5rem){.post-html body.search-overlay:after{background-color:#eb7728}}.post-html .icon-menu{fill:#eb7728}.post-html .box-body h2{color:#eb7728}.post-html .box-body .tags a{color:#eb7728;border:1px solid #eb7728;}.post-html .box-body .tags a:hover{color:#fff;background:#eb7728}.post-html aside{background-color:#eb7728;}.post-html aside nav li a:hover{color:#eb7728}.post-html .ribbon span{background-color:#eb7728;}.post-html .ribbon span:before{border-left:3px solid #b05110;border-top:3px solid #b05110}.post-html .ribbon span:after{border-right:3px solid #b05110;border-top:3px solid #b05110}.post-html footer{background-color:#eb7728}.post-svg .title-category{color:#7d669e}.post-svg .post-content h1,.post-svg .post-content h2,.post-svg .post-content h3,.post-svg .post-content h4{color:#7d669e}.post-svg .post-content a{color:#7d669e;border-bottom:2px dashed #7d669e;}.post-svg .post-content a:hover{background-color:#7d669e;color:#fff}.post-svg .post-content strong{color:#7d669e}.post-svg .post-content p code,.post-svg .post-content li code{color:#7d669e}.post-svg .post-content blockquote{border-left:.313rem solid #7d669e}.post-svg .header-post,.post-svg .header-site{background-color:#7d669e;}.post-svg .header-post h1,.post-svg .header-site h1{text-shadow:3px 3px #64517f}.post-svg .bar-header .logo a{color:#7d669e}.post-svg .author .email,.post-svg .author .github{color:#7d669e}.post-svg .share a:hover svg{fill:#7d669e}@media only screen and (max-width:37.5rem){.post-svg body.search-overlay:after{background-color:#7d669e}}.post-svg .icon-menu{fill:#7d669e}.post-svg .box-body h2{color:#7d669e}.post-svg .box-body .tags a{color:#7d669e;border:1px solid #7d669e;}.post-svg .box-body .tags a:hover{color:#fff;background:#7d669e}.post-svg aside{background-color:#7d669e;}.post-svg aside nav li a:hover{color:#7d669e}.post-svg .ribbon span{background-color:#7d669e;}.post-svg .ribbon span:before{border-left:3px solid #57476f;border-top:3px solid #57476f}.post-svg .ribbon span:after{border-right:3px solid #57476f;border-top:3px solid #57476f}.post-svg footer{background-color:#7d669e}.post-dev .title-category{color:#637a91}.post-dev .post-content h1,.post-dev .post-content h2,.post-dev .post-content h3,.post-dev .post-content h4{color:#637a91}.post-dev .post-content a{color:#637a91;border-bottom:2px dashed #637a91;}.post-dev .post-content a:hover{background-color:#637a91;color:#fff}.post-dev .post-content strong{color:#637a91}.post-dev .post-content p code,.post-dev .post-content li code{color:#637a91}.post-dev .post-content blockquote{border-left:.313rem solid #637a91}.post-dev .header-post,.post-dev .header-site{background-color:#637a91;}.post-dev .header-post h1,.post-dev .header-site h1{text-shadow:3px 3px #4f6274}.post-dev .bar-header .logo a{color:#637a91}.post-dev .author .email,.post-dev .author .github{color:#637a91}.post-dev .share a:hover svg{fill:#637a91}@media only screen and (max-width:37.5rem){.post-dev body.search-overlay:after{background-color:#637a91}}.post-dev .icon-menu{fill:#637a91}.post-dev .box-body h2{color:#637a91}.post-dev .box-body .tags a{color:#637a91;border:1px solid #637a91;}.post-dev .box-body .tags a:hover{color:#fff;background:#637a91}.post-dev aside{background-color:#637a91;}.post-dev aside nav li a:hover{color:#637a91}.post-dev .ribbon span{background-color:#637a91;}.post-dev .ribbon span:before{border-left:3px solid #455565;border-top:3px solid #455565}.post-dev .ribbon span:after{border-right:3px solid #455565;border-top:3px solid #455565}.post-dev footer{background-color:#637a91}.post-misc .title-category{color:#7aab13}.post-misc .post-content h1,.post-misc .post-content h2,.post-misc .post-content h3,.post-misc .post-content h4{color:#7aab13}.post-misc .post-content a{color:#7aab13;border-bottom:2px dashed #7aab13;}.post-misc .post-content a:hover{background-color:#7aab13;color:#fff}.post-misc .post-content strong{color:#7aab13}.post-misc .post-content p code,.post-misc .post-content li code{color:#7aab13}.post-misc .post-content blockquote{border-left:.313rem solid #7aab13}.post-misc .header-post,.post-misc .header-site{background-color:#7aab13;}.post-misc .header-post h1,.post-misc .header-site h1{text-shadow:3px 3px #62890f}.post-misc .bar-header .logo a{color:#7aab13}.post-misc .author .email,.post-misc .author .github{color:#7aab13}.post-misc .share a:hover svg{fill:#7aab13}@media only screen and (max-width:37.5rem){.post-misc body.search-overlay:after{background-color:#7aab13}}.post-misc .icon-menu{fill:#7aab13}.post-misc .box-body h2{color:#7aab13}.post-misc .box-body .tags a{color:#7aab13;border:1px solid #7aab13;}.post-misc .box-body .tags a:hover{color:#fff;background:#7aab13}.post-misc aside{background-color:#7aab13;}.post-misc aside nav li a:hover{color:#7aab13}.post-misc .ribbon span{background-color:#7aab13;}.post-misc .ribbon span:before{border-left:3px solid #55780d;border-top:3px solid #55780d}.post-misc .ribbon span:after{border-right:3px solid #55780d;border-top:3px solid #55780d}.post-misc footer{background-color:#7aab13} -------------------------------------------------------------------------------- /assets/img/blog-author.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/assets/img/blog-author.jpg -------------------------------------------------------------------------------- /assets/img/blog-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/assets/img/blog-image.png -------------------------------------------------------------------------------- /assets/img/external.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/icons/apple-touch-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/assets/img/icons/apple-touch-icon-114x114.png -------------------------------------------------------------------------------- /assets/img/icons/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/assets/img/icons/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /assets/img/icons/apple-touch-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/assets/img/icons/apple-touch-icon-144x144.png -------------------------------------------------------------------------------- /assets/img/icons/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/assets/img/icons/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /assets/img/icons/apple-touch-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/assets/img/icons/apple-touch-icon-57x57.png -------------------------------------------------------------------------------- /assets/img/icons/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/assets/img/icons/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /assets/img/icons/apple-touch-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/assets/img/icons/apple-touch-icon-72x72.png -------------------------------------------------------------------------------- /assets/img/icons/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/assets/img/icons/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /assets/img/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/assets/img/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /assets/img/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/assets/img/icons/favicon.ico -------------------------------------------------------------------------------- /assets/img/icons/largetile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/assets/img/icons/largetile.png -------------------------------------------------------------------------------- /assets/img/icons/mediumtile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/assets/img/icons/mediumtile.png -------------------------------------------------------------------------------- /assets/img/icons/smalltile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/assets/img/icons/smalltile.png -------------------------------------------------------------------------------- /assets/img/icons/widetile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/assets/img/icons/widetile.png -------------------------------------------------------------------------------- /category/css.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | main-class: 'css' 4 | --- 5 | 6 |
    7 |

    CSS

    8 |
    9 | {% for post in site.posts %} 10 | {% if post.main-class == 'css' %} 11 | 33 | {% endif %} 34 | {% endfor %} 35 |
    36 |
    -------------------------------------------------------------------------------- /category/dev.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | main-class: 'dev' 4 | --- 5 | 6 |
    7 |

    dev

    8 |
    9 | {% for post in site.posts %} 10 | {% if post.main-class == 'dev' %} 11 | 33 | {% endif %} 34 | {% endfor %} 35 |
    36 |
    -------------------------------------------------------------------------------- /category/html.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | main-class: 'html' 4 | --- 5 | 6 |
    7 |

    HTML

    8 |
    9 | {% for post in site.posts %} 10 | {% if post.main-class == 'html' %} 11 | 33 | {% endif %} 34 | {% endfor %} 35 |
    36 |
    -------------------------------------------------------------------------------- /category/jekyll.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | main-class: 'jekyll' 4 | --- 5 | 6 |
    7 |

    jekyll

    8 |
    9 | {% for post in site.posts %} 10 | {% if post.main-class == 'jekyll' %} 11 | 33 | {% endif %} 34 | {% endfor %} 35 |
    36 |
    -------------------------------------------------------------------------------- /category/js.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | main-class: 'js' 4 | --- 5 | 6 |
    7 |

    JS

    8 |
    9 | {% for post in site.posts %} 10 | {% if post.main-class == 'js' %} 11 | 33 | {% endif %} 34 | {% endfor %} 35 |
    36 |
    -------------------------------------------------------------------------------- /category/misc.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | main-class: 'misc' 4 | --- 5 | 6 |
    7 |

    Miscelânia

    8 |
    9 | {% for post in site.posts %} 10 | {% if post.main-class == 'misc' %} 11 | 33 | {% endif %} 34 | {% endfor %} 35 |
    36 |
    -------------------------------------------------------------------------------- /category/svg.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | main-class: 'svg' 4 | --- 5 | 6 |
    7 |

    svg

    8 |
    9 | {% for post in site.posts %} 10 | {% if post.main-class == 'svg' %} 11 | 33 | {% endif %} 34 | {% endfor %} 35 |
    36 |
    -------------------------------------------------------------------------------- /feed.xml: -------------------------------------------------------------------------------- 1 | --- 2 | layout: null 3 | --- 4 | 5 | 6 | 7 | {{ site.title | xml_escape }} 8 | {{ site.description | xml_escape }} 9 | {{ site.url }}{{ site.baseurl }}/ 10 | 11 | {{ site.time | date_to_rfc822 }} 12 | {{ site.time | date_to_rfc822 }} 13 | Jekyll v{{ jekyll.version }} 14 | {% for post in site.posts limit:30 %} 15 | 16 | {{ post.title | xml_escape }} 17 | {{ post.content | xml_escape | strip_html | truncatewords:100 }} 18 | {{ post.date | date_to_rfc822 }} 19 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 20 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 21 | {% for tag in post.tags %} 22 | {{ tag | xml_escape }} 23 | {% endfor %} 24 | {% for cat in post.categories %} 25 | {{ cat | xml_escape }} 26 | {% endfor %} 27 | 28 | {% endfor %} 29 | 30 | 31 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var env = require('minimist')(process.argv.slice(2)), 2 | gulp = require('gulp'), 3 | plumber = require('gulp-plumber'), 4 | browserSync = require('browser-sync'), 5 | stylus = require('gulp-stylus'), 6 | uglify = require('gulp-uglify'), 7 | concat = require('gulp-concat'), 8 | jeet = require('jeet'), 9 | rupture = require('rupture'), 10 | koutoSwiss = require('kouto-swiss'), 11 | prefixer = require('autoprefixer-stylus'), 12 | imagemin = require('gulp-imagemin'), 13 | cp = require('child_process'); 14 | 15 | var messages = { 16 | jekyllBuild: 'Running: $ jekyll build' 17 | }; 18 | 19 | var jekyllCommand = (/^win/.test(process.platform)) ? 'jekyll.bat' : 'jekyll'; 20 | 21 | /** 22 | * Build the Jekyll Site 23 | */ 24 | gulp.task('jekyll-build', function (done) { 25 | browserSync.notify(messages.jekyllBuild); 26 | return cp.spawn(jekyllCommand, ['build'], {stdio: 'inherit'}) 27 | .on('close', done); 28 | }); 29 | 30 | /** 31 | * Rebuild Jekyll & do page reload 32 | */ 33 | gulp.task('jekyll-rebuild', ['jekyll-build'], function () { 34 | browserSync.reload(); 35 | }); 36 | 37 | /** 38 | * Wait for jekyll-build, then launch the Server 39 | */ 40 | gulp.task('browser-sync', ['jekyll-build'], function() { 41 | browserSync({ 42 | server: { 43 | baseDir: '_site' 44 | } 45 | }); 46 | }); 47 | 48 | /** 49 | * Stylus task 50 | */ 51 | gulp.task('stylus', function(){ 52 | gulp.src('src/styl/main.styl') 53 | .pipe(plumber()) 54 | .pipe(stylus({ 55 | use:[koutoSwiss(), prefixer(), jeet(), rupture()], 56 | compress: true 57 | })) 58 | .pipe(gulp.dest('_site/assets/css/')) 59 | .pipe(browserSync.reload({stream:true})) 60 | .pipe(gulp.dest('assets/css')); 61 | }); 62 | 63 | /** 64 | * Javascript Task 65 | */ 66 | gulp.task('js', function(){ 67 | return gulp.src((env.p) ? 'src/js/**/*.js' : ['src/js/**/*.js', '!src/js/analytics.js']) 68 | .pipe(plumber()) 69 | .pipe(concat('main.js')) 70 | .pipe(uglify()) 71 | .pipe(gulp.dest('assets/js/')); 72 | }); 73 | 74 | /** 75 | * Imagemin Task 76 | */ 77 | gulp.task('imagemin', function() { 78 | return gulp.src('src/img/**/*.{jpg,png,gif}') 79 | .pipe(plumber()) 80 | .pipe(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })) 81 | .pipe(gulp.dest('assets/img/')); 82 | }); 83 | 84 | /** 85 | * Watch stylus files for changes & recompile 86 | * Watch html/md files, run jekyll & reload BrowserSync 87 | */ 88 | gulp.task('watch', function () { 89 | gulp.watch('src/styl/**/*.styl', ['stylus']); 90 | gulp.watch('src/js/**/*.js', ['js']); 91 | gulp.watch('src/img/**/*.{jpg,png,gif}', ['imagemin']); 92 | gulp.watch(['**/*.html','index.html', '_includes/*.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']); 93 | }); 94 | 95 | /** 96 | * Default task, running just `gulp` will compile the stylus, 97 | * compile the jekyll site, launch BrowserSync & watch files. 98 | */ 99 | gulp.task('default', ['js', 'stylus', 'browser-sync', 'watch']); 100 | 101 | // build to deploy 102 | gulp.task('build', ['js', 'stylus', 'jekyll-build']); 103 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
    6 |
    7 | {% for post in site.posts %} 8 | 30 | {% endfor %} 31 |
    32 |
    33 | -------------------------------------------------------------------------------- /initpost.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | # ------------------------------------------------------------------------------ 4 | # 5 | # Program: initpost.sh 6 | # Author: Vitor Britto 7 | # Description: script to create an initial structure for my posts. 8 | # 9 | # Usage: ./initpost.sh [options] 10 | # 11 | # Options: 12 | # -h, --help output instructions 13 | # -c, --create create post 14 | # 15 | # Alias: alias ipost="bash ~/path/to/script/initpost.sh" 16 | # 17 | # Example: 18 | # ./initpost.sh -c How to replace strings with sed 19 | # 20 | # Important Notes: 21 | # - This script was created to generate new markdown files for my blog. 22 | # 23 | # ------------------------------------------------------------------------------ 24 | 25 | 26 | # ------------------------------------------------------------------------------ 27 | # | VARIABLES | 28 | # ------------------------------------------------------------------------------ 29 | 30 | # CORE: Do not change these lines 31 | # ---------------------------------------------------------------- 32 | POST_TITLE="${@:2:$(($#-1))}" 33 | POST_NAME="$(echo ${@:2:$(($#-1))} | sed -e 's/ /-/g' | sed "y/ABCDEFGHIJKLMNOPQRSTUVWXYZ/abcdefghijklmnopqrstuvwxyz/")" 34 | CURRENT_DATE="$(date -u +'%Y-%m-%d')" 35 | TIME=$(date -u +"%T") 36 | FILE_NAME="${CURRENT_DATE}-${POST_NAME}.md" 37 | # ---------------------------------------------------------------- 38 | 39 | 40 | # SETTINGS: your configuration goes here 41 | # ---------------------------------------------------------------- 42 | 43 | # Set your destination folder 44 | BINPATH=$(cd `dirname $0`; pwd) 45 | POSTPATH="${BINPATH}/_posts" 46 | DIST_FOLDER="$POSTPATH" 47 | 48 | # Set your blog URL 49 | BLOG_URL="https://willianjusten.com.br" 50 | 51 | # Set your assets URL 52 | ASSETS_URL="assets/img/" 53 | # ---------------------------------------------------------------- 54 | 55 | 56 | 57 | # ------------------------------------------------------------------------------ 58 | # | UTILS | 59 | # ------------------------------------------------------------------------------ 60 | 61 | # Header logging 62 | e_header() { 63 | printf "$(tput setaf 38)→ %s$(tput sgr0)\n" "$@" 64 | } 65 | 66 | # Success logging 67 | e_success() { 68 | printf "$(tput setaf 76)✔ %s$(tput sgr0)\n" "$@" 69 | } 70 | 71 | # Error logging 72 | e_error() { 73 | printf "$(tput setaf 1)✖ %s$(tput sgr0)\n" "$@" 74 | } 75 | 76 | # Warning logging 77 | e_warning() { 78 | printf "$(tput setaf 3)! %s$(tput sgr0)\n" "$@" 79 | } 80 | 81 | 82 | 83 | # ------------------------------------------------------------------------------ 84 | # | MAIN FUNCTIONS | 85 | # ------------------------------------------------------------------------------ 86 | 87 | # Everybody need some help 88 | initpost_help() { 89 | 90 | cat < 95 | Options: 96 | -h, --help output instructions 97 | -c, --create create post 98 | Example: 99 | ./initpost.sh -c How to replace strings with sed 100 | Important Notes: 101 | - This script was created to generate new text files to my blog. 102 | Copyright (c) Vitor Britto 103 | Licensed under the MIT license. 104 | ------------------------------------------------------------------------------ 105 | EOT 106 | 107 | } 108 | 109 | # Initial Content 110 | initpost_content() { 111 | 112 | echo "---" 113 | echo "layout: post" 114 | echo "comments: true" 115 | echo "title: \"${POST_TITLE}\"" 116 | echo "date: ${CURRENT_DATE} ${TIME}" 117 | echo "image: '/assets/img/'" 118 | echo "description:" 119 | echo "main-class:" 120 | echo "color:" 121 | echo "tags:" 122 | echo "categories:" 123 | echo "twitter_text:" 124 | echo "introduction:" 125 | echo "---" 126 | 127 | } 128 | 129 | # Create file 130 | initpost_file() { 131 | if [ ! -f "$FILE_NAME" ]; then 132 | e_header "Creating template..." 133 | initpost_content > "${DIST_FOLDER}/${FILE_NAME}" 134 | e_success "Initial post successfully created!" 135 | else 136 | e_warning "File already exist." 137 | exit 1 138 | fi 139 | 140 | } 141 | 142 | 143 | 144 | # ------------------------------------------------------------------------------ 145 | # | INITIALIZE PROGRAM | 146 | # ------------------------------------------------------------------------------ 147 | 148 | main() { 149 | 150 | # Show help 151 | if [[ "${1}" == "-h" || "${1}" == "--help" ]]; then 152 | initpost_help ${1} 153 | exit 154 | fi 155 | 156 | # Create 157 | if [[ "${1}" == "-c" || "${1}" == "--create" ]]; then 158 | initpost_file $* 159 | exit 160 | fi 161 | 162 | } 163 | 164 | # Initialize 165 | main $* 166 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cardsjekyll", 3 | "version": "1.0.0", 4 | "description": "A simple template for Jekyll Blogs.", 5 | "main": "gulpfile.js", 6 | "scripts": { 7 | "test": "test" 8 | }, 9 | "keywords": [ 10 | "frontend", 11 | "blog", 12 | "css", 13 | "stylus", 14 | "gulp", 15 | "jekyll", 16 | "js" 17 | ], 18 | "author": "Willian Justen de Vasconcellos", 19 | "license": "ISC", 20 | "devDependencies": { 21 | "autoprefixer-stylus": "^0.4.0", 22 | "browser-sync": "^1.9.0", 23 | "gulp": "^3.8.10", 24 | "gulp-concat": "^2.4.3", 25 | "gulp-imagemin": "^2.1.0", 26 | "gulp-plumber": "^0.6.6", 27 | "gulp-stylus": "^1.3.7", 28 | "gulp-uglify": "^1.0.2", 29 | "minimist": "^1.2.0" 30 | }, 31 | "dependencies": { 32 | "jeet": "=6.1.2", 33 | "kouto-swiss": "^0.11.14", 34 | "rupture": "^0.6.1" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | # robotstxt.org/ 2 | 3 | User-agent: * -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/screenshot.png -------------------------------------------------------------------------------- /search.json: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | [ 4 | {% for post in site.posts %} 5 | { 6 | "title" : "{{ post.title | escape }}", 7 | "tags" : "{{ post.tags | array_to_sentence_string }}", 8 | "categories" : "{{ post.main-class }}", 9 | "url" : "{{ site.baseurl }}{{ post.url }}", 10 | "date" : "{{ post.date | date_to_string}}" 11 | } {% unless forloop.last %},{% endunless %} 12 | {% endfor %} 13 | ] 14 | -------------------------------------------------------------------------------- /series.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: minimal 3 | title: "Series" 4 | permalink: /series/index.html 5 | image: '/assets/img/series.png' 6 | description: "Take a look at my series about lorem ipsum..." 7 | --- 8 | 9 | {% for tag in site.categories %} 10 | {{ tag[0] | capitalize }} 11 |
      12 | {% assign pages_list = tag[1] %} 13 | {% for post in pages_list reversed %} 14 | {% if post.title != null %} 15 | {% if group == null or group == post.group %} 16 |
    • {{ post.title }}
      • 17 | {% endif %} 18 | {% endif %} 19 | {% endfor %} 20 | {% assign pages_list = nil %} 21 | {% assign group = nil %} 22 |
    23 | {% endfor %} 24 | -------------------------------------------------------------------------------- /sitemap.xml: -------------------------------------------------------------------------------- 1 | --- 2 | layout: null 3 | --- 4 | 5 | 6 | {% for page in site.pages %} 7 | 8 | {{ page.url | prepend: site.baseurl | prepend: site.url }} 9 | 10 | {% endfor %} 11 | {% for post in site.posts %} 12 | 13 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 14 | 15 | {% endfor %} 16 | -------------------------------------------------------------------------------- /src/img/blog-author.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/src/img/blog-author.jpg -------------------------------------------------------------------------------- /src/img/blog-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/src/img/blog-image.png -------------------------------------------------------------------------------- /src/img/icons/apple-touch-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/src/img/icons/apple-touch-icon-114x114.png -------------------------------------------------------------------------------- /src/img/icons/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/src/img/icons/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /src/img/icons/apple-touch-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/src/img/icons/apple-touch-icon-144x144.png -------------------------------------------------------------------------------- /src/img/icons/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/src/img/icons/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /src/img/icons/apple-touch-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/src/img/icons/apple-touch-icon-57x57.png -------------------------------------------------------------------------------- /src/img/icons/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/src/img/icons/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /src/img/icons/apple-touch-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/src/img/icons/apple-touch-icon-72x72.png -------------------------------------------------------------------------------- /src/img/icons/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/src/img/icons/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /src/img/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/src/img/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /src/img/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/src/img/icons/favicon-16x16.png -------------------------------------------------------------------------------- /src/img/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/src/img/icons/favicon-32x32.png -------------------------------------------------------------------------------- /src/img/icons/favicon-64x64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/src/img/icons/favicon-64x64.png -------------------------------------------------------------------------------- /src/img/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/src/img/icons/favicon.ico -------------------------------------------------------------------------------- /src/img/icons/largetile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/src/img/icons/largetile.png -------------------------------------------------------------------------------- /src/img/icons/mediumtile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/src/img/icons/mediumtile.png -------------------------------------------------------------------------------- /src/img/icons/smalltile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/src/img/icons/smalltile.png -------------------------------------------------------------------------------- /src/img/icons/widetile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willianjusten/cards-jekyll-template/bb1b7951768898db8f62da2ecbfc36174b12c916/src/img/icons/widetile.png -------------------------------------------------------------------------------- /src/js/azepto.js: -------------------------------------------------------------------------------- 1 | /* Zepto v1.1.6 - zepto event ajax form ie - zeptojs.com/license */ 2 | 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); 3 | -------------------------------------------------------------------------------- /src/js/classie.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * classie - class helper functions 3 | * from bonzo https://github.com/ded/bonzo 4 | * 5 | * classie.has( elem, 'my-class' ) -> true/false 6 | * classie.add( elem, 'my-new-class' ) 7 | * classie.remove( elem, 'my-unwanted-class' ) 8 | * classie.toggle( elem, 'my-class' ) 9 | */ 10 | 11 | /*jshint browser: true, strict: true, undef: true */ 12 | /*global define: false */ 13 | 14 | ( function( window ) { 15 | 16 | 'use strict'; 17 | 18 | // class helper functions from bonzo https://github.com/ded/bonzo 19 | 20 | function classReg( className ) { 21 | return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 22 | } 23 | 24 | // classList support for class management 25 | // altho to be fair, the api sucks because it won't accept multiple classes at once 26 | var hasClass, addClass, removeClass; 27 | 28 | if ( 'classList' in document.documentElement ) { 29 | hasClass = function( elem, c ) { 30 | return elem.classList.contains( c ); 31 | }; 32 | addClass = function( elem, c ) { 33 | elem.classList.add( c ); 34 | }; 35 | removeClass = function( elem, c ) { 36 | elem.classList.remove( c ); 37 | }; 38 | } 39 | else { 40 | hasClass = function( elem, c ) { 41 | return classReg( c ).test( elem.className ); 42 | }; 43 | addClass = function( elem, c ) { 44 | if ( !hasClass( elem, c ) ) { 45 | elem.className = elem.className + ' ' + c; 46 | } 47 | }; 48 | removeClass = function( elem, c ) { 49 | elem.className = elem.className.replace( classReg( c ), ' ' ); 50 | }; 51 | } 52 | 53 | function toggleClass( elem, c ) { 54 | var fn = hasClass( elem, c ) ? removeClass : addClass; 55 | fn( elem, c ); 56 | } 57 | 58 | var classie = { 59 | // full names 60 | hasClass: hasClass, 61 | addClass: addClass, 62 | removeClass: removeClass, 63 | toggleClass: toggleClass, 64 | // short names 65 | has: hasClass, 66 | add: addClass, 67 | remove: removeClass, 68 | toggle: toggleClass 69 | }; 70 | 71 | // transport 72 | if ( typeof define === 'function' && define.amd ) { 73 | // AMD 74 | define( classie ); 75 | } else { 76 | // browser global 77 | window.classie = classie; 78 | } 79 | 80 | })( window ); -------------------------------------------------------------------------------- /src/js/scrollanimation.js: -------------------------------------------------------------------------------- 1 | /** 2 | * animOnScroll.js v1.0.0 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2013, Codrops 9 | * http://www.codrops.com 10 | */ 11 | ;( function( window ) { 12 | 13 | 'use strict'; 14 | 15 | var docElem = window.document.documentElement; 16 | 17 | function getViewportH() { 18 | var client = docElem['clientHeight'], 19 | inner = window['innerHeight']; 20 | 21 | if( client < inner ) 22 | return inner; 23 | else 24 | return client; 25 | } 26 | 27 | function scrollY() { 28 | return window.pageYOffset || docElem.scrollTop; 29 | } 30 | 31 | // http://stackoverflow.com/a/5598797/989439 32 | function getOffset( el ) { 33 | var offsetTop = 0, offsetLeft = 0; 34 | do { 35 | if ( !isNaN( el.offsetTop ) ) { 36 | offsetTop += el.offsetTop; 37 | } 38 | if ( !isNaN( el.offsetLeft ) ) { 39 | offsetLeft += el.offsetLeft; 40 | } 41 | } while( el = el.offsetParent ) 42 | 43 | return { 44 | top : offsetTop, 45 | left : offsetLeft 46 | } 47 | } 48 | 49 | function inViewport( el, h ) { 50 | var elH = el.offsetHeight, 51 | scrolled = scrollY(), 52 | viewed = scrolled + getViewportH(), 53 | elTop = getOffset(el).top, 54 | elBottom = elTop + elH, 55 | // if 0, the element is considered in the viewport as soon as it enters. 56 | // if 1, the element is considered in the viewport only when it's fully inside 57 | // value in percentage (1 >= h >= 0) 58 | h = h || 0; 59 | 60 | return (elTop + elH * h) <= viewed && (elBottom - elH * h) >= scrolled; 61 | } 62 | 63 | function extend( a, b ) { 64 | for( var key in b ) { 65 | if( b.hasOwnProperty( key ) ) { 66 | a[key] = b[key]; 67 | } 68 | } 69 | return a; 70 | } 71 | 72 | function AnimOnScroll( el, options ) { 73 | this.el = el; 74 | this.options = extend( this.defaults, options ); 75 | this._init(); 76 | } 77 | 78 | AnimOnScroll.prototype = { 79 | defaults : { 80 | // Minimum and a maximum duration of the animation (random value is chosen) 81 | minDuration : 0, 82 | maxDuration : 0, 83 | // The viewportFactor defines how much of the appearing item has to be visible in order to trigger the animation 84 | // 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. 85 | // 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) 86 | viewportFactor : 0 87 | }, 88 | _init : function() { 89 | this.items = Array.prototype.slice.call( document.querySelectorAll( '#' + this.el.id + ' > article' ) ); 90 | this.itemsCount = this.items.length; 91 | this.itemsRenderedCount = 0; 92 | this.didScroll = false; 93 | 94 | var self = this; 95 | // the items already shown... 96 | self.items.forEach( function( el, i ) { 97 | if( inViewport( el ) ) { 98 | self._checkTotalRendered(); 99 | classie.add( el, 'shown' ); 100 | } 101 | } ); 102 | 103 | // animate on scroll the items inside the viewport 104 | window.addEventListener( 'scroll', function() { 105 | self._onScrollFn(); 106 | }, false ); 107 | window.addEventListener( 'resize', function() { 108 | self._resizeHandler(); 109 | }, false ); 110 | }, 111 | _onScrollFn : function() { 112 | var self = this; 113 | if( !this.didScroll ) { 114 | this.didScroll = true; 115 | setTimeout( function() { self._scrollPage(); }, 60 ); 116 | } 117 | }, 118 | _scrollPage : function() { 119 | var self = this; 120 | this.items.forEach( function( el, i ) { 121 | if( !classie.has( el, 'shown' ) && !classie.has( el, 'animate' ) && inViewport( el, self.options.viewportFactor ) ) { 122 | setTimeout( function() { 123 | var perspY = scrollY() + getViewportH() / 2; 124 | self.el.style.WebkitPerspectiveOrigin = '50% ' + perspY + 'px'; 125 | self.el.style.MozPerspectiveOrigin = '50% ' + perspY + 'px'; 126 | self.el.style.perspectiveOrigin = '50% ' + perspY + 'px'; 127 | 128 | self._checkTotalRendered(); 129 | 130 | if( self.options.minDuration && self.options.maxDuration ) { 131 | var randDuration = ( Math.random() * ( self.options.maxDuration - self.options.minDuration ) + self.options.minDuration ) + 's'; 132 | el.style.WebkitAnimationDuration = randDuration; 133 | el.style.MozAnimationDuration = randDuration; 134 | el.style.animationDuration = randDuration; 135 | } 136 | 137 | classie.add( el, 'animate' ); 138 | }, 25 ); 139 | } 140 | }); 141 | this.didScroll = false; 142 | }, 143 | _resizeHandler : function() { 144 | var self = this; 145 | function delayed() { 146 | self._scrollPage(); 147 | self.resizeTimeout = null; 148 | } 149 | if ( this.resizeTimeout ) { 150 | clearTimeout( this.resizeTimeout ); 151 | } 152 | this.resizeTimeout = setTimeout( delayed, 1000 ); 153 | }, 154 | _checkTotalRendered : function() { 155 | ++this.itemsRenderedCount; 156 | if( this.itemsRenderedCount === this.itemsCount ) { 157 | window.removeEventListener( 'scroll', this._onScrollFn ); 158 | } 159 | } 160 | } 161 | 162 | // add to global namespace 163 | window.AnimOnScroll = AnimOnScroll; 164 | 165 | } )( window ); -------------------------------------------------------------------------------- /src/js/simpleJekyllSearch.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | $.fn.simpleJekyllSearch = function(options) { 3 | var settings = $.extend({ 4 | jsonFile : location+'/search.json', 5 | jsonFormat : 'title,tags,categories,url,date', 6 | template : '
    • ', 7 | searchResults : '.search-results', 8 | searchResultsTitle : '

    Search results:

    ', 9 | limit : '10', 10 | noResults : '

    Oh snap!
    We found nothing :(

    ' 11 | }, options); 12 | 13 | var properties = settings.jsonFormat.split(','); 14 | 15 | var jsonData = [], 16 | origThis = this, 17 | searchResults = $(settings.searchResults); 18 | 19 | if(settings.jsonFile.length && searchResults.length){ 20 | $.ajax({ 21 | type: "GET", 22 | url: settings.jsonFile, 23 | dataType: 'json', 24 | success: function(data, textStatus, jqXHR) { 25 | jsonData = data; 26 | registerEvent(); 27 | }, 28 | error: function(x,y,z) { 29 | console.log("***ERROR in simpleJekyllSearch.js***"); 30 | console.log(x); 31 | console.log(y); 32 | console.log(z); 33 | // x.responseText should have what's wrong 34 | } 35 | }); 36 | } 37 | 38 | 39 | function registerEvent(){ 40 | origThis.keyup(function(e){ 41 | if($(this).val().length){ 42 | writeMatches( performSearch($(this).val())); 43 | }else{ 44 | clearSearchResults(); 45 | } 46 | }); 47 | } 48 | 49 | function performSearch(str){ 50 | var matches = []; 51 | 52 | $.each(jsonData,function(i,entry){ 53 | for(var i=0;i= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F || 202 | // If the character is the first character and is in the range [0-9] 203 | // (U+0030 to U+0039), […] 204 | (index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) || 205 | // If the character is the second character and is in the range [0-9] 206 | // (U+0030 to U+0039) and the first character is a `-` (U+002D), […] 207 | ( 208 | index === 1 && 209 | codeUnit >= 0x0030 && codeUnit <= 0x0039 && 210 | firstCodeUnit === 0x002D 211 | ) 212 | ) { 213 | // http://dev.w3.org/csswg/cssom/#escape-a-character-as-code-point 214 | result += '\\' + codeUnit.toString(16) + ' '; 215 | continue; 216 | } 217 | 218 | // If the character is not handled by one of the above rules and is 219 | // greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or 220 | // is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to 221 | // U+005A), or [a-z] (U+0061 to U+007A), […] 222 | if ( 223 | codeUnit >= 0x0080 || 224 | codeUnit === 0x002D || 225 | codeUnit === 0x005F || 226 | codeUnit >= 0x0030 && codeUnit <= 0x0039 || 227 | codeUnit >= 0x0041 && codeUnit <= 0x005A || 228 | codeUnit >= 0x0061 && codeUnit <= 0x007A 229 | ) { 230 | // the character itself 231 | result += string.charAt(index); 232 | continue; 233 | } 234 | 235 | // Otherwise, the escaped character. 236 | // http://dev.w3.org/csswg/cssom/#escape-a-character 237 | result += '\\' + string.charAt(index); 238 | 239 | } 240 | return result; 241 | }; 242 | 243 | /** 244 | * Calculate the easing pattern 245 | * @private 246 | * @link https://gist.github.com/gre/1650294 247 | * @param {String} type Easing pattern 248 | * @param {Number} time Time animation should take to complete 249 | * @returns {Number} 250 | */ 251 | var easingPattern = function ( type, time ) { 252 | var pattern; 253 | if ( type === 'easeInQuad' ) pattern = time * time; // accelerating from zero velocity 254 | if ( type === 'easeOutQuad' ) pattern = time * (2 - time); // decelerating to zero velocity 255 | if ( type === 'easeInOutQuad' ) pattern = time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration 256 | if ( type === 'easeInCubic' ) pattern = time * time * time; // accelerating from zero velocity 257 | if ( type === 'easeOutCubic' ) pattern = (--time) * time * time + 1; // decelerating to zero velocity 258 | 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 259 | if ( type === 'easeInQuart' ) pattern = time * time * time * time; // accelerating from zero velocity 260 | if ( type === 'easeOutQuart' ) pattern = 1 - (--time) * time * time * time; // decelerating to zero velocity 261 | if ( type === 'easeInOutQuart' ) pattern = time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration 262 | if ( type === 'easeInQuint' ) pattern = time * time * time * time * time; // accelerating from zero velocity 263 | if ( type === 'easeOutQuint' ) pattern = 1 + (--time) * time * time * time * time; // decelerating to zero velocity 264 | 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 265 | return pattern || time; // no easing, no acceleration 266 | }; 267 | 268 | /** 269 | * Calculate how far to scroll 270 | * @private 271 | * @param {Element} anchor The anchor element to scroll to 272 | * @param {Number} headerHeight Height of a fixed header, if any 273 | * @param {Number} offset Number of pixels by which to offset scroll 274 | * @returns {Number} 275 | */ 276 | var getEndLocation = function ( anchor, headerHeight, offset ) { 277 | var location = 0; 278 | if (anchor.offsetParent) { 279 | do { 280 | location += anchor.offsetTop; 281 | anchor = anchor.offsetParent; 282 | } while (anchor); 283 | } 284 | location = location - headerHeight - offset; 285 | return location >= 0 ? location : 0; 286 | }; 287 | 288 | /** 289 | * Determine the document's height 290 | * @private 291 | * @returns {Number} 292 | */ 293 | var getDocumentHeight = function () { 294 | return Math.max( 295 | root.document.body.scrollHeight, root.document.documentElement.scrollHeight, 296 | root.document.body.offsetHeight, root.document.documentElement.offsetHeight, 297 | root.document.body.clientHeight, root.document.documentElement.clientHeight 298 | ); 299 | }; 300 | 301 | /** 302 | * Convert data-options attribute into an object of key/value pairs 303 | * @private 304 | * @param {String} options Link-specific options as a data attribute string 305 | * @returns {Object} 306 | */ 307 | var getDataOptions = function ( options ) { 308 | return !options || !(typeof JSON === 'object' && typeof JSON.parse === 'function') ? {} : JSON.parse( options ); 309 | }; 310 | 311 | /** 312 | * Update the URL 313 | * @private 314 | * @param {Element} anchor The element to scroll to 315 | * @param {Boolean} url Whether or not to update the URL history 316 | */ 317 | var updateUrl = function ( anchor, url ) { 318 | if ( root.history.pushState && (url || url === 'true') && root.location.protocol !== 'file:' ) { 319 | root.history.pushState( null, null, [root.location.protocol, '//', root.location.host, root.location.pathname, root.location.search, anchor].join('') ); 320 | } 321 | }; 322 | 323 | var getHeaderHeight = function ( header ) { 324 | return header === null ? 0 : ( getHeight( header ) + header.offsetTop ); 325 | }; 326 | 327 | /** 328 | * Start/stop the scrolling animation 329 | * @public 330 | * @param {Element} toggle The element that toggled the scroll event 331 | * @param {Element} anchor The element to scroll to 332 | * @param {Object} options 333 | */ 334 | smoothScroll.animateScroll = function ( toggle, anchor, options ) { 335 | 336 | // Options and overrides 337 | var overrides = getDataOptions( toggle ? toggle.getAttribute('data-options') : null ); 338 | var settings = extend( settings || defaults, options || {}, overrides ); // Merge user options with defaults 339 | anchor = '#' + escapeCharacters(anchor.substr(1)); // Escape special characters and leading numbers 340 | 341 | // Selectors and variables 342 | var anchorElem = anchor === '#' ? root.document.documentElement : root.document.querySelector(anchor); 343 | var startLocation = root.pageYOffset; // Current location on the page 344 | if ( !fixedHeader ) { fixedHeader = root.document.querySelector( settings.selectorHeader ); } // Get the fixed header if not already set 345 | if ( !headerHeight ) { headerHeight = getHeaderHeight( fixedHeader ); } // Get the height of a fixed header if one exists and not already set 346 | var endLocation = getEndLocation( anchorElem, headerHeight, parseInt(settings.offset, 10) ); // Scroll to location 347 | var animationInterval; // interval timer 348 | var distance = endLocation - startLocation; // distance to travel 349 | var documentHeight = getDocumentHeight(); 350 | var timeLapsed = 0; 351 | var percentage, position; 352 | 353 | // Update URL 354 | updateUrl(anchor, settings.updateURL); 355 | 356 | /** 357 | * Stop the scroll animation when it reaches its target (or the bottom/top of page) 358 | * @private 359 | * @param {Number} position Current position on the page 360 | * @param {Number} endLocation Scroll to location 361 | * @param {Number} animationInterval How much to scroll on this loop 362 | */ 363 | var stopAnimateScroll = function (position, endLocation, animationInterval) { 364 | var currentLocation = root.pageYOffset; 365 | if ( position == endLocation || currentLocation == endLocation || ( (root.innerHeight + currentLocation) >= documentHeight ) ) { 366 | clearInterval(animationInterval); 367 | anchorElem.focus(); 368 | settings.callback( toggle, anchor ); // Run callbacks after animation complete 369 | } 370 | }; 371 | 372 | /** 373 | * Loop scrolling animation 374 | * @private 375 | */ 376 | var loopAnimateScroll = function () { 377 | timeLapsed += 16; 378 | percentage = ( timeLapsed / parseInt(settings.speed, 10) ); 379 | percentage = ( percentage > 1 ) ? 1 : percentage; 380 | position = startLocation + ( distance * easingPattern(settings.easing, percentage) ); 381 | root.scrollTo( 0, Math.floor(position) ); 382 | stopAnimateScroll(position, endLocation, animationInterval); 383 | }; 384 | 385 | /** 386 | * Set interval timer 387 | * @private 388 | */ 389 | var startAnimateScroll = function () { 390 | animationInterval = setInterval(loopAnimateScroll, 16); 391 | }; 392 | 393 | /** 394 | * Reset position to fix weird iOS bug 395 | * @link https://github.com/cferdinandi/smooth-scroll/issues/45 396 | */ 397 | if ( root.pageYOffset === 0 ) { 398 | root.scrollTo( 0, 0 ); 399 | } 400 | 401 | // Start scrolling animation 402 | startAnimateScroll(); 403 | 404 | }; 405 | 406 | /** 407 | * If smooth scroll element clicked, animate scroll 408 | * @private 409 | */ 410 | var eventHandler = function (event) { 411 | var toggle = getClosest( event.target, settings.selector ); 412 | if ( toggle && toggle.tagName.toLowerCase() === 'a' ) { 413 | event.preventDefault(); // Prevent default click event 414 | smoothScroll.animateScroll( toggle, toggle.hash, settings); // Animate scroll 415 | } 416 | }; 417 | 418 | /** 419 | * On window scroll and resize, only run events at a rate of 15fps for better performance 420 | * @private 421 | * @param {Function} eventTimeout Timeout function 422 | * @param {Object} settings 423 | */ 424 | var eventThrottler = function (event) { 425 | if ( !eventTimeout ) { 426 | eventTimeout = setTimeout(function() { 427 | eventTimeout = null; // Reset timeout 428 | headerHeight = getHeaderHeight( fixedHeader ); // Get the height of a fixed header if one exists 429 | }, 66); 430 | } 431 | }; 432 | 433 | /** 434 | * Destroy the current initialization. 435 | * @public 436 | */ 437 | smoothScroll.destroy = function () { 438 | 439 | // If plugin isn't already initialized, stop 440 | if ( !settings ) return; 441 | 442 | // Remove event listeners 443 | root.document.removeEventListener( 'click', eventHandler, false ); 444 | root.removeEventListener( 'resize', eventThrottler, false ); 445 | 446 | // Reset varaibles 447 | settings = null; 448 | eventTimeout = null; 449 | fixedHeader = null; 450 | headerHeight = null; 451 | }; 452 | 453 | /** 454 | * Initialize Smooth Scroll 455 | * @public 456 | * @param {Object} options User settings 457 | */ 458 | smoothScroll.init = function ( options ) { 459 | 460 | // feature test 461 | if ( !supports ) return; 462 | 463 | // Destroy any existing initializations 464 | smoothScroll.destroy(); 465 | 466 | // Selectors and variables 467 | settings = extend( defaults, options || {} ); // Merge user options with defaults 468 | fixedHeader = root.document.querySelector( settings.selectorHeader ); // Get the fixed header 469 | headerHeight = getHeaderHeight( fixedHeader ); 470 | 471 | // When a toggle is clicked, run the click handler 472 | root.document.addEventListener('click', eventHandler, false ); 473 | if ( fixedHeader ) { root.addEventListener( 'resize', eventThrottler, false ); } 474 | 475 | }; 476 | 477 | 478 | // 479 | // Public APIs 480 | // 481 | 482 | return smoothScroll; 483 | 484 | }); -------------------------------------------------------------------------------- /src/js/target_blank.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var links = document.links; 3 | for (var i = 0, linksLength = links.length; i < linksLength; i++) { 4 | if (links[i].hostname != window.location.hostname) { 5 | links[i].target = '_blank'; 6 | links[i].className += ' externalLink'; 7 | } 8 | } 9 | })(); -------------------------------------------------------------------------------- /src/js/zmain.js: -------------------------------------------------------------------------------- 1 | (function( $, window, undefined ) { 2 | // Menu 3 | $("a#slide").click(function(){ 4 | $("#sidebar,a#slide,#fade").addClass("slide"); 5 | $("#open").hide(); 6 | $("#search").hide(); 7 | $("#close").show(); 8 | }); 9 | 10 | $("#fade").click(function(){ 11 | $("#sidebar,a#slide,#fade").removeClass("slide"); 12 | $("#open").show(); 13 | $("#search").show(); 14 | $("#close").hide(); 15 | }); 16 | 17 | // Search 18 | var bs = { 19 | close: $(".icon-remove-sign"), 20 | searchform: $(".search-form"), 21 | canvas: $("body"), 22 | dothis: $('.dosearch') 23 | }; 24 | 25 | bs.dothis.on('click', function() { 26 | $('.search-wrapper').toggleClass('active'); 27 | bs.searchform.toggleClass('active'); 28 | bs.searchform.find('input').focus(); 29 | bs.canvas.toggleClass('search-overlay'); 30 | $('.search-field').simpleJekyllSearch(); 31 | }); 32 | 33 | function close_search() { 34 | $('.search-wrapper').toggleClass('active'); 35 | bs.searchform.toggleClass('active'); 36 | bs.canvas.removeClass('search-overlay'); 37 | } 38 | 39 | bs.close.on('click', close_search); 40 | 41 | // Closing menu with ESC 42 | document.addEventListener('keyup', function(e){ 43 | if(e.keyCode == 27 && $('.search-overlay').length) { 44 | close_search(); 45 | } 46 | }); 47 | if (document.getElementsByClassName('home').length >=1 ) { 48 | new AnimOnScroll( document.getElementById( 'grid' ), { 49 | minDuration : 0.4, 50 | maxDuration : 0.7, 51 | viewportFactor : 0.2 52 | } ); 53 | } 54 | 55 | smoothScroll.init({ 56 | selectorHeader: '.bar-header', // Selector for fixed headers (must be a valid CSS selector) 57 | speed: 500, // Integer. How fast to complete the scroll in milliseconds 58 | updateURL: false, // Boolean. Whether or not to update the URL with the anchor hash on scroll 59 | }); 60 | 61 | function scrollBanner() { 62 | var scrollPos; 63 | var headerText = document.querySelector('.header-post .content') 64 | scrollPos = window.scrollY; 65 | 66 | if (scrollPos <= 500 && headerText != null) { 67 | headerText.style.transform = "translateY(" + (-scrollPos/3) +"px" + ")"; 68 | headerText.style.opacity = 1-(scrollPos/500); 69 | } 70 | } 71 | 72 | if (screen.width > 1024) { 73 | window.addEventListener('scroll', scrollBanner); 74 | } 75 | 76 | })( Zepto, window ); 77 | -------------------------------------------------------------------------------- /src/styl/_author.styl: -------------------------------------------------------------------------------- 1 | .author 2 | background lightGray 3 | display table 4 | width 100% 5 | padding rem(40px) 0 6 | margin rem(40px) 0 7 | +above(cut) 8 | padding rem(50px) 0 9 | .details 10 | margin auto 11 | max-width rem(800px) 12 | padding 0 rem(20px) 13 | +below(cut) 14 | text-align center 15 | img 16 | border-radius 50% 17 | display block 18 | margin auto 19 | +above(cut) 20 | float left 21 | margin-right 3.125rem 22 | .def 23 | color gray 24 | font-size 1.125rem 25 | mainFont(300) 26 | margin rem(10px) 27 | +above(cut) 28 | margin 0 29 | padding-top rem(25px) 30 | .name 31 | margin 0 32 | a 33 | mainFont() 34 | text-decoration none 35 | color black 36 | font-size rem(30px) 37 | &:hover 38 | color main 39 | +above(cut) 40 | font-size rem(45px) 41 | .desc 42 | mainFont(300) 43 | margin rem(10px) 44 | font-size rem(16px) 45 | +above(cut) 46 | font-size rem(20px) 47 | .email, 48 | .github 49 | text-decoration none 50 | color main 51 | 52 | -------------------------------------------------------------------------------- /src/styl/_elements.styl: -------------------------------------------------------------------------------- 1 | .post-content 2 | .tags 3 | margin-top rem(30px) 4 | a 5 | font-size rem(14px) 6 | color main 7 | display inline-block 8 | border 1px solid main 9 | border-radius rem(5px) 10 | padding rem(4px) rem(10px) 11 | margin-right rem(2px) 12 | margin-bottom rem(8px) 13 | text-decoration none 14 | &:hover 15 | color darken(main, 40%) 16 | border 1px solid darken(main, 40%) 17 | background #fff 18 | 19 | .img-rounded 20 | border-radius 50% -------------------------------------------------------------------------------- /src/styl/_footer.styl: -------------------------------------------------------------------------------- 1 | .comments 2 | center(rem(800px)) 3 | padding 0 rem(20px) 4 | h3 5 | margin 0 0 rem(30px) 6 | font-size rem(30px) 7 | 8 | footer 9 | background main 10 | padding rem(25px) 0 11 | margin-top 100px 12 | p,a 13 | text-decoration none 14 | mainFont(300) 15 | color sec 16 | text-align center 17 | margin 0 -------------------------------------------------------------------------------- /src/styl/_header.styl: -------------------------------------------------------------------------------- 1 | html, 2 | body 3 | height 100% 4 | 5 | $bg 6 | background-color main 7 | .content 8 | width 95% 9 | text-align center 10 | padding rem(140px) 0 rem(66px) 11 | 12 | .bar-header 13 | background sec 14 | padding rem(10px) rem(20px) 15 | box-shadow 0 -3px 9px #000 16 | position fixed 17 | width 100% 18 | z-index 10 19 | .logo 20 | margin 0 21 | line-height rem(35px) 22 | .logo a 23 | color main 24 | text-decoration none 25 | font-size rem(28px) 26 | &:after 27 | transition all .4s 28 | content ' AD' 29 | +above(cut) 30 | content ' Anon Developer' 31 | 32 | // Header Post 33 | .header-post 34 | @extends $bg 35 | min-height rem(500px) 36 | position fixed 37 | width 100% 38 | .content 39 | margin auto 40 | max-width rem(800px) 41 | .subheader 42 | display table 43 | padding 20px 44 | a 45 | border 2px solid sec 46 | border-radius 20px 47 | padding 0 10px 48 | +above(cut) 49 | padding 0 10px 50 | 51 | .date 52 | mainFont(300) 53 | font-size rem(16px) 54 | h1 55 | font-size rem(30px) 56 | margin 0 0 30px 57 | text-shadow 3px 3px darken(main, 20%) 58 | +above(cut) 59 | font-size rem(60px) 60 | .subtitle 61 | mainFont(300) 62 | font-size rem(20px) 63 | h1,.subtitle, .date 64 | color sec 65 | text-align center 66 | a,p 67 | color sec 68 | text-decoration none 69 | mainFont(300) 70 | font-size rem(18px) -------------------------------------------------------------------------------- /src/styl/_hightlight.styl: -------------------------------------------------------------------------------- 1 | pre 2 | background #222 3 | width 100% 4 | padding rem(20px) 0 5 | color sec 6 | margin rem(30px) 0 7 | font-size rem(14px) 8 | +above(cut) 9 | font-size rem(16px) 10 | padding rem(40px) 0 11 | margin rem(50px) 0 12 | code 13 | center(rem(800)) 14 | padding 0 rem(20px) 15 | +below(cut) 16 | overflow-x: scroll; 17 | span 18 | line-height 1.5rem 19 | font-family 'Monaco','Consolas','Menlo',monospace 20 | 21 | .highlight 22 | margin rem(20px) 0 23 | +above(cut) 24 | word-wrap break-word 25 | .hll 26 | background-color #333 27 | .c, // Comment 28 | .cm, // Comment.Multiline 29 | .cp, // Comment.Preproc 30 | .c1, // Comment.Single 31 | .cs // Comment.Special 32 | color #75715e 33 | 34 | // Error 35 | .err 36 | color #960050 37 | background-color #1e0010 38 | 39 | .k, // Keyword 40 | .kc, // Keyword.Constant 41 | .kd, // Keyword.Declaration 42 | .kp, // Keyword.Pseudo 43 | .kr, // Keyword.Reserved 44 | .kt, // Keyword.Type 45 | .no // Name.Constant 46 | color #66d9ef 47 | 48 | .l, // Literal 49 | .mf, // Literal.Number.Float 50 | .mh, // Literal.Number.Hex 51 | .mi, // Literal.Number.Integer 52 | .mo, // Literal.Number.Oct 53 | .se, // Literal.String.Escape 54 | .il // Literal.Number.Integer.Long 55 | color #ae81ff 56 | 57 | .o, // Operator 58 | .p // Punctuation 59 | color #f7f7f2 60 | 61 | .m, // Literal.Number 62 | .n, // Name 63 | .nb, // Name.Builtin 64 | .ni, // Name.Entity 65 | .nl, // Name.Label 66 | .nn, // Name.Namespace 67 | .py, // Name.Property 68 | .nv, // Name.Variable 69 | .w, // Text.Whitespace 70 | .bp, // Name.Builtin.Pseudo 71 | .vc, // Name.Variable.Class 72 | .vg, // Name.Variable.Global 73 | .vi // Name.Variable.Instance 74 | color #a4d043 75 | 76 | .kn, // Keyword.Namespace 77 | .nt, // Name.Tag 78 | .ow // Operator.Word 79 | color #f92672 80 | 81 | .ge // Generic.Emph 82 | font-style italic 83 | 84 | .gs // Generic.Strong 85 | font-weight bold 86 | 87 | .ld, // Literal.Date 88 | .s, // Literal.String 89 | .sb, // Literal.String.Backtick 90 | .sc, // Literal.String.Char 91 | .sd, // Literal.String.Doc 92 | .s2, // Literal.String.Double 93 | .sh, // Literal.String.Heredoc 94 | .si, // Literal.String.Interpol 95 | .sx, // Literal.String.Other 96 | .sr, // Literal.String.Regex 97 | .s1, // Literal.String.Single 98 | .ss // Literal.String.Symbol 99 | color #e6db74 100 | 101 | .na, // Name.Attribute 102 | .nc, // Name.Class 103 | .nd, // Name.Decorator 104 | .ne, // Name.Exception 105 | .nf, // Name.Function 106 | .nx // Name.Other 107 | color #a6e22e -------------------------------------------------------------------------------- /src/styl/_home.styl: -------------------------------------------------------------------------------- 1 | main 2 | padding-top rem(100px) 3 | 4 | .row 5 | center(rem(1030px)) 6 | 7 | .flex-grid 8 | display flex 9 | flex-flow row wrap 10 | 11 | .title-category 12 | center(rem(1000px)) 13 | font-size rem(40px) 14 | margin-top 0 15 | text-transform uppercase 16 | padding 0 rem(15px) 17 | 18 | .box-item 19 | flex 1 0 300px 20 | margin 0 rem(15px) rem(50px) 21 | display inline-block 22 | border 1px solid #eee 23 | border-radius 5px 24 | min-height rem(285px) 25 | transition all .3s 26 | position relative 27 | cursor: pointer 28 | 29 | &:hover 30 | box-shadow 1px 2px 10px #eee 31 | a 32 | text-decoration none 33 | &:hover 34 | .box-item 35 | box-shadow 10px 10px 10px #eee 36 | .box-body 37 | padding rem(25px) 38 | time 39 | font-size rem(14px) 40 | color #b2bac2 41 | h2 42 | margin rem(5px) 0 rem(15px) 43 | font-size rem(20px) 44 | mainFont(800) 45 | color main 46 | span 47 | color 48 | p 49 | margin 0 0 rem(20px) 50 | color #576366 51 | font-size rem(14px) 52 | line-height rem(22px) 53 | .tags a 54 | color main 55 | padding rem(5px) rem(10px) 56 | border-radius 3px 57 | display inline-block 58 | margin 0 0 rem(5px) 59 | z-index 50 60 | 61 | .ribbon 62 | position absolute 63 | right -5px 64 | top -5px 65 | z-index 1 66 | overflow hidden 67 | width 75px 68 | height 75px 69 | text-align right 70 | span 71 | font-size rem(12px) 72 | font-weight bold 73 | color #FFF 74 | text-transform uppercase 75 | text-align center 76 | line-height 20px 77 | transform rotate(45deg) 78 | -webkit-transform rotate(45deg) 79 | width 100px 80 | display block 81 | background #B31917 82 | position absolute 83 | top 19px 84 | right: -21px 85 | &:before 86 | content "" 87 | position absolute 88 | left 0px 89 | top 100% 90 | z-index -1 91 | border-left 3px solid main 92 | border-right 3px solid transparent 93 | border-bottom 3px solid transparent 94 | border-top 3px solid main 95 | &:after 96 | content "" 97 | position absolute 98 | right 0px 99 | top 100% 100 | z-index -1 101 | border-left 3px solid transparent 102 | border-right 3px solid main 103 | border-bottom 3px solid transparent 104 | border-top 3px solid main 105 | -------------------------------------------------------------------------------- /src/styl/_icons.styl: -------------------------------------------------------------------------------- 1 | size(width = 30, height = 30) 2 | width width px 3 | height height px 4 | 5 | .icons-home 6 | text-align center 7 | a 8 | display inline-block 9 | padding rem(15px) 10 | margin rem(2px) 11 | border-radius 50% 12 | border rem(2px) solid sec 13 | line-height 0 14 | transition all .7s 15 | .icon 16 | fill sec 17 | size(18,18) 18 | +above(cut) 19 | size() 20 | &:hover 21 | background sec 22 | .icon 23 | fill main 24 | 25 | .down 26 | position absolute 27 | bottom 50px 28 | width 100% 29 | display block 30 | text-align center 31 | .icon 32 | align(both) 33 | size(100,100) 34 | fill sec 35 | animation pulse 1.3s infinite -------------------------------------------------------------------------------- /src/styl/_menu.styl: -------------------------------------------------------------------------------- 1 | *, *:before, *:after 2 | -moz-box-sizing border-box 3 | -webkit-box-sizing border-box 4 | box-sizing border-box 5 | 6 | body 7 | left 0 8 | right 0 9 | margin auto 10 | 11 | a, aside, .overlay, body 12 | transition all .25s ease 13 | a.slideButton, .dosearch 14 | position fixed 15 | display block 16 | width 40px 17 | height 40px 18 | top 10px 19 | z-index 17 20 | .slideButton 21 | right 60px 22 | .dosearch 23 | right 10px 24 | border-radius rem(3px) 25 | padding rem(2px) rem(3px) 26 | .icon-menu 27 | cursor pointer 28 | padding rem(5px) 29 | border-radius rem(3px) 30 | width rem(40px) 31 | height rem(40px) 32 | fill main 33 | .icon-search 34 | width rem(35px) 35 | height rem(35px) 36 | 37 | .overlay 38 | cursor pointer 39 | 40 | #close 41 | display none 42 | fill sec 43 | 44 | aside 45 | position fixed 46 | height 100% 47 | width rem(240px) 48 | padding rem(40px) 0 0 49 | top 0 50 | right rem(-240px) 51 | background-color main 52 | z-index 20 53 | box-shadow inset -10px -1px 15px -9px rgba(0,0,0,0.5) 54 | h2 55 | text-align center 56 | margin 0 0 rem(10px) 57 | mainFont(800) 58 | font-size rem(20px) 59 | color sec 60 | nav 61 | ul 62 | padding 0 63 | li 64 | margin 0 65 | list-style-type none 66 | a 67 | width 100% 68 | display block 69 | padding rem(20px) 70 | text-decoration none 71 | mainFont(300) 72 | color sec 73 | border-top 1px solid sec 74 | &:hover 75 | color main 76 | background sec 77 | .feed 78 | border-bottom 1px solid sec 79 | &.slide 80 | right 0 81 | 82 | 83 | .slide #close 84 | right rem(250px) 85 | position fixed 86 | pointer-events none 87 | 88 | .overlay 89 | position fixed 90 | width 100% 91 | height 100% 92 | top 0 93 | right 0 94 | pointer-events none 95 | background transparent 96 | z-index 17 97 | &.slide 98 | pointer-events auto 99 | right 240px 100 | background rgba(0,0,0,.6) -------------------------------------------------------------------------------- /src/styl/_post.styl: -------------------------------------------------------------------------------- 1 | $padding-title-header 2 | &:before 3 | display block 4 | content " " 5 | margin-top -60px 6 | height 75px 7 | visibility hidden 8 | .post 9 | position relative 10 | top rem(500px) 11 | background #fff 12 | .post-content 13 | padding rem(40px) 0 14 | img 15 | max-width 100% 16 | margin rem(30px) auto 17 | display block 18 | p, h1, h2, h3, h4,ul,ol, .tags, iframe, .button-post 19 | center(rem(800px)) 20 | padding 0 rem(20px) 21 | margin 0 auto rem(30px) 22 | mainFont(300) 23 | font-size rem(18px) 24 | line-height 2 25 | letter-spacing 0.01rem 26 | +above(cut) 27 | font-size rem(20px) 28 | li 29 | padding rem(10px) 0 30 | ul 31 | margin-bottom 0 32 | p,li 33 | color texts 34 | code 35 | color main 36 | word-wrap break-word 37 | a 38 | color main 39 | border-bottom 2px dashed main 40 | mainFont(300) 41 | text-decoration none 42 | transition all .3s 43 | &:hover 44 | background main 45 | color #fff 46 | .externalLink:after 47 | display inline-block 48 | content '' 49 | color main 50 | background-image url('../img/external.svg') 51 | background-size 100% 52 | margin-left rem(5px) 53 | width rem(18px) 54 | height rem(18px) 55 | iframe 56 | margin-top rem(30px) 57 | width 100% 58 | #twitter-widget-0, 59 | .instagram-media 60 | margin auto !important 61 | h1,h2,h3,h4,h5 62 | mainFont(800) 63 | @extend $padding-title-header 64 | h1 65 | font-size rem(30px) 66 | line-height 1.4 67 | +above(cut) 68 | font-size rem(45px) 69 | h2 70 | font-size rem(22px) 71 | line-height 1.4 72 | +above(cut) 73 | font-size rem(35px) 74 | h3 75 | font-size rem(18px) 76 | line-height 1.4 77 | +above(cut) 78 | font-size rem(25px) 79 | ul,ol 80 | padding-left rem(40px) 81 | ul.post-list 82 | padding 0 83 | &.svg-serie p 84 | padding 0 85 | +below(cut) 86 | padding 0 rem(20px) 87 | blockquote 88 | center(rem(730px)) 89 | border-left rem(5px) solid main 90 | padding 0 rem(30px) 91 | margin rem(50px) auto 92 | +below(cut) 93 | width 90% 94 | p 95 | color rgba(0,0,0,0.6) 96 | margin 0 97 | +below(cut) 98 | font-size rem(18px) 99 | line-height 1.5 100 | padding 0 101 | hr 102 | center(rem(760px)) 103 | border 1px solid lightGray 104 | margin 50px auto 105 | 106 | > table 107 | margin rem(50px) auto 108 | +below(cut) 109 | display none 110 | th, td 111 | border rem(2px) solid #ccc 112 | padding rem(5px) 113 | 114 | td > pre 115 | padding 0 116 | margin 0 117 | 118 | td.gutter.gl 119 | padding-right rem(25px) 120 | line-height rem(24px) 121 | 122 | .tag-title 123 | mainFont(300) 124 | font-size rem(36px) 125 | margin-top rem(60px) 126 | center(rem(800px)) 127 | @extend $padding-title-header 128 | +below(cut) 129 | font-size rem(28px) 130 | margin-top rem(20px) 131 | padding 0 rem(20px) 132 | 133 | .post-list 134 | list-style none 135 | margin rem(25px) auto 136 | +below(cut) 137 | padding 0 rem(20px) 138 | a 139 | display block 140 | border-bottom 1px solid darken(lightGray,10%) 141 | padding rem(10px) 0 142 | text-decoration none 143 | transition all .5s 144 | &:hover 145 | color darken(main, 50%) 146 | border-bottom 1px solid darken(main, 50%) 147 | background #fff 148 | .entry-date 149 | float right 150 | +below(cut) 151 | display none 152 | -------------------------------------------------------------------------------- /src/styl/_search.styl: -------------------------------------------------------------------------------- 1 | /*--search--*/ 2 | input[type="search"] 3 | -webkit-box-sizing content-box 4 | -moz-box-sizing content-box 5 | -ms-box-sizing content-box 6 | box-sizing content-box 7 | -webkit-appearance textfield 8 | 9 | input[type="search"]::-webkit-search-decoration, 10 | input[type="search"]::-webkit-search-cancel-button 11 | -webkit-appearance none 12 | 13 | .search-wrapper 14 | z-index 19 15 | &.active 16 | transform translateY(0) 17 | 18 | .search-form 19 | position relative 20 | top 0 21 | transform translateX(-200px) 22 | z-index 19 23 | width 100% 24 | opacity 0 25 | transition all 200ms 100ms cubic-bezier(0,0.6,0.4,1) 26 | h4 27 | margin rem(10px) 0 28 | .search-field 29 | width 100% 30 | mainFont(300) 31 | font-size rem(26px) 32 | color #fff 33 | background-color transparent 34 | border 0 35 | border-bottom 1px solid #fff 36 | border-radius 0 37 | box-shadow none 38 | background-clip padding-box 39 | -webkit-appearance none 40 | &:focus 41 | outline 0 42 | box-shadow none 43 | &.active 44 | top 0 45 | transform translateX(0) 46 | opacity 1 47 | &.hidden 48 | display none 49 | .icon-remove-sign 50 | position absolute 51 | top 0 52 | right 0 53 | z-index 1 54 | display block 55 | fill sec 56 | width 30px 57 | height 30px 58 | text-align center 59 | cursor pointer 60 | &::-webkit-input-placeholder 61 | font-size rem(26px) 62 | 63 | 64 | .search-form .search-field::-webkit-search-decoration, 65 | .search-form .search-field::-webkit-search-cancel-button, 66 | .search-form .search-field::-webkit-search-results-button, 67 | .search-form .search-field::-webkit-search-results-decoration 68 | display none 69 | 70 | .search-form 71 | .search-list 72 | position absolute 73 | width 100% 74 | mainFont(300) 75 | display none 76 | .active & 77 | display block 78 | h4, li, p, a, a:hover 79 | color sec 80 | 81 | body 82 | &.search-overlay 83 | overflow hidden 84 | &:after 85 | position fixed 86 | top 0 87 | left 0 88 | z-index 18 89 | width 100% 90 | height 100% 91 | min-height 100% 92 | background-color rgba(0,0,0,0.6) 93 | content '' 94 | +below(cut) 95 | background-color main 96 | 97 | 98 | .search-wrapper 99 | position fixed 100 | top 50px 101 | width 100% 102 | padding-right 10% 103 | padding-left 10% 104 | transform translateY(-200px) 105 | *zoom 1 106 | &:after, &:before 107 | display table 108 | line-height 0 109 | content "" 110 | &:after 111 | clear both 112 | 113 | .search-wrapper:before, 114 | .search-wrapper:after 115 | display table 116 | line-height 0 117 | content "" 118 | 119 | .search-list 120 | padding 0 121 | margin 0 122 | list-style-type none 123 | +below(cut) 124 | height 380px 125 | overflow scroll 126 | .entry-date 127 | float right 128 | display none 129 | font-size 14px 130 | text-transform uppercase 131 | a 132 | text-decoration none 133 | display block 134 | padding rem(15px) 0 135 | width 100% 136 | border-bottom 1px solid sec 137 | &:hover 138 | color darken(sec, 30%) 139 | border-bottom 1px solid darken(sec, 30%) 140 | 141 | +above(48em) 142 | .search-wrapper 143 | top 100px 144 | .search-list .entry-date 145 | display inline 146 | -------------------------------------------------------------------------------- /src/styl/_share.styl: -------------------------------------------------------------------------------- 1 | .share 2 | center(800px) 3 | text-align center 4 | border-top 1px solid lightGray 5 | padding-top rem(20px) 6 | article & 7 | border-top none 8 | svg 9 | margin rem(15px) 10 | size(35,35) 11 | a 12 | text-decoration none 13 | border none 14 | -------------------------------------------------------------------------------- /src/styl/_theme-colors.styl: -------------------------------------------------------------------------------- 1 | themes = { 2 | post-jekyll: #B31917, 3 | post-css: #2DA0C3, 4 | post-js: #D6BA32, 5 | post-html: #EB7728, 6 | post-svg: #7D669E, 7 | post-dev: #637a91, 8 | post-misc: #7AAB13 9 | } 10 | 11 | for theme, category-color in themes 12 | .{theme} 13 | .title-category 14 | color category-color 15 | .post-content 16 | h1,h2,h3,h4 17 | color category-color 18 | a 19 | color category-color 20 | border-bottom 2px dashed category-color 21 | &:hover 22 | background-color category-color 23 | color #fff 24 | strong 25 | color category-color 26 | p, 27 | li 28 | code 29 | color category-color 30 | blockquote 31 | border-left .313rem solid category-color 32 | 33 | .header-post, 34 | .header-site 35 | background-color category-color 36 | h1 37 | text-shadow 3px 3px darken(category-color, 20%) 38 | .bar-header 39 | .logo a 40 | color category-color 41 | .author .email, 42 | .author .github 43 | color category-color 44 | 45 | .share a 46 | &:hover svg 47 | fill category-color 48 | 49 | body 50 | &.search-overlay 51 | &:after 52 | +below(cut) 53 | background-color category-color 54 | .icon-menu 55 | fill category-color 56 | 57 | .box-body 58 | h2 59 | color category-color 60 | .tags a 61 | color category-color 62 | border 1px solid category-color 63 | &:hover 64 | color: #fff 65 | background: category-color 66 | aside 67 | background-color category-color 68 | nav li a:hover 69 | color category-color 70 | .ribbon span 71 | background-color category-color 72 | &:before 73 | border-left 3px solid darken(category-color, 30%) 74 | border-top 3px solid darken(category-color, 30%) 75 | &:after 76 | border-right 3px solid darken(category-color, 30%) 77 | border-top 3px solid darken(category-color, 30%) 78 | footer 79 | background-color category-color 80 | -------------------------------------------------------------------------------- /src/styl/_typo.styl: -------------------------------------------------------------------------------- 1 | a 2 | -webkit-tap-highlight-color: rgba(0,0,0,0); 3 | mainFont(weight = 800) 4 | font-family 'Open Sans', sans-serif 5 | font-weight weight 6 | font-style normal 7 | 8 | h1,h2,h3,h4 9 | mainFont() 10 | 11 | .text-center 12 | text-align center -------------------------------------------------------------------------------- /src/styl/_variables.styl: -------------------------------------------------------------------------------- 1 | // COLORS 2 | main = #005F97 3 | sec = #FFFFFF 4 | lightGray = #F2F2F2 5 | texts = #333333 6 | // Resolution 7 | cut = 37.5rem -------------------------------------------------------------------------------- /src/styl/main.styl: -------------------------------------------------------------------------------- 1 | /* Syntax Quick Reference for Jeet 2 | -------------------------- 3 | column(ratios = 1, offset = 0, cycle = 0, uncycle = 0, gutter = jeet.gutter) 4 | span(ratio = 1, offset = 0) 5 | shift(ratios = 0, col_or_span = column, gutter = jeet.gutter) 6 | unshift() 7 | edit() 8 | center(max_width = 1410px, pad = 0) 9 | stack(pad = 0, align = false) 10 | unstack() 11 | align(direction = both) 12 | cf() 13 | 14 | For more info see: 15 | Kouto Swiss Doc: http://kouto-swiss.io/ 16 | Jeet Doc: http://jeet.gs 17 | 18 | And of course, look in node_modules for axis-css and jeet 19 | */ 20 | 21 | @import "kouto-swiss" 22 | @import "jeet" 23 | normalize() 24 | @import "_variables" 25 | @import "_typo" 26 | @import "_icons" 27 | @import "_menu" 28 | @import "_search" 29 | @import "_elements" 30 | @import "_header" 31 | @import "_home" 32 | @import "_post" 33 | @import "_share" 34 | @import "_hightlight" 35 | @import "_author" 36 | @import "_footer" 37 | @import "_theme-colors" -------------------------------------------------------------------------------- /tags.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: minimal 3 | title: "#Tags" 4 | permalink: /tags/index.html 5 | description: "Search for your favorite #tag." 6 | --- 7 | 8 |
    9 | {% assign tags_list = site.tags %} 10 | {% if tags_list.first[0] == null %} 11 | {% for tag in tags_list %} 12 | {{ tag }} 13 | {% endfor %} 14 | {% else %} 15 | {% for tag in tags_list %} 16 | {{ tag[0] }} 17 | {% endfor %} 18 | {% endif %} 19 | {% assign tags_list = nil %} 20 |
    21 | 22 | {% for tag in site.tags %} 23 | {{ tag[0] }} 24 |
      25 | {% assign pages_list = tag[1] %} 26 | {% for post in pages_list reversed %} 27 | {% if post.title != null %} 28 | {% if group == null or group == post.group %} 29 |
    • {{ post.title }}
      • 30 | {% endif %} 31 | {% endif %} 32 | {% endfor %} 33 | {% assign pages_list = nil %} 34 | {% assign group = nil %} 35 |
    36 | {% endfor %} --------------------------------------------------------------------------------