From 4cee7a57fb60c30b44d9686ba1505b57bfecce78 Mon Sep 17 00:00:00 2001
From: kjodle <kenneth.odle@gmail.com>
Date: Mon, 5 Jun 2017 20:01:36 -0400
Subject: [PATCH] Added spoiler trick

---
 css/spoiler.css | 10 ++++++++
 css/styles.css  | 29 ++++++++++++-----------
 index.htm       | 19 +++------------
 spoiler.htm     | 63 +++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 91 insertions(+), 30 deletions(-)
 create mode 100644 css/spoiler.css
 create mode 100644 spoiler.htm
diff --git a/css/spoiler.css b/css/spoiler.css
new file mode 100644
index 0000000..ee7a48d
--- /dev/null
+++ b/css/spoiler.css
@@ -0,0 +1,10 @@
+/* Spoiler */
+
+.spoiler {
+	color: #fff;
+	border: dotted 1px #f00;
+	}
+.spoiler:hover {
+	color: #000;
+	border: dotted 1px #bbb;
+	}
diff --git a/css/styles.css b/css/styles.css
index 3ef3a90..d3fc35f 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,5 +1,16 @@
 /* Page Styles */
 
+* {box-sizing: content-box;}
+code {
+	padding: 0;
+	margin: 0;
+}
+pre {
+	padding: 0;
+	margin: 0;
+}
+
+
 #container {
 	width: 80%;
 	max-width: 800px;
@@ -9,17 +20,7 @@
 	box-shadow: 0 0 10px #bbb;
 	}
 
-/* Tricks and Techniques */
-/*************************/
-
-/* Spoiler */
-
-.spoiler {
-	color: #fff;
-	border: dotted 1px #f00;
-	}
-.spoiler:hover {
-	color: #000;
-	border: dotted 1px #bbb;
-	}
-
+pre {
+	background: #eee;
+	padding: 1em;
+}
\ No newline at end of file
diff --git a/index.htm b/index.htm
index 2d40a16..9c38b6f 100644
--- a/index.htm
+++ b/index.htm
@@ -30,22 +30,9 @@
 <h1>CSS Tricks</h1>
 <p>These are just tricks and techniques I've used in various places. I believe that most of them are CSS3 compliant.</p>
 
-<h2>Spoiler</h2>
-<p>Here is a way to hide text from visitors until they hover over it.</p>
-<p>Here is the CSS:</p>
-<code><pre>
-.spoiler {
-	color: #fff;
-	border: dotted 1px #f00;
-	}
-.spoiler:hover {
-	color: #000;
-	border: dotted 1px #bbb;
-	}
-</pre></code>
-
-<p>And here's how it works in real life:</p>
-<p>Who did it? <span class="spoiler">The butler did it.</span></p>
+<ul>
+	<li><a href="spoiler.htm">Spoiler</a> &mdash; Hide text from visitors until they hover over it.</li>
+</ul>
 
 </div><!-- end "container" -->
 </body>
diff --git a/spoiler.htm b/spoiler.htm
new file mode 100644
index 0000000..6218f07
--- /dev/null
+++ b/spoiler.htm
@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>CSS Tricks</title>
+
+	<meta name="author" content="Kenneth John Odle">
+	<meta name="description" content="">
+
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<!--[if lt IE 9]>
+		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+	<![endif]-->
+
+	<link rel="stylesheet" media="screen" href="css/styles.css">
+	<link rel="stylesheet" media="screen" href="css/spoiler.css">
+	<link rel="stylesheet" media="screen and (max-width: 600px)" href="css/mobile.css">
+	<!--
+	<link rel="stylesheet" media="print" href="css/print.css?v=1.0">
+
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+	-->
+
+</head>
+
+<body>
+
+<div id="container">
+
+<h1>Spoiler</h1>
+<p>Here is a way to hide text from visitors until they hover over it.</p>
+
+<h2>Here is the CSS:</h2>
+
+<pre><code>
+.spoiler {
+	color: #fff;
+	border: dotted 1px #f00;
+	}
+.spoiler:hover {
+	color: #000;
+	border: dotted 1px #bbb;
+	}
+</code></pre>
+
+<h2>And here is the HTML:</h2>
+
+<pre><code>
+&lt;p&gt;Who did it? &lt;span class="spoiler"&gt;The butler did it.&lt;/span&gt;&lt;/p&gt;
+</code></pre>
+
+<h2>Example</h2>
+
+<p>And here's how it works in real life:</p>
+<p>Who did it? <span class="spoiler">The butler did it.</span></p>
+
+<p><a href="index.htm">Back to Index</a></p>
+
+</div><!-- end "container" -->
+</body>
+
+</html>
