From f598fafcd7aca0e65e156cce21a95479ee718e78 Mon Sep 17 00:00:00 2001
From: Robert Ivanov <robert.ivanov@gmail.com>
Date: Sat, 21 Jan 2017 21:09:23 +0200
Subject: [PATCH] WIP - Iteration 1: ensure smartphone view is portrait locked,
 single column #10

---
 README.md                  |  2 +-
 main.scss                  |  1 +
 src/scss/_orientation.scss | 12 ++++++++++++
 3 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 src/scss/_orientation.scss

diff --git a/README.md b/README.md
index a0abf8d..22f78fb 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ An experimental Origami component to implement a responsive crossword.
    * $ `obt build`
 * deploy locally as described in the [Origami build tools doc](https://github.com/Financial-Times/origami-build-tools#developing-modules-locally)
    * $ `obt demo --runServer --watch`
-   * $ see a demo of it running at http://localhost:8080/demos/local/basic.html
+   * see a demo of it running at http://localhost:8080/demos/local/basic.html
 * [Bower linking a component](https://oncletom.io/2013/live-development-bower-component/)
 * general Origami [Developer Guide](http://origami.ft.com/docs/developer-guide/)
 
diff --git a/main.scss b/main.scss
index 9290576..2d487cc 100644
--- a/main.scss
+++ b/main.scss
@@ -7,6 +7,7 @@ $o-crossword-is-silent: true !default;
 @import "src/scss/color-use-cases";
 @import "src/scss/mixins";
 @import "src/scss/base";
+@import "src/scss/orientation";
 
 @if ($o-crossword-is-silent == false) {
 	@include oCrosswordAll;
diff --git a/src/scss/_orientation.scss b/src/scss/_orientation.scss
new file mode 100644
index 0000000..ca43397
--- /dev/null
+++ b/src/scss/_orientation.scss
@@ -0,0 +1,12 @@
+//below forces portrait mode on mobile phones
+//it uses "min-aspect-ratio" to detect landscape,
+//since keyboard popping will make "orientation" wrong in some cases
+@media screen and (min-aspect-ratio: 13/9) and (max-width: 767px) {
+  #main-container {
+    background-color: #4f1828;
+    transform: rotate(-90deg);
+    width: 100% /* screen width */ ;
+    height: 100% /* screen height */ ;
+    overflow: scroll;
+  }
+}
\ No newline at end of file