<!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>