<!DOCTYPE html>
<html>

<head>
    <title>Welcome | Definity</title>
<%- include('../partials/head', {host: host}); %>
        * {
            font-family: 'Helvetica';
            color:black;
            margin: 0;
        }

        body {
            background-color: rgb(255,255,255);
        }

        .box {
            display:inline-block;
            border:1px solid black;
            background-color:rgb(255, 255, 255);
            margin-right: 5px;
            padding:15px;
            transition:1s;
            width:500px;
        }
        .box:hover {
            padding:30px;
        }

        .background-color {
            background-color: rgb(205, 205, 205);
        }

        button {
            border:1px solid black;
            border-radius: 2px;
            background-color: white;
            color:black;
            font-size: 150%;
        }

        @media (prefers-color-scheme: dark) {
            * {
                font-family: 'Helvetica';
                color:white;
            }

            .background-color {
                background-color: rgb(0,0,0);
            }

            body {
                background-color: rgb(0,0,0);
            }

            .box {
                background-color:rgb(0, 0, 0);
                border:1px solid white;
            }

            button {
                border:1px solid white;
                border-radius: 2px;
                background-color: black;
                color:white;
                font-size: 150%;
            }
        }
        </style>
</head>

<body style="background: linear-gradient(90deg, rgba(255,80,34,1) 0%, rgba(163,37,112,1) 100%); margin:0;">
    <%- include('../partials/navbar'); %>
        <div style="text-align: center;">
            <span style="font-size: 300%;font-family:Changa;">DEFINITY</span><br>
            <span style="font-size: 100%;">The blog from the people behind a few things that respect humanity.</span>
        </div>
        <br>
        <div style="text-align: center;">
            <h1>Latest Posts</h1>
            <% if (!posts.length) { %>
                <p>No posts yet. Check back here soon!</p>
            <% } else { %>
            <% posts.forEach(post => { %>
                <span>
                    <b><%= post.title %></b> 
                    by 
                    <% if (post.username == 'master')  { %>
                        <b>the Definity team</b>
                    <% } else { %>
                        <b><%- post.username %></b>
                    <% } %>
                </span>
                <br>
            <% })}; %>
        </div>
        <br>
        <footer style="text-align: center">
            <%- include('../partials/footer'); %>
        </footer>
</body>

</html>