WIP - Iteration 1: ensure smartphone view is portrait locked, single …

…column #10

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/)
 

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;

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;
+  }
+}