#334 fixed most of the layout. shadow was added. need some feedback

_guides/creating-good-project-images.md

@@ -9,7 +9,7 @@ display: true
 
 
 ## General Design Tips
-
+<!-- was bold \/-->
 The project image is 744 x 300 pixels, but displays at half that size, so it needs to be a clear, simple identifier of your automation.
 
 - Try to convey a sense of your project at a glance. 
@@ -18,21 +18,22 @@ The project image is 744 x 300 pixels, but displays at half that size, so it nee
 
 
 ## Use Clear Images
-
-**Bold, simple images usually work best**
+<!-- was bold \/-->
+Bold, simple images usually work best
 - The project image isn’t very large, and may be seen on small screens.
 - Consider using icons and “flat” art.
 - If using photo, keep it simple. Consider cropping complex images down to a clear compelling detail.
 
 
 ## Image Rights and Credits
-**Only use art and images that you have the rights to re-use**
+<!-- was bold \/-->
+Only use art and images that you have the rights to re-use
 - Do not use an image that you found in search without identifying the source and use rights. 
 - The safest images to use are public domain or CC0. You can do whatever you want with these, without attribution. 
 - You can use images licensed to require attribution (eg: CC-BY) as long as you [give credit to the artist](https://creativecommons.org/use-remix/attribution/){:target="_blank"}  in your project
 - Don’t use any company or software logos without checking their usage guidelines. (eg:  [GitHub's logo guidelines](https://github.com/logos){:target="_blank"} ask that you not use their logo in your project images)
-
-**How to credit images:**
+<!-- was bold \/-->
+How to credit images:
  - It's best practice to credit image sources when possible, even if not required.
  - Your project ReadMe file is the best place to credit your sources.
  - The image credit should contain the following information:
@@ -45,14 +46,14 @@ The project image is 744 x 300 pixels, but displays at half that size, so it nee
 ## Resources
 
 
-### Tools
+### Color Scheme Ideas
 
-#### Image Editors
+<!-- #### Image Editors
  - [iPiccy](https://ipiccy.com){:target="_blank"}
  - [Canva](https://www.canva.com){:target="_blank"}
- - [GIMP](https://www.gimp.org){:target="_blank"}
+ - [GIMP](https://www.gimp.org){:target="_blank"} -->
 
-#### Color Schemes
+<!-- #### Color Schemes -->
  - [Colormind](http://colormind.io){:target="_blank"}
  - [Coolors](https://coolors.co){:target="_blank"}
  - [Adobe Color](https://color.adobe.com/create/color-wheel){:target="_blank"}
@@ -76,4 +77,4 @@ The project image is 744 x 300 pixels, but displays at half that size, so it nee
  - [CC: Best practices for attribution](https://wiki.creativecommons.org/wiki/best_practices_for_attribution){:target="_blank"}
  - [Wikimedia Commons: Simple media reuse guide](https://commons.wikimedia.org/wiki/Commons:Simple_media_reuse_guide){:target="_blank"}
 
-
+To propose/submit changes to this guide, please [edit](#){:target="_blank"} the markdown file for this guide.

_layouts/guides.html

@@ -1,30 +1,31 @@
 ---
 layout: default
 ---
-<!-- This will be our layout for each guide in our collection -->
+<!-- This will be our layout for each guide in our collection  -->
 
-<div class="guide guide_layout">
+<div class="guide guide_layout body-shadow">
     <section class="hero-container hero-container--guides">
         <h1 class="title1 col1">
           {{page.title}}
         </h1>
         <img class="col3" src="/assets/images/guides/OS.svg">
-    </section>
+    </section> 
     <section class="body-container body-container--guides">
         <div class="content-container content-container--guide">
           <h5 class="title5">In This Guide</h5>
-          <p class="p1">{{page.description}}</p>
+          <p class="p1"> Learn best practice for creating a good project image </p>
           {{content}}
         </div>
 
         <div class="sticky-nav-container--guides">
 
-          <nav>
+          <nav class='nav-border'>
             <h2>Contents</h2>
-            {% include toc.html html=content h_min=2%}
+              {% include toc.html submenu_class='nav-border-links' html=content h_min=2 h_max=3 %}
           </nav>
+
         </div>
 
     </section>
-
-</div>
+</div>
+<!-- <div class='body-shadow'></div> -->