commit 036c53d1a8a5c25c816f3ea4cb752a777cba4aa4 (patch)
parent a2f06c5cfc3292228f7893301a87875ca82208f8
Author: Alex Karle <alex@karle.co>
Date: Fri, 20 Dec 2019 00:06:25 -0500
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?
Diffstat:
1 file changed, 8 insertions(+), 2 deletions(-)
diff --git 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 @@
<body>
<!-- Put content in centered column -->
- <div style="max-width:60%; margin: 0 auto">
+ <div id="content">
<h1 style="margin-bottom: 0px">Hello, World</h1>
<h1 style="margin-top: 0px">------------</h1>
<h3>A collection of thoughts.</h3>
