Commit 8a0b145c authored by Jon Richter's avatar Jon Richter

major refactoring of the entry page

design should be more easy to read, less destractive.
parent ff95c12b
<!DOCTYPE html>
<html>
<head>
<title>allmende.io mapping the commons</title>
<title>#14mmm : self-organization</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
......@@ -22,120 +22,161 @@
<body>
<header class="clearfix">
<div class='container clearfix'>
<div style="background: #476998; padding: 2%;">
<h1>allmende.io</h1>
<h2><i>[alˈmɛndə]</i></h2>
<h2>mapping the commons : self-organization stack prototype</h2>
<div class='block blue-one'>
<h1><a href="https://twitter.com/search?q=%2314mmm">#14mmm</a></h1> <h2>self-organization tools</h2>
</div>
</div>
</header>
<div style="margin-bottom: 1.5%; width: 80%; margin-right: auto; margin-left: auto">
<div class="main">
<section>
<div class="container">
<div class="row clearfix">
<div class="column fourth">
<div class="link">
<a href="http://ting.allmende.io" target="_blank">
<img src="img/ting.png">
<div>ting</div>
</a>
</div>
<div class="clearfix">
<div class="column full">
<h3>
main communication channels
</h3>
</div>
</div>
<div class="row clearfix">
<div class="column third">
<a href="https://trello.com/allmende">
<div class="link">
<img src="img/plan.png">
<div class="caption">Trello</div>
<div class="description">division of labour</div>
</div>
</a>
<div class="column fourth">
<div class="link">
<a href="http://wiki.allmende.io" target="_blank">
<img src="img/wiki.png">
<div>wiki</div>
</a>
</div>
</div>
<div class="column fourth">
<div class="link">
<a href="http://blog.allmende.io/">
<img src="img/blog.png">
<div>blog</div>
</a>
</div>
<div class="column third">
<a href="http://ting.allmende.io" target="_blank">
<div class="link">
<img src="img/ting.png">
<div class="caption">Discourse</div>
<div class="description">argumentation</div>
</div>
</a>
</div>
<div class="column fourth">
<div class="link">
<a href="http://list.allmende.io/cgi-bin/mailman/listinfo/maps" target="_blank">
<div class="column third">
<a href="http://list.allmende.io/cgi-bin/mailman/listinfo/maps" target="_blank">
<div class="link">
<img src="img/list.png">
<div>list</div>
</a>
</div>
<div class="caption">Mailing List</div>
<div class="description">announcements</div>
</div>
</a>
</div>
</div>
<div class="row clearfix">
<div class="column fourth">
<div class="link">
<a href="http://chat.allmende.io" target="_blank">
<img src="img/talk.png">
<div>chat</div>
</a>
</div>
<div class="column full">
<h3>
additional
</h3>
</div>
</div>
<div class="row clearfix">
<div class="column third">&nbsp;</div>
<div class="column fourth">
<div class="link">
<a href="http://text.allmende.io" target="_blank">
<div class="column third">
<a href="http://text.allmende.io" target="_blank">
<div class="link">
<img src="img/text.png">
<div>text</div>
</a>
</div>
<div class="caption">Pads</div>
</div>
</a>
</div>
<div class="column fourth">
<div class="link">
<a href="http://github.com/allmende/" target="_blank">
<img src="img/gear.png">
<div>code</div>
</a>
</div>
</div>
</div>
</section>
</div>
<div class='container'>
<div class="block blue-two">
<img src="img/allmende.png" style="max-width: 60%; max-height: 500px;">
</div>
</div>
<div class="main">
<section>
<div class="container">
<div class="row clearfix">
<div class="column full">
<h3>
further
</h3>
</div>
</div>
<div class="column fourth">
<div class="link">
<a href="https://trello.com/allmende">
<img src="img/plan.png">
<div>orga</div>
</a>
</div>
<div class="row clearfix">
<div class="column third">
<a href="http://blog.allmende.io/">
<div class="link">
<img src="img/blog.png">
<div class="caption">blog</div>
</div>
</a>
</div>
<div class="column third">
<a href="http://wiki.allmende.io" target="_blank">
<div class="link">
<img src="img/wiki.png">
<div class="caption">wiki</div>
</div>
</a>
</div>
<div class="column third">
<a href="http://chat.allmende.io" target="_blank">
<div class="link">
<img src="img/talk.png">
<div class="caption">chat</div>
</div>
</a>
</div>
</div>
</div>
<div class="clearfix">
<div class="column full">
<h3>
<strong>allmende.io</strong> is about nodes and links. In a world of <a href="http://nedrossiter.org/?p=371" target="_blank">Organized Networks</a>, where individuals collaborate with their peers to create a <a href="http://www.discourse.org/about/">Civilized Discourse Construction Kit</a>, we aggreate tools that suit.
</h3>
<div class="last row clearfix">
<div class="column third">
<a href="http://github.com/allmende/" target="_blank">
<div class="link">
<img src="img/gear.png">
<div class="caption">code</div>
</div>
</a>
</div>
</div>
</div>
</section>
<section>
<div class='container'>
<div style="background: #4C7CAB ; padding: 5%;">
<img src="img/allmende.png" style="max-width: 60%; max-height: 500px;">
</div>
</div>
</section>
<section>
<div class='container'>
</div>
</section>
</div>
<footer>
<div class="clearfix">
<a href="#">attribution</a>
<a href="#"></a>
</div>
</footer>
</body>
......
......@@ -53,7 +53,7 @@ section {
}
@media (min-width: 40rem) {
section { padding: 4rem 0; }
section { padding: 2rem 0; }
}
footer {
......@@ -75,9 +75,11 @@ footer {
.column.full { width: 100%; }
.column.fourth { width: 24.95%; }
.column.third { width: 32.95%; }
.row {
margin-bottom:3%;
margin-top: 3%;
}
h1, h2, h3{
......
......@@ -19,53 +19,84 @@
.container {
margin: 0 auto;
width: 100%;
}
.block {
padding: 2%;
text-align: center;
}
.blue-one {
background: #476998;
}
.blue-two {
background: #4C7CAB;
padding-top: 5%;
padding-bottom: 5%;
}
.main {
margin-bottom: 1.5%;
width: 80%;
margin-right: auto;
margin-left: auto;
}
/* Small screens (default) */
html { font-size: 90%; }
@media (max-width: 40rem) {
.description { display: none; }
}
/* Medium screens (640px) */
@media (min-width: 40rem) {
html { font-size: 100%; }
.description { display: block; }
}
/* Large screens (1024px) */
@media (min-width: 64rem) {
html { font-size: 110%; }
.description { display: block; }
}
body { margin:0; padding:0; color: #6A87A2 ; background: #fafafa; font-family: 'Open Sans';font-weight: 300;}
h1 {text-align: center; font-weight: 400; color: #fefefe;}
h2 {text-align: center; font-weight: 200; color: #C9D7E6}
h1 {font-weight: 400; color: #fefefe; display: inline;}
h2 {font-weight: 200; color: #C9D7E6; display: inline;}
.link {
text-align: center;
font-size: 120%;
font-weight: 600;
background: #f4f4f4;
border-radius: 1rem;
padding: 1rem;
box-shadow: #ddd 0 1px 0;
min-height: 100%;
}
.link:hover {
background: #eee;
box-shadow: #ccc 0 1px 0;
}
a {
color: inherit;
text-decoration: underline;
text-decoration: none;
}
.link a { text-decoration: none; }
.link div {
height:35px;
transition: font-size 0.3s 0.2s ease-in-out;
-webkit-transition: font-size 0.3s 0.2s ease-in-out;
-moz-transition: font-size 0.3s 0.2s ease-in-out;
-o-transition: font-size 0.3s 0.2s ease-in-out;
-ms-transition: font-size 0.3s 0.2s ease-in-out;
h3 a {
text-decoration: underline;
}
.caption {
font-size: 150%;
font-weight: 600;
}
.link:hover div {
color: inherit;
font-size: 150%;
.link:hover .caption {
color: #708EAA;
}
footer {
......@@ -91,3 +122,7 @@ footer {
.column a img {
max-width:35%;
}
.last {
padding-bottom: 5%;
}
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment