Yaltik/hy
2
0
Fork 0
Code Pull Requests Releases Activity

Update to the demo, making this a bit more slick

Browse Source
This commit is contained in:
Paul Tagliamonte 2012-12-26 18:46:26 -05:00
parent ae3c4c357a
commit becfcd829a
12 changed files with 333 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demo/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
static/css

14
demo/Makefile Normal file
View File

@ -0,0 +1,14 @@
LESSC = lessc
LESSCFLAGS = -x
DEPLOYMENT = dev
all: clean build
STATIC=./static
clean:
rm -rf $(STATIC)/css
build:
mkdir $(STATIC)/css
$(LESSC) $(LESSCFLAGS) less/debuild.me.less > $(STATIC)/css/debuild.css

16
demo/less/config.less Normal file
View File

@ -0,0 +1,16 @@
@background-color: #DCDCDC;
@color: #333333;
@link-color: #191921;
@nav-background-color: #333333;
@nav-color: #EEEEEE;
@nav-border: #FFFFFF;
@nav-height: 50px;
@shadow-color: #333333;
@nav-from: #CACACA;
@nav-to: #F5F5F5;
@table-zebra: #FFFFFF;

6
demo/less/debuild.me.less Normal file
View File

@ -0,0 +1,6 @@
@import "config.less";
@import "macros.less";
@import "font.less";
@import "layout.less";

32
demo/less/font.less Normal file
View File

@ -0,0 +1,32 @@
@font-face {
font-family: 'Damion';
font-style: normal;
font-weight: 400;
src: local('Damion'), url(../fonts/Damion.woff) format('woff');
}
@font-face {
font-family: 'Cantarel';
font-style: normal;
font-weight: 400;
src: url(../fonts/cantarell.otf);
}
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 400;
src: local('Quicksand'), url(../fonts/Quicksand.woff) format('woff');
}
.damion {
font-family: 'Damion', cursive;
}
.quicksand {
font-family: 'Quicksand', sans-serif;
}
.cantarell {
font-family: 'Cantarel', sans-serif;
}

196
demo/less/layout.less Normal file
View File

@ -0,0 +1,196 @@
.noshim {
padding: 0px;
margin: 0px;
}
html, body {
background-color: @background-color;
height: 100%;
.noshim;
.cantarell;
}
pre {
border-radius: 5px;
background-color: #FFFFFF;
padding: 10px;
border: 1px solid darken(@background-color, 1%);
}
.spacer {
min-height: 30px;
}
a {
color: @link-color;
}
ul {
.noshim;
list-style-type: none;
}
table {
width: 100%;
.noshim;
border-spacing: 0px;
border-collapse: collapse;
border: 1px solid darken(@background-color, 1%);
tr {
.noshim;
td {
.noshim;
padding: 5px;
}
border-bottom: 1px solid darken(@background-color, 1%);
}
margin-top: 10px;
margin-bottom: 10px;
}
table.zebra {
tr:nth-child(2n) {
background-color: @table-zebra;
}
}
.profile {
background-color: #FFFFFF;
border-radius: 5px;
padding: 10px;
width: 50%;
margin-left: auto;
margin-right: auto;
border: 1px solid darken(@background-color, 1%);
.picture {
border: 1px solid darken(@background-color, 5%);
float: left;
border-radius: 5px;
}
.name {
float: right;
}
}
.headblock {
background-color: #F8F8F8;
}
.banner {
.damion;
padding-left: 10px;
padding-right: 10px;
width: 750px;
line-height: 30px;
vertical-align: middle;
background-image: -moz-linear-gradient(
bottom,
@nav-from 10%,
@nav-to 100%
);
background-image: -webkit-linear-gradient(
bottom,
@nav-from 10%,
@nav-to 100%
);
background-image: linear-gradient(
bottom,
@nav-from 10%,
@nav-to 100%
);
border: 1px solid #444444;
border-radius: 5px;
height: 30px;
margin-left: auto;
margin-right: auto;
ul {
list-style-type: none;
.noshim;
li {
display: inline;
padding-right: 10px;
}
}
}
.content {
background-color: #F8F8F8;
min-height: 70%;
border-bottom: 1px solid #888888;
padding-top: 30px;
}
.container {
margin-left: auto;
margin-right: auto;
width: 700px;
}
.main-container {
.container;
padding-bottom: 50px;
}
.shim {
padding: 5px;
}
.header {
.color {
width: 12.5%;
height: 10px;
float: left;
}
}
.footer {
font-size: 0.8em;
min-height: 200px;
color: #EEEEEE;
margin-top: 20px;
.container .fifth {
width: 20%;
float: left;
}
}
.fifth {
color: #333333;
.damion;
img {
height: 200px;
}
ul {
list-style-type: none;
font-size: 0.9em;
color: #AEAEAE;
.noshim;
}
li {
.noshim;
}
a {
color: #333333;
}
h1 {
font-size: 1.2em;
border-bottom: 1px solid #333333;
width: 90%;
.noshim;
}
}
.label {
border-radius: 5px;
padding: 0px 8px 0px 8px;
font-size: 0.7em;
}
.clear {
clear: both;
}

5
demo/less/macros.less Normal file
View File

@ -0,0 +1,5 @@
.box-shadow(@style) {
box-shadow: @style @shadow-color;
-webkit-box-shadow: @style @shadow-color;
-moz-box-shadow: @style @shadow-color;
}

BIN
demo/static/fonts/Damion.woff Normal file
View File

Binary file not shown.

BIN
demo/static/fonts/Quicksand.woff Normal file
View File

Binary file not shown.

BIN
demo/static/fonts/cantarell.otf Normal file
View File

Binary file not shown.

58
demo/templates/base.html Normal file
View File

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %} | hy</title>
<link rel="stylesheet" href = "{{ url_for('static', filename='css/debuild.css') }}" ></link>
</head>
<body>
<div class = 'headblock' >
<div class = 'spacer' ></div>
</div>
<div class = 'headblock' >
<div class = 'banner' >
<ul>
<li><a href = '/' >Home</a></li>
<li><a href = '/packages' >Try it</a></li>
<li><a href = '/about' >Source</a></li>
</ul>
</div>
</div>
<div class = 'content' >
<div class = 'main-container' ><div class = 'shim' >
{% block content %}
{% endblock %}
</div></div>
</div>
<div class = 'footer' >
<div class = 'container' ><div class = 'shim' >
<div class = 'fifth' >
<h1><i class="icon-sitemap"></i> Links</h1>
<ul>
</ul>
</div>
<div class = 'fifth' >
<h1><i class="icon-link"></i> Examples</h1>
<ul>
</ul>
</div>
<div class = 'fifth' >
<h1><i class="icon-group"></i> About</h1>
<ul>
<li><a href = 'http://pault.ag/' >Paul's Homepage</a></li>
</ul>
</div>
<div class = 'fifth' >
<h1><i class="icon-info-sign"></i> Help</h1>
<ul>
</ul>
</div>
<div class = 'fifth' >
<h1><i class="icon-github"></i> Source Code</i></h1>
<ul>
</ul>
</div>
</div></div>
</div>
</body>
</html>

80
demo/templates/index.html
View File

@ -1,77 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Hy!</title>
<script type="text/javascript" src="/static/jquery.min.js"></script>
<script type="text/javascript">
function reload() {
var input = $("#repl-input").val();
console.log("Input: " + input);
$('#repl-output').load(
'/translate',
{"code": input}
);
}
{% extends "base.html" %}
$(document).ready(function() {
$("#repl-input").keyup(function(e) {
reload();
});
reload();
});
</script>
<style>
html, body {
height: 90%;
padding: 0px;
margin: 0px;
}
.repl {
width: 100%;
height: 100%;
}
#repl-input {
float: left;
width: 49%;
border: 0px solid #000000;
resize: none;
height: 100%;
}
#repl-output {
float: right;
width: 49%;
height: 100%;
}
.head {
min-height: 20px;
}
.r-i-l {
float: left;
width: 49%;
height: 100%;
}
.r-o-l {
float: right;
width: 49%;
height: 100%;
}
</style>
</head>
<body>
<h1>Edit the left side</h1>
<div class = 'repl' >
<textarea id = 'repl-input' >; LISP input
(import "sunlight")
{% block title %}Welcome!{% endblock %}
(defn square [x]
"This squares a function"
(* x x))
(for [x (kwapply (sunlight.openstates.legislators) {"state" "ma"})]
(print x)) </textarea>
<pre id = 'repl-output' ></pre>
</div>
</body>
</html>
{% block content %}
Challah
{% endblock %}