<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
    <link rel="icon" type="image/png" href="favicon.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="keywords" content="html, css, javascript">
    <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">
    <meta property="og:url" content="">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@cuenta">
    <meta name="twitter:creator" content="@cuenta">
    <meta property="og:image:secure_url" content="https://...">
    <meta property="og:image:type" content="image/jpeg">
    <meta property="og:image:width" content="400">
    <meta property="og:image:height" content="300">
    <meta property="og:image:alt" content="">
    <!-- 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;
        }
        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;
        }
    </style>
    <style media="all and (max-width: 600px)">
        /* Mobile */
        body {
            background: red;
        }
    </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;
        }

        .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;
        }

        .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;

        }
    </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 item in data %}
                {% for article in item.feed.entries %}
                <article class="feed__article article">
                    <header class="article__header">
                        {% if article.cover %}
                        <p class="article__header-img">
                            <img src="{{ article.cover }}" alt="{{ article.title }}">
                        </p>
                        {% endif %}
                        <div class="article__titles">
                            <h1 class="article__title">{{ article.title }}</h1>
                            <h2 class="article__feed">{{ item.feed.title }}</h2>
                        </div>
                    </header>
                    <main class="container article__main">
                        {{ article.description.value|safe }}
                    </main>
                </article>
                {% endfor %}
            {% 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>