Merge pull request #188 from newamericafoundation/post-page-redesigne…

…d-format Post page redesigned format
newamericafoundation · Mar 9, 2016 · 830907e · 830907e
2 parents a4385da + ea6b3a2
commit 830907e
Show file tree

Hide file tree

Showing 11 changed files with 257 additions and 95 deletions.
diff --git a/mysite/assets/js/modules/mobile-menu-interaction.js b/mysite/assets/js/modules/mobile-menu-interaction.js
@@ -69,31 +69,62 @@ function addMenuResponsivity() {
 $(addMenuResponsivity);
 
 
-var $window = $( window ); // so you have a "cached" reference 
-// var breakpoint = 640;
-
-$window.resize ( function () {
-	// console.log("calling resize");
-		if ($window.width() > currHeaderBreakpoint ) {
-			// if (clicked == true ) {
-				console.log("width is greater");
-				$(".mobile-sidemenu").css("display", "none");
-		    	$(".sidemenu").css("display", "block");
-		    	$(".mobile-header").css("display", "none");
-				$(".content-container").css("display", "table-cell");
-				$("footer").css("display", "block");
-				sideMenuExpanded = false;
-				headerMenuExpanded = false;
+var $window = $( window );
+
+var desktopMediaQuery = window.matchMedia("(min-width: " + desktopHeaderBreakpoint + "px)");
+	desktopMediaQuery.addListener(WidthChange);
+	WidthChange(desktopMediaQuery);
+
+function WidthChange(mq) {
+
+  if (mq.matches) {
+    console.log("width is greater");
+	$(".mobile-sidemenu").css("display", "none");
+	$(".sidemenu").css("display", "block");
+	$(".mobile-header").css("display", "none");
+	$(".content-container").css("display", "table-cell");
+	$("footer").css("display", "block");
+	sideMenuExpanded = false;
+	headerMenuExpanded = false;
+  } else {
+    console.log("width is less");
+	$(".mobile-sidemenu").css("display", "block");
+
+	if (!sideMenuExpanded) {
+		$(".sidemenu").css("display", "none");
+		$(".content-container").css("display", "block");
+	}
+	if (!headerMenuExpanded) {
+		$(".mobile-header").css("display", "none");
+	}
+  }
+
+}
+
+// $window.resize ( function () {
+// 	console.log($window.width());
+// 	// console.log("calling resize");
+// 		if ($window.width() >= currHeaderBreakpoint ) {
+// 			// if (clicked == true ) {
+// 				console.log("width is greater");
+// 				$(".mobile-sidemenu").css("display", "none");
+// 		    	$(".sidemenu").css("display", "block");
+// 		    	$(".mobile-header").css("display", "none");
+// 				$(".content-container").css("display", "table-cell");
+// 				$("footer").css("display", "block");
+// 				sideMenuExpanded = false;
+// 				headerMenuExpanded = false;
 
-	  	} else {
-	  		$(".mobile-sidemenu").css("display", "block");
-
-	  		if (!sideMenuExpanded) {
-	  			$(".sidemenu").css("display", "none");
-	  		}
-	  		if (!headerMenuExpanded) {
-	  			$(".mobile-header").css("display", "none");
-	  		}
-	  	} 
+// 	  	} else {
+// 	  		console.log("width is less");
+// 	  		$(".mobile-sidemenu").css("display", "block");
+
+// 	  		if (!sideMenuExpanded) {
+// 	  			$(".sidemenu").css("display", "none");
+// 	  		}
+// 	  		if (!headerMenuExpanded) {
+// 	  			$(".mobile-header").css("display", "none");
+// 	  		}
+// 	  	} 
 
-});
+// });
diff --git a/mysite/assets/scss/base/layout/_containers.scss b/mysite/assets/scss/base/layout/_containers.scss
@@ -20,7 +20,6 @@
 	width:100%;
 	/*padding-top:$mobile-header-height;*/
 
-
 	@include desktop-header {
 		height:100%;
 		display: table-cell;
@@ -32,13 +31,13 @@
 }
 
 .content-container {
-
 	height:100%;
+	display: block;
 	/*padding-top:$mobile-header-height;*/
 	/*padding: $desktop-padding;*/
 	/*background-color: palette-get(na-white);*/
 
-	@include breakpoint(medium) {
+	@include desktop-header {
 		padding: $desktop-padding;
 	}
 	@include expanded-header {
@@ -62,19 +61,29 @@
 	}
 }
 
-.breadcrumb-container {
-	
-	& > .breadcrumb > li , & > .breadcrumb > li > a {
-		color: palette-get(na-black-40);
-	}
+.breadcrumb-social-media-container {
+	height: 48px;
+	position: relative;
+	top: 10px;
+	display: none;
+
 	@include desktop-header {
-		padding-left: 25px;
-		padding-top: 10px;
+		height: 60px;
+		display: block;
+	}
+	@include expanded-header {
+		display: block;
 	}
 
-}
-
+	.columns {
+		padding: 0px;
+		 height: 25px;
 
+		& > .breadcrumb > li , & > .breadcrumb > li > a {
+			color: grey;
+		}
+	}
+}
 
 .hero-grid-container {
 	padding-left: 0px;
@@ -127,12 +136,22 @@
 			}
 		}
 	}
+}
+
+.hero-grid-container {
+	padding-left: 0px;
+	padding-right: 0px;
+}
+
+.post-container {
+	max-width: $max-body-width;
+  	padding-top: $desktop-padding;
+  	padding-left: $mobile-padding;
+  	padding-right: $mobile-padding;
+
+  	@include desktop-header {
+  		padding-left:0px;
+  		padding-right:0px;
+  	}
+}
 
-	/*@include breakpoint(medium) {
-		padding: 10px 0px 10px 0px;
-		
-	}
-	@include breakpoint(large) {
-		padding: 0px 10px 0px 10px;
-	}*/
-}
diff --git a/mysite/assets/scss/components/_manifest.scss b/mysite/assets/scss/components/_manifest.scss
@@ -17,3 +17,4 @@
 @import 'content-entry';
 @import 'event';
 @import 'menu-flip-arrow';
+@import 'social-icons';
diff --git a/mysite/assets/scss/components/_post-body.scss b/mysite/assets/scss/components/_post-body.scss
@@ -1,35 +1,74 @@
 .post-body {
-  max-width: $max-body-width;
-  /*width: 100%;*/
-  /*margin: auto;*/
-  /*padding: 0 $gutter / 2;*/
-  padding-top: 30px;
-  padding-left: 30px;
+  padding-top:$desktop-padding;
+
+  & > .block-heading {
+    color: palette-get(na-black);
+    font-size:1.50rem;
+    font-weight: bold;
+  }
 
+  & > .block-paragraph {
 
+    &:first-letter {
+      font-size:110px;
+      color: palette-get(na-black);
+      font-weight: bold;
+      opacity: 1;
+      float: left;
+      padding: 20px 10px 5px 0px;
+      height: 55px;
+      margin-right: 0px;
+      line-height: 70px;
+    }
+  }
+
+  & > .block-paragraph ~ .block-paragraph {
+    &:first-letter {
+      font-size:1.25rem;
+      font-weight:initial;
+      float: initial;
+      padding: initial;
+      height: initial;
+      /*margin-right: inherit;*/
+      line-height: initial;
+    }
+  }
 
-  /*p,
+  p,
   blockquote {
     font-size: rem-calc(20);
-    color: palette-get(na-black);
+    color: palette-get(na-black-70);
   }
   blockquote {
     margin: 20px 0;
     border-left-width: 4px;
     border-color: palette-get(na-black);
     padding: 0 15px;
     font-style: italic;
-  }*/
+  }
+
+  & > .block-attachment {
+
+  }
+}
+
+
+
+.post-author {
+  margin-top: 8px;
+  font-size: 16px;
+  font-weight:bold;
+}
+
+.post-date {
+  font-size: 15px;
+  color: palette-get(na-off-black);
+  margin-bottom: 0px;
 }
 
 .post-subscribe {
   margin-top: 30px;
   height: 300px;
   border-width: 2.5px;
   /*width: 100%;*/
-}
-
-.post-date {
-  font-size: 16px;
-  color: palette-get(na-black-40);
 }
diff --git a/mysite/assets/scss/components/_social-icons.scss b/mysite/assets/scss/components/_social-icons.scss
@@ -0,0 +1,43 @@
+div.social-icons {
+  width: 200px;
+  padding: 0px;
+  float: right;
+}
+
+div.social-icons svg {
+  opacity: 0.3;
+}
+
+div.social-icons svg:hover {
+  opacity: 1;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+div.social-icons svg#facebook-icon {
+  width: 10%;
+  margin-right: 8.75%;
+}
+
+div.social-icons svg#twitter-icon {
+  width: 11%;
+  margin-right: 8.75%;
+}
+
+div.social-icons svg#google-plus-icon {
+  width: 14%;
+  margin-right: 8.75%;
+}
+
+div.social-icons svg#linked-in-icon {
+  width: 10%;
+  margin-right: 8.75%;
+}
+
+div.social-icons svg#youtube-icon {
+  width: 12%;
+}
+
+div.social-icons .st0 {
+  fill: #2C2F35;
+}
diff --git a/mysite/assets/scss/modules/post-header/_main.scss b/mysite/assets/scss/modules/post-header/_main.scss
@@ -3,7 +3,8 @@ $post-header-height:225px;
 .post-header {
 	width: 100%;
 	background-repeat: no-repeat;
-	background-size: 100% 100%;
+	background-size: cover;
+	background-position: 50% 50%;
 	position:static;
 
 	&__text {
@@ -15,9 +16,10 @@ $post-header-height:225px;
 		}
 
 		&__title h1 {
-			font-size: 40px;
+			font-size: 30px;
+			max-width: $max-body-width;
 			@include breakpoint(large) {
-			    font-size: 50px;
+			    font-size: 40px;
 			}
 			/*font-size: 50px;*/
 

diff --git a/mysite/assets/scss/variables/_base.scss b/mysite/assets/scss/variables/_base.scss
@@ -1,4 +1,5 @@
 $max-site-width: 1350px;
+
 $max-body-width: 750px;
 $max-sidemenu-width: 250px;
 
@@ -23,4 +24,5 @@ $expanded-header-foldup: 750px;
 $desktop-show-support: 1045px;
 $expanded-show-support: 850px;
 
-$home-border-panel-foldup: 400px;
+$home-border-panel-foldup: 400px;
+
diff --git a/mysite/assets/scss/variables/_colors.scss b/mysite/assets/scss/variables/_colors.scss
@@ -7,6 +7,7 @@ $_color-palette: (
 	dark-cinnabar-red: #477da3,
 	na-black: #2c2f35,
 	na-off-black: #383b43,
+	na-black-70: #797c82,
 	na-black-40: #abacae,
 	na-black-10: #eaeaeb,
 	na-white: #ffffff,