From 42820c848b5d3dd7cfc0ef5cc711aef25d569954 Mon Sep 17 00:00:00 2001
From: Scott <scottaohara@gmail.com>
Date: Mon, 2 Feb 2015 20:54:35 -0500
Subject: [PATCH] markup & accessibility updates

quick pass through some files to get some low hanging accessibility & markup semantic updates.
---
 views/about.erb          |   8 +-
 views/admin.erb          |   4 +-
 views/browse.erb         |  10 +--
 views/contact.erb        |  15 ++--
 views/dashboard.erb      |  20 ++---
 views/donate.erb         |  18 ++--
 views/error.erb          |   4 +-
 views/home_mockup.erb    |  60 ++++++-------
 views/index.erb          | 179 ++++++++++++++++++++++-----------------
 views/not_found.erb      |  13 +--
 views/password_reset.erb |   6 +-
 11 files changed, 180 insertions(+), 157 deletions(-)

diff --git a/views/about.erb b/views/about.erb
index bfae797f..8d0db3cc 100644
--- a/views/about.erb
+++ b/views/about.erb
@@ -1,12 +1,12 @@
 <div class="header-Outro">
   <div class="row content single-Col">
   <h1>About Neocities</h1>
-  <h3 class="subtitle">Your free web page is waiting&#8230; once again.</h3>
+  <h2 class="subtitle">Your free web page is waiting&#8230; once again.</h2>
   </div>
 </div>
 
 <div class="content single-Col misc-page">
-  <article>
+  <article role="article">
     <h1>Neocities is bringing back the fun, creativity and independence that made the web great.</h1>
 
     <p>
@@ -18,7 +18,7 @@
     <p>
       That's where Neocities comes in. We provide a canvas for people to make any web site they want.
       Whether it be a web site about something they're good at, something they love, something they hate, or
-      their own completely customized profile where they can introduce themselves in a way that actually matters to them. 
+      their own completely customized profile where they can introduce themselves in a way that actually matters to them.
       We can do this without selling out to the marketing industry, and we're going to prove it.
     </p>
     <p>
@@ -42,7 +42,7 @@
       <li><strong>Anti lock-in.</strong> Redirecting to new sites, easy site downloading, and support for custom domains.</li>
       <li><strong>Sustainable.</strong> We want to grow, but that growth cannot risk the site (or compromise our principles).</li>
     </ul>
-    
+
     <p style="margin-top:20px">
       If you share our values, we would love your support. Spread the word! We also have a <a href="/plan">supporter plan</a> to help pay for the site, and we accept <a href="/donate">donations</a> through multiple options (including Bitcoin... and Dogecoin).
     </p>
diff --git a/views/admin.erb b/views/admin.erb
index 4fffb3e8..9ab5ce6c 100644
--- a/views/admin.erb
+++ b/views/admin.erb
@@ -1,7 +1,7 @@
 <div class="header-Outro">
   <div class="row content single-Col">
     <h1>Administration</h1>
-    <h3 class="subtitle">Freedom Ain't Free</h3>
+    <h2 class="subtitle">Freedom Ain't Free</h2>
   </div>
 </div>
 
@@ -62,4 +62,4 @@
       </form>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/views/browse.erb b/views/browse.erb
index 257e1241..940afbab 100644
--- a/views/browse.erb
+++ b/views/browse.erb
@@ -17,7 +17,7 @@
         <h1>Sites on Neocities</h1>
       <% end %>
     </div>
-  
+
     <form id="search_criteria" action="/browse" method="GET">
       <div class="col col-50 filter">
         <fieldset class="grouping">
@@ -44,7 +44,7 @@
         <form method="GET" action="browse">
         <fieldset class="grouping">
         <label class="text-Label" for="tag">Search by tag:</label>
-        <input class="input-Area typeahead" name="tag" type="text" placeholder="pokemon" value="<%= params[:tag] %>" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" dir="auto">
+        <input class="input-Area typeahead" id="tag" name="tag" type="text" placeholder="pokemon" value="<%= params[:tag] %>" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" dir="auto">
         <input style="vertical-align: -4px;margin-left: 4px;" type="submit" class="btn-Action" value="Search">
         </fieldset>
       </div>
@@ -88,9 +88,9 @@
           </div>
           <div class="site-tags">
             <% if site.tags.count > 0 %>
-              <i class="fa fa-tag"></i> 
+              <i class="fa fa-tag"></i>
               <% site.tags.each_with_index do |tag, index| %>
-                <a class="" href="/browse?tag=<%= Rack::Utils.escape tag.name %>"><%= tag.name %></a><% if index != site.tags.length - 1 %>,<% end %> 
+                <a class="" href="/browse?tag=<%= Rack::Utils.escape tag.name %>"><%= tag.name %></a><% if index != site.tags.length - 1 %>,<% end %>
               <% end %>
             <% end %>
           </div>
@@ -145,4 +145,4 @@
     <% end %>
     </p>
 </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/views/contact.erb b/views/contact.erb
index dc724eb7..9e2dae35 100644
--- a/views/contact.erb
+++ b/views/contact.erb
@@ -7,7 +7,6 @@
 <div class="header-Outro">
   <div class="row content single-Col">
   <h1>Contact Us</h1>
-  <h3 class="subtitle"></h3>
   </div>
 </div>
 
@@ -19,7 +18,7 @@
       <% end %>
     </div>
   <% end %>
-  
+
   <h6>Please Note Before Contacting:</h6>
 
   <ul>
@@ -34,14 +33,14 @@
   <form action="/contact" method="POST" class="content">
     <input name="csrf_token" type="hidden" value="<%= csrf_token %>">
     <fieldset>
-      <label>Email address</label>
-      <input type="email" name="email" placeholder="Your Email" style="width: 300px" value="<%= params[:email] %>">
+      <label for="your_email">Email address</label>
+      <input type="email" id="your_email" name="email" placeholder="Your Email" style="width: 300px" value="<%= params[:email] %>">
 
-      <label>Subject</label>
-      <input type="text" name="subject" placeholder="Subject" style="width: 400px" value="<%= params[:subject] %>">
+      <label for="email_subject">Subject</label>
+      <input type="text" id="email_subject" name="subject" placeholder="Subject" style="width: 400px" value="<%= params[:subject] %>">
 
-      <label>Comments</label>
-      <textarea name="body" style="width: 600px" rows="10"><%= params[:body] %></textarea>
+      <label for="your_comments">Comments</label>
+      <textarea name="body" id="your_comments" style="width: 600px" rows="10"><%= params[:body] %></textarea>
 
       <label>Fill out captcha so we know you're not a robot:</label>
       <div class="recaptcha">
diff --git a/views/dashboard.erb b/views/dashboard.erb
index 6f880122..7fe11542 100644
--- a/views/dashboard.erb
+++ b/views/dashboard.erb
@@ -44,7 +44,7 @@
   </div> <!-- end .row -->
 </div> <!-- end .header-Outro -->
 
-<main class="content-Base">
+<main class="content-Base" role="main">
 
 <div class="content wide">
 
@@ -92,7 +92,7 @@
         <% dir_array = @dir.split '/' %>
         <% dir_array.each_with_index do |dir,i| %>
           <% if i+1 < dir_array.length %>
-            <a href="/dashboard?dir=<%= Rack::Utils.escape dir %>"><%= dir %></a> <i class="fa fa-angle-right"></i> 
+            <a href="/dashboard?dir=<%= Rack::Utils.escape dir %>"><%= dir %></a> <i class="fa fa-angle-right"></i>
           <% else %>
             <%= dir %>
           <% end %>
@@ -115,19 +115,19 @@
           <div class="file filehover">
             <% if file[:is_html] && current_site.screenshot_exists?(file[:path], '210x158') %>
               <div class="html-thumbnail html fileimagehover">
-                <img src="<%= current_site.screenshot_url(file[:path], '210x158') %>">
+                <img src="<%= current_site.screenshot_url(file[:path], '210x158') %>" alt="">
                 <div class="overlay"></div>
               </div>
             <% elsif file[:is_image] && current_site.thumbnail_exists?(file[:path], '210x158') %>
               <div class="html-thumbnail image fileimagehover">
-                <img src="<%= current_site.thumbnail_url(file[:path], '210x158') %>">
+                <img src="<%= current_site.thumbnail_url(file[:path], '210x158') %>" alt="">
                 <div class="overlay"></div>
               </div>
             <% elsif file[:is_directory] %>
               <div class="html-thumbnail folder fileimagehover">
                 <div class="folder-icon"></div>
                 <div class="overlay"></div>
-              </div> 
+              </div>
             <% else %>
               <div class="html-thumbnail misc fileimagehover">
                 <div class="misc-icon"><%= file[:ext] %></div>
@@ -178,8 +178,8 @@
           <p>You are about to delete <strong><span id="deleteFileName"></span></strong>. Are you sure?</p>
         </div>
         <div class="modal-footer">
-          <button class="btn cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
-          <button class="btn btn-Action btn-danger" onclick="fileDelete()"><i class="fa fa-trash" title="Delete"></i>Delete</button>
+          <button class="btn cancel" data-dismiss="modal" aria-hidden="true" type="button">Cancel</button>
+          <button class="btn btn-Action btn-danger" type="button" onclick="fileDelete()"><i class="fa fa-trash" title="Delete"></i>Delete</button>
         </div>
       </div>
 
@@ -202,7 +202,7 @@
 </form>
 
 <script src="/js/dropzone.min.js"></script>
-<script type="text/javascript">
+<script>
 
   function confirmFileDelete(name) {
     $('#deleteFileName').html(name.replace('/',''));
@@ -255,7 +255,7 @@
 </script>
 
 <div class="modal hide fade" id="createDir" tabindex="-1" role="dialog" aria-labelledby="createDirLabel" aria-hidden="true">
-  <form method="POST" action="/site/create_directory">
+  <form method="post" action="/site/create_directory">
     <input type="hidden" value="<%= csrf_token %>" name="csrf_token">
     <input type="hidden" value="<%= @dir %>" name="dir">
     <div class="modal-header">
@@ -266,7 +266,7 @@
       <input name="name" type="text" placeholder="folder_name">
     </div>
     <div class="modal-footer">
-      <button class="btn cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
+      <button type="button" class="btn cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
       <button type="submit" class="btn btn-Action">Create</button>
     </div>
   </form>
diff --git a/views/donate.erb b/views/donate.erb
index 6c8fceeb..3b6c01df 100644
--- a/views/donate.erb
+++ b/views/donate.erb
@@ -5,41 +5,39 @@
 <div class="header-Outro">
   <div class="row content single-Col">
   <h1>Donate to Neocities</h1>
-  <h3 class="subtitle">Help us keep the creative, independent internet alive!</h3>
+  <h2 class="subtitle">Help us keep the creative, independent internet alive!</h2>
   </div>
 </div>
 
 <div class="content single-Col misc-page txt-Center">
-  <article>
-    <section>
+  <article role="article">
         <h2>How to Donate</h2>
         <p>If you send a donation and want to become a supporter, send us an email and we'll take care of it. Thanks!</p>
-        
+
         <h3>Gratipay:</h3>
         <script data-gratipay-username="neocities" src="//gttp.co/v1.js"></script>
 
         <h3>Bitcoin:</h3>
         <p><img src="/img/bitcoin.png"></p>
         <p><b>1MPYyfoWK8CkAzhLzLLtZGa9dwEGT5dm2T</b></p>
-        
+
         <h3>Dogecoin:</h3>
         <p><img src="/img/dogecoin.png"></p>
         <p>
         <div><span style="color:#ff0000;">D</span><span style="color:#ff1500;">C</span><span style="color:#ff2a00;">X</span><span style="color:#ff4000;">c</span><span style="color:#ff5500;">J</span><span style="color:#ff6a00;">7</span><span style="color:#ff7f00;">u</span><span style="color:#ff9900;">Q</span><span style="color:#ffb200;">Q</span><span style="color:#ffcc00;">c</span><span style="color:#ffe500;">v</span><span style="color:#ffff00;">X</span><span style="color:#d5ff00;">R</span><span style="color:#aaff00;">8</span><span style="color:#80ff00;">q</span><span style="color:#55ff00;">7</span><span style="color:#2bff00;">A</span><span style="color:#00ff00;">N</span><span style="color:#00ff33;">7</span><span style="color:#00ff66;">2</span><span style="color:#00ff99;">6</span><span style="color:#00ffcc;">g</span><span style="color:#00ffff;">J</span><span style="color:#00d5ff;">L</span><span style="color:#00aaff;">x</span><span style="color:#0080ff;">7</span><span style="color:#0055ff;">t</span><span style="color:#002bff;">g</span><span style="color:#0000ff;">u</span><span style="color:#1c00ff;">q</span><span style="color:#3800ff;">w</span><span style="color:#5300ff;">n</span><span style="color:#6f00ff;">D</span><span style="color:#8b00ff;">5</span></div>
         </p>
-        
+
         <h3>PayPal:</h3>
-        
+
         <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
         <input type="hidden" name="cmd" value="_s-xclick">
         <input type="hidden" name="hosted_button_id" value="RBASFDBGMTPME">
         <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
         <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
         </form>
-        
+
         <h3>Flattr</h3>
         <script id='flattrbtn'>(function(i){var f,s=document.getElementById(i);f=document.createElement('iframe');f.src='//api.flattr.com/button/view/?uid=kyledrake&url='+encodeURIComponent(document.URL);f.title='Flattr';f.height=100;f.width=100;f.style.borderWidth=0;s.parentNode.insertBefore(f,s);})('flattrbtn');</script>
         <h4 style="margin-top: 30px; margin-bottom: 30px">Thanks. You are great! <a href="/#new">Now go and make an awesome web site!</a></h4>
-      </section>
   </article>
-</div> <!-- end .content -->
\ No newline at end of file
+</div> <!-- end .content -->
diff --git a/views/error.erb b/views/error.erb
index 8d3deceb..0280617b 100644
--- a/views/error.erb
+++ b/views/error.erb
@@ -6,10 +6,10 @@
 </div>
 
 <div class="content single-Col misc-page">
-  <article>
+  <article role="article">
     <h3>We have automatically been notified of the problem.</h3>
     <p>
       If you need to add any special information or if this error has not been resolved after a few days, <a href="/contact" title="contact us">contact us</a> and report the problem. Thank you, and our apologies for the inconvenience.
     </p>
   </article>
-</div>
\ No newline at end of file
+</div>
diff --git a/views/home_mockup.erb b/views/home_mockup.erb
index 23c1e8f1..ae182b90 100644
--- a/views/home_mockup.erb
+++ b/views/home_mockup.erb
@@ -19,11 +19,11 @@
       <h4>Welcome to your Neocities news feed!</h4>
       <p>You aren't following any websites yet! Once you do, updates will show up here and you can like and comment on them. Here are some website suggestions based on your tags, or <a href="/browse">check out all the sites on Neocities!</a></p>
     </div>
-    
+
     <div class="site-suggestion">
       <div class="site-portrait">
         <a href="http://dragonquest.neocities.org">
-          <img src="http://neocities.org/site_screenshots/dragonquest.jpg">
+          <img src="http://neocities.org/site_screenshots/dragonquest.jpg" alt="">
           <span class="caption">dragonquest</span>
         </a>
       </div>
@@ -32,11 +32,11 @@
       <a class="tag" href="http://neocities.org">Art</a>
       <a class="tag" href="http://neocities.org">Cooking</a>
     </div>
-    
+
     <div class="site-suggestion">
       <div class="site-portrait">
         <a href="http://dragonquest.neocities.org">
-          <img src="http://neocities.org/site_screenshots/dragonquest.jpg">
+          <img src="http://neocities.org/site_screenshots/dragonquest.jpg" alt="">
           <span class="caption">dragonquest</span>
         </a>
       </div>
@@ -44,43 +44,43 @@
       <a class="tag" href="http://neocities.org">Anime</a>
       <a class="tag" href="http://neocities.org">Art</a>
     </div>
-    
+
     <div class="site-suggestion">
       <div class="site-portrait">
         <a href="http://dragonquest.neocities.org">
-          <img src="http://neocities.org/site_screenshots/dragonquest.jpg">
+          <img src="http://neocities.org/site_screenshots/dragonquest.jpg" alt="">
           <span class="caption">dragonquest</span>
         </a>
       </div>
       <a class="tag" href="http://neocities.org">Games</a>
       <a class="tag" href="http://neocities.org">Anime</a>
     </div>
-    
+
     <div class="site-suggestion">
       <div class="site-portrait">
         <a href="http://dragonquest.neocities.org">
-          <img src="http://neocities.org/site_screenshots/dragonquest.jpg">
+          <img src="http://neocities.org/site_screenshots/dragonquest.jpg" alt="">
           <span class="caption">dragonquest</span>
         </a>
       </div>
       <a class="tag" href="http://neocities.org">Games</a>
     </div>
-    
+
     <div class="site-suggestion">
       <div class="site-portrait">
         <a href="http://dragonquest.neocities.org">
-          <img src="http://neocities.org/site_screenshots/dragonquest.jpg">
+          <img src="http://neocities.org/site_screenshots/dragonquest.jpg" alt="">
           <span class="caption">dragonquest</span>
         </a>
       </div>
       <a class="tag" href="http://neocities.org">Games</a>
       <a class="tag" href="http://neocities.org">Anime</a>
     </div>
-    
+
     <div class="site-suggestion">
       <div class="site-portrait">
         <a href="http://dragonquest.neocities.org">
-          <img src="http://neocities.org/site_screenshots/dragonquest.jpg">
+          <img src="http://neocities.org/site_screenshots/dragonquest.jpg" alt="">
           <span class="caption">dragonquest</span>
         </a>
       </div>
@@ -88,9 +88,9 @@
     </div>
     <% end %>
     <!-- --------------------------------------------------------------------------------------------------------------------------- -->
-    
+
     <!-- need to add a class of "first" to the first news-item element -->
-    
+
    <div class="news-item comment">
       <div class="title">
         <div class="icon"></div>
@@ -138,21 +138,21 @@
         </div>
       </div>
     </div>
-    
+
     <div class="news-item follow">
       <div class="title">
         <div class="icon"></div>
         <a href="" class="user">Foo</a> followed <a href="" class="user">Derp's</a> website<span class="date">7h</span>
       </div>
     </div>
-    
+
     <div class="news-item tip">
       <div class="title">
         <div class="icon"></div>
         You tipped <a href="" class="user">Derp's</a> website: <a href="" class="comment">Wow, great work here! Please keep updating :)</a><span class="date">Apr 23</span>
       </div>
     </div>
-    
+
     <div class="news-item comment">
       <div class="title">
         <div class="icon"></div>
@@ -160,14 +160,14 @@
         <span class="date">Apr 20</span>
       </div>
     </div>
-    
+
     <div class="news-item follow">
       <div class="title">
         <div class="icon"></div>
         You followed <a href="" class="user">Derp's</a> website<span class="date">Apr 7</span>
       </div>
     </div>
-    
+
     <div class="news-item update">
       <div class="title">
         <div class="icon"></div>
@@ -194,11 +194,11 @@
         <div class="actions"><a href="">Like (1)</a> <a href="">Reply</a></div>
       </div>
     </div>
-    
+
     <div class="news-item comment for-me">
       <div class="title">
         <div class="icon" style="background-image:url(https://neocities.org/site_screenshots/codeventurer.jpg);"></div>
-        <a href="" class="user">Derpie</a> 
+        <a href="" class="user">Derpie</a>
         <span class="date">Apr 7</span>
         <div class="comment">Your site is amazing. Very helpful information. Would love to see more updates if you have time. Your site is amazing. Very helpful information. Would love to see more updates if you have time. </div>
       </div>
@@ -209,11 +209,11 @@
             <img class="avatar" src="https://neocities.org/site_screenshots/victoria.jpg">
             <a href="" class="user">victoria</a> Indeed, it's great!<span class="date">Apr 7</span>
             <div class="actions"><a href="">Like (1)</a></div>
-          </div>  
+          </div>
         </div>
       </div>
     </div>
-    
+
     <div class="news-item comment">
       <div class="title">
         <div class="icon"></div>
@@ -221,14 +221,14 @@
         <span class="date">Apr 7</span>
       </div>
     </div>
-    
+
     <div class="news-item follow">
       <div class="title">
         <div class="icon"></div>
         You followed <a href="" class="user">Derp's</a> website<span class="date">Apr 7</span>
       </div>
     </div>
-    
+
     <div class="news-item tip for-me">
       <div class="title">
         <div class="icon" style="background-image:url(https://neocities.org/site_screenshots/victoria.jpg);"></div>
@@ -241,7 +241,7 @@
       </div>
     </div>
   </div>
-  
+
   <div class="col col-33">
     <p class="site-url"><a href="http://<%= current_site.username %>.neocities.org" target="_blank">http://<%= current_site.username %>.neocities.org</a></p>
     <div class="stats">
@@ -252,9 +252,9 @@
         <div><strong>3</strong> tips ($13.55)</div>
       </div>
     </div>
-    
+
     <a href=""><img src="http://neocities.org/site_screenshots/codeventurer.jpg" style="width:340px" class="large-portrait"></a>
-    
+
     <h3>Following</h3>
     <div class="following">
       <a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
@@ -272,7 +272,7 @@
       <a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
       <a href=""><img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="avatar"></a>
     </div>
-    
+
     <h3>Tags</h3>
     <a class="tag" href="http://neocities.org">Games</a>
     <a class="tag" href="http://neocities.org">Anime</a>
@@ -284,4 +284,4 @@
     <a class="tag" href="http://neocities.org">Cooking</a>
   </div>
 </div></div>
-</div>
\ No newline at end of file
+</div>
diff --git a/views/index.erb b/views/index.erb
index 4d3a4709..0f4c5f7d 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -40,16 +40,17 @@
   <script src='https://www.google.com/recaptcha/api.js'></script>
 </head>
 
-  <body class="hp"><a id="new"></a>
+  <body class="hp">
+    <a id="new"></a>
 
     <div class="page">
 
-      <header class="header-Base">
+      <header class="header-Base" role="banner">
         <nav class="header-Nav clearfix" role="navigation">
             <a href="#!" title="show small screen nav" class="small-Nav">
               <img src="/img/nav-Icon.png" alt="navigation icon" />
             </a>
-            <ul class="h-Nav constant-Nav">
+            <ul class="h-Nav constant-Nav" role="presentation">
               <li>
                 <a href="/">Neocities</a>
               </li>
@@ -84,7 +85,7 @@
                   <a href="/settings" class="sign-In">Settings</a>
                 </li>
                 <li>
-                  <a href="/signout" class="sign-In">Signout</a>
+                  <a href="/signout" class="sign-In">Sign Out</a>
                 </li>
               <% end %>
             </ul>
@@ -117,25 +118,25 @@
 <div class="header-Outro">
   <div class="row header-Content content">
     <div class="col intro">
-    <h2 class="section-header">Create your own free web site, and discover new ones.</h2>
-    <p class="intro-text">
-     Neocities is a community of <a href="/browse"><%= @sites_count.to_s.reverse.gsub(/...(?=.)/,'\&,').reverse %> sites</a> that are bringing back the lost individual creativity of the web. We provide free hosting and tools that allow anyone to make a web site. Only your imagination is required. Join us!
-    </p>
-    <ul class="intro-List">
-      <li class="intro-Social">
-        <span class="intro-Icon"></span>
-        <h2 class="delta">Share your web creation with the world</h2>
-        <p class="base">
-          Follow your favorite Neocities sites to keep up with all their latest updates. Discover new websites related to your interests using tags, comment on them, and share them. Unlimited creativity, zero ads.
-        </p>
-      </li>
-      <li class="intro-Tools">
-        <span class="intro-Icon"></span>
-        <h2 class="delta">Powerful new features to help you build</h2>
-        <p class="base">
-          We’ve made it easier to build your website and explore other sites. Neocities features an in-browser HTML editor, custom domain support, faster site loading, easy file uploading, RSS feeds, folder support, and much more.
-      </li>
-    </ul>
+      <h2 class="section-header">Create your own free web site, and discover new ones.</h2>
+      <p class="intro-text">
+       Neocities is a community of <a href="/browse"><%= @sites_count.to_s.reverse.gsub(/...(?=.)/,'\&,').reverse %> sites</a> that are bringing back the lost individual creativity of the web. We provide free hosting and tools that allow anyone to make a web site. Only your imagination is required. Join us!
+      </p>
+      <ul class="intro-List">
+        <li class="intro-Social">
+          <span class="intro-Icon"></span>
+          <h3 class="delta">Share your web creation with the world</h3>
+          <p class="base">
+            Follow your favorite Neocities sites to keep up with all their latest updates. Discover new websites related to your interests using tags, comment on them, and share them. Unlimited creativity, zero ads.
+          </p>
+        </li>
+        <li class="intro-Tools">
+          <span class="intro-Icon"></span>
+          <h3 class="delta">Powerful new features to help you build</h3>
+          <p class="base">
+            We’ve made it easier to build your website and explore other sites. Neocities features an in-browser HTML editor, custom domain support, faster site loading, easy file uploading, RSS feeds, folder support, and much more.
+        </li>
+      </ul>
     </div>
 
     <div class="col signup-Area">
@@ -143,15 +144,15 @@
 
         <div class="signup-Form">
           <div class="content">
-            <h2 class="gamma txt-Center">Build your Website!</h2>
+            <h3 class="gamma txt-Center">Build your Website!</h3>
           </div>
           <p class="txt-Center">
             Go to your dashboard to<br> start editing your website!
           </p>
           <br />
-            <div class="txt-Center">
-              <a href="/dashboard" class="btn-Action">Get Started</a>
-            </div>
+          <div class="txt-Center">
+            <a href="/dashboard" class="btn-Action">Get Started</a>
+          </div>
         </div>
       <% else %>
         <form id="createSiteForm" class="signup-Form" onsubmit="return false">
@@ -160,7 +161,7 @@
             <h2 class="gamma">Sign up for free</h2>
             <hr />
             <div class="siteCreateInputs">
-              <label for="create-Input">Username</label>
+              <label for="create-Input">User Name</label>
               <input type="text" name="prevent_autofill_username" id="prevent_autofill_username" value="" style="position:absolute; top:-2000px; left:-2000px;" />
               <input type="password" name="prevent_autofill_password" id="prevent_autofill_password" value="" style="position:absolute; top:-2000px; left:-2000px;" />
               <input type="text" class="input-Area" id="create-Input" name="username" placeholder="my-site-name" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />
@@ -170,18 +171,34 @@
               <input type="text" class="input-Area" id="tags-input" name="new_tags_string" placeholder="art, videogames, food, music, programming, gardening, cats" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />
 
               <div class="col col-50" style="padding-left:0;">
-              <label for="password-input">Password</label>
-              <input type="password" class="input-Area" id="password-input" name="password" placeholder="password" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />
+                <label for="password-input">
+                  Password
+                </label>
+                <input type="password" class="input-Area" id="password-input"
+                        name="password" placeholder="password"
+                        data-placement="left" data-trigger="manual"
+                        autocapitalize="off" autocorrect="off" autocomplete="off" />
               </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" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />
+                <label for="email-input">
+                  Email
+                </label>
+                <input type="email" class="input-Area"
+                       id="email-input" name="email"
+                       placeholder="me@example.com" data-placement="left"
+                       data-trigger="manual" autocapitalize="off"
+                       autocorrect="off" autocomplete="off" />
               </div>
 
               <div class="col col-50" style="padding-left:0;">
-                <label for="g-recaptcha">Confirm you are human</label>
-                <div id="captcha-input" class="g-recaptcha" data-sitekey="<%= $config['recaptcha_public_key'] %>" data-theme="dark" data-placement="left" data-trigger="manual"></div>
+                <label>
+                  Confirm you are human
+                </label>
+                <div id="captcha-input" class="g-recaptcha"
+                     data-sitekey="<%= $config['recaptcha_public_key'] %>"
+                     data-theme="dark" data-placement="left" data-trigger="manual">
+                </div>
               </div>
 
               <div class="col col-50">
@@ -256,7 +273,7 @@
       <p>Follow your favorite sites and see when they get updated. Easily form communities of sites using site tags. Web Rings, reloaded.</p>
     </div>
   </div>
-  
+
   <div class="row content right">
     <div class="col col-50"><div class="screenshot"></div></div>
     <div class="col col-50 text">
@@ -278,12 +295,20 @@
 -->
 
   <section class="section features">
-    <h2 class="delta">Our mission: To make the web fun again by giving you back control of how you express yourself online.</h2>
-    <h2 class="delta"><img style="margin-top: .5em;" src="/img/front-editor-screenshot.png"></h2>
+    <h2 class="delta">
+      Our mission: To make the web fun again by giving you back control of how you express yourself online.
+    </h2>
+
+      <img style="margin-top: .5em; max-width: 80%;" src="/img/front-editor-screenshot.png" alt="screen shot of neocities code editor" />
+
     <div class="row">
       <div class="col col-50">
-        <h3><i class="fa fa-eye-slash"></i>Zero advertising</h3>
-        <p>Neocities will never sell your personal data or embed advertising on your site. Instead, we are funded directly by our community through <a href="/plan">supporter plans</a> and <a href="/donate">donations</a>. This allows us to base all our decisions on making the best possible web building experience for you, rather than on appeasing ad companies.</p>
+        <h3>
+          <i class="fa fa-eye-slash"></i>Zero advertising
+        </h3>
+        <p>
+          Neocities will never sell your personal data or embed advertising on your site. Instead, we are funded directly by our community through <a href="/plan">supporter plans</a> and <a href="/donate">donations</a>. This allows us to base all our decisions on making the best possible web building experience for you, rather than on appeasing ad companies.
+        </p>
       </div>
 
 
@@ -306,7 +331,7 @@
 
 
     </div>
-    
+
     <div class="col col-100">
       <div class="row press">
         <a href="http://www.wired.com/2013/07/neocities/" class="logo wired"></a>
@@ -319,12 +344,12 @@
           <h3>
             "Designed as a 21st century reincarnation of GeoCities, Neocities lets you make your own site for free. <strong>And it just might spark a renaissance of creativity online.</strong>"
             <br />
-            —Matthew Guay, <a href="http://web.appstorm.net/reviews/web-dev/neocities-the-free-place-to-code-your-own-site-from-scratch" target="_blank">AppStorm</a>. <a href="/press">View All Press »</a>
+            <cite>— Matthew Guay, <a href="http://web.appstorm.net/reviews/web-dev/neocities-the-free-place-to-code-your-own-site-from-scratch" target="_blank">AppStorm</a>. <a href="/press">View All Press »</a></cite>
           </h3>
       </div>
     </div>
   </section>
-  
+
   <% # erb :'plan/_pricing' %>
 
   <section class="section bottom-signup">
@@ -332,44 +357,44 @@
   </section>
 </main>
 
-<footer class="footer-Base">
-  <section class="footer-Intro">
-  <div class="footer-Content">
-  <div class="row">
-    <div class="col col-33">
-      <div class="f-Col f-Col-1 clearfix">
-        <span class="footer-icon"></span>
-        <h2 class="delta">Support Us</h2>
-        <p class="tiny">
-          Neocities is funded by <a href="/plan">supporters</a> and <a href="/donate">donations</a>. If you’d like to contribute, you can help us pay our server costs using credit card, Bitcoin, or PayPal.
-        </p>
-        <a href="/donate" title="Donate to Neocities" class="action-Link">Donate Today</a>
-      </div>
-    </div>
-    <div class="col col-33">
-      <div class="f-Col f-Col-2 clearfix">
-        <span class="footer-icon"></span>
-        <h2 class="delta">About Us</h2>
-        <p class="tiny">
-          Neocities is here to bring back the creativity and
-          free expression to the world wide web that made it great.
-        </p>
-        <a href="/about" title="More about Neocities" class="action-Link">More About Us</a>
-      </div>
-    </div>
-    <div class="col col-33">
-      <div class="f-Col f-Col-3 clearfix">
-        <span class="footer-icon"></span>
-        <h2 class="delta">Latest News</h2>
-        <p class="tiny">
-          The latest news on Neocities can be found on our blog.
-        </p>
-        <a href="/blog" title="Read about Neocities news and updates" class="action-Link">Read More</a>
+<footer class="footer-Base" role="contentinfo">
+  <div class="footer-Intro">
+    <div class="footer-Content">
+      <div class="row">
+        <div class="col col-33">
+          <div class="f-Col f-Col-1 clearfix">
+            <span class="footer-icon"></span>
+            <h2 class="delta">Support Us</h2>
+            <p class="tiny">
+              Neocities is funded by <a href="/plan">supporters</a> and <a href="/donate">donations</a>. If you’d like to contribute, you can help us pay our server costs using credit card, Bitcoin, or PayPal.
+            </p>
+            <a href="/donate" title="Donate to Neocities" class="action-Link">Donate Today</a>
+          </div>
+        </div>
+        <div class="col col-33">
+          <div class="f-Col f-Col-2 clearfix">
+            <span class="footer-icon"></span>
+            <h2 class="delta">About Us</h2>
+            <p class="tiny">
+              Neocities is here to bring back the creativity and
+              free expression to the world wide web that made it great.
+            </p>
+            <a href="/about" title="More about Neocities" class="action-Link">More About Us</a>
+          </div>
+        </div>
+        <div class="col col-33">
+          <div class="f-Col f-Col-3 clearfix">
+            <span class="footer-icon"></span>
+            <h2 class="delta">Latest News</h2>
+            <p class="tiny">
+              The latest news on Neocities can be found on our blog.
+            </p>
+            <a href="/blog" title="Read about Neocities news and updates" class="action-Link">Read More</a>
+          </div>
+        </div>
       </div>
     </div>
   </div>
-  </div>
-</section>
 
   <%== erb :'_footer', layout: false%>
 </footer>
diff --git a/views/not_found.erb b/views/not_found.erb
index 433a2ad5..c4893b5f 100644
--- a/views/not_found.erb
+++ b/views/not_found.erb
@@ -1,24 +1,25 @@
 <div class="header-Outro">
   <div class="row content single-Col">
-  <h1>Page Not Found (404)</h1>
-  <h3 class="subtitle"></h3>
+    <h1>Page Not Found (404)</h1>
   </div>
 </div>
 
 <div class="content single-Col misc-page">
-  <article>
-    <div class="txt-Center"><img src="/img/cat-larger.png"></div>
+  <article role="article">
+    <div class="txt-Center">
+      <img src="/img/cat-larger.png" alt="the neocities cat" />
+    </div>
     <p>
       Penelope the Neocities Cat tried very hard to locate the page you were looking for, but she couldn't find it. She's an awesome sysadmin. If she couldn't find it, it's probably not there.
     </p>
     <p>
       If you believe this to be in error, please <a href="/contact" title="contact us">contact us</a> and report the problem. Thank you!
     </p>
-    
+
     <% if request.referer %>
       <div class="txt-Center">
         <a class="btn-Action" href="<%= request.referer %>">Go Back</a>
       </div>
     <% end %>
   </article>
-</div>
\ No newline at end of file
+</div>
diff --git a/views/password_reset.erb b/views/password_reset.erb
index b5fc50eb..3120ec4d 100644
--- a/views/password_reset.erb
+++ b/views/password_reset.erb
@@ -1,6 +1,6 @@
 <div class="header-Outro">
   <div class="row content single-Col">
-  <h1>Reset Password</h1>
+    <h1>Reset Password</h1>
   </div>
 </div>
 
@@ -10,11 +10,11 @@
     Note: If you provided your e-mail, you can reset your password. If you didn't, you will not be able to reset your password, and instead should create a new account. We cannot change a password without an entered email for security reasons.
   </p>
 
-  <form method="POST" action="/send_password_reset" class="content">
+  <form method="post" action="/send_password_reset" class="content">
     <fieldset>
       <input name="csrf_token" type="hidden" value="<%= csrf_token %>">
       <input name="email" type="email" class="input-Area" placeholder="Your email" style="width: 300px">
     </fieldset>
     <input class="btn-Action" type="submit" value="Send Reset Token">
   </form>
-</div>
\ No newline at end of file
+</div>