css updates for mobile

_layouts/default.html

@@ -60,10 +60,10 @@
 			<!-- Copyleft FTW! -->
 			<div>
 			<img src="{{ site.base-url }}/images/Copyleft.png" style="height: 1em;" alt="copyleft"> Murukesh Mohanan.
+			<a class="rss" href="{{ site.base-url }}/feed.xml"><img src="{{ site.base-url }}/images/rss.svg" alt="RSS"></img></a>
 			<p>Permission to use content is granted under <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license">the CC BY-SA license</a>.</p>
 			<p>The font used here is the Ubuntu font, via Google Web Fonts. Written with Jekyll. Hosted using <a href="https://gitlab.com/murukesh/murukesh.gitlab.io">Gitlab</a> and Cloudflare. SSL certificates from Cloudflare. </p>
 			</div>
-			<a class="rss" href="{{ site.base-url }}/feed.xml"><img src="{{ site.base-url }}/images/rss.svg" alt="RSS"></img></a>
 			</section>
 		</footer>
 	</body>

css/posts.css

@@ -2,7 +2,7 @@
 
 .post-title a {
 	text-decoration: none;
-	font-size: x-large;
+	font-size: 120%;
 }
 
 kbd {
@@ -40,7 +40,7 @@ a.tag {
 	border-radius: 0.3em;
 	font-variant: small-caps;
 	font-weight: bold;
-	font-size: large;
+	font-size: 110%;
 	color: #e0e0e0;
 }
 
@@ -59,7 +59,7 @@ ol.tags-list li {
 
 /*
 From http://drewsilcock.co.uk/proper-linenumbers/
-*/
+ */
 
 .highlight {
 	margin: 0;
@@ -134,22 +134,22 @@ a.page-prev, a.page-next {
 
 /*
 .slideshow {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	height: 100%;
-	width: 100%;
+position: absolute;
+top: 0;
+bottom: 0;
+left: 0;
+right: 0;
+height: 100%;
+width: 100%;
 }
-*/
+ */
 
 .footnotes li {
 	padding: 0;
 }
 
 section>header>h1>a:link, section>header>h1>a:visited {
-  color: aqua;
+	color: aqua;
 }
 
 @media screen and (min-device-aspect-ratio: 1/1) and (orientation: landscape) {
@@ -178,12 +178,13 @@ section>header>h1>a:link, section>header>h1>a:visited {
 
 @media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait) {
 	.post-date {
-		font-size: initial;
+		font-size: 80%;
 		display: block;
 		text-align: right;
 	}
 	.post-title h1 {
 		margin: 0;
+		line-height: 1.4em;
 	}
 
 	kbd {
@@ -194,4 +195,7 @@ section>header>h1>a:link, section>header>h1>a:visited {
 		padding: 0.25em;
 		width: 100%;
 	}
+	a.tag {
+		font-size: 90%;
+	}
 }

css/style.css

 #title {
 	border-bottom: 0.2em solid grey;
 	padding: 0.1em 3%;
-	font-size: x-large;
+	font-size: 120%;
 	font-variant: small-caps;
 	text-align: center;
 	min-height: 4em;
@@ -9,12 +9,6 @@
 	color: whitesmoke;
 }
 
-/** The #main div is given a min-height so that it isn't
-  * squished on pages with little content, or for displays
-  * that are tall (like phones in portrait mode).
-  * Height obtained by trial-and-error on a Nexus 4
-  * Chrome browser. Didn't work on a Nexus 4 Opera Mini.
-  */
 #main {
 	/*margin-left: 15%;
 	float: right;
@@ -35,7 +29,7 @@ footer {
 	clear: both;
 	padding: 2%;
 	padding-bottom: 1%;
-	font-size: 80%;
+	font-size: 90%;
 	border-top: 0.25em solid grey;
 }
 
@@ -96,12 +90,7 @@ body {
 h1 {
 	margin-top: 0;
 }
-/*h1 {
-	font-size: 2em;
-}
-h3 {
-	margin-top: 0;
-}*/
+
 code {
 	font-family: 'Ubuntu Mono', 'Droid Mono', monospace;
 	color: whitesmoke;
@@ -219,6 +208,10 @@ sup {
 }
 
 @media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait) {
+	body {
+		font-size: 5vw;
+	}
+
 	#title h1 {
 		margin: 0.2em;
 	}
@@ -233,7 +226,6 @@ sup {
 	nav li {
 		list-style: none;
 		margin: 0.2em;
-		box-shadow: 0.1em 0.1em 0.15em 0.05em rgba(100,100,100,0.75);
 	}
 
 	body {
@@ -241,7 +233,7 @@ sup {
 	}
 
 	section, .section {
-		text-align: left;
+		text-align: justify;
 		margin-top: 2em;
 	}
 
@@ -251,9 +243,24 @@ sup {
 		margin: 0 auto;
 	}
 
+	nav ul li {
+		margin-bottom: 0.5em;
+	}
+
 	#vim-proposal img {
 		margin-top: 1em;
 		margin-bottom: 1em;
 		width: 100%;
 	}
+
+	.rss {
+		float: right;
+		text-align: center;
+	}
+
+	footer .rss img {
+		height: 2em;
+		padding-left: 0.5em;
+		padding-bottom: 0.5em;
+	}
 }