Change media queries so that they still work on non-mobile devices as well...

4 years ago · bc5c1f0959
parent 3c59e71870
commit bc5c1f0959
4 changed files with 16 additions and 16 deletions
--- a/blog.html
+++ b/blog.html
@ -16,13 +16,13 @@
         margin: auto;
     }

-     @media only all and (max-width: 1899px) {
+     @media only all and (pointer: coarse), (pointer: none) {
         body {
-             font-size: 5.3vw;
+             font-size: 5.5vmin;
         }
     }

-     @media only all and (min-width: 1900px) {
+     @media only all and (pointer: fine) {
         body {
             font-size: 20px;
             min-width: 500px;
@ -30,7 +30,7 @@
         }
     }

-     @media only all and (min-width: 2000px) {
+     @media only all and (pointer: fine) and (min-width: 2000px) {
         body {
             font-size: 40px;
         }
--- a/generate-blog.bash
+++ b/generate-blog.bash
@ -52,13 +52,13 @@ blog_html="$here/blog.html"
         margin: auto;
     }

-     @media only all and (max-width: 1899px) {
+     @media only all and (pointer: coarse), (pointer: none) {
         body {
-             font-size: 5.3vw;
+             font-size: 5.5vmin;
         }
     }

-     @media only all and (min-width: 1900px) {
+     @media only all and (pointer: fine) {
         body {
             font-size: 20px;
             min-width: 500px;
@ -66,7 +66,7 @@ blog_html="$here/blog.html"
         }
     }

-     @media only all and (min-width: 2000px) {
+     @media only all and (pointer: fine) and (min-width: 2000px) {
         body {
             font-size: 40px;
         }
--- a/index.html
+++ b/index.html
@ -17,13 +17,13 @@
         margin: auto;
     }

-     @media only all and (max-width: 1899px) {
+     @media only all and (pointer: coarse), (pointer: none) {
         body {
-             font-size: 5.3vw;
+             font-size: 5.5vmin;
         }
     }

-     @media only all and (min-width: 1900px) {
+     @media only all and (pointer: fine) {
         body {
             font-size: 20px;
             min-width: 500px;
@ -31,7 +31,7 @@
         }
     }

-     @media only all and (min-width: 2000px) {
+     @media only all and (pointer: fine) and (min-width: 2000px) {
         body {
             font-size: 40px;
         }
--- a/posts/introduction/index.html
+++ b/posts/introduction/index.html
@ -17,13 +17,13 @@
         margin: auto;
     }

-     @media only all and (max-width: 1899px) {
+     @media only all and (pointer: coarse), (pointer: none) {
         body {
-             font-size: 5.3vw;
+             font-size: 5.5vmin;
         }
     }

-     @media only all and (min-width: 1900px) {
+     @media only all and (pointer: fine) {
         body {
             font-size: 20px;
             min-width: 500px;
@ -31,7 +31,7 @@
         }
     }

-     @media only all and (min-width: 2000px) {
+     @media only all and (pointer: fine) and (min-width: 2000px) {
         body {
             font-size: 40px;
         }