Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

some projector friendly styling

  • Loading branch information...
commit 38ca3f1283dfa0e93c5da24798cbdc32b42efbc6 1 parent 328e13b
authored March 31, 2011
10  css/animation.css
... ...
@@ -1,7 +1,7 @@
1 1
 div.outer {
2 2
   border: 2px solid #333;
3 3
   position: relative;
4  
-  width: 500px; }
  4
+  width: 300px; }
5 5
   div.outer div.inner {
6 6
     background-color: red;
7 7
     height: 80px;
@@ -10,7 +10,7 @@ div.outer {
10 10
     top: 0px;
11 11
     width: 80px; }
12 12
     div.outer div.inner.selected {
13  
-      left: 420px;
  13
+      left: 220px;
14 14
       -webkit-animation-name: slide;
15 15
       -webkit-animation-duration: 2s;
16 16
       -webkit-animation-iteration-count: 1; }
@@ -21,12 +21,12 @@ div.outer {
21 21
     -webkit-animation-timing-function: ease-in-out; }
22 22
 
23 23
   70% {
24  
-    left: 500px;
  24
+    left: 300px;
25 25
     -webkit-animation-timing-function: ease-in-out; }
26 26
 
27 27
   90% {
28  
-    left: 400px;
  28
+    left: 200px;
29 29
     -webkit-animation-timing-function: ease-in; }
30 30
 
31 31
   100% {
32  
-    left: 420px; } }
  32
+    left: 220px; } }
2  css/box.css
@@ -5,7 +5,7 @@ section.property ul.box {
5 5
   border: 1px solid black;
6 6
   display: -webkit-box;
7 7
   padding: 5px;
8  
-  width: 400px; }
  8
+  width: 300px; }
9 9
   section.property ul.box li {
10 10
     height: 50px;
11 11
     margin: 5px;
5  css/common.css
@@ -13,6 +13,8 @@ body {
13 13
     border-bottom: 4px solid #6B3;
14 14
     color: white;
15 15
     padding: 20px 50px; }
  16
+    body > header h1 + h2 {
  17
+      font-size: 130%; }
16 18
   body > section {
17 19
     background-color: white;
18 20
     color: black;
@@ -34,7 +36,8 @@ body {
34 36
       display: -webkit-box;
35 37
       -webkit-box-align: start;
36 38
       -webkit-box-flex: 1;
37  
-      -webkit-box-orient: horizontal; }
  39
+      -webkit-box-orient: horizontal;
  40
+      -webkit-box-lines: multiple; }
38 41
     body > section h2 {
39 42
       font-size: 140%; }
40 43
   body > footer {
2  css/dragndrop.css
@@ -5,7 +5,7 @@ section.drag, section.drop {
5 5
   border: 2px solid #333;
6 6
   display: -webkit-box;
7 7
   height: 100px;
8  
-  width: 500px; }
  8
+  width: 350px; }
9 9
   section.drag + section, section.drop + section {
10 10
     margin-top: 10px; }
11 11
   section.drag > div, section.drop > div {
5  css/mediaquery.css
... ...
@@ -1,12 +1,13 @@
1 1
 body > section {
2 2
   background-color: red;
  3
+  color: #ddd;
3 4
   min-height: 200px; }
4 5
   body > section .narrow {
5 6
     display: none; }
6 7
 
7  
-@media only screen and (max-width: 600px) {
  8
+@media only screen and (max-width: 550px) {
8 9
   body > section {
9  
-    background-color: green; }
  10
+    background-color: blue; }
10 11
     body > section .narrow {
11 12
       display: inherit; }
12 13
     body > section .wide {
8  css/transform2d.css
... ...
@@ -1,3 +1,11 @@
  1
+body > section > section {
  2
+  -webkit-box-orient: vertical; }
  3
+  body > section > section > section {
  4
+    display: -webkit-box;
  5
+    -webkit-box-orient: horizontal; }
  6
+    body > section > section > section + section {
  7
+      margin-top: 20px; }
  8
+
1 9
 section.transform {
2 10
   display: -webkit-box;
3 11
   -webkit-box-align: center;
4  css/transition.css
... ...
@@ -1,7 +1,7 @@
1 1
 div.outer {
2 2
   border: 2px solid #333;
3 3
   position: relative;
4  
-  width: 500px; }
  4
+  width: 300px; }
5 5
   div.outer div.inner {
6 6
     background-color: red;
7 7
     height: 80px;
@@ -11,4 +11,4 @@ div.outer {
11 11
     -webkit-transition-property: left;
12 12
     -webkit-transition-duration: 500ms; }
13 13
     div.outer div.inner.selected {
14  
-      left: 420px; }
  14
+      left: 220px; }
5  css/video.css
... ...
@@ -1,2 +1,5 @@
  1
+body > section > section {
  2
+  -webkit-box-orient: vertical; }
  3
+
1 4
 section.video + section.video {
2  
-  margin-left: 20px; }
  5
+  margin-top: 20px; }
2  haml/index.haml
@@ -33,6 +33,8 @@
33 33
               %a{:href => "transform2d.html"} Transformations
34 34
             %li
35 35
               %a{:href => "box.html"} Flexible Box Model 
  36
+            %li
  37
+              %a{:href => "mediaquery.html"} Media Query 
36 38
         %nav
37 39
           %ul
38 40
             %li
2  haml/mediaquery.haml
@@ -3,7 +3,7 @@
3 3
 %html
4 4
   %head
5 5
     %meta{:charset => "utf-8"}
6  
-    %meta :name => "viewport", :content => "width=device-width"
  6
+    %meta{:name => "viewport", :content => "width=device-width"}
7 7
     %title Media Query
8 8
     %link{:href => "css/common.css", :rel => "stylesheet", :type => "text/css"}
9 9
     %link{:href => "css/mediaquery.css", :rel => "stylesheet", :type => "text/css"}
42  haml/transform2d.haml
@@ -13,26 +13,28 @@
13 13
         %h2 Transformations in the 2D space
14 14
     %section
15 15
       %section
16  
-        %section.transform.translate
17  
-          %div.outer
18  
-            %div.inner
19  
-          %h2 translate
20  
-        %section.transform.scale
21  
-          %div.outer
22  
-            %div.inner
23  
-          %h2 scale
24  
-        %section.transform.rotate
25  
-          %div.outer
26  
-            %div.inner
27  
-          %h2 rotate
28  
-        %section.transform.skew
29  
-          %div.outer
30  
-            %div.inner
31  
-          %h2 skew
32  
-        %section.transform.rotate.origin
33  
-          %div.outer
34  
-            %div.inner
35  
-          %h2 origin
  16
+        %section
  17
+          %section.transform.translate
  18
+            %div.outer
  19
+              %div.inner
  20
+            %h2 translate
  21
+          %section.transform.scale
  22
+            %div.outer
  23
+              %div.inner
  24
+            %h2 scale
  25
+          %section.transform.rotate
  26
+            %div.outer
  27
+              %div.inner
  28
+            %h2 rotate
  29
+        %section
  30
+          %section.transform.skew
  31
+            %div.outer
  32
+              %div.inner
  33
+            %h2 skew
  34
+          %section.transform.rotate.origin
  35
+            %div.outer
  36
+              %div.inner
  37
+            %h2 origin
36 38
       %aside
37 39
         %ul
38 40
           %li transform
2  haml/webworker.haml
@@ -38,7 +38,7 @@
38 38
 
39 39
       var time = document.querySelector("section.time > span");
40 40
       document.querySelector("section.time > button").addEventListener('click', function() {
41  
-        time.innerHTML = (new Date()).toString();
  41
+        time.innerHTML = (new Date()).toTimeString();
42 42
       }, false);
43 43
 
44 44
       var prime = document.querySelector("section.primes > span");
3  index.html
@@ -45,6 +45,9 @@
45 45
             <li>
46 46
               <a href='box.html'>Flexible Box Model</a>
47 47
             </li>
  48
+            <li>
  49
+              <a href='mediaquery.html'>Media Query</a>
  50
+            </li>
48 51
           </ul>
49 52
         </nav>
50 53
         <nav>
2  mediaquery.html
@@ -2,7 +2,7 @@
2 2
 <html>
3 3
   <head>
4 4
     <meta charset='utf-8' />
5  
-    <meta>:name => "viewport", :content => "width=device-width"</meta>
  5
+    <meta content='width=device-width' name='viewport' />
6 6
     <title>Media Query</title>
7 7
     <link href='css/common.css' rel='stylesheet' type='text/css' />
8 8
     <link href='css/mediaquery.css' rel='stylesheet' type='text/css' />
10  scss/animation.scss
... ...
@@ -1,7 +1,7 @@
1 1
 div.outer {
2 2
   border: 2px solid #333;
3 3
   position: relative;
4  
-  width: 500px;
  4
+  width: 300px;
5 5
 
6 6
   div.inner {
7 7
     background-color: red;
@@ -11,7 +11,7 @@ div.outer {
11 11
     top: 0px;
12 12
     width: 80px;
13 13
     &.selected {
14  
-      left: 420px;
  14
+      left: 220px;
15 15
       -webkit-animation-name: slide;
16 16
       -webkit-animation-duration: 2s;
17 17
       -webkit-animation-iteration-count: 1;
@@ -25,14 +25,14 @@ div.outer {
25 25
     -webkit-animation-timing-function: ease-in-out;
26 26
   }
27 27
   70% {
28  
-    left: 500px;
  28
+    left: 300px;
29 29
     -webkit-animation-timing-function: ease-in-out;
30 30
   }
31 31
   90% {
32  
-    left: 400px;
  32
+    left: 200px;
33 33
     -webkit-animation-timing-function: ease-in;
34 34
   }
35 35
   100% {
36  
-    left: 420px;
  36
+    left: 220px;
37 37
   }
38 38
 }
2  scss/box.scss
@@ -9,7 +9,7 @@ section.property {
9 9
     border: 1px solid black;
10 10
     display: -webkit-box;
11 11
     padding: 5px;
12  
-    width: 400px;
  12
+    width: 300px;
13 13
     
14 14
     li {
15 15
       height: 50px;
6  scss/common.scss
@@ -16,6 +16,9 @@ body {
16 16
 		color: white;
17 17
 		padding: 20px 50px;
18 18
 		
  19
+		h1 + h2 {
  20
+		  font-size: 130%;
  21
+		}
19 22
 	}
20 23
 	
21 24
 	& > section {
@@ -24,7 +27,7 @@ body {
24 27
 		display: -webkit-box;
25 28
 		min-height: 250px;
26 29
 		padding: 20px 50px;
27  
-		-webkit-box-orient: horizontal;	
  30
+		-webkit-box-orient: horizontal;
28 31
 
29 32
 		& > aside {
30 33
 			border: 3px solid #555;
@@ -47,6 +50,7 @@ body {
47 50
 			-webkit-box-align: start;
48 51
 			-webkit-box-flex: 1;
49 52
 			-webkit-box-orient: horizontal;
  53
+  		-webkit-box-lines: multiple;
50 54
 		}
51 55
 
52 56
 		h2 {
2  scss/dragndrop.scss
@@ -7,7 +7,7 @@ section.drag, section.drop {
7 7
   border: 2px solid #333;
8 8
   display: -webkit-box;
9 9
   height: 100px;
10  
-  width: 500px;
  10
+  width: 350px;
11 11
   
12 12
   & + section {
13 13
     margin-top: 10px;
5  scss/mediaquery.scss
... ...
@@ -1,6 +1,7 @@
1 1
 
2 2
 body > section {
3 3
   background-color: red;
  4
+  color: #ddd;
4 5
   min-height: 200px;
5 6
 
6 7
 	.narrow {
@@ -8,10 +9,10 @@ body > section {
8 9
 	}
9 10
 }
10 11
 
11  
-@media only screen and (max-width: 600px) {
  12
+@media only screen and (max-width: 550px) {
12 13
 	
13 14
 	body > section {
14  
-		background-color: green;
  15
+		background-color: blue;
15 16
 		
16 17
 		.narrow {
17 18
 			display: inherit;
12  scss/transform2d.scss
... ...
@@ -1,3 +1,15 @@
  1
+body > section > section {
  2
+  -webkit-box-orient: vertical;
  3
+  
  4
+  & > section {
  5
+    display: -webkit-box;
  6
+    -webkit-box-orient: horizontal;
  7
+    
  8
+    & + section {
  9
+      margin-top: 20px;
  10
+    }
  11
+  }
  12
+}
1 13
 
2 14
 section.transform {
3 15
   display: -webkit-box;
4  scss/transition.scss
... ...
@@ -1,7 +1,7 @@
1 1
 div.outer {
2 2
   border: 2px solid #333;
3 3
   position: relative;
4  
-  width: 500px;
  4
+  width: 300px;
5 5
 
6 6
   div.inner {
7 7
     background-color: red;
@@ -12,7 +12,7 @@ div.outer {
12 12
     -webkit-transition-property: left;
13 13
     -webkit-transition-duration: 500ms;
14 14
     &.selected {
15  
-      left: 420px;
  15
+      left: 220px;
16 16
     }
17 17
   }
18 18
 }
5  scss/video.scss
... ...
@@ -1,4 +1,7 @@
  1
+body > section > section {
  2
+  -webkit-box-orient: vertical;
  3
+}
1 4
 
2 5
 section.video + section.video {
3  
-  margin-left: 20px;
  6
+  margin-top: 20px;
4 7
 }
60  transform2d.html
@@ -15,35 +15,39 @@
15 15
     </header>
16 16
     <section>
17 17
       <section>
18  
-        <section class='transform translate'>
19  
-          <div class='outer'>
20  
-            <div class='inner'></div>
21  
-          </div>
22  
-          <h2>translate</h2>
  18
+        <section>
  19
+          <section class='transform translate'>
  20
+            <div class='outer'>
  21
+              <div class='inner'></div>
  22
+            </div>
  23
+            <h2>translate</h2>
  24
+          </section>
  25
+          <section class='transform scale'>
  26
+            <div class='outer'>
  27
+              <div class='inner'></div>
  28
+            </div>
  29
+            <h2>scale</h2>
  30
+          </section>
  31
+          <section class='transform rotate'>
  32
+            <div class='outer'>
  33
+              <div class='inner'></div>
  34
+            </div>
  35
+            <h2>rotate</h2>
  36
+          </section>
23 37
         </section>
24  
-        <section class='transform scale'>
25  
-          <div class='outer'>
26  
-            <div class='inner'></div>
27  
-          </div>
28  
-          <h2>scale</h2>
29  
-        </section>
30  
-        <section class='transform rotate'>
31  
-          <div class='outer'>
32  
-            <div class='inner'></div>
33  
-          </div>
34  
-          <h2>rotate</h2>
35  
-        </section>
36  
-        <section class='transform skew'>
37  
-          <div class='outer'>
38  
-            <div class='inner'></div>
39  
-          </div>
40  
-          <h2>skew</h2>
41  
-        </section>
42  
-        <section class='transform rotate origin'>
43  
-          <div class='outer'>
44  
-            <div class='inner'></div>
45  
-          </div>
46  
-          <h2>origin</h2>
  38
+        <section>
  39
+          <section class='transform skew'>
  40
+            <div class='outer'>
  41
+              <div class='inner'></div>
  42
+            </div>
  43
+            <h2>skew</h2>
  44
+          </section>
  45
+          <section class='transform rotate origin'>
  46
+            <div class='outer'>
  47
+              <div class='inner'></div>
  48
+            </div>
  49
+            <h2>origin</h2>
  50
+          </section>
47 51
         </section>
48 52
       </section>
49 53
       <aside>
4  websocket.html
@@ -37,8 +37,8 @@
37 37
       //<![CDATA[
38 38
         var input = document.querySelector("input");
39 39
         var result = document.querySelector("pre.result");
40  
-        //var connection = new WebSocket('ws://html5rocks.websocket.org/echo');
41  
-        var connection = new WebSocket('ws://localhost:8340');
  40
+        var connection = new WebSocket('ws://html5rocks.websocket.org/echo');
  41
+        //var connection = new WebSocket('ws://localhost:8340');
42 42
         connection.onopen = function () {
43 43
           document.querySelector("button.send").addEventListener('click', function() {
44 44
             connection.send(input.value);
2  webworker.html
@@ -50,7 +50,7 @@
50 50
       //<![CDATA[
51 51
         var time = document.querySelector("section.time > span");
52 52
         document.querySelector("section.time > button").addEventListener('click', function() {
53  
-          time.innerHTML = (new Date()).toString();
  53
+          time.innerHTML = (new Date()).toTimeString();
54 54
         }, false);
55 55
         
56 56
         var prime = document.querySelector("section.primes > span");

0 notes on commit 38ca3f1

Please sign in to comment.
Something went wrong with that request. Please try again.