From e4bb6475862ac4af5ac24ea475426e826381d7c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lorenzo=20Dellac=C3=A0?= <lorenzo.dellaca@mind-overflow.net>
Date: Tue, 10 Nov 2020 21:25:33 +0100
Subject: [PATCH] Make /tags/ page responsive, fix some paddings

In post cards, the "tag and date" text was slightly moved to the right and looked ugly. This was fixed.
The /tags/ page had a horizontal padding of 0 which made it look ugly. Solved.
The /tags/ page now scales based on screen size and is responsive. Fixes #5
---
 assets/css/screen.css | 37 ++++++++++++++++++++++++++++++++++---
 package.json          |  2 +-
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/assets/css/screen.css b/assets/css/screen.css
index 036afa5..5aed971 100755
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -473,7 +473,7 @@ a.mind-post-card-big_main {
     font-weight: 700;
     text-transform: uppercase;
     font-size: 14px;
-    margin: 10px 5px 0;
+    margin: 10px 0 0;
     color: rgb(180, 180, 180);
 }
 
@@ -1162,7 +1162,6 @@ Media queries are used to make the website responsive and cool on mobile.
     }
 }
 
-/* BEGIN RESPONSIVE MEDIA QUERIES */
 @media only screen and (max-width: 1300px) {
 
     h1 {
@@ -1215,6 +1214,10 @@ Media queries are used to make the website responsive and cool on mobile.
     .mind-site-footer_main {
         font-size: 23px;
     }
+
+    .mind-tag-content_main {
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    }
 }
 
 @media only screen and (max-width: 1000px) {
@@ -1300,6 +1303,20 @@ Media queries are used to make the website responsive and cool on mobile.
     .mind-site-footer_main {
         font-size: 20px;
     }
+
+    .mind-tag-content_main {
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+
+    .mind-tag-card_feature-image {
+        height: 180px;
+    }
+}
+
+@media only screen and (max-width: 800px) {
+    .mind-tag-content_main {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
 }
 
 @media only screen and (max-width: 650px) {
@@ -1344,11 +1361,14 @@ Media queries are used to make the website responsive and cool on mobile.
         font-size: 18px;
     }
 
+    .mind-feed-content_main, .mind-tag-content_main {
+        padding: 20px;
+    }
+
     .mind-feed-content_main {
         grid-template-columns: 1fr;
         min-width: calc(100% - 40px);
         width: calc(100% - 40px);
-        padding: 20px;
     }
 
     .mind-content_main {
@@ -1408,6 +1428,10 @@ Media queries are used to make the website responsive and cool on mobile.
     .mind-site-footer_main {
         font-size: 18px;
     }
+
+    .mind-tag-card_feature-image {
+        height: 150px;
+    }
 }
 
 @media only screen and (max-width: 550px) {
@@ -1439,3 +1463,10 @@ Media queries are used to make the website responsive and cool on mobile.
         font-size: 16px;
     }
 }
+
+@media only screen and (max-width: 470px)
+{
+    .mind-tag-content_main {
+        grid-template-columns: 1fr 1fr;
+    }
+}
diff --git a/package.json b/package.json
index 4c45770..4198b44 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "mindtheme",
     "description": "Mind Overflow's official website style",
-    "version": "0.0.10",
+    "version": "0.0.11",
     "engines": {
         "ghost-api": "v3"
     },