Permalink
Browse files

some projector friendly styling

  • Loading branch information...
1 parent 328e13b commit 38ca3f1283dfa0e93c5da24798cbdc32b42efbc6 Kim Dalsgaard committed Mar 31, 2011
View
@@ -1,7 +1,7 @@
div.outer {
border: 2px solid #333;
position: relative;
- width: 500px; }
+ width: 300px; }
div.outer div.inner {
background-color: red;
height: 80px;
@@ -10,7 +10,7 @@ div.outer {
top: 0px;
width: 80px; }
div.outer div.inner.selected {
- left: 420px;
+ left: 220px;
-webkit-animation-name: slide;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1; }
@@ -21,12 +21,12 @@ div.outer {
-webkit-animation-timing-function: ease-in-out; }
70% {
- left: 500px;
+ left: 300px;
-webkit-animation-timing-function: ease-in-out; }
90% {
- left: 400px;
+ left: 200px;
-webkit-animation-timing-function: ease-in; }
100% {
- left: 420px; } }
+ left: 220px; } }
View
@@ -5,7 +5,7 @@ section.property ul.box {
border: 1px solid black;
display: -webkit-box;
padding: 5px;
- width: 400px; }
+ width: 300px; }
section.property ul.box li {
height: 50px;
margin: 5px;
View
@@ -13,6 +13,8 @@ body {
border-bottom: 4px solid #6B3;
color: white;
padding: 20px 50px; }
+ body > header h1 + h2 {
+ font-size: 130%; }
body > section {
background-color: white;
color: black;
@@ -34,7 +36,8 @@ body {
display: -webkit-box;
-webkit-box-align: start;
-webkit-box-flex: 1;
- -webkit-box-orient: horizontal; }
+ -webkit-box-orient: horizontal;
+ -webkit-box-lines: multiple; }
body > section h2 {
font-size: 140%; }
body > footer {
View
@@ -5,7 +5,7 @@ section.drag, section.drop {
border: 2px solid #333;
display: -webkit-box;
height: 100px;
- width: 500px; }
+ width: 350px; }
section.drag + section, section.drop + section {
margin-top: 10px; }
section.drag > div, section.drop > div {
View
@@ -1,12 +1,13 @@
body > section {
background-color: red;
+ color: #ddd;
min-height: 200px; }
body > section .narrow {
display: none; }
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 550px) {
body > section {
- background-color: green; }
+ background-color: blue; }
body > section .narrow {
display: inherit; }
body > section .wide {
View
@@ -1,3 +1,11 @@
+body > section > section {
+ -webkit-box-orient: vertical; }
+ body > section > section > section {
+ display: -webkit-box;
+ -webkit-box-orient: horizontal; }
+ body > section > section > section + section {
+ margin-top: 20px; }
+
section.transform {
display: -webkit-box;
-webkit-box-align: center;
View
@@ -1,7 +1,7 @@
div.outer {
border: 2px solid #333;
position: relative;
- width: 500px; }
+ width: 300px; }
div.outer div.inner {
background-color: red;
height: 80px;
@@ -11,4 +11,4 @@ div.outer {
-webkit-transition-property: left;
-webkit-transition-duration: 500ms; }
div.outer div.inner.selected {
- left: 420px; }
+ left: 220px; }
View
@@ -1,2 +1,5 @@
+body > section > section {
+ -webkit-box-orient: vertical; }
+
section.video + section.video {
- margin-left: 20px; }
+ margin-top: 20px; }
View
@@ -33,6 +33,8 @@
%a{:href => "transform2d.html"} Transformations
%li
%a{:href => "box.html"} Flexible Box Model
+ %li
+ %a{:href => "mediaquery.html"} Media Query
%nav
%ul
%li
@@ -3,7 +3,7 @@
%html
%head
%meta{:charset => "utf-8"}
- %meta :name => "viewport", :content => "width=device-width"
+ %meta{:name => "viewport", :content => "width=device-width"}
%title Media Query
%link{:href => "css/common.css", :rel => "stylesheet", :type => "text/css"}
%link{:href => "css/mediaquery.css", :rel => "stylesheet", :type => "text/css"}
View
@@ -13,26 +13,28 @@
%h2 Transformations in the 2D space
%section
%section
- %section.transform.translate
- %div.outer
- %div.inner
- %h2 translate
- %section.transform.scale
- %div.outer
- %div.inner
- %h2 scale
- %section.transform.rotate
- %div.outer
- %div.inner
- %h2 rotate
- %section.transform.skew
- %div.outer
- %div.inner
- %h2 skew
- %section.transform.rotate.origin
- %div.outer
- %div.inner
- %h2 origin
+ %section
+ %section.transform.translate
+ %div.outer
+ %div.inner
+ %h2 translate
+ %section.transform.scale
+ %div.outer
+ %div.inner
+ %h2 scale
+ %section.transform.rotate
+ %div.outer
+ %div.inner
+ %h2 rotate
+ %section
+ %section.transform.skew
+ %div.outer
+ %div.inner
+ %h2 skew
+ %section.transform.rotate.origin
+ %div.outer
+ %div.inner
+ %h2 origin
%aside
%ul
%li transform
View
@@ -38,7 +38,7 @@
var time = document.querySelector("section.time > span");
document.querySelector("section.time > button").addEventListener('click', function() {
- time.innerHTML = (new Date()).toString();
+ time.innerHTML = (new Date()).toTimeString();
}, false);
var prime = document.querySelector("section.primes > span");
View
@@ -45,6 +45,9 @@
<li>
<a href='box.html'>Flexible Box Model</a>
</li>
+ <li>
+ <a href='mediaquery.html'>Media Query</a>
+ </li>
</ul>
</nav>
<nav>
View
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset='utf-8' />
- <meta>:name => "viewport", :content => "width=device-width"</meta>
+ <meta content='width=device-width' name='viewport' />
<title>Media Query</title>
<link href='css/common.css' rel='stylesheet' type='text/css' />
<link href='css/mediaquery.css' rel='stylesheet' type='text/css' />
View
@@ -1,7 +1,7 @@
div.outer {
border: 2px solid #333;
position: relative;
- width: 500px;
+ width: 300px;
div.inner {
background-color: red;
@@ -11,7 +11,7 @@ div.outer {
top: 0px;
width: 80px;
&.selected {
- left: 420px;
+ left: 220px;
-webkit-animation-name: slide;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
@@ -25,14 +25,14 @@ div.outer {
-webkit-animation-timing-function: ease-in-out;
}
70% {
- left: 500px;
+ left: 300px;
-webkit-animation-timing-function: ease-in-out;
}
90% {
- left: 400px;
+ left: 200px;
-webkit-animation-timing-function: ease-in;
}
100% {
- left: 420px;
+ left: 220px;
}
}
View
@@ -9,7 +9,7 @@ section.property {
border: 1px solid black;
display: -webkit-box;
padding: 5px;
- width: 400px;
+ width: 300px;
li {
height: 50px;
View
@@ -16,6 +16,9 @@ body {
color: white;
padding: 20px 50px;
+ h1 + h2 {
+ font-size: 130%;
+ }
}
& > section {
@@ -24,7 +27,7 @@ body {
display: -webkit-box;
min-height: 250px;
padding: 20px 50px;
- -webkit-box-orient: horizontal;
+ -webkit-box-orient: horizontal;
& > aside {
border: 3px solid #555;
@@ -47,6 +50,7 @@ body {
-webkit-box-align: start;
-webkit-box-flex: 1;
-webkit-box-orient: horizontal;
+ -webkit-box-lines: multiple;
}
h2 {
View
@@ -7,7 +7,7 @@ section.drag, section.drop {
border: 2px solid #333;
display: -webkit-box;
height: 100px;
- width: 500px;
+ width: 350px;
& + section {
margin-top: 10px;
@@ -1,17 +1,18 @@
body > section {
background-color: red;
+ color: #ddd;
min-height: 200px;
.narrow {
display: none;
}
}
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 550px) {
body > section {
- background-color: green;
+ background-color: blue;
.narrow {
display: inherit;
View
@@ -1,3 +1,15 @@
+body > section > section {
+ -webkit-box-orient: vertical;
+
+ & > section {
+ display: -webkit-box;
+ -webkit-box-orient: horizontal;
+
+ & + section {
+ margin-top: 20px;
+ }
+ }
+}
section.transform {
display: -webkit-box;
@@ -1,7 +1,7 @@
div.outer {
border: 2px solid #333;
position: relative;
- width: 500px;
+ width: 300px;
div.inner {
background-color: red;
@@ -12,7 +12,7 @@ div.outer {
-webkit-transition-property: left;
-webkit-transition-duration: 500ms;
&.selected {
- left: 420px;
+ left: 220px;
}
}
}
View
@@ -1,4 +1,7 @@
+body > section > section {
+ -webkit-box-orient: vertical;
+}
section.video + section.video {
- margin-left: 20px;
+ margin-top: 20px;
}
Oops, something went wrong.

0 comments on commit 38ca3f1

Please sign in to comment.