add social media section to home page
This commit is contained in:
Leo Horie
parent
d24754dd2d
commit
917f1e1d6b
42 changed files with 272 additions and 76 deletions
|
|
@ -1,11 +1,5 @@
|
|||
## Community
|
||||
|
||||
### Projects and Snippets
|
||||
|
||||
A collection of projects and snippets created by Mithril users. A great place to find useful tools.
|
||||
|
||||
Go to the [Mithril wiki](https://github.com/lhorie/mithril.js/wiki/Community-Projects-and-Snippets)
|
||||
|
||||
### Blog
|
||||
|
||||
Read Mithril tutorials and articles about web app development. Join the discussion!
|
||||
|
|
@ -22,6 +16,14 @@ Feel free to post on the [mailing list](https://groups.google.com/forum/#!forum/
|
|||
|
||||
---
|
||||
|
||||
### Projects and Snippets
|
||||
|
||||
A collection of projects and snippets created by Mithril users. A great place to find useful tools.
|
||||
|
||||
Go to the [Mithril wiki](https://github.com/lhorie/mithril.js/wiki/Community-Projects-and-Snippets)
|
||||
|
||||
---
|
||||
|
||||
### Bug Tracker
|
||||
|
||||
You can file bugs in the [issues page on Github](https://github.com/lhorie/mithril.js/issues?state=open)
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
@ -40,6 +39,10 @@
|
|||
</section>
|
||||
|
||||
<section class="features">
|
||||
<div class="container">
|
||||
<h2>What is Mithril?</h2>
|
||||
<p>Mithril is a client-side MVC framework - a tool to organize code in a way that is easy to think about and to maintain.</p>
|
||||
</div>
|
||||
<div class="container row">
|
||||
<div class="feature col(4,4,12)">
|
||||
<h2>Light-weight</h2>
|
||||
|
|
@ -83,13 +86,20 @@ app.PageList = function() {
|
|||
//controller
|
||||
app.controller = function() {
|
||||
this.pages = app.PageList();
|
||||
|
||||
this.rotate = function() {
|
||||
this.pages.push(this.pages.shift())
|
||||
}.bind(this)
|
||||
};
|
||||
|
||||
//view
|
||||
app.view = function(ctrl) {
|
||||
return ctrl.pages().map(function(page) {
|
||||
return m("a", {href: page.url}, page.title);
|
||||
});
|
||||
return [
|
||||
ctrl.pages().map(function(page) {
|
||||
return m("a", {href: page.url}, page.title);
|
||||
}),
|
||||
m("a", {onclick: ctrl.rotate}, "Rotate links")
|
||||
];
|
||||
};
|
||||
|
||||
//initialize
|
||||
|
|
@ -99,10 +109,6 @@ m.module(document.getElementById("example"), app);</code></pre>
|
|||
<div class="col(4,4,12)">
|
||||
<h2>Output</h2>
|
||||
<div id="example" class="example output">
|
||||
<noscript>
|
||||
<a href="getting-started.html">Getting Started</a>
|
||||
<a href="mithril.html">Documentation</a></div>
|
||||
</noscript>
|
||||
<script src="mithril.min.js"></script>
|
||||
<script>
|
||||
//namespace
|
||||
|
|
@ -116,13 +122,20 @@ app.PageList = function() {
|
|||
//controller
|
||||
app.controller = function() {
|
||||
this.pages = app.PageList();
|
||||
|
||||
this.rotate = function() {
|
||||
this.pages().push(this.pages().shift())
|
||||
}.bind(this)
|
||||
};
|
||||
|
||||
//view
|
||||
app.view = function(ctrl) {
|
||||
return ctrl.pages().map(function(page) {
|
||||
return m("a", {href: page.url}, page.title);
|
||||
});
|
||||
return [
|
||||
ctrl.pages().map(function(page) {
|
||||
return m("a", {href: page.url}, page.title);
|
||||
}),
|
||||
m("button", {onclick: ctrl.rotate}, "Rotate links")
|
||||
];
|
||||
};
|
||||
|
||||
//initialize
|
||||
|
|
@ -197,6 +210,29 @@ m.module(document.getElementById("example"), app);
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="socialmedia">
|
||||
<div class="container row">
|
||||
<div class="col(8,12,12)">
|
||||
<h2>Social Media</h2>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Mithril.js m.prop feature is plain brilliant. I spent years yearning for an approach that lightweight <a href="http://t.co/KgzOxoa2WR">http://t.co/KgzOxoa2WR</a></p>— Xavier Via (@xaviervia) <a href="https://twitter.com/xaviervia/statuses/454635992360554497">April 11, 2014</a></blockquote>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Mithril: The newest JavaScript MVC library 3Kb. <a href="http://twitter.com/LeoHorie">@LeoHorie</a> got it right: It's all about good guides/docs: <a href="http://lhorie.github.io/mithril/comparison.html">lhorie.github.io/mithril/comparison.html</a></p> — David Corbacho (@dcorbacho) <a href="https://twitter.com/dcorbacho/status/446926407843991552">March 21, 2014</a></blockquote>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Mithril: Another MVC JS Framework << there's always room for one more, especially when they're this small... <a href="http://t.co/gDp3kyUkxL">http://t.co/gDp3kyUkxL</a></p>— Graham Ashton (@grahamashton) <a href="https://twitter.com/grahamashton/statuses/446353031677100033">March 19, 2014</a></blockquote>
|
||||
|
||||
<script async src="http://platform.twitter.com/widgets.js"></script>
|
||||
</div>
|
||||
<div class="col(4,12,12)">
|
||||
<div class="callout">
|
||||
<h3>Want to hear more?</h3>
|
||||
<p>Subscribe to the <a href="http://lhorie.github.io/mithril-blog">Mithril blog</a>. It's updated weekly with articles about how to use Mithril (and Javascript in general) to their full potential.</p>
|
||||
<p>There's also a <a href="https://groups.google.com/forum/#!forum/mithriljs">mailing list</a>, where you can post questions and discuss Mithril related topics.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="container">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
[
|
||||
{"title": "Getting Started", "url": "getting-started.html"},
|
||||
{"title": "Documentation", "url": "mithril.html"}
|
||||
{"title": "Documentation", "url": "mithril.html"},
|
||||
{"title": "Mithril Blog", "url": "http://lhorie.github.io/mithril-blog/"},
|
||||
{"title": "Mailing List", "url": "https://groups.google.com/forum/#!forum/mithriljs"}
|
||||
]
|
||||
|
|
@ -28,10 +28,10 @@ nav a {color:#fff;display:inline-block;padding:10px;}
|
|||
nav a:visited {color:#ddd;}
|
||||
footer {text-align:center;padding:10px 0;}
|
||||
footer,footer a,footer a:visited {color:#fff;}
|
||||
h1,h2 {font-family:Palatino;margin:0 0 10px;}
|
||||
h1 {font-size:3em;text-shadow:0.024em 0.024em #777, -0.024em -0.024em #fff;}
|
||||
h1,h2 {font-family:Verdana;margin:0 0 10px;}
|
||||
h1 {font-size:3em;}
|
||||
h1 span {animation:logo 2s;display:inline-block;-webkit-animation:logo 2s;}
|
||||
h2 {color:#888;font-style:italic;}
|
||||
h2 {color:#888;font-weight:normal;}
|
||||
h3 {margin:10px 0;}
|
||||
p {margin:15px 0;}
|
||||
ul {margin:15px 0;padding:0 0 0 1em;}
|
||||
|
|
@ -55,11 +55,11 @@ linear-gradient(#ededed 25%, #eaeaea 25%, #eaeaea 50%, rgba(255,255,255,0) 50%,
|
|||
background-color: #e3e3e3;
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
.logo {color:#d3d3d3;font-family:Georgia;font-style:italic;}
|
||||
.logo {color:#5a5;font-family:Georgia;font-style:italic;}
|
||||
.logo span {font-family:Arial;font-style:normal;}
|
||||
.logo :before {content:"\25CB";position:absolute;margin:-0.17em 0 0 -0.10em;}
|
||||
.logo :after {content:"\25CB";position:absolute;margin:-0.17em 0 0 -0.5em;}
|
||||
.button,.button:visited {background:#5a5;border-radius:5px;box-shadow:1px 1px #777, -1px -1px #fff;color:#fff;display:inline-block;font:normal bold 16px Helvetica;margin:0 10px 10px;padding:10px 30px;text-decoration:none;}
|
||||
.button,.button:visited {background:#5a5;color:#fff;display:inline-block;font:normal bold 16px Helvetica;margin:0 10px 10px;padding:10px 30px;text-decoration:none;}
|
||||
.features {background:#fff;padding:30px 0 0;}
|
||||
.feature {margin:0 0 30px;padding:0 20px 0 0;}
|
||||
.sample {background:#f5f5f5;padding:30px 0 10px;}
|
||||
|
|
@ -69,11 +69,12 @@ background-size: 20px 20px;
|
|||
.more {background:#ddd;padding:30px 0;}
|
||||
.output a,.more a {display:block;margin:0 0 10px;}
|
||||
.output a:after,.more a:after {content:" \bb";}
|
||||
.performance {background:#fff;padding:30px 0;}
|
||||
.performance,.socialmedia {background:#fff;padding:30px 0;}
|
||||
.performance td:first-child {text-align:right;width:1%;}
|
||||
.bar {background:red;height:4px;float:left;margin:0.5em 1em 0 0;}
|
||||
.security {background:#f5f5f5;padding:30px 0;}
|
||||
.success {color:#383;}
|
||||
.callout {background:#84db84;padding:1em;}
|
||||
.error {color:#f00;}
|
||||
.content {background:#f5f5f5;padding:30px 0;}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue