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

<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><%- page.title %> <small class="fw-light">Presskit</small></h1>
                <p class="lead text-muted"><%- page.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(page.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="<%- page.trailer %>" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                </div>
                </div>
            </div>
        </div>
    <% } %>
    <% if(page.developer != undefined) { %>
        <div class="container">
            <div class="row justify-content-center">
            <div class="col-lg-10">
                <dl class="row">
                    <h2 class="text-center space-bottom">Fact Sheet</h2>
                    <% if(page.developer != undefined && page.developer_url != undefined) { %>
                        <dt class="col-sm-3">Developer</dt>
                        <dd class="col-sm-9"><a href="<%- page.developer_url %>"><%- page.developer %></a></dd>
                        <% } %>
                    <% if(page.publisher != undefined && page.publisher_url != undefined) { %>
                        <dt class="col-sm-3">Publisher</dt>
                        <dd class="col-sm-9"><a href="<%- page.publisher_url %>"><%- page.publisher %></a></dd>
                    <% } %>
                    <% if(page.genre != undefined) { %>
                        <dt class="col-sm-3">Genre</dt>
                        <dd class="col-sm-9"><%- page.genre %></dd>
                    <% } %>
                    <% if(page.tags != undefined) { %>
                        <dt class="col-sm-3">Tags</dt>
                        <dd class="col-sm-9"><p><%- page.tags %></p></dd>
                    <% } %>
                    <% if(page.platforms != undefined) { %>
                        <dt class="col-sm-3">Platforms</dt>
                        <dd class="col-sm-9"><%- page.platforms %></dd>
                    <% } %>
                    <% if(page.released != undefined) { %>
                        <dt class="col-sm-3">Release</dt>
                        <dd class="col-sm-9"><%- page.released %></dd>
                    <% } %>
                    <% if(page.game_modes != undefined) { %>
                        <dt class="col-sm-3">Game Modes</dt>
                        <dd class="col-sm-9"><%- page.game_modes %></dd>
                    <% } %>
                    <% if(page.email != undefined) { %>
                        <dt class="col-sm-3">Email</dt>
                        <dd class="col-sm-9"><%- page.email %></dd>
                    <% } %>
                    <% if(page.twitter_dev != undefined) { %>
                        <dt class="col-sm-3">Twitter (dev): </dt>
                        <dd class="col-sm-9">
                            <a href="http://twitter.com/<%- page.twitter_dev %>">@<%- page.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(page.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(page.screenshots.length/3)*3) %>
                    <% for(var i = 0; i < screenshot_count; i++) { %>
                        <div class="col">
                            <div class="card shadow-sm">
                                <a href="<%- page.screenshots[i] %>" target="_BLANK">
                                <img src="<%- page.screenshots[i] %>" class="img-fluid">
                                </a>
                            </div>
                        </div>
                    <% }; %>   
                </div>
            </div>
        </div>
    <% } %>
</main>