<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
    <!-- PWA -->
    <link rel="manifest" href="static/manifest.json" />
    <!-- ios support -->
    <link rel="apple-touch-icon" href="static/img/icons/default.png" />
    <link rel="apple-touch-icon" href="static/img/icons/default.png" />
    <link rel="apple-touch-icon" href="static/img/icons/default.png" />
    <link rel="apple-touch-icon" href="static/img/icons/default.png" />
    <link rel="apple-touch-icon" href="static/img/icons/default.png" />
    <link rel="apple-touch-icon" href="static/img/icons/default.png" />
    <link rel="apple-touch-icon" href="static/img/icons/default.png" />
    <link rel="apple-touch-icon" href="static/img/icons/default.png" />
    <meta name="apple-mobile-web-app-status-bar" content="#fff" />
    <meta name="theme-color" content="#db4938" />
    <!-- End PWA -->
    <link rel="icon" type="image/png" href="static/img/icons/default.png">
    <meta name="theme-color" content="#3c790a">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    <meta name="author" content="Tu nombre">
    <meta name="generator" content="RSSPAPER">
    <meta name="description" content="My news">
    <meta property="og:image" content="img/screenshot.png">
    <meta property="og:title" content="The Rock">
    <meta property="og:type" content="website">
    <!-- Normalize -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <!-- End Normalize -->
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
    <!-- End Fonts -->
    <!-- CSS -->
    <style>
        /* Global */
        :root {
            --color-black: black;
            --color-gray: gray;
            --height-img: 10rem;
        }
        body {
            margin: 0;
            padding: 0;
            font-family: 'Newsreader', serif;
            color: var(--color-black);
        }
        img {
            object-fit: cover;
            object-position: center;
        }
        img, video, iframe {
            width: 100%;
        }
        a {
            color: var(--color-black);
            text-decoration: none;
        }
        pre {
            overflow-x: auto;
        }
        .container {
            max-width: 62rem;
            margin: 0 auto;
            padding: 1rem;
        }

        .header {
            margin-bottom: 2rem;
        }

        .title {
            text-align: center;
            font-size: 4rem;
            font-weight: normal;
            margin-bottom: 0;
            margin-top: 1rem;
        }
        .subtitle {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: -1rem;
            font-weight: normal;
            font-size: 1.5rem;
        }
        .subtitle__separator {
            font-size: 3rem;
            font-weight: bold;
        }
        .separator {
            border: 0;
            background: var(--color-black);
            height: 1px;
        }
        .footer__text {
            text-align: center;
            padding: 1rem 0;
        }
        .footer__link {
            font-weight: bold;
        }
        .footer__heard {
            display: inline-block;
            margin-left: .3rem;
        }
        .article__title, .article__feed {
            font-weight: normal;
        }

        .article__header-img > a > img {
            height: var(--height-img);
            object-position: center;
            object-fit: contain;
        }
        .article__random-background {
            height: 100%;
            width: 100%;
        }
    </style>
    <style media="all and (max-width: 600px)">
        /* Mobile */
    </style>
    <style media="all and (min-width: 601px)">
        /* Desktop */
        .main {
            display: grid;
            grid-gap: 1rem;
            grid-template-columns: repeat(12, 1fr);
        }

        /* First column. */
        .feed__article:nth-child(3n-2){
            grid-column: 9 / 13;
        }

        /* Second column */
        .feed__article:nth-child(3n+2){
            grid-column: 1 / 5;
        }

        /* Third column */
        .feed__article:nth-child(3n+3) {
            grid-column: 5 / 9;
        }

        .article__title {
            font-size: 1.5rem;
        }

        .article__feed {
            font-size: 1rem;
        }

        .article__date {
            font-size: .9rem;
            color: var(--color-gray);
        }

        .feed__article:nth-child(1) .article__title {
            font-size: 2rem;
        }

        .feed__article:nth-child(1) .article__feed {
            font-size: 1rem;
        }

        .feed__article:nth-child(1) {
            grid-column: 1 / 9;
            grid-row: 1 / 4;
            text-align: center;
        }

        .feed__article:nth-child(2) {
            grid-column: 9 / 13;
            grid-row: 1 / 2;

        }

        .feed__article:nth-child(3) {
            grid-column: 9 / 13;
            grid-row: 2 / 3;

        }

        .feed__article:nth-child(4) {
            grid-column: 9 / 13;
            grid-row: 3 / 4;
        }

        .feed__article:nth-child(2) .article__header,
        .feed__article:nth-child(3) .article__header,
        .feed__article:nth-child(4) .article__header
        {
            display: flex;
            justify-content: space-between;
            flex-direction: row-reverse;
            grid-gap: 1rem;
        }

        .article__header > p {
            margin: 0;
        }

        .article__header-img > img {
            height: var(--height-img);
        }

        .feed__article:nth-child(1) .article__header-img > img,
        .feed__article:nth-child(2) .article__header-img > img,
        .feed__article:nth-child(3) .article__header-img > img,
        .feed__article:nth-child(4) .article__header-img > img
        {
            height: initial;
        }

        .feed__article:nth-child(2) .article__titles,
        .feed__article:nth-child(3) .article__titles,
        .feed__article:nth-child(4) .article__titles,
        .feed__article:nth-child(2) .article__header-img,
        .feed__article:nth-child(3) .article__header-img,
        .feed__article:nth-child(4) .article__header-img
        {
            width: 50%;
        }

        .feed__article:nth-child(2) .article__title,
        .feed__article:nth-child(3) .article__title,
        .feed__article:nth-child(4) .article__title
        {
            font-size: 1.2rem;
        }

        .feed__article:nth-child(2) .article__feed,
        .feed__article:nth-child(3) .article__feed,
        .feed__article:nth-child(4) .article__feed
        {
            font-size: 1rem;
        }
        .article__main {
            position: fixed;
            left: -100%;
            top: 0;
            bottom: 0;
            overflow-y: auto;

        }
        .feed__article:nth-child(1) .article__header {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .feed__article:nth-child(1) .article__header-img {
            height: 100%;
        }
    </style>
    <!-- End CSS -->
</head>
<body>
    <div class="container">
        <header class="header">
            <h1 class="title">{{ title }}</h1>
            <h2 class="subtitle"><span class="subtitle__separator">~</span> <span class="subtitle__text">My static generate newspaper</span> <span class="subtitle__separator">~</span></h2>
            <hr class="separator">
        </header>
        <main class="main">
            {% for article in articles %}
                <article class="feed__article article">
                    <header class="article__header">
                        <p class="article__header-img">
                            <a target="_blank" href="{{ article.link }}">
                                {% if article.cover %}
                                <img loading="lazy" src="{{ article.cover }}" alt="{{ article.title }}">
                                {% else %}
                                <canvas class="article__random-background"></canvas>
                                {% endif %}
                            </a>
                        </p>
                        <div class="article__titles">
                            <h1 class="article__title">
                                <a target="_blank" href="{{ article.link }}">{{ article.title }}</a>
                            </h1>
                            <h2 class="article__feed"><a target="_blank" href="{{ article.feed.link }}">{{ article.feed.title }}</a> <span class="article__date">{{ article.published-date-formatter }}</span></h2>
                        </div>
                    </header>
                </article>
            {% endfor %}
        </main>
    </div>
    <footer class="footer">
        <hr class="separator">
        <p class="footer__text">
            Generated with <a class="footer__link" href="https://github.com/tanrax/RSSpaper">RSSpaper</a> and a lot of <span class="footer__heard">❤️</span>️
        </p>
    </footer>
</body>
</html>
