Commits

Steve Losh committed e9fbdb8

Layout.

Comments (0)

Files changed (3)

src/scripts/redstone.cljs

 (def jq (js* "$"))
 
 (defn ^:export main []
-  (.fadeOut (jq "div") "slow"))
+  nil)
 
 (jq #(main))
 

src/site/index.html

         <title>Redstone</title>
 
         <link href="/styles/style.less" type="text/less" rel="stylesheet" />
+        <link href='http://fonts.googleapis.com/css?family=Leckerli+One&v2' rel='stylesheet' type='text/css'>
 
         <script type="text/javascript" src="/scripts/less.min.js"></script>
         <script type="text/javascript" src="/scripts/jquery.min.js"></script>
             <h2>A simple tool for sketching out Minecraft redstone circuitry.</h2>
         </header>
 
-        <section class="content">
+        <section class="content group">
             <div class="canvas">
                 canvas
             </div>

src/site/styles/style.less

+@fancy: 'Leckerli One', cursive;
+@sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+// Mixins --------------------------------------------------------------------------
+.border-radius(@radius: 5px) {
+    -webkit-background-clip: padding-box;
+    -webkit-border-radius: @radius;
+    -moz-background-clip: padding-box;
+    -moz-border-radius: @radius;
+    border-radius: @radius;
+    background-clip: padding-box;
+}
+.box-shadow(@horizontal: 0px, @vertical: 1px, @blur: 2px, @color: #CCC) {
+  -webkit-box-shadow: @horizontal @vertical @blur @color;
+  -moz-box-shadow: @horizontal @vertical @blur @color;
+  box-shadow: @horizontal @vertical @blur @color;
+}
+.inset-box-shadow(@horizontal: 0px, @vertical: 1px, @blur: 2px, @color: #CCC) {
+  -webkit-box-shadow: inset @horizontal @vertical @blur @color;
+  -moz-box-shadow: inset @horizontal @vertical @blur @color;
+  box-shadow: inset @horizontal @vertical @blur @color;
+}
+.multi-color-border(@top, @sides, @bottom) {
+    border-top: 1px solid @top;
+    border-left: 1px solid @sides;
+    border-right: 1px solid @sides;
+    border-bottom: 1px solid @bottom;
+}
+.multi-border-radius(@topLeft: 5px, @topRight: 5px, @bottomRight: 5px, @bottomLeft: 5px) {
+    -webkit-border-top-left-radius: @topLeft;
+    -webkit-border-top-right-radius: @topRight;
+    -webkit-border-bottom-right-radius: @bottomRight;
+    -webkit-border-bottom-left-radius: @bottomLeft;
+    -moz-border-radius-topleft: @topLeft;
+    -moz-border-radius-topright: @topRight;
+    -moz-border-radius-bottomright: @bottomRight;
+    -moz-border-radius-bottomleft: @bottomLeft;
+    border-top-left-radius: @topLeft;
+    border-top-right-radius: @topRight;
+    border-bottom-right-radius: @bottomRight;
+    border-bottom-left-radius: @bottomLeft;
+}
+.vertical-gradient(@start: #000, @stop: #FFF) {
+    background: (@start + @stop) / 2;
+    background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@stop));
+    background: -moz-linear-gradient(center top, @start 0%, @stop 100%);
+    background: -moz-gradient(center top, @start 0%, @stop 100%);
+}
+
+// Basic ---------------------------------------------------------------------------
 html {
     overflow-y: scroll;
 }
+html, body {
+    font: normal 16px @sans;
+}
+a {
+    color: #FF4444;
+}
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+.group:after {
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+}
+
+// Layout --------------------------------------------------------------------------
 header, .content, footer {
-    width: 860px;
+    width: 960px;
     margin: 0 auto;
 }
+header {
+    text-align: center;
+
+    h1 {
+        font: normal 64px @fancy;
+        margin: 0;
+    }
+    h2 {
+        font: normal 16px @sans;
+        margin: 0;
+    }
+}
+.content {
+    margin: 44px auto;
+
+    .canvas {
+        background: blue;
+        float: left;
+        height: 600px;
+        margin-right: 50px;
+        width: 710px;
+    }
+    .palette {
+        background: red;
+        float: left;
+        height: 600px;
+        width: 200px;
+    }
+}
+footer {
+    clear: both;
+    text-align: center;
+    font: italic 14px/1.3 @sans;
+
+    p {
+        margin: 0;
+    }
+}