Add content image to illustrate the modals better

index.html

@@ -41,9 +41,12 @@ <h1>CSS Modal</h1>
 		<section class="on-github">
 			<p>
 				<a href="https://github.com/drublic/css-modal"><i class="icon-github">GitHub</i></a>
-				This project is <a href="https://github.com/drublic/css-modal">on GitHub</a>. Go fork it.</p>
+				This project is <a href="https://github.com/drublic/css-modal">on GitHub</a>. Go fork it.
+			</p>
 		</section>
 
+		<img src="site/img/artwork.jpg" alt="" class="artwork">
+
 		<!-- Content Area -->
 		<div class="main" role="main">
 

site/css/main.css

@@ -598,6 +598,15 @@ code {
   color: #fff;
 }
 
+.artwork {
+  max-width: 100%;
+}
+@media screen and (max-width: 30em) {
+  .artwork {
+    display: none;
+  }
+}
+
 .main {
   max-width: 50em;
   margin: 0 auto;
@@ -629,7 +638,7 @@ code {
 
 .features {
   overflow: hidden;
-  margin: 1.5em -0.7em;
+  margin: 1em -0.7em 1.4em;
 }
 .features > div {
   -webkit-box-sizing: border-box;

site/scss/_layout.scss

@@ -138,6 +138,15 @@ code {
 	}
 }
 
+// The artwork above the content
+.artwork {
+	max-width: 100%;
+
+	@media screen and (max-width: 30em) {
+		display: none;
+	}
+}
+
 // Content
 .main {
 	max-width: 50em;
@@ -174,7 +183,7 @@ code {
 // Show features
 .features {
 	overflow: hidden;
-	margin: 1.5em -.7em;
+	margin: 1em -.7em 1.4em;
 
 	> div {
 		@include x-box-sizing;