zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-28 11:12:30 +02:00
Code Issues Projects Releases Packages Wiki Activity

Added press section and plan charts to home page

Browse source
This commit is contained in:
Victoria Wang 2014-09-30 22:02:17 -07:00
parent df1b3f86a5
commit b105d55316
5 changed files with 241 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/img/ars-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public/img/vice-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
public/img/wired-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 62 KiB

151
sass/_project-sass/_project-Main.scss
View file

@ -755,13 +755,14 @@ a.tag:hover {
float: left; float: left;
} }
.section { .section {
padding: 50px 8%; padding: 55px 8%;
margin: 0 auto; margin: 0 auto;
float: left; float: left;
} }
.section h2 { .section h2 {
font-size: 1.7em; font-size: 1.7em;
text-align:center; text-align:center;
line-height: 150%;
} }
.section h3 { .section h3 {
font-size: 1.4em; font-size: 1.4em;
@ -785,7 +786,6 @@ a.tag:hover {
background-size: 22px; background-size: 22px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
margin: auto 0px; margin: auto 0px;
position: absolute; position: absolute;
top: 0; bottom: 0; top: 0; bottom: 0;
@ -799,9 +799,10 @@ a.tag:hover {
} }
.section.features { .section.features {
background: #4F7E89; background: #4F7E89;
text-align: center;
} }
.section.features .col { .section.features .col {
padding-left: 35px; padding-left: 40px;
} }
.section.features .col:first-child { .section.features .col:first-child {
padding-left: 0; padding-left: 0;
@ -810,20 +811,156 @@ a.tag:hover {
color: #fff; color: #fff;
} }
.section.features .fa { .section.features .fa {
margin-right: 9px; margin-right: 10px;
} }
.section.features .fa-wrench { .section.features .fa-wrench {
vertical-align: 2px; vertical-align: 2px;
margin-right: 4px; margin-right: 9px;
} }
.section.features .fa-tachometer { .section.features .fa-tachometer {
margin-right: 11px; margin-right: 11px;
} }
.section.last { .section.features p, .section.features h3 {
text-align: left;
}
.section .press {
display: inline-block;
clear: both;
margin-top: 30px;
margin-bottom: 20px;
}
.section .logo {
float:left;
background-repeat: no-repeat;
margin-right: 30px;
}
.section .logo.wired {
width: 211px;
height: 44px;
background-image: url(/img/wired-logo.png);
background-size: 211px;
margin-top: 6px;
margin-right: 40px;
}
.section .logo.vice {
width: 160px;
height: 50px;
background-image: url(/img/vice-logo.png);
background-size: 160px;
}
.section .logo.ars {
width: 187px;
height: 62px;
background-image: url(/img/ars-logo.png);
background-size: 187px;
margin-top: -4px;
}
.section .press .more {
color: #A0BAC0;
float:right;
margin-top: 6px;
margin-right: 30px;
}
.section.plans {
background: #fff; background: #fff;
} }
.section.last h2, .section.last blockquote { .section.plans h2 {
color:#4F7E89;
}
.plan-overview {
margin-top: 2.5em;
margin-bottom: 2em;
}
.plan-overview .header {
display:table;
width: 100%;
}
.plan-overview .header .col {
font-size:.8em;
text-transform: uppercase;
padding: 8px 20px;
display:table-cell;
}
.plan-overview .header .personal {
background: #D6D6D6;
}
.plan-overview .header .professional {
background: #DAEEA5;
}
.plan-overview .body {
text-align: center;
clear:both;
display:table;
width: 100%;
}
.plan-overview .body h3, .plan-chart h4 {
color: black; color: black;
font-weight:bold;
font-size:1.2em;
font-family: "Lucida Grande", verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-bottom: -2px;
}
.plan-overview .price {
font-size: 2em;
}
.plan-overview .interval {
font-size: .8em;
margin-top: -.6em;
}
.plan-overview .btn-Action {
margin: .9em 0 1.4em 0;
}
.plan-overview .col {
padding-bottom:1.5em;
padding-left: 0;
display: table-cell;
background: #F8F8F8;
float:none;
}
.plan-overview .body .col:nth-of-type(2), .plan-overview .body .col:nth-of-type(4) {
background: #F5F5F5;
}
.plan-overview ul {
list-style: none;
padding: 0;
}
.plan-overview li {
margin: 0;
}
.plan-chart {
margin: 2em 0 4em 0;
width: 100%;
}
.plan-chart th {
background: #D6D6D6;
padding: 15px 0;
}
.plan-chart th.professional {
background: #DAEEA5;
}
.plan-chart th p {
margin: .3em 0 .6em 0;
}
.plan-chart td {
border: 1px solid #ECECEC;
background:#F5F5F5;
padding: 7px 0;
text-align: center;
}
.plan-chart .feature-column {
width: 21em;
text-align:right;
font-size: .9em;
font-weight: bold;
border: 0;
background: 0;
padding-right: 15px;
}
.plan-chart td:nth-child(even) {
background: #F8F8F8;
}
.plan-chart .fa-check {
color: #6CCC24;
} }
.selected { .selected {
font-weight: bold; font-weight: bold;

186
views/newindex_mockup.erb
View file

@ -234,42 +234,50 @@
<section class="section features"> <section class="section features">
<h2 class="delta">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus semper magna id euismod. Vivamus rutrum ultricies.</h2> <h2 class="delta">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus semper magna id euismod. Vivamus rutrum ultricies.</h2>
<div class="row"> <div class="row">
<div class="col col-33"> <div class="col col-33">
<h3><i class="fa fa-home"></i>You own your own site</h3> <h3><i class="fa fa-home"></i>You own your own site</h3>
<p>We support custom domains (yoursite.com) for free. This means you always control the content on your site, and you can move it to/from Neocities whenever you want. And of course, all sites still get a subdomain (sitename.neocities.org) for free.</p> <p>We support custom domains (yoursite.com) for free. This means you always control the content on your site, and you can move it to/from Neocities whenever you want. And of course, all sites still get a subdomain (sitename.neocities.org) for free.</p>
<h3><i class="fa fa-wrench"></i> Developer tools</h3> <h3><i class="fa fa-wrench"></i>Developer tools</h3>
<p>We now have powerful APIs for developers building applications, and support for remote file uploading via command line tools. Using WebDAV, you can now mount your site to your computer, just like Dropbox.</p> <p>We now have powerful APIs for developers building applications, and support for remote file uploading via command line tools. Using WebDAV, you can now mount your site to your computer, just like Dropbox.</p>
</div>
<div class="col col-33">
<h3><i class="fa fa-tachometer"></i>More space, more performance</h3>
<p>Neocities now uses a distributed, globally-cached file system in tier-1 datacenters to serve your sites. It's a system that took us a year to build - and it's ready to serve your site with blazing speed, whether it's your personal home page, or your professional site. Go ahead, put your site on Neocities. We can handle it.</p>
</div>
<div class="col col-33">
<h3><i class="fa fa-lock"></i>Encrypted everything</h3>
<p>Neocities now secures serving all your content with Snowden-grade cryptography, <em>by default</em>, preventing snoops, whether they are hackers or rogue government agencies, from seeing what you browse. And we're working on letting you use your own SSL (HTTPS) certificates for custom domains.
Until January, Neocities will donate 5% of all Supporter plan proceeds to the Courage Foundation, an international organization that supports those who risk life or liberty to disclose privacy abuses online.</p>
</div>
</div> </div>
<div class="col col-33"> <div class="press">
<h3><i class="fa fa-tachometer"></i>More space, more performance</h3> <a href="http://www.wired.com/2013/07/neocities/" class="logo wired"></a>
<p>Neocities now uses a distributed, globally-cached file system in tier-1 datacenters to serve your sites. It's a system that took us a year to build - and it's ready to serve your site with blazing speed, whether it's your personal home page, or your professional site. Go ahead, put your site on Neocities. We can handle it.</p> <a href="http://motherboard.vice.com/blog/neocities-is-recreating-the-garish-web-10-creativity-of-geocities" class="logo vice"></a>
<a href="http://arstechnica.com/tech-policy/2014/05/web-host-gives-fcc-a-28-8kbps-slow-lane-in-net-neutrality-protest/" class="logo ars"></a>
<a href="/press" class="more">See all press »</a>
</div> </div>
<div class="col col-33">
<h3><i class="fa fa-lock"></i> Encrypted everything</h3>
<p>Neocities now secures serving all your content with Snowden-grade cryptography, <em>by default</em>, preventing snoops, whether they are hackers or rogue government agencies, from seeing what you browse. And we're working on letting you use your own SSL (HTTPS) certificates for custom domains.
Until January, Neocities will donate 5% of all Supporter plan proceeds to the Courage Foundation, an international organization that supports those who risk life or liberty to disclose privacy abuses online.</p>
</div></div>
</section> </section>
<section class="section last"> <section class="section plans">
<h2>All Neocities plans include a neocities.org subdomain, WebDAV uploading, one-click backups, and all our social features. We'll never show ads on your site.</h2> <h2>All Neocities plans include a neocities.org subdomain, WebDAV uploading, one-click backups, and all our social features. We'll never show ads on your site.</h2>
<div class="plan-overview"> <div class="plan-overview">
<div class="row header"> <div class="header">
<div class="col col-50"> <div class="col col-50 personal">
Personal Personal
</div> </div>
<div class="col col-50"> <div class="col col-50 professional">
Professional Professional
</div> </div>
</div> </div>
<div class="row body"> <div class="body">
<div class="col col-25"> <div class="col col-25">
<h3>Free</h3> <h3>Free</h3>
<div class="price">$0</div> <div class="price">$0</div>
@ -339,29 +347,29 @@
</div> </div>
<h2><a href="">Compare Plans <i class="fa fa-chevron-down"></i></a></h2> <h2><a href="">Compare Plans <i class="fa fa-caret-down"></i></a></h2>
<table class="plan-chart"> <table class="plan-chart">
<tr> <tr>
<th class="feature-column"></th> <th class="feature-column"></th>
<th> <th>
<h4>Free</h4> <h4>Free</h4>
<p>$0</p> <p>$0/mo</p>
<a href="/" class="btn-Action">Choose</a> <a href="/" class="btn-Action">Choose</a>
</th> </th>
<th> <th>
<h4>Supporter</h4> <h4>Supporter</h4>
<p>$5</p> <p>$5/mo</p>
<a href="/" class="btn-Action">Choose</a> <a href="/" class="btn-Action">Choose</a>
</th> </th>
<th> <th class="professional">
<h4>Cat Bus</h4> <h4>Cat Bus</h4>
<p>$20</p> <p>$20/mo</p>
<a href="/" class="btn-Action">Choose</a> <a href="/" class="btn-Action">Choose</a>
</th> </th>
<th> <th class="professional">
<h4>Fat Cat</h4> <h4>Fat Cat</h4>
<p>$50</p> <p>$50/mo</p>
<a href="/" class="btn-Action">Choose</a> <a href="/" class="btn-Action">Choose</a>
</th> </th>
</tr> </tr>
@ -374,122 +382,122 @@
</tr> </tr>
<tr> <tr>
<td class="feature-column">Bandwidth</td> <td class="feature-column">Bandwidth</td>
<td></td> <td>10 GB</td>
<td></td> <td>100 GB</td>
<td></td> <td>500 GB</td>
<td></td> <td>2 TB</td>
</tr> </tr>
<tr> <tr>
<td class="feature-column">No advertising, ever</td> <td class="feature-column">No advertising, ever</td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
</tr> </tr>
<tr> <tr>
<td class="feature-column">WebDAV Uploading</td> <td class="feature-column">WebDAV Uploading</td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
</tr> </tr>
<tr> <tr>
<td class="feature-column">Neocities.org Subdomain</td> <td class="feature-column">Neocities.org Subdomain</td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
</tr> </tr>
<tr> <tr>
<td class="feature-column">One-Click Backups</td> <td class="feature-column">One-Click Backups</td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
</tr> </tr>
<tr> <tr>
<td class="feature-column">Site Tags</td> <td class="feature-column">Site Tags</td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
</tr> </tr>
<tr> <tr>
<td class="feature-column">RSS Feed</td> <td class="feature-column">RSS Feed</td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
</tr> </tr>
<tr> <tr>
<td class="feature-column">Follow Your Favorite Sites</td> <td class="feature-column">Follow Your Favorite Sites</td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
</tr> </tr>
<tr> <tr>
<td class="feature-column">Site Profile</td> <td class="feature-column">Site Profile</td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
</tr> </tr>
<tr> <tr>
<td class="feature-column">Neocities Site Editor</td> <td class="feature-column">Neocities Site Editor</td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td class="feature-column">Site Tipping (Coming Soon)</td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr> </tr>
<tr> <tr>
<td class="feature-column">Custom Domains</td> <td class="feature-column">Custom Domains</td>
<td></td> <td></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
</tr> </tr>
<tr> <tr>
<td class="feature-column">High Performance Global CDN Cache</td> <td class="feature-column">High Performance Global CDN Cache</td>
<td></td> <td></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
</tr> </tr>
<tr> <tr>
<td class="feature-column">DDoS Mitigation</td> <td class="feature-column">DDoS Mitigation</td>
<td></td> <td></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
</tr> </tr>
<tr> <tr>
<td class="feature-column">Unlimited Site Creation (Coming Soon)</td> <td class="feature-column">Unlimited Site Creation (Coming Soon)</td>
<td></td> <td></td>
<td></td> <td></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td class="feature-column">Site Tipping (Coming Soon)</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr> </tr>
<tr> <tr>
<td class="feature-column">Custom SSL Certificates</td> <td class="feature-column">Custom SSL Certificates</td>
<td></td> <td></td>
<td></td> <td></td>
<td></td> <td><i class="fa fa-check"></i></td>
<td></td> <td><i class="fa fa-check"></i></td>
</tr> </tr>
<tr> <tr>
<td class="feature-column">No File Upload Type Restrictions</td> <td class="feature-column">No File Upload Type Restrictions</td>
<td></td> <td></td>
<td></td> <td></td>
<td></td> <td></td>
<td></td> <td><i class="fa fa-check"></i></td>
</tr> </tr>
</table> </table>
</section> </section>