From 696547ac48ae7069173f348700c40e1341ffe73f Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <info@fabiomanganiello.com>
Date: Tue, 14 Jun 2022 00:33:47 +0200
Subject: [PATCH] Better article rendering style on small screens

---
 madblog/static/css/blog.css   |  6 ++++++
 madblog/static/css/common.css | 13 ++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/madblog/static/css/blog.css b/madblog/static/css/blog.css
index 5a4b728..b745ec6 100644
--- a/madblog/static/css/blog.css
+++ b/madblog/static/css/blog.css
@@ -16,6 +16,12 @@ main .content code, .codehilite {
   font-size: .85em;
 }
 
+@media screen and (max-width: 767px) {
+  main {
+    font-size: 0.9em;
+  }
+}
+
 a:hover {
   opacity: 0.7;
 }
diff --git a/madblog/static/css/common.css b/madblog/static/css/common.css
index ce35834..e8ae246 100644
--- a/madblog/static/css/common.css
+++ b/madblog/static/css/common.css
@@ -95,7 +95,18 @@ main {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0 2em;
+}
+
+@media screen and (max-width: 767px) {
+  main {
+    padding: 0 0.75em;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  main {
+    padding: 0 2em;
+  }
 }
 
 h1 {