add animation, create pie charts for numbers

OpenTechSchool · Apr 7, 2017 · 9cbb555 · 9cbb555
1 parent c82d5d2
commit 9cbb555
Show file tree

Hide file tree

Showing 13 changed files with 361 additions and 144 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -1,85 +1,86 @@
 <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width initial-scale=1" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width initial-scale=1" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-    <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}{% if page.tagline %} || {{page.tagline}}{%endif%} || OpenTechSchool.org</title>
-    <meta name="description" content="{{ site.description }}" />
-	  <meta name="author" content="OpenTechSchool">
-	  <meta property="og:title" content="OpenTechSchool" />
-	  <meta property="og:type" content="school" />
-	  <meta property="og:url" content="http://{{ site.url }}" />
-	  <meta property="og:image" content="http://{{ site.url }}/images/ots_logo_fb.png" />
-	  <meta property="og:site_name" content="{{ site.url }}" />
-	  <meta property="og:description" content="{{ site.description }}" />
+  <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}{% if page.tagline %} || {{page.tagline}}{%endif%} || OpenTechSchool.org</title>
+  <meta name="description" content="{{ site.description }}" />
+  <meta name="author" content="OpenTechSchool">
+  <meta property="og:title" content="OpenTechSchool" />
+  <meta property="og:type" content="school" />
+  <meta property="og:url" content="http://{{ site.url }}" />
+  <meta property="og:image" content="http://{{ site.url }}/images/ots_logo_fb.png" />
+  <meta property="og:site_name" content="{{ site.url }}" />
+  <meta property="og:description" content="{{ site.description }}" />
 
-    <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
-    <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
-
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-    <script type="text/javascript">
-    (function(){
-    	var _queue = [];
-    	window.MEETUPCOM_KEY = '38406b383fa43605b6b234269316';
-    	window.onStartUp = function(fn){
-    		if (document.readyState === "loading") {
-    			_queue.push(fn);
-    		} else {
-    			// we are past loading, start immediately.
-    			fn();
-    		}
-    	}
-    	document.onreadystatechange = function () {
-		    if (document.readyState === "interactive") {
-		        _queue.forEach(function(fn){
-		        	// execute all queued actions
-		        	fn();
-		        });
-		    }
-		}
-		function _thenRender(target, templates, fn) {
-			return (function(prms) {
-				return prms.then(function(data) {
-					var args = (templates || []).map(
-						function (tmpl) { return document.getElementById(tmpl).innerHTML});
-					// no function provided? directly render by passing data to first template
-					if (!fn) return args[0].template(data);
-					args.unshift(data);
-					return fn.apply(fn, args);
-				})
-				.then(function(rendered) {
-					target.innerHTML = rendered;
-				})
-				.catch(function(error){
-					target.innerHTML = error
-				});
+  <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
+  <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
 
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.3/d3.min.js"></script>
+  <script type="text/javascript">
+  (function(){
+  	var _queue = [];
+  	window.MEETUPCOM_KEY = '38406b383fa43605b6b234269316';
+  	window.onStartUp = function(fn){
+  		if (document.readyState === "loading") {
+  			_queue.push(fn);
+  		} else {
+  			// we are past loading, start immediately.
+  			fn();
+  		}
+  	}
+  	document.onreadystatechange = function () {
+	    if (document.readyState === "interactive") {
+	        _queue.forEach(function(fn){
+	        	// execute all queued actions
+	        	fn();
+	        });
+	    }
+	}
+	function _thenRender(target, templates, fn) {
+		return (function(prms) {
+			return prms.then(function(data) {
+				var args = (templates || []).map(
+					function (tmpl) { return document.getElementById(tmpl).innerHTML});
+				// no function provided? directly render by passing data to first template
+				if (!fn) return args[0].template(data);
+				args.unshift(data);
+				return fn.apply(fn, args);
+			})
+			.then(function(rendered) {
+				target.innerHTML = rendered;
 			})
-		}
-		window.fetchAndRender = function(
-			sourceUrl,   // link to a json URL we will fetch
-			targetId,    // the target this should be rendered into
-			templates,   // any templateIDs it'd like us to fetch for them
-			fn           // the function to call
-			) {
-			var target = document.getElementById(targetId);
-			return _thenRender(target, templates, fn)(fetch(sourceUrl)
-				.then(function(resp) { return resp.json() }));
-		}
-		window.fetchJSONPAndRender = function(
-			sourceUrl,   // link to a json URL we will fetch
-			targetId,    // the target this should be rendered into
-			templates,   // any templateIDs it'd like us to fetch for them
-			fn           // the function to call
-			) {
-			var target = document.getElementById(targetId);
-			var prms = new Promise(function (resolve, reject){
-				JSONP(sourceUrl, resolve);
+			.catch(function(error){
+				target.innerHTML = error
 			});
-			console.log(prms);
-			_thenRender(target, templates, fn)(prms);
-			return prms;
-		}
-	})()
-    </script>
+
+		})
+	}
+	window.fetchAndRender = function(
+		sourceUrl,   // link to a json URL we will fetch
+		targetId,    // the target this should be rendered into
+		templates,   // any templateIDs it'd like us to fetch for them
+		fn           // the function to call
+		) {
+		var target = document.getElementById(targetId);
+		return _thenRender(target, templates, fn)(fetch(sourceUrl)
+			.then(function(resp) { return resp.json() }));
+	}
+	window.fetchJSONPAndRender = function(
+		sourceUrl,   // link to a json URL we will fetch
+		targetId,    // the target this should be rendered into
+		templates,   // any templateIDs it'd like us to fetch for them
+		fn           // the function to call
+		) {
+		var target = document.getElementById(targetId);
+		var prms = new Promise(function (resolve, reject){
+			JSONP(sourceUrl, resolve);
+		});
+		console.log(prms);
+		_thenRender(target, templates, fn)(prms);
+		return prms;
+	}
+})()
+  </script>
 </head>
diff --git a/_layouts/landing.html b/_layouts/landing.html
@@ -16,9 +16,7 @@ <h2>{{page.tagline}}</h2>
 	    </div>
 	  </div>
 
-	  <section class="section-bkg container">
-	      {{ content }}
-	  </section>
+	  {{ content }}
 	</div>
 
 

diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -32,8 +32,19 @@ header {
 		font-weight: 200;
     font-size: 3rem;
 	}
+
+	&.section-bkg--blue {
+		background-color: $brand-color;
+		color: $white;
+		padding: 70px 0;
+
+		h2 {
+			font-weight: 700;
+		}
+	}
 }
 
+
 footer {
 	padding: 2em 3em 0.5em 3em;
 	background-color: $brand-color;
@@ -54,8 +65,6 @@ footer {
 
 }
 
-
-
 @import
 	"layouts/page.scss",
 	"layouts/landing.scss",

diff --git a/_sass/base/animation-cheatsheet.scss → _sass/base/_animation-cheatsheet.scss b/_sass/base/animation-cheatsheet.scss → _sass/base/_animation-cheatsheet.scss
diff --git a/_sass/base/_buttons.scss b/_sass/base/_buttons.scss
@@ -1,7 +1,7 @@
 #{$all-buttons},
 .btn {
   appearance: none;
-  display: block;
+  display: inline-block;
   overflow: hidden;
   position: relative;
   background-color: $brand-color;
@@ -86,7 +86,9 @@
 
   // small
   &.btn--small {
-    width: 30%;
+    width: 90%;
+    padding: .9em .4em;
+    font-size: 1.2rem;
   }
 
   // centered btn

diff --git a/_sass/base/icons.scss → _sass/base/_icons.scss b/_sass/base/icons.scss → _sass/base/_icons.scss
diff --git a/_sass/base/_utility.scss b/_sass/base/_utility.scss
@@ -8,3 +8,8 @@
 	margin: 0 auto;
 	margin-bottom: 20px;
 }
+
+// display
+.u-block {
+	display: block;
+}
diff --git a/_sass/base/_variables.scss b/_sass/base/_variables.scss
@@ -35,6 +35,8 @@ $ots_text_i_l: #C1D5E1; /* (Inverted) Link color on dark blue backgrounds */
 $ots_red_l: #E04C3E; /* Highlighted, red links, buttons, other highlights */
 $ots_red_h: #FD4B22; /* Red hover states */
 
+$ots_constrat_pink: #FF4081;
+
 
 // brand - use bitters vars name
 $brand-color: $ots_blue;

diff --git a/_sass/components/_components.scss b/_sass/components/_components.scss
@@ -1,3 +1,2 @@
-@import
-	"subnavigation"
-;
+@import "subnavigation";
+@import "donuts";
diff --git a/_sass/components/_donuts.scss b/_sass/components/_donuts.scss
@@ -0,0 +1,20 @@
+#donut {
+  width: 29rem;
+  height: 29rem;
+  margin: 0 auto;
+}
+
+path.color0 {
+  fill: $ots_constrat_pink;
+}
+
+path.color1 {
+  fill: rgba(white, .8);
+}
+
+text {
+	font-size: 3rem;
+  fill: $white;
+  font-family: $heading-font-family;
+  font-weight: 700;
+}
diff --git a/_sass/layouts/landing.scss b/_sass/layouts/landing.scss
@@ -1,4 +1,13 @@
 .layout-landing {
+	text-align: center;
+	p {
+		text-align: center;
+	}
+	h2 {
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+	}
+
 	header {
 		background: transparent;
 		position: absolute;
@@ -18,7 +27,7 @@
 			top: 40%;
 			left: 50%;
 			transform: translate(-50%, -50%);
-			text-shadow: -1px 1px 3px rgba($white, 0.6);
+			//text-shadow: 0px 1px 2px rgba($white, 0.6);
 			h1, h2 {
 				padding: 0;
 			}
@@ -30,15 +39,6 @@
 	}
 
 	.intro {
-		text-align: center;
-		p {
-			text-align: center;
-		}
-
-		h2 {
-	    margin-bottom: 10px;
-	    padding-bottom: 10px;
-		}
 		.intro__boxes {
 			margin-top: 60px;
 			.intro__boxes__box {
@@ -61,4 +61,10 @@
 			}
 		}
 	}
+
+	.numbers {
+		.row {
+			padding: 40px 0 20px;
+		}
+	}
 }