{% include header.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;
}
@media screen and (min-width: 800px) {
        .vertically-centered {
                display: flex;
                justify-content: center;
                align-items: center;
        }
}
.vertically-centered-on-mobile-and-web {
        display: flex;
        justify-content: center;
        align-items: center;
}
.flex {
                display: flex !important;
                flex-wrap: wrap !important;
        }

</style>

<div id=“body-wrapper”>

<div class="container" id="content">
        <div class="row flex" style="padding-top: 50px;">
                <div class="col s12 m4" style = "">
                        {% if page.featured_image %}
                                <img class="responsive-img" src="{{ page.featured_image }}" style=" position: sticky;
                                        position: -webkit-sticky;
                                        width: 100%;
                                        height: auto;
                                        top: 20px;
                                        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5); border-bottom: 10px;" />
                        {% endif %}
                </div>
                <div class="col s12 m8" style ="">
                        <div>
                                <h4 class="white-text text-darken-2" style="margin-block-start: 0 !important;"><b>{{ page.title }}</b></h4>
                                <div class="white-text text-darken-2">
                                        {% if page.start_date %}
                                                {{ page.start_date }}
                                        {% endif %}
                                        {% if page.end_date %}
                                                - {{ page.end_date }}
                                        {% endif %}
                                </div>
                                <div class="white-text text-darken-3">
                                        {% if page.location %}
                                                {{ page.location }}
                                        {% endif %}
                                </div>
                                <div class="white-text text-darken-3">
                                        {% if page.time %}
                                                {{ page.time }}
                                        {% endif %}
                                </div>
                                <hr style="margin-top:10px; margin-bottom:10px;">
                                <div class="white-text text-darken-3">
                                        {{ content }}
                                </div>
                        </div>
                </div>
        </div>
</div>

</div>

<script>

$("img").addClass("responsive-img")

</script>

{% 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>