Applied viewport

2 files changed, 63 insertions, 10 deletions

diff --git a/static/css/hugo-apps-theme.css b/static/css/hugo-apps-theme.css
index 69a4743..ad6652c 100644
--- a/static/css/hugo-apps-theme.css
+++ b/static/css/hugo-apps-theme.css
@@ -21,13 +21,29 @@
 
 @media (min-width: 600px) and (orientation: portrait) { html { background-color: yellow; font-size: 15px; } }
 
-@media (min-width: 801px) and (orientation: portrait) { html { background-color: green; font-size: 30px; } }
+@media (min-width: 801px) and (orientation: portrait) { html { background-color: green; font-size: 15px; } }
 
 @media (min-width: 1025px) and (orientation: portrait) { html { background-color: blue; font-size: 15px; } }
 
 @media (min-width: 1281px) and (orientation: portrait) { html { background-color: indigo; font-size: 10px; } }
 
-body { background-color: silver; font-family: 'Press Start 2P', cursive; line-height: 2rem; text-align: center; word-wrap: break-word; overflow: scroll; }
+body { background-color: silver; font-family: 'Press Start 2P', cursive; line-height: 120%; text-align: center; word-wrap: break-word; overflow: scroll; }
+
+h1 { font-size: 2rem; }
+
+h2 { font-size: 1.5rem; }
+
+h3 { font-size: 1.17rem; }
+
+h4 { font-size: 1.12rem; }
+
+h5 { font-size: 0.83rem; }
+
+h6 { font-size: 0.75rem; }
+
+h1, h2, h3, h4, h5, h6 { line-height: 110%; }
+
+p { font-size: 1rem; }
 
 a { text-decoration: none; color: black; }
 
@@ -35,11 +51,13 @@ a:visited { color: black; }
 
 a:hover { color: red; }
 
-@media (min-width: 0px) { .readability, hr, .apps-list, .apps-content { width: 100%; } }
+@media (min-width: 0px) and (orientation: landscape) { .readability, hr, .apps-list, .apps-content { width: 100%; } }
+
+@media (min-width: 600px) and (orientation: landscape) { .readability, hr, .apps-list, .apps-content { width: 75%; } }
 
-@media (min-width: 600px) { .readability, hr, .apps-list, .apps-content { width: 75%; } }
+@media (min-width: 1025px) and (orientation: landscape) { .readability, hr, .apps-list, .apps-content { width: 50%; } }
 
-@media (min-width: 1025px) { .readability, hr, .apps-list, .apps-content { width: 50%; } }
+@media (min-width: 0px) and (orientation: portrait) { .readability, hr, .apps-list, .apps-content { width: 100%; } }
 
 hr { border: 0; margin-top: 1rem; margin-bottom: 1rem; height: 1rem; background: black; }
 
diff --git a/static/css/hugo-apps-theme.scss b/static/css/hugo-apps-theme.scss
index 7876494..01fb371 100644
--- a/static/css/hugo-apps-theme.scss
+++ b/static/css/hugo-apps-theme.scss
@@ -79,7 +79,7 @@ html {
   }
   @include screen(p, 5) {
     background-color: green;
-    font-size: 30px;
+    font-size: 15px;
   }
   @include screen(p, 6) {
     background-color: blue;
@@ -94,12 +94,44 @@ html {
 body {
   background-color: silver;
   font-family: 'Press Start 2P', cursive;
-  line-height: 2rem;
+  line-height: 120%;
   text-align: center;
   word-wrap: break-word;
   overflow: scroll;
 }
 
+h1 {
+  font-size: 2rem;
+}
+
+h2 {
+  font-size: 1.5rem;
+}
+
+h3 {
+  font-size: 1.17rem;
+}
+
+h4 {
+  font-size: 1.12rem;
+}
+
+h5 {
+  font-size: 0.83rem;
+}
+
+h6 {
+  font-size: 0.75rem;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: 110%;
+}
+
+p {
+  font-size: 1rem;
+}
+
 a {
   text-decoration: none;
   color: black;
@@ -112,15 +144,18 @@ a {
 }
 
 .readability {
-  @include screen(lp, 1) {
+  @include screen(l, 1) {
     width: 100%;
   }
-  @include screen(lp, 4) {
+  @include screen(l, 4) {
     width: 75%;
   }
-  @include screen(lp, 6) {
+  @include screen(l, 6) {
     width: 50%;
   }
+  @include screen(p, 1) {
+    width: 100%;
+  }
 }
 
 hr {