kairoscope-website-2021/themes/kairoscope-theme/layout/presskit.ejs

<% var content = get_page(site.posts, page.target_id) %>

<main role="main" class="presskit">
    <section class="py-5 text-center container">
        <div class="row py-lg-5">
            <div class="col-10 mx-auto">
                <h1><%- content.title %> <small class="fw-light">Presskit</small></h1>
                <p class="lead text-muted"><%- content.description %></p>
                <a class="btn-steam" href="https://store.steampowered.com/app/1481070/Max_Raider/">
                <!-- <img src="images/button-steam.png"> -->
                </a>
            </div>
        </div>
    </section>

    <% if(content.trailer != undefined) { %>
        <div class="album py-5 bg-light">
            <div class="container container-large">
                <div class="row justify-content-center">
                <div class="col-lg-10" style="text-align: center;">
                    <div class="ratio ratio-16x9">
                    <iframe class="video-player" src="<%- content.trailer %>" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                </div>
                </div>
            </div>
        </div>
    <% } %>
    <% if(content.developer != undefined) { %>
        <div class="container" style="margin-top: 80px;">
            <div class="row justify-content-center">
            <div class="col-lg-10">
                <dl class="row">
                    <h2 class="text-center space-bottom">Fact Sheet</h2>
                    <% if(content.developer != undefined && content.developer_url != undefined) { %>
                        <dt class="col-sm-3">Developer</dt>
                        <dd class="col-sm-9"><a href="<%- content.developer_url %>"><%- content.developer %></a></dd>
                        <% } %>
                    <% if(content.publisher != undefined && content.publisher_url != undefined) { %>
                        <dt class="col-sm-3">Publisher</dt>
                        <dd class="col-sm-9"><a href="<%- content.publisher_url %>"><%- content.publisher %></a></dd>
                    <% } %>
                    <% if(content.genre != undefined) { %>
                        <dt class="col-sm-3">Genre</dt>
                        <dd class="col-sm-9"><%- content.genre %></dd>
                    <% } %>
                    <% if(content.tags != undefined) { %>
                        <dt class="col-sm-3">Tags</dt>
                        <dd class="col-sm-9">
                            <%- list_tags(content.tags, {style: false, separator: ', ', show_count: false}) %>
                        </dd>
                         %>
                    <% } %>
                    <% if(content.platforms != undefined) { %>
                        <dt class="col-sm-3">Platforms</dt>
                        <dd class="col-sm-9"><%- content.platforms %></dd>
                    <% } %>
                    <% if(content.release != undefined && content.released != undefined) { %>
                        <dt class="col-sm-3">
                            <% if(content.released) { %>
                                Released
                            <% } else { %>
                                Release date
                            <% } %>
                        </dt>
                        <dd class="col-sm-9"><%- content.release %></dd>
                    <% } %>
                    <% if(content.game_modes != undefined) { %>
                        <dt class="col-sm-3">Game Modes</dt>
                        <dd class="col-sm-9"><%- content.game_modes %></dd>
                    <% } %>
                    <% if(content.email != undefined) { %>
                        <dt class="col-sm-3">Email</dt>
                        <dd class="col-sm-9"><%- content.email %></dd>
                    <% } %>
                    <% if(content.twitter_dev != undefined) { %>
                        <dt class="col-sm-3">Twitter (dev): </dt>
                        <dd class="col-sm-9">
                            <a href="http://twitter.com/<%- content.twitter_dev %>">@<%- content.twitter_dev %></a>
                        </dd>
                    <% } %>
                </dl>
            </div>
            </div>
        </div>
    <% } %>

    <section class="container" style="margin-bottom: 80px;">
        <div class="row">
            <div class="col-10 mx-auto presskit-content">
                <%- page.content %>
                </a>
            </div>
        </div>
    </section>

    <% if(content.screenshots != undefined) { %>
        <div class="album py-3 bg-light">
            <div class="container-fluid content">
                <div class="row">
                    <div class="col-12">
                        <h2>Screenshots</h2>
                    </div>
                </div>
                <div class="row py-5 row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 space-bottom">
                    <% var screenshot_count = (Math.round(content.screenshots.length/3)*3) %>
                    <% for(var i = 0; i < screenshot_count; i++) { %>
                        <div class="col">
                            <div class="card shadow-sm">
                                <a href="<%- content.screenshots[i] %>" target="_BLANK">
                                <img src="<%- content.screenshots[i] %>" class="img-fluid">
                                </a>
                            </div>
                        </div>
                    <% }; %>   
                </div>
            </div>
        </div>
    <% } %>
</main>