Add theme clojure

tanrax · Oct 25, 2021 · b964a5c · b964a5c
1 parent 4b95062
commit b964a5c
Show file tree

Hide file tree

Showing 17 changed files with 706 additions and 19 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,5 @@ target/
 /.nrepl-port
 config.yaml
 log/logger1.log*
-*.jar
+*.jar
+resources/*.tar
diff --git a/Makefile b/Makefile
@@ -1,17 +1,20 @@
 .DEFAULT_GOAL := build
 
-build: ## Check style with black
+build:
 	make build.templates
 	lein uberjar
 	make rm.statics
+	echo "Finish!"
 
 build.templates:
 	make rm.statics
-	zip -r resources/themes/dark/static.zip resources/themes/dark/static/
-	zip -r resources/themes/sepia/static.zip resources/themes/sepia/static/
-	zip -r resources/themes/light/static.zip resources/themes/light/static/
+	tar cf resources/themes/light/static.tar --directory=./resources/themes/light/ static
+	tar cf resources/themes/dark/static.tar --directory=./resources/themes/dark/ static
+	tar cf resources/themes/sepia/static.tar --directory=./resources/themes/sepia/ static
+	tar cf resources/themes/clojure/static.tar --directory=./resources/themes/clojure/ static
 
 rm.statics:
-	rm -rf resources/themes/dark/static.zip
-	rm -rf resources/themes/sepia/static.zip
-	rm -rf resources/themes/light/static.zip
+	rm -rf resources/themes/dark/static.tar
+	rm -rf resources/themes/sepia/static.tar
+	rm -rf resources/themes/light/static.tar
+	rm -rf resources/themes/clojure/static.tar
diff --git a/README.md b/README.md
@@ -37,7 +37,7 @@ Generate a static page with the latest news from your favorite feeds. Is it an R
 # Change the title, it's for you. Maybe you see "My newspaper"?
 title: RSSPAPER
 
-# Options: light, sepia or dark
+# Options: light, dark, sepia or clojure 
 theme: light
 
 # Options: daily, weekly or all
@@ -80,4 +80,4 @@ lein run
 
 ### Make new theme
 
-You can copy any theme hosted on `resources/themes`.
+You can copy any theme hosted on `resources/themes`.
diff --git a/project.clj b/project.clj
@@ -1,4 +1,4 @@
-(defproject rsspaper "1.1.9"
+(defproject rsspaper "1.2.0"
   :description "RSSpaper"
   :url "https://github.com/tanrax/RSSpaper"
   :license {:name "EPL-2.0 OR GPL-2.0-or-later WITH Classpath-exception-2.0"

diff --git a/resources/themes/clojure/index.html b/resources/themes/clojure/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>{{ title }}</title>
+    <meta name="description" content="My static news generator">
+    <meta name="generator" content="RSSPAPER">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
+    <link rel="icon" type="image/png" href="static/img/icons/favicon.png">
+    <meta name="theme-color" content="#3c790a">
+    <!-- PWA -->
+    <link rel="manifest" href="static/manifest.json" />
+    <link rel="apple-touch-icon" href="static/img/icons/apple-icon-180.png">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <!-- ios support -->
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="theme-color" content="#e5d5c2" />
+    <!-- End PWA -->
+    <!-- Opengraph -->
+    <meta property="og:image" content="img/screenshot.png">
+    <meta property="og:title" content="{{ title }}">
+    <meta property="og:type" content="website">
+    <!-- End Opengraph -->
+    <!-- CSS -->
+    <link rel="stylesheet" type="text/css" href="static/css/normalize.css">
+    <link rel="stylesheet" href="static/css/main.css">
+    <link href="static/css/mobile.css" rel="stylesheet" media="all and (max-width: 600px)">
+    <link href="static/css/desktop.css" rel="stylesheet" media="all and (min-width: 601px)">
+    <!-- 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">Meta blog de artículos escritos por la comunidad</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 %}
+                                <img loading="lazy" src="static/img/newsreader-not-cover.png" alt="Not cover">
+                                {% 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>
diff --git a/resources/themes/clojure/static/css/desktop.css b/resources/themes/clojure/static/css/desktop.css
@@ -0,0 +1,135 @@
+/* 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%;
+}
+
+.feed__article:first-child img {
+   height: 100%;
+}
diff --git a/resources/themes/clojure/static/css/main.css b/resources/themes/clojure/static/css/main.css
@@ -0,0 +1,95 @@
+/* Global */
+:root {
+    --color-black: white;
+    --color-gray: #5881d8;
+    --color-background: #83b265;
+    --height-img: 10rem;
+    --height-img-mobile: 12rem;
+}
+
+@font-face {
+    font-family: Newsreader;
+    src: url("../fonts/Newsreader-VariableFont_opsz,wght.woff2");
+    font-display: swap;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: Newsreader, serif;
+    color: var(--color-black);
+    background-color: var(--color-background);
+    background-size: 100%;
+}
+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%;
+}
diff --git a/resources/themes/clojure/static/css/mobile.css b/resources/themes/clojure/static/css/mobile.css
@@ -0,0 +1,13 @@
+.title {
+  font-size: 3rem;
+}
+
+.subtitle {
+  font-size: 1rem;
+}
+
+.article__header-img > a > img {
+  height: var(--height-img-mobile);
+  object-position: top;
+  object-fit: cover;
+}