mirror of
https://github.com/neocities/neocities.git
synced 2025-04-24 17:22:35 +02:00
Initial work on new homepage design with announcement
This commit is contained in:
Victoria Wang
parent
c93d0bbc7f
commit
dbb7d873cf
9 changed files with 118 additions and 95 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
BIN
public/img/neocity.png
Normal file
BIN
public/img/neocity.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
|
|
@ -117,18 +117,18 @@ legend, .legend{
|
|||
}
|
||||
|
||||
::-webkit-input-placeholder { /* WebKit browsers */
|
||||
color:$placeholderColor;
|
||||
color:$placeholderColor!important; //overriding bootstrap css
|
||||
font-style: italic;
|
||||
}
|
||||
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
||||
color:$placeholderColor;
|
||||
color:$placeholderColor!important; //overriding bootstrap css
|
||||
font-style: italic;
|
||||
}
|
||||
::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||||
color:$placeholderColor;
|
||||
color:$placeholderColor!important; //overriding bootstrap css
|
||||
font-style: italic;
|
||||
}
|
||||
:-ms-input-placeholder { /* Internet Explorer 10+ */
|
||||
color:$placeholderColor;
|
||||
color:$placeholderColor!important; //overriding bootstrap css
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,9 @@
|
|||
min-height:42px;
|
||||
overflow:hidden;
|
||||
}
|
||||
.hp .header-Base {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.header-Content{
|
||||
@media(max-device-width:480px), screen and (max-width:800px){
|
||||
|
|
@ -19,7 +22,8 @@
|
|||
.blurb{background:#fff}
|
||||
|
||||
.header-Intro{
|
||||
background:url(/img/neocity.jpg) 95% bottom no-repeat;
|
||||
background:url(/img/neocity.png) 95% bottom no-repeat;
|
||||
background-size: 734px;
|
||||
min-height:214px;
|
||||
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
|
|
@ -38,12 +42,26 @@
|
|||
@include box-shadow($outroShadow);
|
||||
color:#fafafa;
|
||||
}
|
||||
.hp .header-Outro .col-50 {
|
||||
.hp {
|
||||
.header-Outro {
|
||||
.col-50.signup-Area {
|
||||
width: 48%;
|
||||
}
|
||||
.hp .header-Outro .signup-Area {
|
||||
.signup-Area {
|
||||
float: right;
|
||||
}
|
||||
.intro-text {
|
||||
color: #B8D375;
|
||||
font-size: .9em;
|
||||
margin-bottom: 1.8em;
|
||||
}
|
||||
h2.section-header {
|
||||
font-size: 2.2em;
|
||||
margin-top: .5em;
|
||||
margin-bottom: 0.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.intro-List{
|
||||
@extend %kill-List;
|
||||
|
|
@ -105,7 +123,7 @@
|
|||
height:600%;
|
||||
overflow:hidden;
|
||||
position:absolute;
|
||||
top:-45px;
|
||||
top: -40px;
|
||||
width:95%;
|
||||
|
||||
@media (max-device-width:480px), screen and (max-width:800px){
|
||||
|
|
@ -141,19 +159,30 @@
|
|||
}
|
||||
}
|
||||
|
||||
label#domain-name {
|
||||
display: inline;
|
||||
vertical-align: 51%;
|
||||
color: #C2CFD4;
|
||||
}
|
||||
|
||||
.input-Area{
|
||||
background:#29383f;
|
||||
border:0 solid black;
|
||||
@include box-shadow($inputAreaShadow);
|
||||
color:#557380;
|
||||
color:#C2CFD4;
|
||||
margin-bottom:$spacing*7;
|
||||
margin-right:$spacing;
|
||||
padding: 11px 12px 9px 12px;
|
||||
width:62%;
|
||||
padding: 10px 10px 7px 10px;
|
||||
width:100%;
|
||||
|
||||
&:focus{color:#eee}
|
||||
// &:focus{color:#eee}
|
||||
}
|
||||
.input-Area#create-Input {
|
||||
width:62%;
|
||||
}
|
||||
.col.col-50 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.btn-Action{
|
||||
padding:10px 25px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
background:#f6f0e6;
|
||||
min-height:500px;
|
||||
padding-bottom:50px;
|
||||
padding-top: 10px;
|
||||
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
color:#e93250
|
||||
|
|
@ -444,7 +443,7 @@
|
|||
}
|
||||
.site-suggestion {
|
||||
float: left;
|
||||
width: 156px;
|
||||
width: 165px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
height: 160px;
|
||||
|
|
@ -473,7 +472,8 @@
|
|||
margin-bottom: .5em;
|
||||
}
|
||||
.site-portrait img {
|
||||
width: 146px;
|
||||
width: 155px;
|
||||
height:93px;
|
||||
}
|
||||
.site-portrait .caption {
|
||||
display: block;
|
||||
|
|
@ -754,21 +754,19 @@ a.tag:hover {
|
|||
.title-with-badge span {
|
||||
float: left;
|
||||
}
|
||||
.section.featured-Websites {
|
||||
background:#65A0AD;
|
||||
}
|
||||
.section.featured-Websites h2 {
|
||||
color: white;
|
||||
}
|
||||
.section {
|
||||
padding: 50px 10%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.section.previews {
|
||||
background: #f6f0e6;
|
||||
.section.featured-Websites {
|
||||
background:#971D31;
|
||||
padding: 10px 2% 1px 2%;
|
||||
}
|
||||
.section.previews h2, .section.previews p {
|
||||
color: #31424B;
|
||||
.section.features {
|
||||
background: #4F7E89;
|
||||
}
|
||||
.section.features h2, .section.features h3, .section.features p {
|
||||
color: #fff;
|
||||
}
|
||||
.section h2 {
|
||||
font-size: 1.6em;
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ $c-Underline: #ccc; // not for links
|
|||
$c-Border: #ccc;
|
||||
|
||||
// Place holder for inputs
|
||||
$placeholderColor:#5E7F8D;
|
||||
$placeholderColor:#557380;
|
||||
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -66,4 +66,10 @@
|
|||
.hp-Gallery img, .neo-Screen-Shot img{
|
||||
width:100%
|
||||
}
|
||||
|
||||
.hp-Gallery li {
|
||||
width: 14%;
|
||||
margin-right: 2%;
|
||||
}
|
||||
.hp-Gallery {
|
||||
padding: 24px 24px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,19 +3,6 @@
|
|||
// refactor it back into the main code-base and make it suck less
|
||||
// -----------------------------------------------------------------------
|
||||
|
||||
::-webkit-input-placeholder { /* WebKit browsers */
|
||||
color: #999;
|
||||
}
|
||||
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
||||
color: #999;
|
||||
}
|
||||
::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||||
color: #999;
|
||||
}
|
||||
:-ms-input-placeholder { /* Internet Explorer 10+ */
|
||||
color: #999;
|
||||
}
|
||||
|
||||
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
|
||||
color: #000000;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,8 +31,7 @@
|
|||
<meta name="MobileOptimized" content="320" />
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1" />
|
||||
|
||||
<!-- oh vanity. -->
|
||||
<link rel="author" type="text/plain" href="humans.txt" />
|
||||
<link href="/css/neo.css" rel="stylesheet" type="text/css" media="all"/>
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script type="text/javascript" src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
|
|
@ -119,22 +118,27 @@
|
|||
<div class="header-Outro">
|
||||
|
||||
<div class="row header-Content content">
|
||||
|
||||
<ul class="col col-50 intro-List">
|
||||
<div class="col col-50">
|
||||
<h2 class="section-header">Introducing the New Neocities</h2>
|
||||
<p class="intro-text">Now’s a great time to join our community of over <%= @sites_count.to_s.reverse.gsub(/...(?=.)/,'\&,').reverse %> websites!
|
||||
<br />
|
||||
You get <%= Site::FREE_MAXIMUM_IN_MEGABYTES %> MB of free web space to make whatever you’d like. </p>
|
||||
<ul class="intro-List">
|
||||
<li class="intro-Tools">
|
||||
<span class="intro-Icon"></span>
|
||||
<h2 class="delta">Create your own free website</h2>
|
||||
<p class="tiny">
|
||||
You get <%= Site::FREE_MAXIMUM_IN_MEGABYTES %> MB of free web space to make whatever you’d like!
|
||||
<h2 class="delta">Free web hosting goes social</h2>
|
||||
<p class="base">
|
||||
Follow your favorite Neocities sites to keep up with all the latest updates! You can also now discover new websites related to your interests, comment on them, and share them.
|
||||
</p>
|
||||
</li>
|
||||
<li class="intro-Social">
|
||||
<span class="intro-Icon"></span>
|
||||
<h2 class="delta">Making the web fun again</h2>
|
||||
<p class="tiny">
|
||||
We're community of over <%= @sites_count.to_s.reverse.gsub(/...(?=.)/,'\&,').reverse %> websites that are bringing back creative expression on the web. Anyone can make a site, only your imagination is required. Join us!
|
||||
<p class="base">
|
||||
We’ve been working to make it easier to build your website and explore other sites. Neocities now has folders, tag browsing (our take on webrings), WebDAV uploading, RSS subscriptions, and more!
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col col-50 signup-Area">
|
||||
|
||||
|
|
@ -156,11 +160,26 @@
|
|||
<% else %>
|
||||
<form action="/new" method="get" class="signup-Form">
|
||||
<fieldset class="content">
|
||||
<h2 class="gamma">Get Started Now</h2>
|
||||
<h2 class="gamma">Sign up for free</h2>
|
||||
<hr />
|
||||
<input type="text" class="input-Area" id="create-Input" name="username" placeholder="website name" />
|
||||
<label for="create-Input">.neocities.org</label>
|
||||
<input type="submit" value="Create My Website" class="btn-Action float-Right" />
|
||||
<label for="create-Input">Username</label>
|
||||
<input type="text" class="input-Area" id="create-Input" name="username" placeholder="my-site-name" />
|
||||
<label for="create-Input" id="domain-name">.neocities.org</label>
|
||||
|
||||
<label for="tags-input">Tags (your interests, site topics)</label>
|
||||
<input type="text" class="input-Area" id="tags-input" name="tags" placeholder="art, videogames, food, music, programming, gardening, cats" />
|
||||
|
||||
<div class="col col-50" style="padding-left:0;">
|
||||
<label for="password-input">Password</label>
|
||||
<input type="text" class="input-Area" id="password-input" name="password" placeholder="password" />
|
||||
</div>
|
||||
|
||||
<div class="col col-50">
|
||||
<label for="email-input">Email</label>
|
||||
<input type="text" class="input-Area" id="email-input" name="email" placeholder="me@example.com" />
|
||||
</div>
|
||||
|
||||
<input type="submit" value="Create My Site" class="btn-Action float-Right" />
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
|
@ -174,29 +193,9 @@
|
|||
|
||||
</header>
|
||||
|
||||
<main class="content-Base" style="background: #666">
|
||||
|
||||
<div class="section previews">
|
||||
<div class="preview">
|
||||
<h2>Follow websites to watch their updates</h2>
|
||||
<p>Fate. It protects fools, little children, and ships named "Enterprise." I'll be sure to note that in my log. That might've been one of the shortest assignments in the history of Starfleet. Damage report!</p>
|
||||
</div>
|
||||
|
||||
<div class="preview right">
|
||||
<h2>Comment on and tip websites you like</h2>
|
||||
<p>Fate. It protects fools, little children, and ships named "Enterprise." I'll be sure to note that in my log. That might've been one of the shortest assignments in the history of Starfleet. Damage report!</p>
|
||||
</div>
|
||||
|
||||
<div class="preview">
|
||||
<h2>Discover new sites related to your interests</h2>
|
||||
<p>Fate. It protects fools, little children, and ships named "Enterprise." I'll be sure to note that in my log. That might've been one of the shortest assignments in the history of Starfleet. Damage report!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="section featured-Websites clearfix">
|
||||
|
||||
<h2 class="delta">Featured Websites</h2>
|
||||
<main class="content-Base">
|
||||
|
||||
<div class="section featured-Websites">
|
||||
<ul class="row website-Gallery hp-Gallery">
|
||||
<li>
|
||||
<a href="http://dragonquest.neocities.org/" title="The Quest of Dragons" target="_blank">
|
||||
|
|
@ -228,23 +227,27 @@
|
|||
<img src="//neocities.org/site_screenshots/drawinglair.jpg" class="neo-SS" alt="Thumbnail of Tomasz Zawadzki" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://eleanor.neocities.org/" title="Eleanor Holroyd's Website" target="_blank">
|
||||
<img src="//neocities.org/site_screenshots/eleanor.jpg" class="neo-SS" alt="Thumbnail of Eleanor Holroyd's Website" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://cute-animation.neocities.org/" title="Cute Animation" target="_blank">
|
||||
<img src="//neocities.org/site_screenshots/cute-animation.jpg" class="neo-SS" alt="Thumbnail of Cute Animation" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="txt-Center" style="margin-top: 15px">
|
||||
<a href="/browse" title="Browse all Neocities websites" class="btn-Action btn-Large">Browse All Websites</a>
|
||||
</div>
|
||||
|
||||
</section> <!-- end .featured-Websites -->
|
||||
<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>
|
||||
|
||||
<h3>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>
|
||||
|
||||
<h3>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>
|
||||
|
||||
<h3>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>
|
||||
|
||||
<h3>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>
|
||||
</section>
|
||||
|
||||
<section class="section last">
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue