CrowdHoster Campaign Theme

index.html

<!-- Start Aesop Crowdhoster -->
<blockquote>
<p>...one of the most beautiful tools for Wordpress that I&#39;ve seen in a long time.</p>
<cite>- <a href="http://wptavern.com/aesop-story-engine-an-open-source-wordpress-plugin-for-storytelling">WP Tavern</a></cite></blockquote>

<blockquote>
<p>...a potentially seismic shift in content creation and the biggest thing to hit WP for ages.</p>
<cite>- <a href="http://wptavern.com/aesop-story-engine-an-open-source-wordpress-plugin-for-storytelling#comment-50657">Chris Knowles</a></cite></blockquote>

<blockquote>
<p>...is something that would rock the world of Wordpress.com users. Tons of people using the service for longform content and this is exactly what they need.</p>
<cite>- <a href="http://wptavern.com/aesop-story-engine-an-open-source-wordpress-plugin-for-storytelling#comment-50686">Jeffro</a></cite></blockquote>

<div id="aesop-main">
<h2 class="aesop-header">Aesop Story Engine</h2>

<p>The heart and soul of Aesop is the storytelling engine; 12 components designed for rich storytelling experiences. The components can be used multiple times throughout the story. Components are built on the fly with a generator provided directly inside the story editor.</p>
<img alt="aesop-stories" class="aesop-image" src="https://s3.amazonaws.com/crowdhoster/aesop/uploads/ckeditor/pictures/data/000/000/001/content.png" />
<h2 class="aesop-header">Aesop Hosted</h2>

<p>The storytelling engine drives a storytelling experience available through our hosted platform. Not a developer and want the quickest way to get started? This is it. Create and publish up to 3 full stories within your own collection portal. Hosted Pro allows you to sell your own stories, as well as collaborate with other writers, photographers, and illustrators.</p>
<img alt="aesop-stories" class="aesop-image" src="https://s3.amazonaws.com/crowdhoster/aesop/uploads/ckeditor/pictures/data/000/000/004/content.png" />
<h2 class="aesop-header">How it Works</h2>

<p>Aesop is available both as a free, open-sourced Wordpress plugin, and as a free, hosted version. The Wordpress plugin only loads the basic styles it needs, so the rest is totally up to the theme. The hosted version uses the same exact plugin, but allows you to sell your stories (pro) and collaborate with other storytellers.</p>
<img alt="aesop-stories" class="aesop-image" src="https://s3.amazonaws.com/crowdhoster/aesop/uploads/ckeditor/pictures/data/000/000/001/content.png" />
<h2 class="aesop-header">Plan of Action</h2>

<p>At this point Aesop is a fully working beta, but we need your help to fund the final stretch of development. We need to hire a developer to implement a few of the higher level items, we need to form a real legal business, and we need to get our hosting infrastructure setup and configured correctly. We&#39;ve got a lot to do, and your contributions will get us there!</p>
<img alt="aesop" src="https://s3.amazonaws.com/crowdhoster/aesop/uploads/ckeditor/pictures/data/000/000/006/content.jpg" /></div>

<div class="aesop-bio clearfix"><img alt="aesop-bio" src="https://s3.amazonaws.com/crowdhoster/aesop/uploads/ckeditor/pictures/data/000/000/005/content.jpeg" />
<h2>Who&#39;s behind Aesop?</h2>

<p>Meet Nick. He&#39;s a programmer, designer, skater, father, husband, and dreamer. For the last few years Nicks been building products for Wordpress, including sites such as Modern Farmer. After noticing a shift in how content is created for the web, he set out to build an engine that anybody could use, within any Wordpress theme. Thus, Aesop was born.</p>

<p class="aesop-small-lead">Follow Nick on <a href="http://twitter.com/nphaskins">Twitter</a>, and stay tuned for updates through the <a href="http://aesopstories.com/blog">Aesop Blog</a>. Lastly, sign up for the <a href="http://mad.ly/signups/74148/join">newsletter</a> to stay informed of super important announcements about Aesop.</p>

<p class="aesop-small-microlead">Along with Nick there are a number of fine folks that have been helping to make Aesop into what it is today. Those people include: @mikezielonka, @ellenjanemoore, @etc.</p>
</div>
<!-- End Aesop Crowdhoster -->

style.less

@orange: #ffb147;
@orange-accent: #a66a17;
@light-orange-accent: #ffc575;
@blue:                #428bca;
@light-blue-accent:   #71b0e4;
@blue-accent:         #155183;

@base:    #F6F6F6;

.clearfix {
    &:before,
    &:after {
        display: table;
        content: "";
        line-height: 0;
    }
    &:after {
        clear:both;
    }
}

.container {
    width:100%;
    max-width:940px;
    margin-left:auto;
    margin-right:auto;
    font-family:'Open Sans';
}

// start aesop styles
* {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

p {
    color:#6b6b6b;
    font-family: 'Open Sans', serif;
}
h1,h2,h3,h4,h5,h6 {
    font-weight:800;
    font-family:'Open Sans', sans-serif;
}
a {
    color:#428bca;
}

.center { text-align:center; }

.aesop-blue {color:@blue;}
.aesop-orange-accent {
    color: @orange;
    font-size: 23px;
    text-transform: uppercase;
}

#campaign {

    #funding_area .campaign_title a {
        color:white;
        font-weight:800;
    }
    #funding_area .campaign_title a:hover {
        color:white;
    }
    #funding_area {
        background:url('https://s3.amazonaws.com/crowdhoster/aesop/uploads/ckeditor/pictures/data/000/000/003/content.jpg') no-repeat  center center;
        background-size:cover;
        position:relative;
        padding: 80px 0;
    }
    #funding_area:after {
        content:' ';
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.4);
    }
    #funding_area .container{
        position:relative;
        z-index:1;
    }

    #funding_area #backing .stats span {
        color:#999999;
    }
    #funding_area #backing .stats {
        color:white;
    }
    #funding_area #reserve_container {
        border-top:none;
        margin-top:0;
        box-shadow:none;
    }
    #funding_area #progress_bg {
        background: rgba(255,255,255,0.25);
    }
    #second_call_to_action {
        background:url('https://s3.amazonaws.com/crowdhoster/aesop/uploads/ckeditor/pictures/data/000/000/003/content.jpg') no-repeat  center center;
        background-size:cover;
        position:relative;
        background-attachment:fixed;
    }
}
#main {
    #campaign .blue_button {
        box-shadow:none;
        background:#428bca;
    }
    #campaign .blue_button:hover {
        background:#397EB9;
    }
}

#second_call_to_action:after {
    content:' ';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    z-index:0;
}
#second_call_to_action .container {
    position:relative;
    z-index:1;
}
#second_call_to_action .container p {
    text-shadow:none;
    color:white;
}
#faq h3 {color:#428bca;}
#faq summary {color:#999;}
#main #campaign #funding_area .container p{
    text-shadow:none;
    color:white;
    text-align:center;
    font-family:'Open Sans', sans-serif;
    line-height:1.25rem;
}
.aesop-image {
    background: @orange;
    padding: 4px;
    border-radius: 3px;
    border: 1px solid rgb(255, 191, 102);
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto;
}

blockquote {
    padding:3.5rem 2rem;
    text-align: center;
    border-bottom:1px solid darken(@base,5);
    font-size:1.5rem;

    p {
        quotes : "\"" "\"" "'" "'";

        &:before {
            content: open-quote;
        }
        &:after {
            content: close-quote;
        }
    }

    &:last-of-type {
        border-bottom:none;
    }

    cite {
        font-size:0.75rem;
        color:#999;
    }
}

#aesop-main,
#aesop-side {
    float: left;
}
#aesop-main {
    width:70%;
    padding-right:15px;
}
#aesop-side {
    width:30%;
    background:@base;

    .aesop-side-title {
        border-bottom:1px solid darken(@base,5);
        margin:0;
        padding:1rem;
        color:@blue;
    }

    .aesop-rewards {
        list-style:none;
        padding:0;
        margin:0;
        li {
            border-top:1px solid lighten(@base,5);
            border-bottom:1px solid darken(@base,5);

            a {
                display: block;
                padding:15px;
                color:inherit;
                text-decoration: none;

                &:hover {
                    background: darken(@base,2);
                }
            }

            h3 {
                margin:0 0 1rem;
                float:left;
            }

            p {
                clear:left;
                margin:0;

                small {
                    display: block;
                    margin:1rem 0 0;
                    text-transform: uppercase;
                    font-size:0.75rem;
                    color:#999;
                }
            }

            .aesop-reward-info {
                float:right;

                .aesop-reward-misc,
                .aesop-reward-cost {
                    display:block;
                    text-align: center;
                }
                .aesop-reward-cost {
                    color:@blue;
                    font-weight:bold;
                }
                .aesop-reward-misc {
                    text-transform: uppercase;
                    font-size:0.6rem;
                }
            }
        }
    }
}
.aesop-header {
    background:@blue;
    padding:0.6rem 0.8rem;
    color:white;
    font-family: 'Open Sans', 'sans-serif';
    font-weight:800;

    &:first-of-type {
        margin-top:0;
    }
}