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>