{% extends \"base.html\" %}\n{% load has_user_annotations readux_templatetags sass_tags static user_annotation_count wagtailcore_tags wagtailimages_tags %}\n\n{% block extra_css %}\n<style>\n .landing {\n margin: 0;\n padding: 0;\n height: 80vh;\n min-height: 500px;\n {% if background_image_url %}\n background: url('{{ background_image_url }}') no-repeat center center fixed;\n background-size: cover;\n {% else %}\n background: linear-gradient(135deg, #1D3557, #457B9D);\n {% endif %}\n background-size: cover;\n }\n</style>\n{% endblock %}\n\n{% block nav %}\n<div class=\"home-nav\">\n {% include '_home/_nav.html' %}\n</div>\n{% endblock nav %}\n\n{% block content %}\n\n{% if request.path == '/' %}\n<div class=\"landing\"{% if page.background_image %}\n {% image page.background_image scale-100 as bgimg %}\n style=\"background: url({{ bgimg.url }}) no-repeat center center fixed; background-size: cover;\"\n {% endif %} >\n <div class=\"overlay\"></div>\n <div class=\"content\">\n {% include '_home/_hero.html' %}\n {% if page.featured_story_title and page.featured_story_url %}\n {% include '_home/_featured_story.html' %}\n {% else %}\n <div class=\"uk-section uk-section-default uk-padding-remove-top\"></div> <!-- Filler Div -->\n {% endif %}\n {% if page.featured_volumes.all.count != 0 %}\n {% include '_home/_featured_volumes.html' %}\n {% endif %}\n {% if page.featured_collections.all.count != 0 %}\n {% include '_home/_featured_collections.html' %}\n {% endif %}\n {% if page.featured_video_url %}\n {% include '_home/_video.html' %}\n {% endif %}\n <div class=\"space\"></div>\n {% include '_home/_footer.html' %}\n </div>\n</div>\n{% endif %}\n\n{% endblock %}\n\n\n{% block extra_javascript %}\n {% if page.featured_video_url %}\n <script src=\"https://player.vimeo.com/api/player.js\"></script>\n <script>\n var iframe = document.getElementById('vimeoPlayer');\n var player = new Vimeo.Player(iframe);\n var thumbnail = document.getElementById('videoThumbnail');\n var overlay = document.getElementById('videoOverlay');\n\n document.getElementById('videoOverlay').addEventListener('click', function() {\n // Hide the overlay and thumbnail\n overlay.style.display = 'none';\n thumbnail.style.display = 'none';\n\n // Show the iframe and play the video in full screen\n iframe.style.display = 'block';\n\n player.play().then(function() {\n return player.requestFullscreen();\n }).catch(function(error) {\n console.error('Error playing the video:', error);\n });\n });\n\n player.on('ended', function() {\n // Hide the iframe and show the overlay and thumbnail again\n iframe.style.display = 'none';\n overlay.style.display = 'block';\n thumbnail.style.display = 'block';\n });\n\n player.on('fullscreenchange', function(data) {\n if (!data.fullscreen) {\n player.pause().then(function() {\n // Hide the iframe and show the overlay and thumbnail again\n iframe.style.display = 'none';\n overlay.style.display = 'block';\n thumbnail.style.display = 'block';\n }).catch(function(error) {\n console.error('Error pausing the video:', error);\n });\n }\n });\n </script>\n {% endif %}\n \n <script>\n document.addEventListener('DOMContentLoaded', function () {\n // Select all .uk-section elements inside .content\n const sections = document.querySelectorAll('.content > .uk-section');\n\n // Apply padding-bottom: 0 to all sections\n sections.forEach(section => {\n section.style.paddingBottom = '0';\n });\n\n // Add specific padding to the last .uk-section\n if (sections.length > 0) {\n const lastSection = sections[sections.length - 1];\n lastSection.style.paddingBottom = '70px';\n }\n });\n </script>\n\n{% endblock %}\n