Update to the demo, making this a bit more slick
This commit is contained in:
Paul Tagliamonte
parent
ae3c4c357a
commit
becfcd829a
1
demo/.gitignore
vendored
Normal file
1
demo/.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
static/css
|
||||||
14
demo/Makefile
Normal file
14
demo/Makefile
Normal 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
16
demo/less/config.less
Normal 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
6
demo/less/debuild.me.less
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
@import "config.less";
|
||||||
|
|
||||||
|
@import "macros.less";
|
||||||
|
@import "font.less";
|
||||||
|
|
||||||
|
@import "layout.less";
|
||||||
32
demo/less/font.less
Normal file
32
demo/less/font.less
Normal 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
196
demo/less/layout.less
Normal 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
5
demo/less/macros.less
Normal 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
BIN
demo/static/fonts/Damion.woff
Normal file
Binary file not shown.
BIN
demo/static/fonts/Quicksand.woff
Normal file
BIN
demo/static/fonts/Quicksand.woff
Normal file
Binary file not shown.
BIN
demo/static/fonts/cantarell.otf
Normal file
BIN
demo/static/fonts/cantarell.otf
Normal file
Binary file not shown.
58
demo/templates/base.html
Normal file
58
demo/templates/base.html
Normal 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>
|
||||||
@ -1,77 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
{% extends "base.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}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
$(document).ready(function() {
|
{% block title %}Welcome!{% endblock %}
|
||||||
$("#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 content %}
|
||||||
(defn square [x]
|
Challah
|
||||||
"This squares a function"
|
{% endblock %}
|
||||||
(* x x))
|
|
||||||
|
|
||||||
|
|
||||||
(for [x (kwapply (sunlight.openstates.legislators) {"state" "ma"})]
|
|
||||||
(print x)) </textarea>
|
|
||||||
<pre id = 'repl-output' ></pre>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user