From 9d1826ab297c5eab3189d2eccf5d5f2180b94692 Mon Sep 17 00:00:00 2001
From: Mike Kenworthy <MKenworthy@covermymeds.com>
Date: Thu, 22 Jan 2015 11:45:47 -0500
Subject: [PATCH 1/2] Added css and haml

---
 top-nav-drill/index.haml | 43 +++++++++++++++++++++
 top-nav-drill/index.html |  7 +++-
 top-nav-drill/main.css   | 81 ++++++++++++++++++++++++++++++++++++++++
 top-nav-drill/test.html  | 62 ++++++++++++++++++++++++++++++
 4 files changed, 192 insertions(+), 1 deletion(-)
 create mode 100644 top-nav-drill/index.haml
 create mode 100644 top-nav-drill/test.html

diff --git a/top-nav-drill/index.haml b/top-nav-drill/index.haml
new file mode 100644
index 0000000..3a5824a
--- /dev/null
+++ b/top-nav-drill/index.haml
@@ -0,0 +1,43 @@
+!!! 5
+
+%html{:lang => "en"}
+	%head
+		%meta{:charset => "UTF-8"}
+		%title The Awesome Company
+		%link{:rel => "stylesheet", :href => "bower_components/normalize-css/normalize.css"}
+		%link{:rel => "stylesheet", :href => "main.css"}
+	%body
+		.container
+			%header
+				%span
+					%a{:href => "#"} Awesome Company
+				%nav
+					%ul
+						%li 
+							%a{:href => "#"} Home
+							%ul
+								%li
+									%a{:href => "#"} Test
+								%li
+									%a{:href => "#"} What a joke
+						%li
+							%a{:href => "#"} About
+						%li
+							%a{:href => "#"} Services
+						%li
+							%a{:href => "#"} Contact
+			%section
+				%h1 A Page Title
+				%section
+					%h2 A Paragraph
+					%p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit, tellus ornare mollis rhoncus, risus dui tincidunt nisl, nec vulputate sapien neque at tellus. Aenean in ornare nisl, sed porta dui.
+					%p Nunc sit amet arcu id ligula commodo consequat vel a lorem. Proin auctor, purus in dictum efficitur, mauris purus dictum augue, vitae laoreet ante nunc in sapien. Maecenas yconsectetur egestas euismod.
+				%section
+					%h2 A Paragraph
+					%p Donec faucibus sodales lectus, quis dictum ligula aliquet sit amet. Nam sodales nibh quis quam dictum sollicitudin. Nullam ut est euismod, hendrerit tellus et, euismod turpis.
+					%p Nunc sit amet arcu id ligula commodo consequat vel a lorem. Proin auctor, purus in dictum efficitur, mauris purus dictum augue, vitae laoreet ante nunc in sapien. Maecenas consectetur egestas euismod.
+				%section
+					%h2 A Paragraph
+					%p Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas non mauris ac erat consequat rhoncus. Mauris nec sapien luctus, rutrum leo sit amet, pretium elit.
+			%footer
+				%p Copyright &copy; 2013 Awesome Company LLC.
\ No newline at end of file
diff --git a/top-nav-drill/index.html b/top-nav-drill/index.html
index fbc0cdb..3e2b0e9 100644
--- a/top-nav-drill/index.html
+++ b/top-nav-drill/index.html
@@ -17,7 +17,12 @@
 
     <nav>
       <ul>
-        <li><a href="#">Home</a></li>
+        <li><a href="#">Home</a>
+          <ul>
+            <li><a href='#'>Test</a></li>
+            <li><a href='#'>What a johe</a></li>
+          </ul>
+        </li>
         <li><a href="#">About</a></li>
         <li><a href="#">Services</a></li>
         <li><a href="#">Contact</a></li>
diff --git a/top-nav-drill/main.css b/top-nav-drill/main.css
index 9d37c16..fb72df2 100644
--- a/top-nav-drill/main.css
+++ b/top-nav-drill/main.css
@@ -3,3 +3,84 @@
 }
 
 /*Put your code here*/
+header, header a {
+	background-color: black;
+	display: block;
+	color: #FFFFFF;
+	padding: 4px;
+}
+	header span a {
+		text-decoration: none;
+		font-size: 34px;
+		font-style: bold;
+		padding-left: 25px;
+		padding-right: 25px;	
+		font-weight: 500;
+	}
+
+nav {
+	position: fixed;
+	right: 0px;
+	top: 0px;
+	padding: 0px 25px;
+}
+	nav a {
+		font-size: 20px;
+	    font-weight: 100;
+	}
+	nav ul {
+		list-style-type:none;
+	}
+		nav ul li {
+		float:left;
+		padding: 0px 1px;
+		margin: 0px 2px;
+		}
+		nav ul li:hover > ul {
+			display: block;
+			position: absolute;
+		}
+		nav ul ul { 
+			display:none; 
+		}
+
+nav ul ul {
+	background: #FFFFFF; border-radius: 0px; padding: 0;
+	position: absolute; top: 100%;
+}
+	nav ul ul li {
+		float: none; 
+		border-top: 1px solid #6b727c;
+		border-bottom: 1px solid #575f6a;
+		position: relative;
+	}
+		nav ul ul li a {
+			padding: 0px 10px;
+			color: #fff;
+		}	
+			nav ul ul li a:hover {
+				background: #4b545f;
+			}
+
+
+section {
+	margin: 0 auto;
+	width: 50%;
+}
+
+section section {
+		width: auto;
+}
+
+h1 {
+	border-bottom: solid lightgray;
+	border-width: 2px;
+}
+
+footer {
+	border-top: solid darkgray;
+	border-width: 3px;
+}
+
+
+ 
\ No newline at end of file
diff --git a/top-nav-drill/test.html b/top-nav-drill/test.html
new file mode 100644
index 0000000..70d34a7
--- /dev/null
+++ b/top-nav-drill/test.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang='en'>
+  <head>
+    <meta charset='UTF-8'>
+    <title>The Awesome Company</title>
+    <link href='bower_components/normalize-css/normalize.css' rel='stylesheet'>
+    <link href='main.css' rel='stylesheet'>
+  </head>
+  <body>
+    <div class='container'>
+      <header>
+        <span>
+          <a href='#'>Awesome Company</a>
+        </span>
+        <nav>
+          <ul>
+            <li>
+              <a href='#'>Home</a>
+              <ul>
+                <li>
+                  <a href='#'>Test</a>
+                </li>
+                <li>
+                  <a href='#'>What a joke</a>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <a href='#'>About</a>
+            </li>
+            <li>
+              <a href='#'>Services</a>
+            </li>
+            <li>
+              <a href='#'>Contact</a>
+            </li>
+          </ul>
+        </nav>
+      </header>
+      <section>
+        <h1>A Page Title</h1>
+        <section>
+          <h2>A Paragraph</h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit, tellus ornare mollis rhoncus, risus dui tincidunt nisl, nec vulputate sapien neque at tellus. Aenean in ornare nisl, sed porta dui.</p>
+          <p>Nunc sit amet arcu id ligula commodo consequat vel a lorem. Proin auctor, purus in dictum efficitur, mauris purus dictum augue, vitae laoreet ante nunc in sapien. Maecenas consectetur egestas euismod.</p>
+        </section>
+        <section>
+          <h2>A Paragraph</h2>
+          <p>Donec faucibus sodales lectus, quis dictum ligula aliquet sit amet. Nam sodales nibh quis quam dictum sollicitudin. Nullam ut est euismod, hendrerit tellus et, euismod turpis.</p>
+          <p>Nunc sit amet arcu id ligula commodo consequat vel a lorem. Proin auctor, purus in dictum efficitur, mauris purus dictum augue, vitae laoreet ante nunc in sapien. Maecenas consectetur egestas euismod.</p>
+        </section>
+        <section>
+          <h2>A Paragraph</h2>
+          <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas non mauris ac erat consequat rhoncus. Mauris nec sapien luctus, rutrum leo sit amet, pretium elit.</p>
+        </section>
+      </section>
+      <footer>
+        <p>Copyright &copy; 2013 Awesome Company LLC.</p>
+      </footer>
+    </div>
+  </body>
+</html>

From 12edb46f2e96be2b49c121c025f32caf8d6a9a34 Mon Sep 17 00:00:00 2001
From: Mike Kenworthy <MKenworthy@covermymeds.com>
Date: Thu, 22 Jan 2015 12:38:26 -0500
Subject: [PATCH 2/2] Finished SASS and HAML

---
 .../main.css.scssc                            | Bin 0 -> 16479 bytes
 top-nav-drill/main.css                        | 130 ++++++++----------
 top-nav-drill/main.css.scss                   |  81 +++++++++++
 top-nav-drill/test.html                       |  62 ---------
 4 files changed, 136 insertions(+), 137 deletions(-)
 create mode 100644 top-nav-drill/.sass-cache/764231452b5fcd6958c0091c0b6eb89e799d86fc/main.css.scssc
 create mode 100644 top-nav-drill/main.css.scss
 delete mode 100644 top-nav-drill/test.html

diff --git a/top-nav-drill/.sass-cache/764231452b5fcd6958c0091c0b6eb89e799d86fc/main.css.scssc b/top-nav-drill/.sass-cache/764231452b5fcd6958c0091c0b6eb89e799d86fc/main.css.scssc
new file mode 100644
index 0000000000000000000000000000000000000000..33ca6ab854a80f1e40cb08acabe9f93b2da5933c
GIT binary patch
literal 16479
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
A+W-In

literal 0
HcmV?d00001

diff --git a/top-nav-drill/main.css b/top-nav-drill/main.css
index fb72df2..a2c170f 100644
--- a/top-nav-drill/main.css
+++ b/top-nav-drill/main.css
@@ -1,86 +1,66 @@
 .container {
-  margin: 0 auto;
-}
+  margin: 0 auto; }
 
-/*Put your code here*/
 header, header a {
-	background-color: black;
-	display: block;
-	color: #FFFFFF;
-	padding: 4px;
-}
-	header span a {
-		text-decoration: none;
-		font-size: 34px;
-		font-style: bold;
-		padding-left: 25px;
-		padding-right: 25px;	
-		font-weight: 500;
-	}
+  background-color: black;
+  display: block;
+  color: #FFFFFF;
+  padding: 4px; }
+  header span a {
+    text-decoration: none;
+    font-size: 34px;
+    font-style: bold;
+    padding-left: 25px;
+    padding-right: 25px;
+    font-weight: 500; }
 
 nav {
-	position: fixed;
-	right: 0px;
-	top: 0px;
-	padding: 0px 25px;
-}
-	nav a {
-		font-size: 20px;
-	    font-weight: 100;
-	}
-	nav ul {
-		list-style-type:none;
-	}
-		nav ul li {
-		float:left;
-		padding: 0px 1px;
-		margin: 0px 2px;
-		}
-		nav ul li:hover > ul {
-			display: block;
-			position: absolute;
-		}
-		nav ul ul { 
-			display:none; 
-		}
-
-nav ul ul {
-	background: #FFFFFF; border-radius: 0px; padding: 0;
-	position: absolute; top: 100%;
-}
-	nav ul ul li {
-		float: none; 
-		border-top: 1px solid #6b727c;
-		border-bottom: 1px solid #575f6a;
-		position: relative;
-	}
-		nav ul ul li a {
-			padding: 0px 10px;
-			color: #fff;
-		}	
-			nav ul ul li a:hover {
-				background: #4b545f;
-			}
-
+  position: fixed;
+  right: 0px;
+  top: 0px;
+  padding: 0px 25px; }
+  nav a {
+    font-size: 20px;
+    font-weight: 100; }
+  nav ul {
+    list-style-type: none; }
+    nav ul li {
+      float: left;
+      padding: 0px 1px;
+      margin: 0px 2px; }
+      nav ul li :hover > ul {
+        display: block;
+        position: absolute; }
+    nav ul ul {
+      display: none;
+      background: #FFFFFF;
+      border-radius: 0px;
+      padding: 0;
+      position: absolute;
+      top: 100%; }
+      nav ul ul li {
+        float: none;
+        border-top: 1px solid #6b727c;
+        border-bottom: 1px solid #575f6a;
+        position: relative; }
+        nav ul ul li a {
+          padding: 0px 10px;
+          color: #fff; }
+          nav ul ul li a :hover {
+            background: #4b545f; }
 
 section {
-	margin: 0 auto;
-	width: 50%;
-}
-
-section section {
-		width: auto;
-}
-
-h1 {
-	border-bottom: solid lightgray;
-	border-width: 2px;
-}
+  margin: 0 auto;
+  width: 50%; }
+  section section {
+    width: auto; }
 
 footer {
-	border-top: solid darkgray;
-	border-width: 3px;
-}
+  border-top: solid darkgray;
+  border-width: 3px; }
 
+h1 {
+  border-bottom: solid lightgray;
+  border-width: 2px; }
 
- 
\ No newline at end of file
+/*# sourceMappingURL=test.css.map */
diff --git a/top-nav-drill/main.css.scss b/top-nav-drill/main.css.scss
new file mode 100644
index 0000000..7ac215b
--- /dev/null
+++ b/top-nav-drill/main.css.scss
@@ -0,0 +1,81 @@
+.container{
+	margin: 0 auto;
+}
+
+header{
+	background-color: black;
+	display: block;
+	color: #FFFFFF;
+	padding: 4px;
+	a{
+		@extend header;
+	}
+	span a{
+		text-decoration: none;
+		font-size: 34px;
+		font-style: bold;
+		padding-left: 25px;
+		padding-right: 25px;	
+		font-weight: 500;
+	}
+}
+
+nav{
+	position: fixed;
+	right: 0px;
+	top: 0px;
+	padding: 0px 25px;
+	a{
+		font-size: 20px;
+	  font-weight: 100;
+	}
+	ul{
+		list-style-type:none;
+		li{
+			float:left;
+			padding: 0px 1px;
+			margin: 0px 2px;
+			:hover > ul{
+				display: block;
+				position: absolute;
+			}
+		}
+		ul{
+			display:none; 
+
+			background: #FFFFFF; 
+			border-radius: 0px; 
+			padding: 0;
+			position: absolute; 
+			top: 100%;
+			li{
+				float: none; 
+				border-top: 1px solid #6b727c;
+				border-bottom: 1px solid #575f6a;
+				position: relative;
+				a{
+					padding: 0px 10px;
+					color: #fff;
+					:hover{
+						background: #4b545f;
+					}
+				}
+			}
+		}
+	}
+}
+section{
+	margin: 0 auto;
+	width: 50%;
+	section{
+		width: auto;
+	}
+}
+footer{
+	border-top: solid darkgray;
+	border-width: 3px;
+}
+h1{
+	border-bottom: solid lightgray;
+	border-width: 2px;
+}
\ No newline at end of file
diff --git a/top-nav-drill/test.html b/top-nav-drill/test.html
deleted file mode 100644
index 70d34a7..0000000
--- a/top-nav-drill/test.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<!DOCTYPE html>
-<html lang='en'>
-  <head>
-    <meta charset='UTF-8'>
-    <title>The Awesome Company</title>
-    <link href='bower_components/normalize-css/normalize.css' rel='stylesheet'>
-    <link href='main.css' rel='stylesheet'>
-  </head>
-  <body>
-    <div class='container'>
-      <header>
-        <span>
-          <a href='#'>Awesome Company</a>
-        </span>
-        <nav>
-          <ul>
-            <li>
-              <a href='#'>Home</a>
-              <ul>
-                <li>
-                  <a href='#'>Test</a>
-                </li>
-                <li>
-                  <a href='#'>What a joke</a>
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a href='#'>About</a>
-            </li>
-            <li>
-              <a href='#'>Services</a>
-            </li>
-            <li>
-              <a href='#'>Contact</a>
-            </li>
-          </ul>
-        </nav>
-      </header>
-      <section>
-        <h1>A Page Title</h1>
-        <section>
-          <h2>A Paragraph</h2>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit, tellus ornare mollis rhoncus, risus dui tincidunt nisl, nec vulputate sapien neque at tellus. Aenean in ornare nisl, sed porta dui.</p>
-          <p>Nunc sit amet arcu id ligula commodo consequat vel a lorem. Proin auctor, purus in dictum efficitur, mauris purus dictum augue, vitae laoreet ante nunc in sapien. Maecenas consectetur egestas euismod.</p>
-        </section>
-        <section>
-          <h2>A Paragraph</h2>
-          <p>Donec faucibus sodales lectus, quis dictum ligula aliquet sit amet. Nam sodales nibh quis quam dictum sollicitudin. Nullam ut est euismod, hendrerit tellus et, euismod turpis.</p>
-          <p>Nunc sit amet arcu id ligula commodo consequat vel a lorem. Proin auctor, purus in dictum efficitur, mauris purus dictum augue, vitae laoreet ante nunc in sapien. Maecenas consectetur egestas euismod.</p>
-        </section>
-        <section>
-          <h2>A Paragraph</h2>
-          <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas non mauris ac erat consequat rhoncus. Mauris nec sapien luctus, rutrum leo sit amet, pretium elit.</p>
-        </section>
-      </section>
-      <footer>
-        <p>Copyright &copy; 2013 Awesome Company LLC.</p>
-      </footer>
-    </div>
-  </body>
-</html>