Added better mobile support

5 files changed, 13 insertions, 5 deletions

diff --git a/themes/simple/layouts/_default/list.html b/themes/simple/layouts/_default/list.html
index e194063..e32acd0 100644
--- a/themes/simple/layouts/_default/list.html
+++ b/themes/simple/layouts/_default/list.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-<main aria-role="main" class="container-blog">
+<main aria-role="main" class="container-blog px-6 md:p-0">
 
   <h1 class="text-2xl font-bold mb-6">Blog posts</h1>
 
diff --git a/themes/simple/layouts/_default/single.html b/themes/simple/layouts/_default/single.html
index 7142f1b..45dc4e6 100644
--- a/themes/simple/layouts/_default/single.html
+++ b/themes/simple/layouts/_default/single.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-<main aria-role="main" class="container-blog">
+<main aria-role="main" class="container-blog px-6 md:p-0">
 
   <!-- Single article -->
   <article itemtype="http://schema.org/Article" class="mb-12">
diff --git a/themes/simple/layouts/partials/footer.html b/themes/simple/layouts/partials/footer.html
index 6e7ec9c..3d1e481 100644
--- a/themes/simple/layouts/partials/footer.html
+++ b/themes/simple/layouts/partials/footer.html
@@ -1,4 +1,4 @@
-<footer class="container-blog text-gray-400 text-sm mb-12">
+<footer class="container-blog px-6 md:p-0 text-gray-400 text-sm mb-12">
   This website does not track you.
   Content is made available under the <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer" class="underline hover:text-gray-800">CC BY 4.0 license</a> unless specified otherwise.
   Blog feed is available as <a href="/index.xml" target="_blank" class="underline hover:text-gray-800">RSS</a> feed.
diff --git a/themes/simple/layouts/partials/head.html b/themes/simple/layouts/partials/head.html
index 716b1f0..293bb85 100644
--- a/themes/simple/layouts/partials/head.html
+++ b/themes/simple/layouts/partials/head.html
@@ -172,4 +172,12 @@
     margin-block-start: 40px;
     margin-block-end: 40px;
   }
+
+  @media only screen and (max-width: 600px) {
+    article img {
+      max-width: 100%;
+      position: initial;
+      margin: 20px auto;
+    }
+  }
 </style>
diff --git a/themes/simple/layouts/partials/header.html b/themes/simple/layouts/partials/header.html
index e234615..4fefa0d 100644
--- a/themes/simple/layouts/partials/header.html
+++ b/themes/simple/layouts/partials/header.html
@@ -1,4 +1,4 @@
-<div class="container-blog">
+<div class="container-blog px-6 md:p-0">
   <header class="flex py-4 mt-4 mb-6">
     <h3 class="flex-grow">
       <a href="/" itemprop="url" class="text-xl font-bold hover:bg-yellow-200">Mitja Felicijan</a>
@@ -12,7 +12,7 @@
       <a href="/curriculum-vitae.html" class="font-medium px-2 hover:bg-yellow-200">CV</a>
       <a href="/books.html" class="font-medium px-2 hover:bg-yellow-200">Books</a>
 
-      <a href="/index.xml" itemprop="url" class="font-medium px-2 hover:bg-yellow-200">RSS</a>
+      <a href="/index.xml" itemprop="url" class="font-medium px-2 hover:bg-yellow-200 hidden md:block">RSS</a>
     </nav>
   </header>
 </div>