---
layout: page
---

<style type="text/css">
            
      #search-input {
        display: inline-block;
        color: #008989;
        background-color: #12161d;
        border-color: #223333;
        padding: .5em;
        width: 100%;
        font-size: 0.8em;
      }
        
         #search-input:focus {
        display: inline-block;
        color: #ddd;
        background-color: #12161d;
        border-color: #223333;
        border-width: thick;
        border-style: outset;
        box-shadow: -1px 1px 5px 5px #008989;
        outline: 0;
        width: 100%;
        font-size: 0.8em;
              }

    </style>

<!-- Html Elements for Search -->
<input type="text" id="search-input" placeholder="Enter keywords...">
<ul id="results-container" style="list-style-type: none;"></ul>    

<!-- Script pointing to jekyll-search.js -->
<script src="{{ site.baseurl }}/assets/js/jekyll-search.js" type="text/javascript"></script>


    <script type="text/javascript">
      SimpleJekyllSearch({
        searchInput: document.getElementById('search-input'),
        resultsContainer: document.getElementById('results-container'),
        json: '{{ site.baseurl }}/search.json',
        searchResultTemplate: '<li><a href="{url}" title="{desc}">{title}</a></li>',
        noResultsText: 'No results found',
        limit: 10,
        fuzzy: true,
        exclude: ['Welcome']
      })
    </script>

<br>
  <div id="tags">
  	<h5>tag cloud</h5>
   {% assign tags = site.tags | sort %}
{% for tag in tags %}
 <span class="site-tag">
    <a href="{{ site.baseurl }}/tag/{{ tag | first | slugify }}/"
        style="font-size: {{ tag | last | size  |  times: 4 | plus: 80  }}%">
            {{ tag[0] | replace:'-', ' ' }} ({{ tag | last | size }})
    </a>
</span>{% unless forloop.last %}&nbsp;{% endunless %}{% endfor %}

</div>


<style>
.site-tag a {
    display: inline-block;
    margin-right: 12px;
}
</style>

<br>
  <div id="categories">
  	<h5>categories</h5>
   {% assign categories = site.categories | sort %}
{% for category in categories %}
 <span class="site-category">
    <a href="{{ site.baseurl }}/{{ category | first | slugify }}/">
            {{ category[0] | replace:'-', ' ' }} ({{ category | last | size }})
    </a>
</span>{% unless forloop.last %}&nbsp;{% endunless %}{% endfor %}

</div>


<br>
<h6>Image Source: <a href="https://unsplash.com/photos/I_LgQ8JZFGE">UNSPLASH</a>


<style>
.site-category a {
    display: inline-block;
    margin-right: 12px;
}
</style>