Add @media query to support landscape view on mobile device

p0wen · Sep 29, 2020 · 92e3520 · 92e3520
1 parent 09bf857
commit 92e3520
Showing 1 changed file with 38 additions and 16 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1,17 +1,17 @@
 /* Main Page */
 .html {
-    height: 100%;
-    --vh: 7.96px;
+  height: 100%;
+  --vh: 7.96px;
 }
 
 .appview {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    height: calc(100 * var(--vh));
-    z-index: -1;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  height: calc(100 * var(--vh));
+  z-index: -1;
 }
 .app {
   background-position: center;
@@ -29,7 +29,7 @@
 
 .toolbar {
   /* background: lightcoral; */
-  height: calc(5 * var(--vh));;
+  height: calc(5 * var(--vh));
 }
 
 .quote,
@@ -38,16 +38,14 @@
   text-align: center;
 }
 
-
-
 .appname,
 .settingsicon {
   color: #353535;
 }
 
 .quote {
   /* background: lightsalmon; */
-  height: calc(25 * var(--vh));;
+  height: calc(25 * var(--vh));
   font-size: 1rem;
   padding-top: 10px;
 }
@@ -56,9 +54,9 @@
   background: #343a4038;
 }
 
-.playershell  {
+.playershell {
   /* background: lightseagreen; */
-  height: calc(50 * var(--vh));;
+  height: calc(50 * var(--vh));
 }
 
 .streak {
@@ -135,7 +133,7 @@
 }
 
 button:focus {
-    outline: none;
+  outline: none;
 }
 
 .meditationtime {
@@ -279,3 +277,27 @@ input:checked + .slider:before {
   background: #ff6000;
   cursor: pointer;
 }
+
+@media all and (max-height: 414px) and (orientation: landscape) {
+  .streakbar {
+    padding: 0rem;
+    height: calc(20 * var(--vh));
+  }
+  .quote {
+    height: calc(25 * var(--vh));
+    font-size: 0.9rem;
+  }
+  .appname {
+    padding-right: 27px;
+    padding-left: 27px;
+    padding-top: 5px;
+  }
+  .starttimer {
+    font-size: 1.5rem;
+    transform: translate(0%, 70%);
+  }
+  .meditationtime {
+    font-size: 1.5rem;
+    transform:translate(0%, 100%)
+  }
+}