zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-24 17:22:35 +02:00
Code Issues Projects Releases Packages Wiki Activity

Initial mockup/code for new index with large sections.

Browse source
This commit is contained in:
Victoria Wang 2014-04-26 10:24:56 -05:00
parent cb9a9c4c58
commit 725539b867
4 changed files with 67 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
files/wireframes/newindex01x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 837 KiB

25
public/assets/css/_project-sass/_project-Main.scss
View file

@ -742,4 +742,29 @@ 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.previews h2, .section.previews p {
color: #31424B;
}
.section h2 {
font-size: 1.6em;
}
.section.last {
background: #666666;
}
.section.last h2, .section.last blockquote {
color: white;
}

2
public/assets/css/neo.css
View file

File diff suppressed because one or more lines are too long

79
views/newindex_mockup.erb
View file

@ -178,11 +178,26 @@
</header>
<main class="content-Base">
<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="content">
<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="featured-Websites clearfix">
<section class="section featured-Websites clearfix">
<h2 class="delta">Featured Websites</h2>
@ -234,50 +249,38 @@
</div>
</section> <!-- end .featured-Websites -->
<section class="section last">
<hr />
<aside class="row">
<aside class="row">
<div class="col col-50">
<div class="content">
<div class="col col-50">
<div class="content">
<h2>Get Started Today!</h2>
<h3 class="delta">Learn to Code</h3>
<p>signup</p>
</div>
</div> <!-- end .col-50 -->
<p>
Don't know how to code a website? No problem!
We're working on a batch of tutorials that will show you the way.
</p>
<div class="col col-50">
<div class="content">
<code>
<span class="code-Tag">&lt;h1&gt;</span>Welcome to my website!<span class="code-Tag">&lt;/h1&gt;</span><br />
<span class="code-Tag">&lt;a</span> href="<span class="code-Value">about.html</span>">About Me<span class="code-Tag">&lt;/a&gt;</span><br />
<span class="code-Tag">&lt;img</span> src="<span class="code-Value">me.jpg</span>" alt="<span class="code-Value">photo of me</span>" <span class="code-Tag">/&gt;</span>
</code>
<ul class="quote-Slider kill-List">
<li class="quote">
<blockquote>
Designed as a 21st century reincarnation of GeoCities, Neocities lets you make your own site for free. And it just might spark a renaissance of creativity online.
</blockquote>
<a href="http://web.appstorm.net/reviews/web-dev/neocities-the-free-place-to-code-your-own-site-from-scratch/" title="App Storm" class="action-Link">Source link</a>
</li>
</ul>
</div>
</div> <!-- end .col-50 -->
</div>
</div> <!-- end .col-50 -->
<div class="col col-50">
<div class="content">
</aside> <!-- end .row -->
<h3 class="delta">What People Are Saying</h3>
<ul class="quote-Slider kill-List">
<li class="quote">
<blockquote>
Designed as a 21st century reincarnation of GeoCities, Neocities lets you make your own site for free. And it just might spark a renaissance of creativity online.
</blockquote>
<a href="http://web.appstorm.net/reviews/web-dev/neocities-the-free-place-to-code-your-own-site-from-scratch/" title="App Storm" class="action-Link">Source link</a>
</li>
</ul>
</div>
</div> <!-- end .col-50 -->
</aside> <!-- end .row -->
</div> <!-- end .content -->
</section>
</main>