From 4fea967b430bde107799a47568fb4769c4cc6292 Mon Sep 17 00:00:00 2001 From: Keith Irwin Date: Tue, 13 Dec 2016 16:58:09 -0500 Subject: [PATCH] moved styles to seperate file Signed-off-by: Keith Irwin --- README.md | 10 +++++++++- index.html | 48 ++---------------------------------------------- style.css | 45 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 56 insertions(+), 47 deletions(-) create mode 100644 style.css diff --git a/README.md b/README.md index 339172e..1a95262 100644 --- a/README.md +++ b/README.md @@ -3,11 +3,19 @@ Uses [DeviceOrientationEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent) to show a phone's polar orientation. +## Instructions + +Open [compass.keithirwin.us](https://compass.keithirwin.us/) on a smartphone with a compass. Hold the phone level and it should show your direction. + +### Is this accurate? + +No, not really. Results may vary. As of this writing, Firefox and Chrome browsers handle the DeviceOrientation spec differently. It's only been tested on Chrome for Android. + ## Known issues * When the screen is rotated, the image gets rotated 90 degrees. I don' know how this could be fixed. -#### Image sources +## Image sources The images used in this app were labeled for reuse with modification: diff --git a/index.html b/index.html index ef4a125..f4fe3b6 100644 --- a/index.html +++ b/index.html @@ -36,52 +36,8 @@ - - - + +
diff --git a/style.css b/style.css new file mode 100644 index 0000000..0339b09 --- /dev/null +++ b/style.css @@ -0,0 +1,45 @@ +body { + margin: 0; + height: 100vh; + width: 100vw; + background: #000; + color: #EEE; +} + +main { + text-align: center; +} + +#error { + color: #E00; +} + +@media (orientation:portrait) { + main { + width: 100vw; + height: 100vw; + position: relative; + top: + } + img { + width: 95vw; + height: 95vw; + + } +} +@media (orientation:landscape) { + + img { + width: 95vh; + height: 95vh; + } +} + +#error { display: none; } + +a { + color: inherit; + text-decoration: underline; +} a:hover { + text-decoration: none; +}