change layout, factor out css, use lesscss

[hexbog.git] / style.less

diff --git a/style.less b/style.less
new file mode 100644 (file)
index 0000000..d740865
--- /dev/null
+++ b/style.less
@@ -0,0 +1,224 @@
+@board-inner-width: 358px;
+@board-inner-height: 410px;
+@board-pad: 15px; // also in main.coffee
+@board-width: @board-inner-width + @board-pad * 2;
+@board-height: @board-inner-height + @board-pad * 2;
+@column-pad: 10px;
+@right-width: 250px;
+@tabs-top: 120px;
+@tabtab-height: 20px; // also in main.coffee
+@tab-height: 150px; // also in main.coffee
+@row-pad: 10px;
+@copyright-height: 20px;
+
+@tab-color: #ddf;
+@tabtab-color: darken(@tab-color, 3%);
+
+body {
+       background: #eef;
+       color: black;
+       font: 14px Verdana, Arial, free-sans, sans-serif;
+       margin: 0;
+       padding: 0;
+}
+#centerer {
+       margin: auto auto;
+       width: @board-width + @column-pad + @right-width;
+       height: @board-height;
+       position: relative;
+}
+#boarder {
+       background: #f5f5ff;
+       position: absolute;
+       top: 0px;
+       left: 0px;
+       width: @board-width;
+       height: @board-height;
+       border-radius: 3px;
+       box-shadow: inset 1px 1px 4px #888;
+       overflow: hidden;
+}
+#board {
+       position: absolute;
+       top: @board-pad;
+       left: @board-pad;
+       width: @board-inner-width;
+       height: @board-inner-height;
+}
+#right {
+       position: absolute;
+       top: 0px;
+       left: @board-width + @column-pad;
+       width: @right-width;
+       height: @board-height;
+       h1 {
+               font-size: 28px;
+               color: #55f;
+               margin: 0;
+               text-align: center;
+       }
+       #subhead {
+               margin-bottom: 10px;
+               text-align: center;
+       }
+       #tabs {
+               position: absolute;
+               top: @tabs-top;
+               height: @tabtab-height * 4 + @tab-height;
+       }
+       .tab + .tab, .selected-tab + .tab, .tab + .selected-tab {
+               margin-top: 5px;
+       }
+       .tabtab {
+               height: @tabtab-height;
+               padding: 0 0 0 3px;
+               background: @tabtab-color;
+       }
+       .selected-tab, .tab {
+               overflow: hidden;
+               box-shadow: 1px 1px 3px #888;
+               background: @tab-color;
+               border-radius: 3px;
+       }
+       .selected-tab {
+               .tabtab:before {
+                       content: "▼ ";
+               }
+       }
+       .tab {
+               .tabtab:before {
+                       content: "▶ ";
+               }
+               .tabtab {
+                       cursor: pointer;
+               }
+               .tabtab:hover {
+                       color: darken(@tab-color, 50%);
+               }
+               .tabtab:hover:before {
+                       content: "▼ ";
+               }
+       }
+       #copyright {
+               position: absolute;
+               top: @board-height - @row-pad - @copyright-height;
+               left: 0px;
+               font-size: 85%;
+       }
+}
+.tile {
+       padding-top: 4px;
+       height: 38px;
+       width: 42px;
+       background-color: #aaf;
+       color: #000;
+       font-size: 30px;
+       display: block;
+       position: absolute;
+       border-radius: 13px;
+       text-align: center;
+       cursor: pointer;
+       user-select: none;
+       -khtml-user-select: none;
+       -o-user-select: none;
+       -moz-user-select: -moz-none;
+       -webkit-user-select: none;
+       box-shadow: 1px 1px 2px #666;
+}
+.tile.selected, .tile.selected_word {
+       background-color: #ffa;
+       box-shadow: inset 1px 1px 5px #444;
+}
+.tile.selected_word {
+       background-color: #cfc;
+}
+#loading {
+       position: absolute;
+       top: 140px;
+       right: 140px;
+       font-size: 32px;
+}
+.head {
+       margin-top: -4px;
+       height: 42px;
+       width: 42px;
+       position: relative;
+       border-radius: 13px;
+}
+.eye1, .eye2 {
+       width: 6px;
+       height: 6px;
+       border: 2px solid #a83;
+       border-radius: 9px;
+       background-color: white;
+       position: absolute;
+}
+.eye1 {
+       top: -8px;
+       right: -1px;
+       width: 5px;
+       border-width: 4px 4px 3px 4px;
+}
+.eye2 {
+       right: -9px;
+       top: 1px;
+       border-width: 3px 4px 4px 2px;
+}
+.tooth1, .tooth2, .tooth3, .tooth4 {
+       width: 6px;
+       height: 6px;
+       border: 2px solid #a83;
+       background-color: white;
+       position: absolute;
+}
+.tooth1 {
+       top: -2px;
+       left: 22px;
+       width: 7px;
+       border-width: 2px 0 2px 2px;
+}
+.tooth2 {
+       height: 7px;
+       top: 12px;
+       right: -3px;
+       border-width: 0 2px 2px 2px;
+}
+.pate {
+       position: absolute;
+       top: -2px;
+       right: -3px;
+       width: 12px;
+       height: 12px;
+       background: white;
+       border: 2px solid #a83;
+       border-radius: 0 13px 0 0;
+}
+.tooth3 {
+       width: 7px;
+       bottom: -3px;
+       left: 12px;
+       border-width: 2px 2px 2px 0;
+}
+.tooth4 {
+       height: 7px;
+       bottom: 11px;
+       left: -2px;
+       border-width: 2px 2px 0 2px;
+}
+.chin {
+       position: absolute;
+       bottom: -3px;
+       left: -2px;
+       width: 12px;
+       height: 12px;
+       background: white;
+       border: 2px solid #a83;
+       border-radius: 0 0 0 13px;
+}
+#definition {
+       overflow: auto;
+}
+#definition_credit {
+       margin-top: 15px;
+       font-size: 12px;
+}