layout: post


{% include header.html %} <style>

body{
    background-image: linear-gradient(0deg, rgba(36,0,10,1) 2%, rgba(23,45,5,0.8981967787114846) 100%), url("/assets/images/misc/GG_BG_C-10.jpg"); background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; height: 100% !important;
}
    .blog-image{
            object-position: bottom;
            object-fit: cover; 
            height: 30vh;   
            width: 100%; 
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
    }
    @media screen and (min-width: 480px){
            .blog-image{
            object-position: 50% 50%;
            object-fit: cover; 
            height: 60vh;   
            width: 100%; 
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
            }
            .container{
                    padding-left: 10% !important;
                    padding-right: 10% !important;
            }
    }

</style>

<div id=“body-wrapper”>

<div class="body">
        <br>
        <div id="content">
                <div class="container single-post-container">
                        <div class="row">
                                <div class="col s12 m12">
                                        <div class="">
                                                <!-- <?php if (has_post_thumbnail( $post->ID ) ): ?>
                                                  <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?> -->
                                                <div>   
                                                        <!-- <img class = "blog-image" src="<?php echo $url ?>" /> -->
                                                        {% if page.featured_image %}
                                                                <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="{{ page.featured_image }}" />
                                                        {% endif %}
                                                </div>
                                                <!-- <?php endif; ?> -->
                                                 <div class="post-title">
                                                        <h2 class ="white-text text-darken-2">
                                                                {{ page.title }}
                                                        </h2>
                                                        <div class="post-date-time white-text text-darken-2">
                                                                <!-- <?php echo get_the_date( 'M d, Y' ).' '; ?> <?php the_time( 'h:ia' ); ?> -->
                                                                {{ page.date | date: "%b %d, %Y %I:%M%P" }}
                                                        </div>
                                                </div>
                                                <hr style="margin-top:10px; margin-bottom:10px;">
                                                <div class="post-content">
                                                        <div class=" white-text text-darken-2">
                                                                {% if page.youtube_link %}
                                                                <p style="text-align: center;"><iframe width="500" height="282" src="{{ page.youtube_link }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                                                </p>
                                                                {% endif %}
                                                                {{ content }}
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                        </div>
                </div>
        </div>
</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>