Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Page re-design #73

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Page re-design #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f4d8a3b
Update index.html
aliceperez Oct 12, 2015
05d0a29
Update burt.css
aliceperez Oct 12, 2015
0f300be
Update index.html
aliceperez Oct 17, 2015
5b7f52b
Update burt.css
aliceperez Oct 17, 2015
47336cc
Update burt.css
aliceperez Oct 17, 2015
ad85ec6
Update index.html
aliceperez Oct 17, 2015
5614d67
Update index.html
aliceperez Oct 17, 2015
662396f
Update index.html
aliceperez Oct 17, 2015
3a2a56e
Update burt.css
aliceperez Oct 17, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
199 changes: 177 additions & 22 deletions burt.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,192 @@
body {
font-family: Georgia;
color: #333;
font-family: 'Roboto Condensed', sans-serif;
color: #000;
width: 100%;
height: 100%;
margin: 0;
overflow-x:hidden;
}
a
{
text-decoration: none;
}
.coral
{
color: #ff7f50;
}
.black
{
color: #000;
}
.center
{
text-align: center;
}
header
{
background: #ff7f50;
width:100%;
z-index: 100;
position: fixed;
}

#logo {
color: #000;
height: 180px;
width: 200px;
.brand
{
color: white;
float: left;
}
nav
{
float: right;
width: 100%;

}
nav ul
{
list-style: none;
overflow: hidden;
float: right;
}
nav ul li
{
float: left;

}
nav ul li a
{
display: block;
padding: 5px;
margin-right: 10px;
color: white
}
nav ul li:hover ul
{
display: block;
}
nav ul ul
{
display: none;
position: absolute;
background: #222;
border-radius: 10px;
float: left !important;

}
nav ul ul li a
{
color: #fff;
margin-left: -25px;
padding: 10px;


}
nav ul ul li a:hover
{
color:#ff7f50;
}
.docs
{
margin-bottom: 5px;
}
.btn
{
background: #222;
padding: 5px;
border-radius: 5px;
}
.home
{
background: #ff7f50;
width:100%;
height: 100%;
padding-top: 50px;
}
.home-Container
{
width: 50%;
margin: 0 auto;
}
h2
{
font-size: 40px;
}
.logo {
width: 380px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
text-align: center;
display: block;
font-size: 250px;
font-family: Georgia;
font-size: 200px;
margin: 0 auto;
line-height: 200px;
margin-bottom: -30px;
padding-top: -100px;

}
.title
{
font-size: 100px;
margin-top: -50px;
margin-bottom: -30px;

}
.subtitle
{
font-size: 30px;
}
.about
{
width: 100%;
height: 100%;
padding: 20px;
}
#content {
width: 600px;
margin: 0 auto;
}

p {
font-size: 30px;
margin-bottom: 20px;
text-align: left;
p
{
font-size: 20px;
}

label {

.language
{
background: #ccc;
width:100%;
height: 100%;
padding: 20px;
}
.example
{
width:100%;
height: 100%;
padding: 20px 20px 0px 20px;
}
.example-Container
{
display: flex;
width:80%;
margin: 0 auto;
margin-bottom: 0px;
}
.example-Result
{
width:75%;
margin: 0 auto;
padding: 30px;
}
.code-Box
{
width: 50%;
margin: 20px 20px 0px 20px;
}
.run
{
background: #ff7f50;
color: #fff;
border: none;
font-size: 20px;
padding: 10px;
}

textarea, .html {
border: 1px solid #bbb;
padding: 5px;
Expand All @@ -47,8 +200,10 @@ textarea, .html {
.json {
margin-bottom: 0;
}

.run {
margin-bottom: 20px;
font-size: 130%;
footer
{
background: #222;
text-align: center;
padding:5px;
color: white;
}
121 changes: 72 additions & 49 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
<!-- ---
# Yeah, this should be .mustache
# But this way we can gh-pages.
---
--- -->
<!DOCTYPE html>
<!--
_ _
Expand Down Expand Up @@ -42,58 +42,81 @@
<title>{{ site.name }}</title>
<link href="burt.css" media="screen" rel="stylesheet" type="text/css" />
<link href="extras/highlight.css" media="screen" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
</head>
<body>
<span id="logo">}</span>
<div id="content">
<p>Logic-less templates.</p>

<p>
Available in
{% for language in site.data.languages %}
{% if forloop.last %}and for{% endif %}
<a href="{{ language.url }}">{{ language.name }}</a>{% unless forloop.last %},{% endunless %}
{% endfor %}
</p>

<p>
Works great with
{% for editor in site.data.editors %}
{% if forloop.last %}and{% endif %}
<a href="{{ editor.url }}">{{ editor.name }}</a>{% unless forloop.last %},{% endunless %}
{% endfor %}
</p>

<p>
The Manual:
<a href="mustache.5.html">mustache(5)</a>
and
<a href="mustache.1.html">mustache(1)</a>
</p>

<p>
<a id="demo" href="#demo">Demo</a>
</p>

<div id="demo-box" style="display:none;">
<label>Mustache</label>
<textarea class="template">{% include demo.mustache %}</textarea>

<label>JSON <small>(try setting empty to true)</small></label>
<textarea class="json">{% include demo.json %}</textarea>

<p><input type="button" class="run" value="Render Template"/></p>

<header>

<nav>
<ul class="brand">
<li><a href="#home">MUSTACHE</a></li>
</ul>
<ul>
<li>
<a class="docs" href="">Documentation <i class="fa fa-caret-down"></i></a>
<ul>
<li><a style="border-bottom:1px solid white"href="mustache.1.html">Mutache 1</a></li></br>
<li><a href="mustache.5.html">Mutache 5</a></li>
</ul>
</li>
<li><a class="btn"href="https://github.com/mustache/mustache.github.com"><i class="fa fa-code-fork"></i> Fork on Github</a></li>
</ul>
</nav>
</header>
<section id="home" class="home">
<div class="home-Container center">
<span class="logo">}</span>
<h1 class="title center">MUSTACHE</h1>
<p class="subtitle center">Logic-less templates.</p>
</div>
</section>
<section class="about">
<div class="home-Container center">
<h2>Why mustache?</h2>
<p>Mustache can be used for HTML, config files, source code - anything. It works by expanding tags in a template using values provided in a hash or object.</p>
<p>We call it "logic-less" because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.</p>
</div>
</section>
<section class="example">
<div class="center"><h2><a id="demo" class="black center" href="#demo"> Example </a></h2></div>
<div class="example-Container">
<div class="code-Box">
<label>Mustache</label>
<textarea class="template">{% include demo.mustache %}</textarea>
</div>
<div class="code-Box">
<label>JSON <small>(try setting empty to true)</small></label>
<textarea class="json">{% include demo.json %}</textarea>
</div>
</div>
</section>

<div class="example-Result">
<p><input type="button" class="run" value="Render Template"/></p>
<label>HTML</label>
<pre class="html sh_html"></pre>
</div>

<p>IRC: <a href="irc://irc.freenode.net:6667/#{">#{</a> on Freenode</p>
<p>Mailing list: <a href="mailto:[email protected]">[email protected]</a></p>

<p>GitHub pages: <a href="https://github.com/mustache/mustache.github.com">https://github.com/mustache/mustache.github.com</a></p>
</div>

<section class="language">
<div class="center">
<h2>Available in</h2>
<div id="content">
<p>
{% for language in site.data.languages %}
{% if forloop.last %}and for{% endif %}
<a class="black" href="{{ language.url }}">{{ language.name }}</a>{% unless forloop.last %},{% endunless %}
{% endfor %}
</p>
</div>
</div>
</section>
<footer>
<p>
Source code available on <a class="coral" href="https://github.com/mustache/mustache.github.com">GitHub</a>.
Mailing list: <a class="coral" href="mailto:[email protected]">[email protected]</a>
IRC: <a class="coral" href="irc://irc.freenode.net:6667/#{">#{</a> on Freenode
</p>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="extras/mustache.js"></script>
<script src="extras/highlight.js"></script>
Expand Down