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

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

<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.media != undefined) { %>
        <% if(content.media.screenshots != undefined) { %>
            <div class="album py-3 bg-light" style="margin-bottom: 80px;">
                <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.media.screenshots.list.length/3)*3) %>
                        <% for(var i = 0; i < screenshot_count; i++) { %>
                            <div class="col">
                                <div class="card shadow-sm">
                                    <a href="<%- content.media.screenshots.list[i] %>" target="_BLANK">
                                    <img src="<%- content.media.screenshots.list[i] %>" class="img-fluid">
                                    </a>
                                </div>
                            </div>
                        <% }; %>   
                    </div>
                </div>
            </div>
        <% } %>
    <% } %>

    <section class="container" style="margin-bottom: 80px;">
        <div class="row">
            <div class="col-12" style="padding-bottom: 20px;">
                <h2>Media</h2>
            </div>
        </div>
        <div class="row">
            <% for (const [key, value] of Object.entries(content.media)) { %> 
                <% var media = content.media[key]; %>
                <% if(media.hide_media == undefined || media.hide_media == false) { %>
                    <% var c = 'col-md-8'; %>
                    <% if (media.media_type != 'image' && media.media_type != 'ai') c = 'col-md-12' %>
                    <div class="card mb-3 col-12">
                        <div class="row g-0">
                            <div class="<%- c %>">
                                <div class="card-body">
                                    <h5 class="card-title">
                                        <a target="_BLANK" href="<%- media.path %>" 
                                            v-on:click="mixpanelTrack('Media Download', { media_name: '<%- media.name %>', media_type: '<%- media.media_type %>', link : '<%- media.path %>', parent: '<%- page.title %>'})">
                                            <%- media.name %> 
                                        </a>
                                    </h5>
                                    <p class="card-text" style="margin-bottom: 12px;">
                                        <%- media.description %>
                                    </p>
                                    <p class="card-text" >
                                        <span class="text-muted">
                                            <i class="far fa-file-image"></i>
                                        </span>
                                        <small class="text-muted" style="padding-left: 10px;">
                                            <%- media.file_size %>
                                        </small>
                                        <% if(media.image_size != undefined)  { %>
                                            <small class="text-muted" style="padding-left: 10px;">
                                                <%- media.image_size %>
                                            </small>
                                        <% } %>
                                    </p>
                                </div>
                            </div>
                            <% if(media.media_type == 'image' || media.media_type == 'ai') { %>
                                <div class="col-md-4 image-box">
                                    <a target="_BLANK" href="<%- media.path %>"
                                        v-on:click="mixpanelTrack('Media Download', { media_name: '<%- media.name %>', media_type: '<%- media.media_type %>', link : '<%- media.path %>', parent: '<%- page.title %>'})">
                                        <% if(media.preview_path == undefined) { %>
                                            <img src="<%- media.path %>" class="img-fluid" alt="...">
                                        <% } else { %>
                                            <img src="<%- media.preview_path %>" class="img-fluid" alt="...">
                                        <% } %> 
                                    </a>
                                </div>
                            <% } %>
                        </div>
                    </div>
                <% } %>           
            <% } %>
        </div>
    </section>
    <% if(page.links != undefined) { %>
    <section class="container" style="margin-bottom: 80px;">
        <div class="row">
            <div class="col-12" style="padding-bottom: 20px;">
                <h2 class="presskit">Links</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <ul>
                    <% for (const link of page.links) { %>
                        <li class="favicon-link" style="list-style-image: url('<%- link.favicon %>');">
                            <a href="<%- link.link %>"><%- link.name %></a>
                        </li>
                    <% } %>
                </ul>
            </div>
        </div>
    </section>
    <% } %>
</main>

<footer>
    <div class="container text-center spacer-bottom" style="padding-top: 100px;">
        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-5 col-8">
                <a href="/">
                <img src="/Kairoscope_logo_webhigh.jpg" class="img-fluid">
                </a>
            </div>
        </div>
    </div>
</footer>