<html lang=“en-US”>

{% include header.html %}
<div id="body-wrapper">
    <div id="content">
        {{ content }}
    </div>
</div>
{% include footer.html %}
<style>
    body {
        background-image: linear-gradient(0deg, rgba(36, 0, 10, 1) 2%, rgba(23, 45, 5, 0.8981967787114846) 100%), url("http://greengiantfm.com/wp-content/uploads/2019/10/GG_BG_C-10.jpg");
        background-position: left top;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        height: 100% !important;
    }
    .search-row{
        border: 2px dashed rgba(114, 186, 94, 0.35);
        background: rgba(114, 186, 94, 0.05);
        padding: 20px;
        transition: transform .2s; /* Animation */
    }
        .search-row:hover {
        transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        }
</style>
<script>
    $(document).ready(() => {
        const search = document.getElementById('search')
        const content = document.getElementById('content')
        search.oninput = () => {
            if (!search.value) {
                location.reload()
            }
        }
        SimpleJekyllSearch({
            searchInput: search,
            resultsContainer: content,
            json: '/search.json',
            noResultsText: '<div class="container"> <h2 class = "white-text">Sorry, we cannot find what you are looking for.</h2> </div> ',
            searchResultTemplate: 
                `<div class="container">
                    <a href="{url}">
                        <div class="row search-row">
                            <div class="col s12 m4">
                                <div>       
                                    <img style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);" class="responsive-img" src="{featured_image}" />
                                </div>
                            </div>
                            <div class="col s12 m8">
                                <div>
                                    <h3 class = "white-text" style ="margin-top:0;margin-bottom:5px;" ><b>{title}</b></h3>
                                </div>
                                <div class="white-text text-darken-2">
                                    {date}
                                </div>
                                <div class = "white-text">
                                    {content}
                                </div>
                            </div>
                        </div>
                    </a>
                </div>`,
        })
        })
</script>

</html>