From 036c53d1a8a5c25c816f3ea4cb752a777cba4aa4 Mon Sep 17 00:00:00 2001 From: Alex Karle Date: Fri, 20 Dec 2019 00:06:25 -0500 Subject: [PATCH] style: readability improvements on mobile Previously, I was blanket "max-width: 60%" to center the posts. It is cleaner to use the @media selector to do this conditionally based on screen size, as we actually don't want the width constraint on mobile. Also, use "vmin" font-sizes: it uses the "virtual window" to compute the font size. It is a 3 multiplier by the min(height,width) of the window. Cool, huh? --- index.html | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 82bb331..f91ad8c 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,14 @@ font-family: "Courier New", monospace; margin-left: 40px; margin-right: 40px; + font-size: 3vmin; } - + @media only screen and (min-width: 992px) { + #content { + width: 60%; + margin: 0 auto; + } + } .new-post { margin-top: 50px; } @@ -19,7 +25,7 @@ -
+

Hello, World

------------

A collection of thoughts.

-- libgit2 1.1.1