From ac9e4f6ac18b7f610c00584e4b98c1b99a791e65 Mon Sep 17 00:00:00 2001
From: Ben Sturmfels <ben@sturm.com.au>
Date: Tue, 17 Aug 2021 16:26:32 +1000
Subject: [PATCH] Update notmyidea theme to scale down to smaller screens.

The aim here is to make the theme work respectably on mobile devices with only modest changes. Providing different layouts at multiple breakpoints is beyond the scope of this change.

The changes here are:

1. `base.html`: adding a `<meta name="viewport"` element

2. `main.css`:
  * use "max-width" instead of "width"
  * set a "line-height" an the banner and adjust vertical spacing to match
  * remove fixed height on the nav bar and force it to contain its child elements
---
 pelican/themes/notmyidea/static/css/main.css | 48 +++++++++++---------
 pelican/themes/notmyidea/templates/base.html |  1 +
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/pelican/themes/notmyidea/static/css/main.css b/pelican/themes/notmyidea/static/css/main.css
index aaea9b81..a4aa51a1 100644
--- a/pelican/themes/notmyidea/static/css/main.css
+++ b/pelican/themes/notmyidea/static/css/main.css
@@ -147,7 +147,8 @@ aside, nav, article, figure {
 }
 
 /***** Layout *****/
-.body {clear: both; margin: 0 auto; width: 800px;}
+.body {clear: both; margin: 0 auto; max-width: 800px;}
+img { max-width: 100%; }
 img.right, figure.right, div.figure.align-right {
     float: right;
     margin: 0 0 2em 2em;
@@ -159,7 +160,7 @@ img.left, figure.left, div.figure.align-left {
 
 /* .rst support */
 div.figure img, figure img {  /* to fill figure exactly */
-    width: 100%;
+    max-width: 100%;
 }
 div.figure p.caption, figure p.caption { /* margin provided by figure */
     margin-top: 0;
@@ -171,16 +172,21 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
 *****************/
 #banner {
 	margin: 0 auto;
-	padding: 2.5em 0 0 0;
+	padding: 0.8em 0 0 0;
 }
 
 	/* Banner */
-	#banner h1 {font-size: 3.571em; line-height: 0;}
+	#banner h1 {
+		font-size: 3.571em;
+		line-height: 1.0;
+		margin-bottom: .3em;
+	}
+
 	#banner h1 a:link, #banner h1 a:visited {
 		color: #000305;
 		display: block;
 		font-weight: bold;
-		margin: 0 0 .6em .2em;
+		margin: 0 0 0 .2em;
 		text-decoration: none;
 	}
 	#banner h1 a:hover, #banner h1 a:active {
@@ -195,19 +201,19 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
 	#banner nav {
 		background: #000305;
 		font-size: 1.143em;
-		height: 40px;
+		overflow: auto;
 		line-height: 30px;
 		margin: 0 auto 2em auto;
 		padding: 0;
 		text-align: center;
-		width: 800px;
+		max-width: 800px;
 
 		border-radius: 5px;
 		-moz-border-radius: 5px;
 		-webkit-border-radius: 5px;
 	}
 
-	#banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
+	#banner nav ul {list-style: none; margin: 0 auto; max-width: 800px;}
 	#banner nav li {float: left; display: inline; margin: 0;}
 
 	#banner nav a:link, #banner nav a:visited {
@@ -242,7 +248,7 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
 	margin-bottom: 2em;
 	overflow: hidden;
 	padding: 20px;
-	width: 760px;
+	max-width: 760px;
 
 	border-radius: 10px;
 	-moz-border-radius: 10px;
@@ -253,7 +259,7 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
 	border: 2px solid #eee;
 	float: right;
 	margin: 0.786em 2em 0 5em;
-	width: 248px;
+	max-width: 248px;
 }
 #featured figure img {display: block; float: right;}
 
@@ -271,7 +277,7 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
 	margin-bottom: 2em;
 	overflow: hidden;
 	padding: 20px 20px;
-	width: 760px;
+	max-width: 760px;
 
 	border-radius: 10px;
 	-moz-border-radius: 10px;
@@ -305,15 +311,15 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
 	/* Blogroll */
 	#extras .blogroll {
 		float: left;
-		width: 615px;
+		max-width: 615px;
 	}
 
-	#extras .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}
+	#extras .blogroll li {float: left; margin: 0 20px 0 0; max-width: 185px;}
 
 	/* Social */
 	#extras .social {
 		float: right;
-		width: 175px;
+		max-width: 175px;
 	}
 
 	#extras div[class='social'] a {
@@ -359,20 +365,20 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
 	overflow: hidden;
 	padding: 20px;
 	text-align: left;
-	width: 760px;
+	max-width: 760px;
 
 	border-radius: 10px;
 	-moz-border-radius: 10px;
 	-webkit-border-radius: 10px;
 }
 
-#about .primary {float: left; width: 165px;}
+#about .primary {float: left; max-width: 165px;}
 #about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
 #about .photo {float: left; margin: 5px 20px;}
 
 #about .url:link, #about .url:visited {text-decoration: none;}
 
-#about .bio {float: right; width: 500px;}
+#about .bio {float: right; max-width: 500px;}
 
 /*
 	Footer
@@ -410,7 +416,7 @@ li:first-child .hentry, #content > .hentry {border: 0; margin: 0;}
 		position: relative;
         float: left;
 		top: 0.5em;
-		width: 190px;
+		max-width: 190px;
 	}
 
 	/* About the Author */
@@ -453,12 +459,12 @@ li:first-child .hentry, #content > .hentry {border: 0; margin: 0;}
 	#comments-list li:nth-child(2n) blockquote {background: #F5f5f5;}
 
 	/* Add a Comment */
-	#add-comment label {clear: left; float: left; text-align: left; width: 150px;}
+	#add-comment label {clear: left; float: left; text-align: left; max-width: 150px;}
 	#add-comment input[type='text'],
 	#add-comment input[type='email'],
-	#add-comment input[type='url'] {float: left; width: 200px;}
+	#add-comment input[type='url'] {float: left; max-width: 200px;}
 
-	#add-comment textarea {float: left; height: 150px; width: 495px;}
+	#add-comment textarea {float: left; height: 150px; max-width: 495px;}
 
 	#add-comment p.req {clear: both; margin: 0 .5em 1em 0; text-align: right;}
 
diff --git a/pelican/themes/notmyidea/templates/base.html b/pelican/themes/notmyidea/templates/base.html
index 6be5f1d8..2b302899 100644
--- a/pelican/themes/notmyidea/templates/base.html
+++ b/pelican/themes/notmyidea/templates/base.html
@@ -3,6 +3,7 @@
 <head>
         {% block head %}
         <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="generator" content="Pelican" />
         <title>{% block title %}{{ SITENAME }}{%endblock%}</title>
         <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/{{ CSS_FILE }}" />