codespaces updates

Author: pcai

assets/stylesheets/doc_page.scss

@@ -80,6 +80,10 @@ img {
   display: block; /* otherwise centering doesn't happen */
   max-width: 100%;
 }
+img.screenshot {
+  /*border: 1px solid #ccc;*/
+  box-shadow: #666 1px 1px 5px;
+}
 
 .model-diagram {
   margin: 0 auto;

sites/intro-to-rails/CRUD_with_scaffolding.step

@@ -25,7 +25,7 @@ steps {
     message "Point your browser to /topics"
     message "You should see the \"Topics\" page with headers for title and description, and a link to add a new topic:"
 
-    img src: "img/Seattle_topic_list_page.png", alt: "Screenshot of topic list page"
+    img src: "img/Seattle_topic_list_page.png", alt: "Screenshot of topic list page", class: "screenshot"
   }
 
   step {
@@ -35,15 +35,15 @@ steps {
   * You should see a page showing your new topic with a message that your topic was successfully created:
     MARKDOWN
 
-    img alt: "Screenshot of topic detail page with confirmation message", src: "img/Seattle_topic_created.png"
+    img alt: "Screenshot of topic detail page with confirmation message", src: "img/Seattle_topic_created.png", class: "screenshot"
   }
 
   step {
     message <<-MARKDOWN
       * Click "Back to topics"
       * You should see the topic list again, this time with your new topic listed:
 
-      ![Screenshot of topic list with new topic](img/Seattle_list_with_topic.png)
+      img alt: "Screenshot of topic list with new topic", src: "img/Seattle_list_with_topic.png", class: "screenshot"
 
       * Click on one of the topics by clicking "Show this topic" and try the "Show", "Edit", and "Destroy" links to see what they do
       * You've created a basic database driven web site, congrats!

sites/intro-to-rails/getting_started.step

@@ -1,4 +1,4 @@
-img src: "img/Start_page.png", alt: "Screenshot of a Ruby on Rails default home page"
+img src: "img/Start_page.png", alt: "Screenshot of a Ruby on Rails default home page", class: "screenshot"
 
 goals do
   goal "Create Your New Application"

sites/intro-to-rails/img/resume-codespace-a.png

@@ -79,6 +79,22 @@ The editor will automatically set up like this once it's ready.
 
 Congratulations! You're ready to start coding.
 
+Resuming
+
+After some time with no activity, your codespace will shut down. If the tab is still open, it'll look like this: 
+
+<img class="screenshot" src="./img/resume-codespace-a.png" />
+
+Click on the "Restart Codespace" button to get back into your editor.
+
+If your browser is closed and you need to get back to it, log into https://github.com and 
+click the link on the left to navigate back to your repository:
+
+<img class="screenshot" src="./img/resume-codespace-b1.png" />
+
+On your repository page, click on "Code", ensure you're on the "Codespaces" tab, then click on the codespace you previously created (it'll have a randomly generated name).
+
+<img class="screenshot" src="./img/resume-codespace-b2.png" />
 
 MARKDOWN