Permalink
Browse files

Make things sexy

  • Loading branch information...
1 parent f400be5 commit 54f47817a8acdcab3fdc3926e2c9b32890f128a6 @jbpros committed Mar 26, 2012
View
1 app.js
@@ -14,6 +14,7 @@ var App = function App(options) {
server.use(express.logger({format: 'dev', stream: self.logStream}));
server.use(express.bodyParser());
server.use(server.router);
+ server.use(express.static(__dirname + '/public'));
server.set('view engine', 'ejs');
server.set('views', __dirname + '/app/views');
server.set('view options', {
@@ -2,8 +2,10 @@
<html>
<head>
<title>Cukecipes</title>
+ <link href="/stylesheets/main.css" rel="stylesheet" type="text/css"/>
</head>
- <body>
+ <body class="stripes picnic">
+ <h1>Cukecipes</h1>
<%- body %>
</body>
</html>
@@ -1,4 +1,4 @@
-<ul>
+<ul class="recipes">
<% recipes.forEach(function(recipe) { %>
<li><a href="/recipes/<%= recipe.id %>"><%= recipe.title %></a></li>
<% }); %>
@@ -1,10 +1,56 @@
+html {
+ font-size: 100%;
+}
+
+body {
+ margin: 1em;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 22px;
+ color: #333;
+ background-color: #eee;
+}
+
+h1 {
+ color:#444;
+ text-shadow: 0px 2px 2px rgba(255,255,255,.7);
+}
+
+h1:before {
+ background-image: url('/images/logo.png');
+ background-size: 64px 64px;
+ content:"";
+ width:64px;
+ height:64px;
+ position:absolute;
+ right:10px;
+ top:10px;
+ z-index:1;
+}
+
+.actions {
+ text-align:center;
+}
+
+#run {
+ font-size:1em;
+ text-shadow: 0px 1px 1px rgba(255,255,255,1);
+ padding: 4px 2em;
+}
+
#cucumber-browser {
- width:640px;
- height:380px;
+ width:720px;
+ height:440px;
+ border:solid 1px rgba(0,0,0,.35);
+ box-shadow: 0px -1px 2px rgba(0,0,0,.3), -1px 0px 2px rgba(0,0,0,.1), 0px 2px 2px rgba(255,255,255,.8), 2px 0px 2px rgba(255,255,255,.6);
}
/* cucumber html formatter */
+.cucumber-report * {
+ outline: 0;
+}
+
.cucumber-report .keyword {
font-weight: bold;
}
View
@@ -15,9 +15,9 @@
<% features.forEach(function(feature) { %>
<script type="text/x-gherkin"><%- feature %></script>
<% }); %>
- <h1>Cukecipes's features</h1>
+ <h1>Cucumber.js runner</h1>
<iframe id="cucumber-browser" src="/"></iframe>
- <p><button id="run">Cuke!</button></p>
+ <p class="actions"><button id="run">Cuke!</button></p>
<div id="output" class="cucumber-report"></div>
<div id="errors-container"><pre id="errors"></pre></div>
</body>
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,104 @@
+/*
+body, a {
+ color:rgba(0,255,255,0.5);
+ text-shadow: rgba(255,0,0,0.5) 6px 0px 0px;
+}
+
+h1 {
+ text-shadow: rgba(255,0,0,0.5) 1px 0px 0px;
+}
+
+h2 {
+ text-shadow: rgba(255,0,0,0.5) 3px 0px 0px;
+}
+*/
+
+/* @import url(http://fonts.googleapis.com/css?family=Norican); */
+@font-face {
+ font-family: 'Norican';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Norican Regular'), local('Norican-Regular'), url('http://themes.googleusercontent.com/static/fonts/norican/v1/fJyH16wZvqLrtcqcBNlaAgLUuEpTyoUstqEm5AMlJo4.woff') format('woff');
+}
+
+@font-face {
+ font-family: 'Inika';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Inika'), url('http://themes.googleusercontent.com/static/fonts/inika/v1/SfUXB8ocE5dNKtU5DSQbGKCWcynf_cDxXwCLxiixG1c.woff') format('woff');
+}
+
+html {
+ margin: 0;
+ padding: 0;
+ font-size: 100%;
+}
+
+body {
+ padding: 0;
+ margin: 20px;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-family: "Inika", serif;
+ font-size: 16px;
+ line-height: 25px;
+ color: #333;
+ background-color: #fff;
+}
+
+a, a:visited {
+ color: darkred;
+}
+
+h1 {
+ font-family: Norican;
+ font-size: 40px;
+ text-align:center;
+ text-decoration:underline;
+}
+
+h2 {
+ font-family: Norican;
+ font-size: 30px;
+}
+
+.picnic {
+ background-color:white;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.1, transparent), color-stop(.1, rgba(200, 0, 0, .1)), to(rgba(200, 0, 0, .1))),
+ -webkit-gradient(linear, 0 0, 100% 0, color-stop(.1, transparent), color-stop(.1, rgba(200, 0, 0, .1)), to(rgba(200, 0, 0, .1)));
+ background-image: -webkit-linear-gradient(transparent 50%, rgba(200, 0, 0, .1) 50%, rgba(200, 0, 0, .1)),
+ -webkit-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .1) 50%, rgba(200, 0, 0, .1));
+ background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .1) 50%, rgba(200, 0, 0, .1)),
+ -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .1) 50%, rgba(200, 0, 0, .1));
+ background-image: -ms-linear-gradient(transparent 50%, rgba(200, 0, 0, .1) 50%, rgba(200, 0, 0, .1)),
+ -ms-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .1) 50%, rgba(200, 0, 0, .1));
+ background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .1) 50%, rgba(200, 0, 0, .1)),
+ -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .1) 50%, rgba(200, 0, 0, .1));
+ background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .1) 50%, rgba(200, 0, 0, .1)),
+ linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .1) 50%, rgba(200, 0, 0, .1));
+}
+
+.stripes {
+ -webkit-background-size: 50px 50px;
+ -moz-background-size: 50px 50px;
+ background-size: 50px 50px; /* Controls the size of the stripes */
+ -moz-box-shadow: 1px 1px 8px gray;
+ -webkit-box-shadow: 1px 1px 8px gray;
+ box-shadow: 1px 1px 8px gray;
+}
+
+.recipes {
+ font-size: 1.2em;
+}
+
+label {
+ display: block;
+}
+
+input[type=text] {
+ width: 50%;
+}
+
+textarea {
+ width: 100%;
+ height: 6em;
+}

0 comments on commit 54f4781

Please sign in to comment.