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`: Add a `<meta name="viewport"` element

2. `main.css`:
  * Use "max-width" instead of "width"
  * Set "line-height" on 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

@@ -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;}
 

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 }}" />