markup & accessibility updates

quick pass through some files to get some low hanging accessibility & markup semantic updates.

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>

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>
+</div>

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>
+</div>

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>
+      <label for="your_email">Email address</label>
-      <input type="email" name="email" placeholder="Your Email" style="width: 300px" value="<%= params[:email] %>">
+      <input type="email" id="your_email" name="email" placeholder="Your Email" style="width: 300px" value="<%= params[:email] %>">
 
-      <label>Subject</label>
+      <label for="email_subject">Subject</label>
-      <input type="text" name="subject" placeholder="Subject" style="width: 400px" value="<%= params[:subject] %>">
+      <input type="text" id="email_subject" name="subject" placeholder="Subject" style="width: 400px" value="<%= params[:subject] %>">
 
-      <label>Comments</label>
+      <label for="your_comments">Comments</label>
-      <textarea name="body" style="width: 600px" rows="10"><%= params[:body] %></textarea>
+      <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">

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 cancel" data-dismiss="modal" aria-hidden="true" type="button">Cancel</button>
-          <button class="btn btn-Action btn-danger" onclick="fileDelete()"><i class="fa fa-trash" title="Delete"></i>Delete</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>

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>
+  <article role="article">
-    <section>
         <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 -->
+</div> <!-- end .content -->

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>
+</div>

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>
+</div>

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>
+      <h2 class="section-header">Create your own free web site, and discover new ones.</h2>
-    <p class="intro-text">
+      <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!
+       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>
+      </p>
-    <ul class="intro-List">
+      <ul class="intro-List">
-      <li class="intro-Social">
+        <li class="intro-Social">
-        <span class="intro-Icon"></span>
+          <span class="intro-Icon"></span>
-        <h2 class="delta">Share your web creation with the world</h2>
+          <h3 class="delta">Share your web creation with the world</h3>
-        <p class="base">
+          <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.
+            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>
+          </p>
-      </li>
+        </li>
-      <li class="intro-Tools">
+        <li class="intro-Tools">
-        <span class="intro-Icon"></span>
+          <span class="intro-Icon"></span>
-        <h2 class="delta">Powerful new features to help you build</h2>
+          <h3 class="delta">Powerful new features to help you build</h3>
-        <p class="base">
+          <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.
+            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>
+        </li>
-    </ul>
+      </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">
+          <div class="txt-Center">
-              <a href="/dashboard" class="btn-Action">Get Started</a>
+            <a href="/dashboard" class="btn-Action">Get Started</a>
-            </div>
+          </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>
+                <label for="password-input">
-              <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" />
+                  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>
+                <label for="email-input">
-              <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" />
+                  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>
+                <label>
-                <div id="captcha-input" class="g-recaptcha" data-sitekey="<%= $config['recaptcha_public_key'] %>" data-theme="dark" data-placement="left" data-trigger="manual"></div>
+                  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">
-    <h2 class="delta"><img style="margin-top: .5em;" src="/img/front-editor-screenshot.png"></h2>
+      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>
+        <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>
+          <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">
+<footer class="footer-Base" role="contentinfo">
-  <section class="footer-Intro">
+  <div class="footer-Intro">
-  <div class="footer-Content">
+    <div class="footer-Content">
-  <div class="row">
+      <div class="row">
-    <div class="col col-33">
+        <div class="col col-33">
-      <div class="f-Col f-Col-1 clearfix">
+          <div class="f-Col f-Col-1 clearfix">
-        <span class="footer-icon"></span>
+            <span class="footer-icon"></span>
-        <h2 class="delta">Support Us</h2>
+            <h2 class="delta">Support Us</h2>
-        <p class="tiny">
+            <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.
+              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>
+            </p>
-        <a href="/donate" title="Donate to Neocities" class="action-Link">Donate Today</a>
+            <a href="/donate" title="Donate to Neocities" class="action-Link">Donate Today</a>
-      </div>
+          </div>
-    </div>
+        </div>
-    <div class="col col-33">
+        <div class="col col-33">
-      <div class="f-Col f-Col-2 clearfix">
+          <div class="f-Col f-Col-2 clearfix">
-        <span class="footer-icon"></span>
+            <span class="footer-icon"></span>
-        <h2 class="delta">About Us</h2>
+            <h2 class="delta">About Us</h2>
-        <p class="tiny">
+            <p class="tiny">
-          Neocities is here to bring back the creativity and
+              Neocities is here to bring back the creativity and
-          free expression to the world wide web that made it great.
+              free expression to the world wide web that made it great.
-        </p>
+            </p>
-        <a href="/about" title="More about Neocities" class="action-Link">More About Us</a>
+            <a href="/about" title="More about Neocities" class="action-Link">More About Us</a>
-      </div>
+          </div>
-    </div>
+        </div>
-    <div class="col col-33">
+        <div class="col col-33">
-      <div class="f-Col f-Col-3 clearfix">
+          <div class="f-Col f-Col-3 clearfix">
-        <span class="footer-icon"></span>
+            <span class="footer-icon"></span>
-        <h2 class="delta">Latest News</h2>
+            <h2 class="delta">Latest News</h2>
-        <p class="tiny">
+            <p class="tiny">
-          The latest news on Neocities can be found on our blog.
+              The latest news on Neocities can be found on our blog.
-        </p>
+            </p>
-        <a href="/blog" title="Read about Neocities news and updates" class="action-Link">Read More</a>
+            <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>

views/not_found.erb

@@ -1,24 +1,25 @@
 <div class="header-Outro">
   <div class="row content single-Col">
-  <h1>Page Not Found (404)</h1>
+    <h1>Page Not Found (404)</h1>
-  <h3 class="subtitle"></h3>
   </div>
 </div>
 
 <div class="content single-Col misc-page">
-  <article>
+  <article role="article">
-    <div class="txt-Center"><img src="/img/cat-larger.png"></div>
+    <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>
+</div>

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>
+</div>