ki9
/
compass
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

moved styles to seperate file 

Signed-off-by: Keith Irwin <mail@keithirwin.us>
master
Keith Irwin 2016-12-13 16:58:09 -05:00
parent c6e4a90a9f
commit 4fea967b43
3 changed files with 56 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -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:

48
index.html
View File

@ -36,52 +36,8 @@
<meta name="msapplication-wide310x150logo" content="icons/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="icons/mstile-310x310.png" />
<style>
body {
margin: 0;
height: 100vh;
width: 100vw;
background: #000;
color: #EEE;
}
main {
text-align: center;
}
#error {
color: #E00;
}
@media (orientation:portrait) {
img {
width: 100vw;
height: 100vw;
}
}
@media (orientation:landscape) {
img {
width: 100vh;
height: 100vh;
}
}
#error { display: none; }
a {
color: inherit;
text-decoration: underline;
} a:hover {
text-decoration: none;
}
</style>
</head>
<link rel="stylesheet" href="style.css" />
<body>
<main>

45
style.css Normal file
View File

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