Move sass example

dudesl · May 10, 2012 · 0ed117e · 0ed117e
1 parent 0fe9afb
commit 0ed117e
Show file tree

Hide file tree

Showing 20 changed files with 605 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/sass-site/.DS_Store b/sass-site/.DS_Store
diff --git a/sass-site/README b/sass-site/README
diff --git a/sass-site/ghtlogo.png b/sass-site/ghtlogo.png
diff --git a/sass-site/index.html b/sass-site/index.html
@@ -0,0 +1,115 @@
+<!doctype html>	
+<!--[if lt IE 7 ]> <html class="no-js ie6 ie" lang="en"> <![endif]-->
+<!--[if IE 7 ]>    <html class="no-js ie7 ie" lang="en"> <![endif]-->
+<!--[if IE 8 ]>    <html class="no-js ie8 ie" lang="en"> <![endif]-->
+<!--[if IE 9 ]>	   <html class="no-js ie9 ie" lang="en"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js no-ie" lang="en"> <!--<![endif]-->
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+	<title></title>
+	<meta name="description" content="">
+	<meta name="author" content="">
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="shortcut icon" href="/favicon.ico" />
+	<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+	<link rel="apple-touch-icon" href="/apple-touch-icon-72x72.png" sizes="72x72" />
+	<link rel="apple-touch-icon" href="/apple-touch-icon-114x114.png" sizes="114x114" />
+
+	<link rel="stylesheet" type="text/css" href="style.css" />
+	<script src="javascripts/libs/modernizr-2.0.6.min.js"></script>
+
+</head>
+
+<body>
+
+	<div class="container">
+		<header>
+			<h1><a href="#"><img id="logo" src="ghtlogo.png"></a></h1>
+		</header>
+
+		<div id="main">
+
+			<article id="content">
+				<header>
+					<h1>Bonneville Shoreline</h1>
+					<h3>Northern Utah, USA</h3>
+				</header>
+
+				<figure>
+					<img src="trail.png">
+					<figcaption><h4>Along the Bonneville Shoreline Trail</h4></figcaption>
+				</figure>
+
+				<p>The Bonneville Shoreline Trail follows the shoreline of the ancient Lake Bonneville in Northern Utah. It is a mixed use (biking/hiking/horseback riding) recreation trail. It will total 305+ miles of dirt and paved trails when completed, but some parts of the trail are not developed yet. The Bonneville Shoreline Trail is a medium level hike with many drops and climbs near canyon openings. It is a hike best suited for early spring or late fall, since it is generally still warm and usable when higher elevation trails are covered in snow.</p>
+
+				<section id="reviews" class="cf">
+					<h2>Reviews</h2>
+					<article>
+						<h3>Loved it</h3>
+						<p>"This hike is super awesome. It offers really great views of the valley, and a good mix of sun and shade. Don't forget to bring your camera!"</p>
+					</article>
+				</section>
+
+			</article>
+
+			<aside>
+				<section>
+					<h2>Similar Hikes</h2>
+					<ul>
+						<li><a href="#">The River Trail</a></li>
+						<li><a href="#">Green Canyon</a></li>
+						<li><a href="#">Wind Caves</a></li>
+					</ul>
+				</section>
+
+				<section>
+					<h2>Made by the Phuse</h2>
+					<ul>
+						<li><a href="http://thephuse.com/blog/">Check out the Blog</a></li>
+						<li><a href="https://phuse.wufoo.com/forms/project-questionnaire/">Get a Quote Today</a></li>
+						<li><a href="http://thephuse.com/">Visit our Website</a></li>
+					</ul>
+				</section>
+
+			</aside>
+
+		</div><!-- end of #main -->
+
+		<footer class="cf">
+			<h4>More trails | Maps | Photos
+			<a href="http://thephuse.com/" id="phuse-logo"></a>
+			</h4>
+		</footer>
+	</div> <!-- end of .container -->
+
+
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
+	<script>!window.jQuery && document.write(unescape('%3Cscript src="/javascripts/libs/jquery.1.6.2.min.js"%3E%3C/script%3E'))</script>
+
+	<script src="javascripts/plugins.js"></script>
+	<script src="javascripts/script.js"></script>	
+
+	<!--[if lt IE 7 ]>
+		<script src="/javascripts/libs/dd_belatedpng.js"></script>
+		<script> DD_belatedPNG.fix('img, .png_bg'); </script>
+	<![endif]-->
+
+
+	<!-- change the UA-XXXXX-X to be your site's ID -->
+	<script>
+		var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
+	 	(function(d, t) {
+			var g = d.createElement(t),
+				s = d.getElementsByTagName(t)[0];
+			g.async = true;
+			g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+			s.parentNode.insertBefore(g, s);
+		})(document, 'script');
+	</script>
+
+</body>
+</html>
diff --git a/sass-site/logo.png b/sass-site/logo.png
diff --git a/sass-site/normalize.css b/sass-site/normalize.css
@@ -0,0 +1,87 @@
+/* HTML5 Boilerplate
+ * ==|== normalize ==========================================================
+ */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
+audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
+audio:not([controls]) { display: none; }
+[hidden] { display: none; }
+
+html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+body { margin: 0; font-size: 13px; line-height: 1.231; }
+body, button, input, select, textarea { font-family: sans-serif; color: #222; }
+
+::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
+::selection { background: #fe57a1; color: #fff; text-shadow: none; }
+
+a { color: #00e; }
+a:visited { color: #551a8b; }
+a:hover { color: #06e; }
+a:focus { outline: thin dotted; }
+a:hover, a:active { outline: 0; }
+
+abbr[title] { border-bottom: 1px dotted; }
+b, strong { font-weight: bold; }
+blockquote { margin: 1em 40px; }
+dfn { font-style: italic; }
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+ins { background: #ff9; color: #000; text-decoration: none; }
+mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+q { quotes: none; }
+q:before, q:after { content: ""; content: none; }
+small { font-size: 85%; }
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
+dd { margin: 0 0 0 40px; }
+nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
+img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+svg:not(:root) { overflow: hidden; }
+figure { margin: 0; }
+
+form { margin: 0; }
+fieldset { border: 0; margin: 0; padding: 0; }
+label { cursor: pointer; }
+legend { border: 0; *margin-left: -7px; padding: 0; }
+button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
+button, input { line-height: normal; *overflow: visible; }
+table button, table input { *overflow: auto; }
+button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
+input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
+input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
+input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
+button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
+textarea { overflow: auto; vertical-align: top; resize: vertical; }
+input:valid, textarea:valid {  }
+input:invalid, textarea:invalid { background-color: #f0dddd; }
+
+table { border-collapse: collapse; border-spacing: 0; }
+td { vertical-align: top; }
+
+/* @group Helper Classes */
+.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
+.hidden { display: none; visibility: hidden; }
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+.invisible { visibility: hidden; }
+.cf { display:inline-block; }
+.cf:after { display:block; visibility:hidden; clear:both; height:0; content: "."; }
+/* @end */
+
+/* @group Wordpress */
+p img {
+	padding: 0;
+	max-width: 100%;
+}
+img.centered {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+.alignright { float: right; }
+.alignleft { float: left; }
+/* @end */
diff --git a/sass-site/style.css b/sass-site/style.css
@@ -0,0 +1,169 @@
+@import url(normalize.css);
+/**/
+@font-face {
+  font-family: 'ProximaNovaRegular';
+  src: url("type/proximanova-reg-webfont.eot");
+  src: url("type/proximanova-reg-webfont.eot?#iefix") format("embedded-opentype"), url("type/proximanova-reg-webfont.woff") format("woff"), url("type/proximanova-reg-webfont.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+@font-face {
+  font-family: 'ProximaNovaExtraBold';
+  src: url("type/proximanova-extrabold-webfont.eot");
+  src: url("type/proximanova-extrabold-webfont.eot?#iefix") format("embedded-opentype"), url("type/proximanova-extrabold-webfont.woff") format("woff"), url("type/proximanova-extrabold-webfont.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+@font-face {
+  font-family: 'BemioItalicRegular';
+  src: url("type/bemio_italic-webfont.eot");
+  src: url("type/bemio_italic-webfont.eot?#iefix") format("embedded-opentype"), url("type/bemio_italic-webfont.woff") format("woff"), url("type/bemio_italic-webfont.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal; }
+
+* {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box; }
+
+body {
+  font-size: 14px;
+  font-family: 'ProximaNovaRegular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  background-color: #333333;
+  color: #333333; }
+  body a, body a:visited {
+    color: #ff6644; }
+
+.container {
+  margin: 0 auto;
+  max-width: 1200px;
+  box-shadow: 0 0 2px #fff;
+  background-color: #fff; }
+
+header {
+  margin: 0;
+  width: 100%;
+  padding: 1.42rem;
+  border-bottom: 1px solid #dedede; }
+  header h1 {
+    margin: 0;
+    padding: 0; }
+
+h1, h2 {
+  font-family: "BemioItalicRegular", 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  text-transform: uppercase;
+  color: #000; }
+
+h1 {
+  font-size: 40px; }
+
+h2 {
+  font-size: 25px; }
+
+h3 {
+  font-family: 'ProximaNovaExtraBold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  text-transform: uppercase;
+  color: #ff6644; }
+
+h4 {
+  font-size: 12px;
+  text-transform: uppercase;
+  color: #CCC; }
+
+#main {
+  margin: 0;
+  float: left;
+  width: 100%;
+  padding: 0;
+  background-color: white; }
+
+#content {
+  float: left;
+  width: 66.667%;
+  padding: 0; }
+  @media only screen and (max-width: 770px) {
+    #content {
+      clear: left;
+      width: 100%;
+      padding: 0; } }
+  #content article {
+    width: 100%;
+    padding: 1.42rem; }
+  #content p {
+    padding: 1rem;
+    line-height: 1.4rem; }
+  #content figure {
+    width: 41.667%;
+    padding: 1.42rem;
+    min-width: 240px;
+    float: right;
+    border: .5rem solid #fff;
+    border-bottom: none; }
+    @media only screen and (max-width: 600px) {
+      #content figure {
+        min-width: 280px;
+        margin: 0 auto;
+        float: none; } }
+    #content figure img {
+      max-width: 100%;
+      margin: 0; }
+    #content figure figcaption {
+      padding: 0;
+      margin: 0;
+      text-align: center;
+      background-color: #fff; }
+  #content #reviews {
+    border-top: 3px double #dedede;
+    width: 100%;
+    padding: 1.42rem; }
+    #content #reviews article {
+      padding: 18px 20px 0 20px;
+      background-color: #fff;
+      border: 1px solid #dedede;
+      border-bottom: 4px double #dedede;
+      margin-bottom: 0rem; }
+      #content #reviews article h3 {
+        border-bottom: 1px solid #dedede;
+        padding-bottom: .78rem;
+        margin: 0; }
+      #content #reviews article p {
+        padding: 0; }
+
+aside {
+  height: 53rem;
+  float: left;
+  width: 33.333%;
+  padding: 1.42rem;
+  background-color: #F4F1EF;
+  border-left: 2px solid #dedede; }
+  aside h2 {
+    text-transform: uppercase; }
+  @media only screen and (max-width: 770px) {
+    aside {
+      height: auto;
+      clear: left;
+      width: 100%;
+      padding: 1.42rem;
+      border-top: 1px solid #dedede; } }
+  aside ul {
+    list-style: none;
+    padding: 0;
+    line-height: 1rem; }
+    aside ul li {
+      line-height: 1.3rem; }
+
+footer {
+  width: 100%;
+  padding: 1.42rem;
+  text-align: center;
+  background-color: white;
+  border-top: 1px solid #dedede; }
+  footer #phuse-logo {
+    float: right;
+    position: relative;
+    top: -6px;
+    width: 44px;
+    height: 30px;
+    background: url("logo.png") no-repeat; }
+  footer h4 {
+    margin: 0; }