small changes

change <div id="main"> to <main> change corresponding css change some indentation
etacarinaea · Jan 17, 2015 · 0522cc5 · 0522cc5
1 parent 9663f10
commit 0522cc5
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 35 deletions.
diff --git a/jupiter.html b/jupiter.html
@@ -5,7 +5,6 @@
 		<title>Jupiter</title>
 		<link rel="stylesheet" type="text/css" href="style.css">
 		<script src="main.js" type="text/javascript"></script>
-		<script src="set.js" type="text/javascript"></script>
 	</head>
 	<body>
 		<!-- planets/satellites -->
@@ -35,11 +34,11 @@
 
 		<!-- UI -->
 		<header>
-			<img src="path4095-2.png" alt="logo" />
+			<img src="logo.png" alt="logo" />
 			<span>Jupiter I, II, III, IV, (XVIII)</span>
 		</header>
 
-		<div id="main">
+		<main>
 			<div class="in">
 				<input type="text" id="ut" placeholder="day (0)"><br>
 				<input type="text" id="uts" placeholder="time scale (5)"><br>
@@ -58,7 +57,9 @@
 				time scale in hours per second
 			</p>
 			<p>
-				This is an attempt to simulate the movement of the Galilean moons. Values calculated are approximations and values used might be wrong or inaccurate.
+				This is an attempt to simulate the movement of the Galilean 
+				moons. Values calculated are approximations and values used 
+				might be wrong or inaccurate.
 			</p>
 			<p>
 				Controls:<br>
@@ -68,6 +69,6 @@
 				End - toggle background effect<br>
 				Page Down - toggle opacity change
 			</p>
-		</div>
+		</main>
 	</body>
 </html>
diff --git a/main.js b/main.js
@@ -16,7 +16,7 @@ var sat_names = [
 		"Ganymede",
 		"Callisto",
 		"Themisto"
-]
+];
 // orbital period (s)
 var period = [
 		152853.5232,
@@ -256,9 +256,10 @@ function main(){
 	// calculate position and update
 	setInterval( function (){
 		for(var i=0; i< sat_names.length; i++){
-			xPos[i] = calculatePosition(semimajoraxis[i], period[i], SatPANG[i], 0);
-			yPos[i] = calculatePosition(semimajoraxis[i], period[i], SatPANG[i], 1)
-				*Math.cos(def);
+			xPos[i] = calculatePosition(semimajoraxis[i], period[i],
+				SatPANG[i], 0);
+			yPos[i] = calculatePosition(semimajoraxis[i], period[i],
+				SatPANG[i], 1)*Math.cos(def);
 			// if Themisto, add an inclination of 47.48 deg
 			if(sat_names[i]=="Themisto"){rot = rot+47.48}
 			// apply position (with transformation) to elements
@@ -272,15 +273,15 @@ function main(){
 			// sat orb minimum bounding box
 			var orbitbbgroup = document.getElementById("orbits");
 
-			orbitbbgroup.children[i].style.height = Math.abs(semimajoraxis[i]*2 *
-				Math.cos(def) *vs) + "px";
+			orbitbbgroup.children[i].style.height = Math.abs(semimajoraxis[i]*
+				2*Math.cos(def) *vs) + "px";
 			orbitbbgroup.children[i].style.width = semimajoraxis[i]*2 *vs +
 				"px";
 			orbitbbgroup.children[i].style.left = Xo - semimajoraxis[i]*vs -1 +
 				"px";
 			orbitbbgroup.children[i].style.top = Yo + (-semimajoraxis[i] +
-				(semimajoraxis[i]*2 - Math.abs(semimajoraxis[i]*2*Math.cos(def)))/2)*vs -
-				1 + "px";
+				(semimajoraxis[i]*2 - Math.abs(semimajoraxis[i]*2*
+				Math.cos(def)))/2)*vs -1 + "px";
 			if(Math.cos(def)<0){var tmprot = rot;rot += 180;}
 			orbitbbgroup.children[i].style.webkitTransform = "rotate(" +
 				-rot + "deg)";
@@ -289,8 +290,9 @@ function main(){
 			orbitbbgroup.children[i].style.transform = "rotate(" +
 				-rot + "deg)";
 			if(Math.cos(def)<0){rot = tmprot;}
-			orbitbbgroup.children[i].style.borderRadius = Math.abs(semimajoraxis[i]*vs) +
-				"px / " + Math.abs(semimajoraxis[i]*Math.cos(def)*vs) + "px";
+			orbitbbgroup.children[i].style.borderRadius = Math.abs(
+				semimajoraxis[i]*vs) + "px / " + Math.abs(semimajoraxis[i]*
+				Math.cos(def)*vs) + "px";
 
 
 			if(sat_names[i]=="Themisto"){rot = rot-47.48}

diff --git a/style.css b/style.css
@@ -1,20 +1,3 @@
-.orbb {
-	z-index: 0;
-	position:absolute;
-	border: 1px solid #f00;
-	opacity: 0.1;
-}
-#orbits div:last-child {
-}
-
-#orbits div:nth-last-child(2) {
-	background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(255,0,0,1));
-	background: -o-linear-gradient(rgba(0,0,0,0), rgba(255,0,0,1));
-	background: -moz-linear-gradient(rgba(0,0,0,0), rgba(255,0,0,1));
-	background: linear-gradient(rgba(0,0,0,0), rgba(255,0,0,1));
-}
-
-
 #Jupiter {
 	position: absolute;
 	height: 20px;
@@ -73,6 +56,21 @@
 	left: 7px;
 	top: 4px;
 }
+
+.orbb {
+	z-index: 0;
+	position:absolute;
+	border: 1px solid #f00;
+	opacity: 0.1;
+}
+#orbits div:nth-last-child(2) {
+	background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(255,0,0,1));
+	background: -o-linear-gradient(rgba(0,0,0,0), rgba(255,0,0,1));
+	background: -moz-linear-gradient(rgba(0,0,0,0), rgba(255,0,0,1));
+	background: linear-gradient(rgba(0,0,0,0), rgba(255,0,0,1));
+}
+
+
 #ref{
 	position: absolute;
 	height: 2px;
@@ -129,7 +127,7 @@ header > span {
 	left: 10px;
 }
 
-#main {
+main {
 	z-index: 100;
 	position: absolute;
 	top: 525px;
@@ -158,10 +156,10 @@ input {
 	border: 0;
 	border-left: 3px solid #12589d;
 }
-#main .in {
+main .in {
 	display: inline-block;
 }
-#main >:nth-child(2) {
+main >:nth-child(2) {
 	line-height:21.5px;
 }