Jekyll2023-01-02T14:51:08+00:00https://lekov.me/feed.xmlAsen LekovPersonal front cover web pageAdding and Configuring Social Links2017-08-14T10:15:00+00:002017-08-14T10:15:00+00:00https://lekov.me/adding-configuring-social-links<h2 id="summary">Summary:</h2>
<p>The Indigo theme allows users to maintain and display a selection of links to their social presence.
A recent modification to this functionality makes configuring and maintaining these links, very easy.</p>
<h3 id="index">Index</h3>
<ul>
<li><a href="#background">Background</a></li>
<li><a href="#improvements">Improvements</a></li>
<li><a href="#compatibility">Compatibility</a></li>
<li><a href="#additions-for-scientific-users">Additions for scientific users</a></li>
</ul>
<hr />
<h2 id="background">Background</h2>
<p>Traditionally, a pre-defined set of social links were made available for the user to enable/disable, via the use of named configuration variables in <code class="language-plaintext highlighter-rouge">_config.yml</code>, like so:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>facebook: myfacebook
twitter: mytwitter
# google: mygoogle
# instagram: myinstagram
# pinterest: mypinterest
linkedin: mylinkedin
youtube: myyoutube
spotify: myspotify
github: mygithub
email: myemail@gmail.com
</code></pre></div></div>
<p>Depending on which links were required, the user would un-comment (remove the ‘#’ symbol at the beginning of the line) specific lines of the config and replace the dummy names (<strong>myfacebook</strong>, <strong>mytwitter</strong>, etc.) with their actual IDs from each of the sites.</p>
<p>Once enabled, the <code class="language-plaintext highlighter-rouge">_includes/social-links.html</code> file would rely on the configs and display the corresponding set of links along with icon assets from <a href="https://github.com/sergiokopplin/indigo/blob/gh-pages/_includes/icons.html"><code class="language-plaintext highlighter-rouge">_include/icons.html</code></a>.</p>
<h2 id="improvements">Improvements</h2>
<p>With the existing implementation, it was not very easy to add new links or re-order them on the home page. To make this process easier, the following improvements were made.</p>
<ul>
<li>
<p>The manifest of social links was moved to a <a href="http://yaml.org">YAML</a> formatted data file, <code class="language-plaintext highlighter-rouge">_data/social-links.yml</code>, which stores the social site <code class="language-plaintext highlighter-rouge">name</code> (e.g. <strong>facebook</strong>), <code class="language-plaintext highlighter-rouge">url-prefix</code> (e.g. <strong>facebook.com/</strong>), <code class="language-plaintext highlighter-rouge">url-scheme</code> (e.g. <strong>https://</strong>) and <code class="language-plaintext highlighter-rouge">icon</code> name (only required, if the <code class="language-plaintext highlighter-rouge">icon</code> name was different from the social site <code class="language-plaintext highlighter-rouge">name</code>).</p>
<p>Here are some sample configurations:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> - name: facebook
url-prefix: facebook.com/
- name: twitter
url-prefix: twitter.com/
- name: lanyrd
url-prefix: lanyrd.com/
url-scheme: 'http://'
icon: microphone
- name: email
url-scheme: 'mailto:'
icon: mail
</code></pre></div> </div>
</li>
<li>
<p>The updated <code class="language-plaintext highlighter-rouge">_includes/social-links.html</code> file iterates over the entries in <code class="language-plaintext highlighter-rouge">_data/social-links.yml</code>, and makes use of the actual IDs configured in <code class="language-plaintext highlighter-rouge">_config.yml</code> along with the icons in <code class="language-plaintext highlighter-rouge">_includes/icons.html</code> to render the linkouts.</p>
</li>
<li>
<p>A new configuration variable called <code class="language-plaintext highlighter-rouge">social-links-order</code> in <code class="language-plaintext highlighter-rouge">_config.yml</code> allows the user to specify the explicit ordering of the linkouts (which overrides the listed order in <code class="language-plaintext highlighter-rouge">_data/social-links.yml</code> manifest file). For example:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> social-links-order: [github, facebook, twitter, medium, email]
</code></pre></div> </div>
</li>
</ul>
<h2 id="compatibility">Compatibility</h2>
<p>These changes are fully backward compatible with the previous social link configuration set in <code class="language-plaintext highlighter-rouge">_config.yml</code>. No changes are needed as long as you did not make modifications to your own <code class="language-plaintext highlighter-rouge">_includes/social-links.html</code>.</p>
<p>If you use the new <code class="language-plaintext highlighter-rouge">social-links-order</code> variable, ensure that you add all the social media names to the list, otherwise they will not show up.</p>
<h2 id="additions-for-scientific-users">Additions for scientific users</h2>
<p>For users in the scientific/academic fields who wish to link out to relevant resources that track their publication records, citation impact metrics, etc., Indigo now offers a set of scientific social linkouts to the following websites:</p>
<ul>
<li><strong>Google Scholar</strong></li>
<li><strong>ResearchGate</strong></li>
<li><strong>Mendeley</strong></li>
<li><strong>PubMed</strong></li>
<li><strong>ORCiD</strong></li>
<li><strong>Impactstory</strong></li>
<li><strong>figshare</strong></li>
</ul>johndoeSummary:Markdown Extra Components2016-02-24T22:48:00+00:002016-02-24T22:48:00+00:00https://lekov.me/markdown-extra-components<h2 id="summary">Summary:</h2>
<p>You can pick as item to see how to apply in markdown.</p>
<h4 id="especial-elements">Especial Elements</h4>
<ul>
<li><a href="#evidence">Evidence</a></li>
<li><a href="#side-by-side">Side-by-Side</a></li>
<li><a href="#star">Star</a></li>
<li><a href="#especial-breaker">Especial Breaker</a></li>
<li><a href="#spoiler">Spoiler</a></li>
</ul>
<h4 id="external-elements">External Elements</h4>
<ul>
<li><a href="#gist">Gist</a></li>
<li><a href="#codepen">Codepen</a></li>
<li><a href="#slideshare">Slideshare</a></li>
<li><a href="#videos">Videos</a></li>
</ul>
<hr />
<h2 id="evidence">Evidence</h2>
<p>You can try the evidence!</p>
<p><span class="evidence">Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.</span></p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><span</span> <span class="na">class=</span><span class="s">"evidence"</span><span class="nt">></span>Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.<span class="nt"></span></span></code></pre></figure>
<hr />
<h2 id="side-by-side">Side-by-side</h2>
<p>Like the <a href="https://medium.com/">Medium</a> component.</p>
<p><strong>Image</strong> on the left and <strong>Text</strong> on the right:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"side-by-side"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"toleft"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"image"</span> <span class="na">src=</span><span class="s">"https://lekov.me/assets/images/profile.png"</span> <span class="na">alt=</span><span class="s">"Alt Text"</span><span class="nt">></span>
<span class="nt"><figcaption</span> <span class="na">class=</span><span class="s">"caption"</span><span class="nt">></span>Photo by John Doe<span class="nt"></figcaption></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"toright"</span><span class="nt">></span>
<span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
<div class="side-by-side">
<div class="toleft">
<img class="image" src="https://lekov.me/assets/images/profile.png" alt="Alt Text" />
<figcaption class="caption">Photo by John Doe</figcaption>
</div>
<div class="toright">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<p><strong>Text</strong> on the left and <strong>Image</strong> on the right:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"side-by-side"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"toleft"</span><span class="nt">></span>
<span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"toright"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"image"</span> <span class="na">src=</span><span class="s">"https://lekov.me/assets/images/profile.png"</span> <span class="na">alt=</span><span class="s">"Alt Text"</span><span class="nt">></span>
<span class="nt"><figcaption</span> <span class="na">class=</span><span class="s">"caption"</span><span class="nt">></span>Photo by John Doe<span class="nt"></figcaption></span>
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
<div class="side-by-side">
<div class="toleft">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="toright">
<img class="image" src="https://lekov.me/assets/images/profile.png" alt="Alt Text" />
<figcaption class="caption">Photo by John Doe</figcaption>
</div>
</div>
<hr />
<h2 id="star">Star</h2>
<p>You can give evidence to a post. Just add the tag to the markdown file.</p>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">star: true</code></pre></figure>
<hr />
<h2 id="especial-breaker">Especial Breaker</h2>
<p>You can add a especial <em>hr</em> to your text.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"breaker"</span><span class="nt">></div></span></code></pre></figure>
<div class="breaker"></div>
<hr />
<h2 id="spoiler">Spoiler</h2>
<p>You can add an especial hidden content that appears on hover.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"spoiler"</span><span class="nt">><p></span>your content<span class="nt"></p></div></span></code></pre></figure>
<div class="spoiler"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<hr />
<h2 id="gist">Gist</h2>
<p>You can add Gists from github.</p>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">{ % gist sergiokopplin/91ff4220480727b47224245ee2e9c291 % }</code></pre></figure>
<script src="https://gist.github.com/sergiokopplin/91ff4220480727b47224245ee2e9c291.js"> </script>
<hr />
<h2 id="codepen">Codepen</h2>
<p>You can add Pens from Codepen.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">data-height=</span><span class="s">"268"</span> <span class="na">data-theme-id=</span><span class="s">"0"</span> <span class="na">data-slug-hash=</span><span class="s">"gfdDu"</span> <span class="na">data-default-tab=</span><span class="s">"result"</span> <span class="na">data-user=</span><span class="s">"chriscoyier"</span> <span class="na">class=</span><span class="s">'codepen'</span><span class="nt">></span>
See the Pen <span class="nt"><a</span> <span class="na">href=</span><span class="s">'https://codepen.io/chriscoyier/pen/gfdDu/'</span><span class="nt">></span>Crappy Recreation of the Book Cover of *The Flame Alphabet*<span class="nt"></a></span> by Chris Coyier (<span class="nt"><a</span> <span class="na">href=</span><span class="s">'https://codepen.io/chriscoyier'</span><span class="nt">></span>@chriscoyier<span class="nt"></a></span>) on <span class="nt"><a</span> <span class="na">href=</span><span class="s">'https://codepen.io'</span><span class="nt">></span>CodePen<span class="nt"></a></span>.
<span class="nt"></p></span>
<span class="nt"><script </span><span class="na">async</span> <span class="na">src=</span><span class="s">"//assets.codepen.io/assets/embed/ei.js"</span><span class="nt">></script></span></code></pre></figure>
<p data-height="268" data-theme-id="0" data-slug-hash="gfdDu" data-default-tab="result" data-user="chriscoyier" class="codepen">See the Pen <a href="https://codepen.io/chriscoyier/pen/gfdDu/">Crappy Recreation of the Book Cover of *The Flame Alphabet*</a> by Chris Coyier (<a href="https://codepen.io/chriscoyier">@chriscoyier</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async="" src="//assets.codepen.io/assets/embed/ei.js"></script>
<hr />
<h2 id="slideshare">Slideshare</h2>
<p>Add your presentations here!</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><iframe</span> <span class="na">src=</span><span class="s">"//www.slideshare.net/slideshow/embed_code/key/hqDhSJoWkrHe7l"</span> <span class="na">width=</span><span class="s">"560"</span> <span class="na">height=</span><span class="s">"310"</span> <span class="na">frameborder=</span><span class="s">"0"</span> <span class="na">marginwidth=</span><span class="s">"0"</span> <span class="na">marginheight=</span><span class="s">"0"</span> <span class="na">scrolling=</span><span class="s">"no"</span> <span class="na">style=</span><span class="s">"border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;"</span> <span class="na">allowfullscreen</span><span class="nt">></span> <span class="nt"></iframe></span></code></pre></figure>
<iframe src="//www.slideshare.net/slideshow/embed_code/key/hqDhSJoWkrHe7l" width="560" height="310" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen=""> </iframe>
<hr />
<h2 id="videos">Videos</h2>
<p>Do you want some videos? Youtube, Vimeo or Vevo? Copy the embed code and paste on your post!</p>
<p><strong>Example</strong></p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><iframe</span> <span class="na">width=</span><span class="s">"560"</span> <span class="na">height=</span><span class="s">"310"</span> <span class="na">src=</span><span class="s">"https://www.youtube.com/embed/r7XhWUDj-Ts"</span> <span class="na">frameborder=</span><span class="s">"0"</span> <span class="na">allowfullscreen</span><span class="nt">></iframe></span></code></pre></figure>
<iframe width="560" height="310" src="https://www.youtube.com/embed/r7XhWUDj-Ts" frameborder="0" allowfullscreen=""></iframe>jamesfosterSummary:Markdown Common Elements2016-02-24T22:44:00+00:002016-02-24T22:44:00+00:00https://lekov.me/markdown-common-elements<h2 id="basic-formatting">Basic formatting</h2>
<p>This note <strong>demonstrates</strong> some of what <a href="https://daringfireball.net/projects/markdown/">Markdown</a> is <em>capable of doing</em>.</p>
<p>And that’s how to do it.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html">This note **demonstrates** some of what [Markdown][some/link] is *capable of doing*.</code></pre></figure>
<hr />
<h2 id="headings">Headings</h2>
<p>There are six levels of headings. They correspond with the six levels of HTML headings. You’ve probably noticed them already in the page. Each level down uses one more hash character. But we are using just 4 of them.</p>
<h1 id="headings-can-be-small">Headings can be small</h1>
<h2 id="headings-can-be-small-1">Headings can be small</h2>
<h3 id="headings-can-be-small-2">Headings can be small</h3>
<h4 id="headings-can-be-small-3">Headings can be small</h4>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw"># Heading
## Heading
### Heading
#### Heading</code></pre></figure>
<hr />
<h2 id="lists">Lists</h2>
<h3 id="ordered-list">Ordered list</h3>
<ol>
<li>Item 1</li>
<li>A second item</li>
<li>Number 3</li>
</ol>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">1. Item 1
2. A second item
3. Number 3</code></pre></figure>
<h3 id="unordered-list">Unordered list</h3>
<ul>
<li>An item</li>
<li>Another item</li>
<li>Yet another item</li>
<li>And there’s more…</li>
</ul>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">* An item
* Another item
* Yet another item
* And there's more...</code></pre></figure>
<hr />
<h2 id="paragraph-modifiers">Paragraph modifiers</h2>
<h3 id="quote">Quote</h3>
<blockquote>
<p>Here is a quote. What this is should be self explanatory. Quotes are automatically indented when they are used.</p>
</blockquote>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">> Here is a quote. What this is should be self explanatory.</code></pre></figure>
<hr />
<h2 id="urls">URLs</h2>
<p>URLs can be made in a handful of ways:</p>
<ul>
<li>A named link to <a href="https://daringfireball.net/projects/markdown/basics">Mark It Down</a>.</li>
<li>Another named link to <a href="https://google.com/">Mark It Down</a></li>
<li>Sometimes you just want a URL like <a href="https://google.com/">https://google.com/</a>.</li>
</ul>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">* A named link to [MarkItDown][3].
* Another named link to [MarkItDown](https://google.com/)
* Sometimes you just want a URL like <https://google.com/>.</code></pre></figure>
<hr />
<h2 id="horizontal-rule">Horizontal rule</h2>
<p>A horizontal rule is a line that goes across the middle of the page.
It’s sometimes handy for breaking things up.</p>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">---</code></pre></figure>
<hr />
<h2 id="images">Images</h2>
<p>Markdown can also contain images. I’ll need to add something here sometime.</p>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">![Markdowm Image][/image/url]</code></pre></figure>
<p><img src="https://kune.fr/wp-content/uploads/2013/10/ghost-blog.jpg" alt="Markdowm Image" /></p>
<p><em>Figure Caption</em>?</p>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">![Markdowm Image][/image/url]
<figcaption class="caption">Photo by John Doe</figcaption></code></pre></figure>
<p><img src="https://kune.fr/wp-content/uploads/2013/10/ghost-blog.jpg" alt="Markdowm Image" /></p>
<figcaption class="caption">Photo by John Doe</figcaption>
<p><em>Bigger Images</em>?</p>
<figure class="highlight"><pre><code class="language-raw" data-lang="raw">![Markdowm Image][/image/url]{: class="bigger-image" }</code></pre></figure>
<p><img src="https://kune.fr/wp-content/uploads/2013/10/ghost-blog.jpg" alt="Markdowm Image" class="bigger-image" /></p>
<hr />
<h2 id="code">Code</h2>
<p>A HTML Example:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">></span>
<span class="nt"><title></span>Document<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Just a test<span class="nt"></h1></span>
<span class="nt"></body></span>
<span class="nt"></html></span></code></pre></figure>
<p>A CSS Example:</p>
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nt">pre</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">.8em</span><span class="p">;</span>
<span class="nl">white-space</span><span class="p">:</span> <span class="n">pre</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">pre</span><span class="o">,</span> <span class="nt">table</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">code</span><span class="o">,</span> <span class="nt">pre</span><span class="o">,</span> <span class="nt">tt</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="n">Monaco</span><span class="p">,</span> <span class="n">Consolas</span><span class="p">,</span> <span class="n">Inconsolata</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="nl">background</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">.05</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>
<p>A JS Example:</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Sticky Header</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">scroll</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">scrollTop</span><span class="p">()</span> <span class="o">></span> <span class="mi">900</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">body</span><span class="dl">"</span><span class="p">).</span><span class="nx">hasClass</span><span class="p">(</span><span class="dl">'</span><span class="s1">show-menu</span><span class="dl">'</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#hamburguer__open</span><span class="dl">'</span><span class="p">).</span><span class="nx">fadeOut</span><span class="p">(</span><span class="dl">'</span><span class="s1">fast</span><span class="dl">'</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">body</span><span class="dl">"</span><span class="p">).</span><span class="nx">hasClass</span><span class="p">(</span><span class="dl">'</span><span class="s1">show-menu</span><span class="dl">'</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#hamburguer__open</span><span class="dl">'</span><span class="p">).</span><span class="nx">fadeIn</span><span class="p">(</span><span class="dl">'</span><span class="s1">fast</span><span class="dl">'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span></code></pre></figure>johndoeBasic formatting:ramen: Indigo, minimalist jekyll theme2016-01-23T22:10:00+00:002016-01-23T22:10:00+00:00https://lekov.me/indigo-jekyll-theme<p><img src="https://raw.githubusercontent.com/sergiokopplin/indigo/gh-pages/assets/screen-shot.png" alt="Screenshot" /></p>
<p>Example of project - Indigo Minimalist Jekyll Template - <a href="https://sergiokopplin.github.io/indigo/">Demo</a>. This is a simple and minimalist template for Jekyll for those who likes to eat noodles.</p>
<hr />
<p>What has inside?</p>
<ul>
<li>Gulp</li>
<li>BrowserSync</li>
<li>Stylus</li>
<li>SVG</li>
<li>No JS</li>
<li><a href="https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fsergiokopplin.github.io%2Findigo%2F">98/100</a></li>
</ul>
<hr />
<p><a href="https://sergiokopplin.github.io/indigo/">Check it out</a> here.
If you need some help, just <a href="https://github.com/sergiokopplin/indigo/issues">tell me</a>.</p>johndoe