Port spacing tweaks from static site

* Improve the vertical position of experiments within the page * Avoid styling generic html elements
fofr · Jun 13, 2014 · d3ac162 · d3ac162
1 parent b206f3d
commit d3ac162
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 21 deletions.
diff --git a/clock/css/experiment.css b/clock/css/experiment.css
@@ -4,24 +4,23 @@ Date: 24th March 2009
 Author: Paul Hayes
  */
 
-body.experiment {
+body {
     background: #fff;
 }
 
 .start {
     text-align: center;
     font-size: 2em;
     font-weight: bold;
-    margin: 5em;
+    margin: 0 0 2em;
 }
 
 #clock {
     position: relative;
     width: 378px;
     height: 378px;
     background-image: url('../images/clockFace.png');
-    left: 50%;
-    margin: 5em 0 0 -189px;
+    margin: 3em auto;
 }
 
 #clock div {
@@ -76,4 +75,4 @@ body.experiment {
     -o-transform: rotate(360deg);
     -ms-transform: rotate(360deg);
     transform: rotate(360deg);
-}
+}
diff --git a/cube/css/experiment.css b/cube/css/experiment.css
@@ -4,10 +4,14 @@ Date: 26th March 2009
 Author: Paul Hayes
 */
 
+#experiment {
+    min-height: 500px;
+}
+
 .cube {
     position: absolute;
     left: 50%;
-    top: 300px;
+    top: 250px;
     margin-left: -200px;
 }
 
@@ -127,4 +131,4 @@ Author: Paul Hayes
 .cube div.topFace.video div {
     background-color: #000;
     color: #fff;
-}
+}
diff --git a/cube/css/experimentMultiCube.css b/cube/css/experimentMultiCube.css
@@ -4,8 +4,12 @@ Date: 30th April 2009
 Author: Paul Hayes
 */
 
+#experiment {
+    min-height: 1000px;
+}
+
 .cube {
-    position: fixed;
+    position: absolute;
     left: 50%;
     top: 300px;
 }
@@ -112,4 +116,4 @@ Author: Paul Hayes
     -o-transform: translate(202px, 115px);
     -ms-transform: translate(202px, 115px);
     transform: translate(202px, 115px);
-}
+}
diff --git a/media-query-transitions/css/experiment.css b/media-query-transitions/css/experiment.css
@@ -12,9 +12,9 @@
 /* Extra niceties  */
 /*************************************************/
 
-section {
+.listener-output {
     width: 640px;
-    margin: 0 auto;
+    margin: 0 auto 200px;
     text-shadow: 0 1px 0 #fff;
     text-align: center;
 }
@@ -51,9 +51,9 @@ section h2 {
 }
 
 @media all and (max-width: 740px) {
-    section {
+    .listener-output {
         width: auto;
         margin: 20px;
         -webkit-transition: none; /* make transition event one direction only */
     }
-}
+}
diff --git a/parallax/css/experiment.css b/parallax/css/experiment.css
@@ -6,11 +6,11 @@ Author: Paul Hayes
 
 #background {
     background: url('../images/foreground.png') 5% 5%, url('../images/midground.png') 50% 50%, url('../images/background.png') 90% 110%;
-    top: 90px;
+    top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    position: fixed;
+    position: absolute;
     -webkit-transition: left 300s linear;
     -moz-transition: left 300s linear;
     -o-transition: left 300s linear;
@@ -27,17 +27,17 @@ Author: Paul Hayes
 }
 
 #content {
-    margin: 3em 10em;
+    margin: 6em 10em;
     background-color: #333;
     opacity: 0.95;
     color: #ccc;
     padding: 3em;
-    position: fixed;
     border: 2px solid #666;
 }
 
 #content h2 {
     margin: 1em 0;
     font-weight: bold;
     font-size:  26px;
-}
+    color: #fff;
+}
diff --git a/sphere/css/experiment.css b/sphere/css/experiment.css
@@ -202,8 +202,8 @@
 
 #controls {
     position: absolute;
-    left: 20px;
-    top: 115px;
+    left: 48px;
+    top: 48px;
 }
 
 #controls fieldset {
@@ -221,4 +221,4 @@
 
 #controls input {
     vertical-align: baseline;
-}
+}