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