Adding more basic stuff

dennisschipper · Aug 30, 2013 · f6eee92 · f6eee92
1 parent 8ca4819
commit f6eee92
Show file tree

Hide file tree

Showing 3 changed files with 184 additions and 62 deletions.
diff --git a/index.html b/index.html
@@ -13,6 +13,9 @@
 	<section class="blank">
 		<nav>
 			<ul>
+				<li>
+					<a href="#" class="focus">*</a>
+				</li>
 				<li>
 					<a href="#">Menu item 1</a>
 				</li>
@@ -27,13 +30,39 @@
 		</nav>
 	</section>
 
+	<section class="blank blurb">
+		<img src="./images/image-large-placeholder.png" alt="Image">
+		<div>
+			<h1>Flatby the UI Kit</h1>
+			<h2>The subtitle for the main text blurb. Add some stuff here so that it fills up the line</h2>
+			<p>What the hell is this? Get out of town, I didn't know you did anything creative. Ah, let me read some. Yeah, but you're uh, you're so, you're so thin. Hey Biff, check out this guy's life preserver, dork thinks he's gonna drown. Doc, you gotta help me. you were the only one who knows how your time machine works.</p>
+			<a href="#" class="button button-cta">Call To Action! Buy our stuff!</a>
+		</div>
+	</section>
+
 	<section>
 		<h1>Simple Title</h1>
 		<h2>This is a simple subtitle</h2>
 		<p>What the hell is this? Get out of town, I didn't know you did anything creative. Ah, let me read some. Yeah, but you're uh, you're so, you're so thin. Hey Biff, check out this guy's life preserver, dork thinks he's gonna drown. Doc, you gotta help me. you were the only one who knows how your time machine works.</p>
 		<img src="./images/image-large-placeholder.png" alt="Image">
 		<p>What the hell is this? Get out of town, I didn't know you did anything creative. Ah, let me read some. Yeah, but you're uh, you're so, you're so thin. Hey Biff, check out this guy's life preserver, dork thinks he's gonna drown. Doc, you gotta help me. you were the only one who knows how your time machine works.</p>
 		<a href="#" class="button-read-more">Read more &raquo;</a>
+
+		<ul>
+			<li>
+				<h1>List item title</h1>
+				<h2>A subtitle for a list</h2>
+				<p>List item content. Lorel ipsum dolor sit amet lorel ipsum</p>
+			</li>
+			<li>
+				<h1>List item title</h1>
+				<p>List item content. Lorel ipsum dolor sit amet lorel ipsum</p>
+			</li>
+			<li>
+				<h1>List item title</h1>
+				<p>List item content. Lorel ipsum dolor sit amet lorel ipsum</p>
+			</li>
+		</ul>
 	</section>
 
 	<div class="container blank">

diff --git a/sass/screen.scss b/sass/screen.scss
@@ -21,6 +21,7 @@ h1, h2, h3 {
 
 h1 {
 	font-size: 2.2em;
+	line-height: 1em;
 }
 
 h2 {
@@ -46,6 +47,7 @@ section, article, .container {
 	@include box-sizing(border-box);
 	padding: 2em;
 	background: #fff;
+	border-radius: 4px;
 
 	article {
 		float: left;
@@ -54,8 +56,37 @@ section, article, .container {
 
 	&.blank {
 		padding: 0;
+		background: none;
 	}
 
+	&.blurb {
+		text-align: center;
+		background: #252525;
+		color: #f0f0f0;
+
+		> div {
+			padding: 3em 3em;
+		}
+
+		h1, h2, p {
+			//text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
+			opacity: 0.4;
+		}
+
+		h1 {
+			font-weight: 700;
+			font-size: 3.5em;
+			text-transform: uppercase;
+		}
+
+		h2 {
+			margin-bottom: 0.3em;
+		}
+
+		p {
+			margin-bottom: 0;
+		}
+	}
 
 	img {
 		max-width: 100%;
@@ -68,13 +99,12 @@ section, article, .container {
 	}
 
 	ul.list-generic {
+		margin-top: 1em;
 
 		li {
 			padding-top: 0.5em;
 			padding-bottom: 0.5em;
-			padding-left: 0.5em;
 			border-bottom: 1px solid #cecece;
-			background: #f6f6f6;
 
 			&:last-child {
 				margin-bottom: 0;
@@ -87,7 +117,7 @@ section, article, .container {
 		}
 
 		h2 {
-			font-size: 0.8em;
+			font-size: 1em;
 			margin-bottom: 0em;
 			text-transform: uppercase;
 			font-weight: 500;
@@ -100,14 +130,19 @@ section, article, .container {
 	}
 }
 
+
+
 body > section, body > header, body > footer, .container {
 	max-width: 1180px;
 	margin: 0 auto;
 	margin-bottom: 20px;
 }
 
 nav {
-	background: #6dc5dd;
+	background: #444;
+	margin-top: 2em;
+	border-radius: 4px;
+
 	ul {
 		list-style: none;
 		margin: 0;
@@ -126,12 +161,17 @@ nav {
 				text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
 				float: left;
 				background: inherit;
-				padding: 0.5em 1.5em;
+				padding: 1em 1.5em;
 				text-decoration: none;
 
 				&:hover, &:active {
 					background: rgba(255, 255, 255, 0.2);
 				}
+
+				&.focus {
+					background: rgba(255, 255, 255, 0.2);
+					padding: 1em 1.8em;
+				}
 			}
 		}
 	}
@@ -186,6 +226,17 @@ img.righty {
 		border-bottom-left-radius: 0;
 		border-top-left-radius: 0;
 	}
+
+	&.button-cta {
+		display: inline-block;
+		font-size: 1.3em;
+		background: #444;
+		margin-top: 1em;
+		padding: 1em 4em;
+		text-transform: uppercase;
+		font-weight: 500;
+		letter-spacing: 2px;
+	}
 }
 
 label {