Update mobile

Makefile

@@ -0,0 +1,17 @@
+.DEFAULT_GOAL := build
+
+build: ## Check style with black
+	build.templates
+	lein uberjar
+	make rm.statics
+
+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/
+
+rm.statics:
+	rm -rf resources/themes/dark/static.zip
+	rm -rf resources/themes/sepia/static.zip
+	rm -rf resources/themes/light/static.zip

project.clj

@@ -1,4 +1,4 @@
-(defproject rsspaper "1.1.4"
+(defproject rsspaper "1.1.5"
   :description "RSSpaper"
   :url "https://github.com/tanrax/RSSpaper"
   :license {:name "EPL-2.0 OR GPL-2.0-or-later WITH Classpath-exception-2.0"

resources/themes/dark/static/css/main.css

@@ -1,5 +1,6 @@
 :root {
   --height-img: 10rem;
+  --height-img-mobile: 12rem;
   --color__nord-dark: #2e3440;
   --color__nord-light: #d8dee9;
   --color__nord-medium: #5e81ac;

resources/themes/dark/static/css/mobile.css

@@ -1,7 +1,3 @@
-:root {
-  --height-img-mobile: 18rem;
-}
-
 .title {
   font-size: 3rem;
 }

resources/themes/light/static/css/main.css

@@ -4,6 +4,7 @@
     --color-gray: gray;
     --color-background: #f9f7f1;
     --height-img: 10rem;
+    --height-img-mobile: 12rem;
 }
 
 @font-face {
@@ -91,4 +92,4 @@ pre {
 .article__random-background {
     height: 100%;
     width: 100%;
-}
+}

resources/themes/light/static/css/mobile.css

@@ -1,7 +1,3 @@
-:root {
-  --height-img-mobile: 18rem;
-}
-
 .title {
   font-size: 3rem;
 }

resources/themes/sepia/static/css/main.css

@@ -5,6 +5,7 @@
     --color-white: #fcead5;
     --color-background: #e5d5c2;
     --height-img: 10rem;
+    --height-img-mobile: 12rem;
 }
 
 @font-face {
@@ -95,4 +96,4 @@ pre {
 .article__random-background {
     height: 100%;
     width: 100%;
-}
+}

resources/themes/sepia/static/css/mobile.css

@@ -7,7 +7,7 @@
 }
 
 .article__header-img > a > img {
-    height: initial;
+    height: var(--height-img-mobile);
-    object-position: initial;
+    object-position: top;
-    object-fit: initial;
+    object-fit: cover;
-}
+}