tutorial integration - adding references into other parts of site, updates to page 9 and 10, work on tutorial landing page

sass/_project-sass/_project-Header.scss

@@ -14,7 +14,7 @@
 }
 
 .row.header-Content.content {
-  padding-bottom:27px;
+    padding-bottom: 31px;
 }
 
 .header-Content.content{
@@ -28,7 +28,7 @@
   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){
     @include vendor(background-size, cover);
     min-height:2px;
@@ -64,7 +64,7 @@
       color: #B8D375;
       font-size: .9em;
       margin-bottom: 1.8em;
-      
+
       a {
         color: #B8D375;
         border-bottom: 1px solid rgba(184, 211, 117, 0.5);
@@ -90,7 +90,7 @@
       @include vendor(transform, scaleX(-1));
       width: 100px;
       margin-right: 25px;
-      
+
       &.float-Right {
         margin-left: 10px;
       }
@@ -107,19 +107,19 @@
     margin-bottom:20px;
     padding:4px 20px 4px 14px;
   }
-  
+
   li{
     padding-left:$spacing*9;
     padding-right:$spacing*3;
     margin-bottom:20px;
     margin-left: 8px;
   }
-  
+
   h3 {
     margin-bottom: 0px;
     font-size: 1.7em;
   }
-  
+
   p {
     color:#B2BCC1;
     line-height: 170%;
@@ -139,14 +139,14 @@
 .intro-Tools{position:relative}
 .intro-Question{
   position:relative;
-  
+
   .intro-Icon{
     background-position:0 -40px;
-  }  
+  }
 }
 .intro-Social {
   position:relative;
-  
+
   .intro-Icon {
     background-position: 0 -80px;
   }
@@ -166,7 +166,7 @@
   position:absolute;
   top: -40px;
   margin-bottom: 15px;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px){
     height:auto;
     margin:0;
@@ -175,35 +175,35 @@
     position:static;
     width:100%;
   }
-  
+
   h2{
     margin-bottom:0;
     text-shadow:0 1px 1px rgba(0,0,0,.5);
     font-size: 1.8em;
   }
-  
+
   hr{
     border-bottom:1px solid #4a6677;
     border-top:1px solid #1d282d;
     margin: 4px 0 21px;
   }
-  
+
   fieldset{
     padding: 25px 33px;
-    background:url(/img/sign-up-bg.png) repeat-x center top; 
+    background:url(/img/sign-up-bg.png) repeat-x center top;
     border-radius: 4px 4px 0 0;
   }
-  
+
   label{
     color:#81b8c6;
   }
-  
+
   label#domain-name {
     display: inline;
     vertical-align: 8px;
     color: #C2CFD4;
   }
-  
+
   .input-Area{
     background:#29383f;
     border:0 solid black;
@@ -213,7 +213,7 @@
     margin-right:$spacing;
     padding: 10px 10px 7px 10px;
     width:100%;
-    
+
 //    &:focus{color:#eee}
   }
   .input-Area#create-Input {
@@ -223,7 +223,7 @@
     margin-left: 0;
     position: static;
   }
-  .tooltip {    
+  .tooltip {
     &.left .tooltip-arrow {
       border-left-color: #971D31;
     }
@@ -249,41 +249,41 @@
 .header-Nav{
 	background:#5e95a1;
 	border-bottom:1px solid #92B4BD;
-	
+
 	@include vendor(transition, all 0.35s);
-	
+
 	@media (max-device-width:480px), screen and (max-width:800px){
 	  position:fixed;
 	  top:-900px!important;
 	}
-	
+
 	&.show-Nav{
   	top:0!important;
     padding-bottom: 2px;
 	}
-	
+
 	a, a:visited{
-	  color:#fff; 
+	  color:#fff;
-	  padding:$spacing*2 $spacing*3; 
+	  padding:$spacing*2 $spacing*3;
 	  text-decoration:none;
-	  
+
 	  @media (max-device-width:480px), screen and (max-width:800px){
 	    display:block;
 	  }
-    
+
     >.fa-heart {
       vertical-align: .5em;
       margin-left: .3em;
       font-size: 9px;
-      position: relative;    
+      position: relative;
       color: rgba(255, 255, 255, 0.4);
       display: inline-block;
-    
+
       >.fa-heart {
         display:none;
       }
     }
-	  
+
 		&:hover{
       background:#528995; text-decoration:underline;
       >.fa-heart {
@@ -300,7 +300,7 @@
     }
 		&.selected, &:active{background:#528995; text-decoration:underline}
 	}
-  
+
   a.small-Nav{
     background: #65a0ad;
     display:none;
@@ -311,28 +311,28 @@
     height:36px;
     z-index:9999;
     padding: 5px 12px 0px 12px;
-  
+
     @media (max-device-width:480px), screen and (max-width:800px){
       display:block;
     }
   }
-  
+
   .notification-value {
     background: $c-Brand-1;
     padding: 2px 5px;
     @include border-radius(4px);
   }
-  
+
   .dropdown {
     height: 2.6em; //not sure why I need this :/
-    
+
     a {
       width:100%;
     }
     .info {
       float:right;
       margin-left: 10px;
-      
+
       .fa-caret-down {
         margin-left:10px;
       }
@@ -345,10 +345,10 @@
     min-width: 13em;
     @include border-radius(0px 0px 6px 6px);
     @include box-shadow(0 2px 7px rgba(0,0,0,0.2));
-    
+
     li {
       width:100%;
-      
+
       a {
         float:left;
       }
@@ -367,21 +367,21 @@
   }
   .dropdown-submenu {
     float: left;
-    
+
     &:hover > a, &:focus > a {
       background:#3C6670;
     }
-    
+
     .dropdown-menu {
       width: 100%;
       margin-left: -1px;
       margin-top: -1px;
-      
+
       li {
         overflow: hidden;
       }
     }
-    
+
     >a:after {
       border-left-color: #fff;
     }
@@ -390,27 +390,27 @@
 .constant-Nav{
   float:left;
   position:relative;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px){
     float:none;
-    
+
     li{float:none;}
   }
 }
 
 .status-Nav{
   float:right;
-  
+
   @media (max-device-width:480px), screen and (max-width:800px){
     float:none;
   }
-  
+
   li{
     float:left;
     @media (max-device-width:480px), screen and (max-width:800px){
       float:none
     }
-  } 
+  }
 }
 
 // hp CSS
@@ -429,12 +429,12 @@
   left:-90px;
   position:fixed;
   @include vendor(transition, all 0.35s);
-  
+
-  
+
   &.in-View{
     left:0!important;
     z-index:99;
-    
+
     @media (max-device-width:480px), screen and (max-width:800px){
       left:-90px!important;
     }
@@ -456,11 +456,11 @@
   @media (max-device-width:480px), screen and (max-width:800px){
     margin-left:0;
   }
-  
+
   &.in-View{
     margin-left:0;
     padding-left:70px;
-    
+
     @media (max-device-width:480px), screen and (max-width:800px){
       padding-left:0
     }
@@ -504,7 +504,7 @@
   padding-left:74px;
   @media (max-device-width:480px), screen and (max-width:800px){
     width:100%;
-  }  
+  }
 }
 
 .interior .constant-Nav, .hp.education .constant-Nav{margin:0}

sass/_project-sass/_project-Main.scss

@@ -2149,6 +2149,25 @@ pre, code {
   background: #1d1f21;
   color: #FFFFFF;
 }
+.welcoming-cat {
+  width: 200px;
+  float: right;
+  margin-top: -40px;
+}
+.section.tutorial-welcome {
+  padding: 80px 18%;
+
+  .option {
+    margin: 3.5em 0;
+  }
+  h3 {
+    margin-top: 0em;
+    font-size: 1.3em;
+  }
+  p {
+    font-size: 1.1em;
+  }
+}
 
 .tagcloud .tag10 { font-size: 0.6em; font-weight: 90; }
 .tagcloud .tag9 { font-size: 0.7em; font-weight: 100; }

views/dashboard.erb

@@ -54,7 +54,7 @@
 <div class="welcome">
   <!-- <div class="close-button"></div> -->
   <h4>Hello! Welcome to your new site.</h4>
-  To get started, click on the <strong>index.html</strong> file below to edit your home page. Once you make changes your website will begin appearing in our <a href="/browse">website gallery</a>. You can add more files (such as images) by dragging them from your computer into the box below. Need help building web sites? Check out these <a href="/tutorials">tutorials</a>!
+  To get started, click on the <strong>index.html</strong> file below to edit your home page. Once you make changes your website will begin appearing in our <a href="/browse">website gallery</a>. You can add more files (such as images) by dragging them from your computer into the box below. Need help building web sites? Try our <a href="/tutorial/html/">HTML tutorial</a>!
 </div>
 <% end %>
 

views/index.erb

@@ -59,22 +59,23 @@
   <div class="col intro">
     <h2 class="section-header">Create your own free website.<br>Unlimited creativity, zero ads.</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 web hosting and tools that allow anyone to make a website. 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 offer free web hosting and tools that allow anyone to make a website. Join us!
     </p>
     <ul class="intro-List">
+      <li class="intro-Tools">
+        <span class="intro-Icon"></span>
+        <h3 class="delta">Learn how to make a website from scratch</h3>
+        <p class="base">
+          Never coded before? Our fun interactive tutorial will show you the ropes! Join Penelope the cat in crafting your own personal spot on the web. We make it easy with our built-in HTML editor and simple file uploading.
+      </li>
+
       <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.
+          Follow your favorite Neocities sites to keep up with all their latest updates. Discover new websites related to your interests using tags. Post comments and share your faves.
         </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>
 
@@ -101,7 +102,7 @@
           <h2 class="gamma">Sign up for free</h2>
           <hr />
           <div class="siteCreateInputs">
-            <label for="create-Input">User Name</label>
+            <label for="create-Input">Username</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" />
@@ -241,7 +242,7 @@
   <div class="row">
     <div class="col col-50">
       <h3><i class="fa fa-wrench"></i>Developer tools</h3>
-      <p>Our fast static hosting comes with a great in-browser HTML editor, easy file uploading, RSS feeds for every site, <a href="/api">powerful APIs</a> for building developer applications, and much more! Upgrade to a <a href="/plan">supporter plan</a> to get WebDAV publishing and support for custom domains.</p>
+      <p>Our fast static hosting comes with a great in-browser HTML editor, easy file uploading, RSS feeds for every site, <a href="/api">powerful APIs</a> for building developer applications, and much more! Upgrade to a <a href="/plan">supporter plan</a> to get support for custom domains and WebDAV publishing.</p>
     </div>
 
     <div class="col col-50">

views/tutorial/html/10.erb

@@ -2,14 +2,14 @@
   <div class="dialogue" style="top: 35px">
     And that's it for Chapter One! Congrats on your first ever version of <a href="<%= current_site.uri %>"><%= current_site.username %>.neocities.org</a>!
   </div>
-  <div class="dialogue" style="top: 60px;left:580px; width:180px;">
+  <div class="dialogue" style="top: 45px;left:575px; width:180px;">
-    But you're not done yet! There's much in store for you: Adding colors, fonts, backgrounds, and more, all in chapter 2!
+    This is just the beginning. Later you can learn about adding colors, fonts, backgrounds, page layouts, and more...
   </div>
 </div>
 
 <div class="welcome">
   <h4>Thank you!</h4>
-  <p>Thanks for trying out Chapter One of the Neocities tutorial! This is a work in progress—<a href="/contact">let us know</a> if you have any questions or suggestions. We'd also love to hear your ideas for Chapter Two: Basic CSS.</p>
+  <p>Thanks for trying out the first edition of the Neocities tutorial! This is a work in progress—<a href="/contact">let us know</a> if you have any questions or suggestions.</p>
   <p>To continue working on your site, head to the <a href="/dashboard">dashboard</a>!</p>
-  <p>You can also check out all the <a href="/browse">cool sites on Neocities</a>  and follow them via your <a href="/">news feed</a>.</p>
+  <p>You can also check out all the <a href="/browse">cool sites on Neocities</a> and follow them with your <a href="/">news feed</a>.</p>
 </div>

views/tutorial/index.erb

@@ -1,11 +1,24 @@
-<section class="section">  
+<section class="section tutorial-welcome">
-<h2>Welcome to Neocities!</h2>
+<h2>Let's Get Started!</h2>
 
-<h3><a href="/tutorial/html/">Start the Tutorial!</a></h3>
+<a href="/tutorial/html/"><img src="/img/welcomingcat.png" class="welcoming-cat" style="margin-top: -20px;"></a>
-<p>Learn how to build websites from scratch
-with interactive lessons from Neocities' head cat, Penelope.
-The first chapter on basic HTML is out now, and more chapters
-are in the works!</p>
 
-<h3><a href="/dashboard/">Go to the dashboard</a></h3>
+<div class="option">
+<h3><i class="fa fa-star" aria-hidden="true"></i> <strong>New to coding?</strong></h3>
+<h3>Learn how to build websites from scratch
+with interactive lessons from Neocities' head cat, Penelope!</h3>
+<p><a href="/tutorial/html/">Start the tutorial >></a></p>
+</div>
+
+<div class="option">
+<h3><i class="fa fa-wrench" aria-hidden="true"></i> <strong>Already know HTML?</strong></h3>
+<h3>Get started right away on building your website!</h3>
+<p><a href="/dashboard">Go to the dashboard >></a></p>
+</div>
+
+<div class="option">
+<h3><i class="fa fa-globe" aria-hidden="true"></i> <strong>Want to start by browsing?</strong></h3>
+<h3>Discover new sites related to your interests, and keep track of your favorites.</h3>
+<p><a href="/">Check out your news feed >></a></h3>
+</div>
 </section>

views/tutorial/layout.erb

@@ -17,6 +17,7 @@
     <div class="col col-40 interact">
       <% if request.path =~ /\/html\/9/ %>
       <div style="float: left">
+        <p>Saving your tutorial work will replace anything currently in your <a href="<%= current_site.uri %>/index.html">index.html</a>. If you've modified it before, make sure there isn't anything valuable there before you proceed!</p>
         <a href="/tutorial/html/10" class="btn cancel float-Left">Don't Save</a>
         <a href="#" id="saveToSite" class="btn btn-Action float-Left" style="margin-right: 7px">Save to <%= current_site.username %>.neocities.org</a>
       </div>

views/tutorials.erb

@@ -5,14 +5,12 @@
 </div>
 
 <div class="content single-Col misc-page">
+  <h2>Available now: <a href="/tutorial/html/">The Neocities HTML course</a>! <% if !signed_in? %><small style="display:inline">(requires login)</small><% end %></h2>
+  <a href="/tutorial/html/"><img src="/img/welcomingcat.png" class="welcoming-cat"></a>
+  <p> Never coded before? Our fun interactive tutorial will show you the ropes! <a href="/tutorial/html/">Join Penelope the cat</a> in crafting your own personal spot on the web.</p>
   <p>Learning how to make websites allows you to create any content you want, arrange that content in any way you like, and share that content with the world. It could be an information portal for teaching people <a href="http://sheldonbrown.com" target="_blank">how to repair bikes</a>, a graphics project, or a collection of your poetry.</p>
 
-  <p class="delta">
+  <h2>Other Resources</h2>
-        Coming Soon: <a href="https://www.kickstarter.com/projects/1262953102/neocities-30-an-interactive-html-css-course-for-ev">The Neocities HTML/CSS course</a>!
-  </p>
-
-  <p>We are currently developing a website building course that will work seamlessly with Neocities. Until that project is complete, check out the following resources from other sites:</p>
-
   <h3>HTML</h3>
 
   <p>HTML is short for "HyperText Markup Language", and is the basic building block used to build all websites.</p>