Permalink
Browse files

Terrible, but it's a start. See #298

  • Loading branch information...
1 parent 2a31fe9 commit 2fad255316cc85a47f3aa00b3fb20117796f864b @raganwald committed Jun 10, 2010
Showing with 261 additions and 157 deletions.
  1. +23 −62 c/application.css
  2. +18 −10 c/board.ipad.css
  3. +29 −62 c/sass/application.sass
  4. +25 −10 c/sass/board.ipad.sass
  5. +135 −0 haml/index.html.haml
  6. BIN i/ghost-black.png
  7. BIN i/ghost-white.png
  8. +7 −11 index.html
  9. +24 −2 j/go.js
View
@@ -23,67 +23,19 @@
.landscape .foot.toolbar {
display: none; }
-.head.bubble {
- margin-left: -200px; }
+.head.triangle-right {
+ left: 25%;
+ margin-left: -12.5%;
+ width: 25%;
+ margin-bottom: 10px;
+ z-index: 1; }
-.foot.bubble {
- margin-left: 0;
- /* NOTE: webkit gradient implementation is not as per spec */
- background: -webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
- background: -moz-linear-gradient(top, #f9d835, #f3961c);
- background: -o-linear-gradient(top, #f9d835, #f3961c);
- background: linear-gradient(top, #f9d835, #f3961c); }
- .foot.bubble:after {
- top: -30px;
- /* value = - border-top-width - border-bottom-width */
- right: 50px;
- /* controls horizontal position */
- bottom: auto;
- left: auto;
- border-color: transparent transparent #f9d835; }
-
-.message {
- width: 200px;
- overflow: hidden;
- position: relative;
- left: 50%; }
- .message .bubble {
- margin-bottom: 1em; }
-
-.bubble {
- /* #f3961c */
- /* #f9d835 */
- position: relative;
- padding: 15px;
- margin: 1em 0 3em;
- color: black;
- background: #f9d835;
- /* default background for browsers without gradient support */
- /* css3 */
- -moz-border-radius: 10px;
- -webkit-border-radius: 10px;
- border-radius: 10px;
- /* NOTE: webkit gradient implementation is not as per spec */
- background: -webkit-gradient(linear, left top, left bottom, from(#f3961c), to(#f9d835));
- background: -moz-linear-gradient(top, #f3961c, #f9d835);
- background: -o-linear-gradient(top, #f3961c, #f9d835);
- background: linear-gradient(top, #f3961c, #f9d835); }
- .bubble:after {
- content: "\00a0";
- display: block;
- /* reduce the damage in FF3.0 */
- position: absolute;
- z-index: -1;
- bottom: -30px;
- /* value = - border-top-width - border-bottom-width */
- left: 50px;
- /* controls horizontal position */
- width: 0;
- height: 0;
- border-width: 15px 15px;
- /* vary these values to change the angle of the vertex */
- border-style: solid;
- border-color: #f9d835 transparent transparent; }
+.foot.triangle-right {
+ left: 75%;
+ margin-left: -12.5%;
+ width: 25%;
+ z-index: 1;
+ margin-top: 10px; }
.new_game ul li {
position: relative !important; }
@@ -113,5 +65,14 @@
.progress .ui-dialog-titlebar {
display: none; }
-.iconButton {
- float: right; }
+.board .captured img {
+ height: 30px;
+ width: 30px;
+ -o-background-size: 100%;
+ -webkit-background-size: 100%;
+ -khtml-background-size: 100%;
+ -moz-background-size: 100%; }
+.board .captured.black img {
+ background: url(../i/ghost-black.png); }
+.board .captured.white img {
+ background: url(../i/ghost-white.png); }
View
@@ -340,17 +340,25 @@
left: 100%;
margin-left: -100%; }
-.landscape .move.play .board .head {
+.head, .foot {
+ height: 30px;
+ padding: 5px 5px 5px 5px; }
+
+.profile .move.play .board .head .guest {
+ display: inline;
+ float: right;
+ -webkit-transform: rotate(180deg); }
+.profile .move.play .board .foot .white {
display: none; }
-.landscape .move.play .board .foot .black {
+.profile .move.play .board .foot .black {
display: inline;
- float: left;
- margin-left: 10px; }
- .landscape .move.play .board .foot .black:before {
- content: url("../i/simple-black.png"); }
+ float: right; }
+
+.landscape .move.play .board .head {
+ display: none; }
.landscape .move.play .board .foot .white {
display: inline;
- float: right;
- margin-right: 10px; }
- .landscape .move.play .board .foot .white:after {
- content: url("../i/simple-white.png"); }
+ float: left; }
+.landscape .move.play .board .foot .black {
+ display: inline;
+ float: right; }
View
@@ -30,68 +30,22 @@ $lightgrey: #333
$messagewidth: 200px
$bubblefrom: #f3961c
$bubbleto: #f9d835
-
-.head.bubble
- margin-left: -1 * $messagewidth
-.foot.bubble
- margin-left: 0
- /* NOTE: webkit gradient implementation is not as per spec
- background: -webkit-gradient(linear, left top, left bottom, from($bubbleto), to($bubblefrom))
- background: -moz-linear-gradient(top, $bubbleto, $bubblefrom)
- background: -o-linear-gradient(top, $bubbleto, $bubblefrom)
- background: linear-gradient(top, $bubbleto, $bubblefrom)
- &:after
- top: -30px
- /* value = - border-top-width - border-bottom-width
- right: 50px
- /* controls horizontal position
- bottom: auto
- left: auto
- border-color: transparent transparent $bubbleto
-
-.message
- width: $messagewidth
- overflow: hidden
- position: relative
- left: 50%
- .bubble
- margin-bottom: 1em
+$separation_between_board_and_bubble: 10px
-.bubble
- /* #f3961c
- /* #f9d835
- position: relative
- padding: 15px
- margin: 1em 0 3em
- color: $black
- background: $bubbleto
- /* default background for browsers without gradient support
- /* css3
- -moz-border-radius: 10px
- -webkit-border-radius: 10px
- border-radius: 10px
- /* NOTE: webkit gradient implementation is not as per spec
- background: -webkit-gradient(linear, left top, left bottom, from($bubblefrom), to($bubbleto))
- background: -moz-linear-gradient(top, $bubblefrom, $bubbleto)
- background: -o-linear-gradient(top, $bubblefrom, $bubbleto)
- background: linear-gradient(top, $bubblefrom, $bubbleto)
- &:after
- content: "\00a0"
- display: block
- /* reduce the damage in FF3.0
- position: absolute
- z-index: -1
- bottom: -30px
- /* value = - border-top-width - border-bottom-width
- left: 50px
- /* controls horizontal position
- width: 0
- height: 0
- border-width: 15px 15px
- /* vary these values to change the angle of the vertex
- border-style: solid
- border-color: $bubbleto transparent transparent
+.head.triangle-right
+ left: 25%
+ margin-left: -12.5%
+ width: 25%
+ margin-bottom: $separation_between_board_and_bubble
+ z-index: 1
+
+.foot.triangle-right
+ left: 75%
+ margin-left: -12.5%
+ width: 25%
+ z-index: 1
+ margin-top: $separation_between_board_and_bubble
.new_game
ul
@@ -128,5 +82,18 @@ $bubbleto: #f9d835
.ui-dialog-titlebar
:display none
-.iconButton
- :float right
+.board
+ .captured
+ img
+ height: 30px
+ width: 30px
+ -o-background-size: 100%
+ -webkit-background-size: 100%
+ -khtml-background-size: 100%
+ -moz-background-size: 100%
+ &.black
+ img
+ background: url(../i/ghost-black.png)
+ &.white
+ img
+ background: url(../i/ghost-white.png)
View
@@ -384,22 +384,37 @@ $zoom_in_size: $large
display: inline
left: 100%
margin-left: -100%
-
+
+$stonediameter: 30px
+
+.head,.foot
+ height: $stonediameter
+ padding: 5px 5px 5px 5px
+
+.profile
+ .move.play
+ .board
+ .head
+ .guest
+ display: inline
+ float: right
+ -webkit-transform: rotate(180deg)
+ .foot
+ .white
+ display: none
+ .black
+ display: inline
+ float: right
+
.landscape
.move.play
.board
.head
display: none
.foot
- .black
+ .white
display: inline
float: left
- margin-left: 10px
- &:before
- content: url("../i/simple-black.png")
- .white
+ .black
display: inline
- float: right
- margin-right: 10px
- &:after
- content: url("../i/simple-white.png")
+ float: right
Oops, something went wrong.

0 comments on commit 2fad255

Please sign in to comment.