added responsive styling

ksykes · Jun 19, 2017 · 13c3ecb · 13c3ecb
1 parent 78ebc22
commit 13c3ecb
Show file tree

Hide file tree

Showing 17 changed files with 569 additions and 295 deletions.
diff --git a/.gitignore b/.gitignore
diff --git a/css/partials/_blog.scss b/css/partials/_blog.scss
@@ -15,16 +15,21 @@ ul.blogGallery {
 	&:last-child {
 		margin-right: 0;
 	}
-	p {
+	p, a {
 		color: $lightGrey;
 		font-size: 14px;
 		margin: 20px 0 0 0;
 	}
-	p.readMore {
+	a.readMore {
 		color: $darkGrey;
 		border-bottom: 1px solid $darkGrey;
 		display: inline-block;
 		margin: 30px 0 0 0;
+		text-decoration: none;
+		&:hover {
+			color: $lightGrey;
+			border-bottom: none;
+		}
 	}
 	h6 {
 		font-size: 18px;
@@ -34,4 +39,4 @@ ul.blogGallery {
 	img {
 		max-width: 100%;
 	}
-}
+}
diff --git a/css/partials/_header.scss b/css/partials/_header.scss
@@ -22,7 +22,6 @@ nav {
 		justify-content: space-between;
 		align-items: center;
 	}
-
 }
 
 .navLinks .hamburger {
@@ -35,7 +34,7 @@ nav {
 	width: 33.3%;
 	padding: 0;
 	li {
-		margin-left: 20px;
+		margin-right: 20px;
 	}
 }
 
@@ -44,14 +43,14 @@ nav {
 	margin-left: 40px;
 }
 
-.navLinks li:first-child {
-	// display: none;
-}
-
 .navFunctions {
 	justify-content: flex-end;
 }
 
+.hamburgerLinks {
+	// display: none;
+}
+
 .logo {
 	width: 120px;
 	img {
@@ -74,24 +73,3 @@ nav {
 		text-align: center;
 	}
 }
-
-// BUTTONS
-.headerButtons {
-	position: absolute;
-	bottom: 15px;
-	margin: 0 auto;
-	display: flex;
-	justify-content: space-between;
-	align-content: center;
-	width: 10%;
-}
-
-.sliderNavButtons {
-	width: 12px;
-	height: 12px;
-	border-radius: 50%;
-	background-color: #141122;
-	&:hover {
-		background-color: #88868F;
-	}
-}
diff --git a/css/partials/_intro.scss b/css/partials/_intro.scss
@@ -10,6 +10,10 @@
 
 // GALLERY
 
+.gallery img {
+	display: block;
+}
+
 .introImage {
 	position: relative;
 	p:nth-child(1) {
@@ -21,7 +25,7 @@
 		line-height: 16px;
 	}
 	img {
-		max-width: 100%;
+		width: 100%;
 		overflow: hidden;
 	}
 }
@@ -33,6 +37,11 @@
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%, -50%);
+	&:hover {
+		background: $turquoise;
+		border: 2px solid $lightGrey;
+		color: #fff;
+	}
 }
 
 // .gallery {
@@ -98,17 +107,23 @@
 .introImageGroup2 {
 	width: calc(60% - 2%);
 	// height: 550px;
-	overflow: hidden;
+	// overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	align-content: space-between;
 }
 
 .introImageGroup3 {
 	width: calc(100%);
 	display: flex;
-	overflow: hidden;
+	// overflow: hidden;
+	justify-content: space-between;
+    align-content: space-between;
 	.introImage {
 		margin-bottom: 1%;
 		&:first-child {
 			margin-right: 2%;
 		}
 	}
-}
+}
diff --git a/css/partials/_mediaQueries.scss b/css/partials/_mediaQueries.scss
@@ -1,8 +1,4 @@
 @media (max-width: $breakpointDesktop) {
-	body {
-		background: red;
-	}
-
 	.wrapper {
 		margin: 0 50px;
 	}
@@ -14,18 +10,30 @@
 	.navLinks .hamburger {
 		display: block;
 		margin-left: 0;
+		position: relative;
+		cursor: pointer;
+	}
+
+	.hamburgerLinks {
+		position: absolute;
+		display: block;
+		padding: 1rem 2rem;
+		margin: 0;
+		width: 10rem;
+		background: white;
+		li {
+			list-style: none;
+			margin: 0;
+		}
 	}
 
-	// .navLinks li.hamburger {
-	// 	display: block;
-	// }
+	.turnHamburger {
+		transition: 0.5s, 0.5s, 0.5s, 0.5s;
+		transform: rotate(90deg);
+	}
 
 	.sponsorLogo {
 		margin-right: 40px;
-		// width: calc(100% - 240px);
-		// &:last-of-type {
-		// 	padding-right: 0;
-		// }
 	}
 
 	.subNav {
@@ -51,13 +59,25 @@
 	.testimonials, .video {
 		width: 100%;
 	}
-}
 
-@media (max-width: $breakpointTablet) {
-	body {
-		background: green;
+	// FOOTER
+	.companyInfo {
+		margin-right: 0;
+		margin-bottom: 3rem;
+		padding-right: 2rem;
+		width: calc(50% - 20px);
+		border-right: 2px solid #e6e5e1;
+	}
+	.services, .account {
+		width: calc(25% - 20px);
+		padding-left: 2rem;
+	}
+	.instagram {
+		width: 100%;
 	}
+}
 
+@media (max-width: $breakpointTablet) {
 	.navItems {
 		display: none;
 	}
@@ -69,18 +89,24 @@
 	// FOOTER
 	.companyInfo {
 		width: 100%;
+		padding-right: 0;
+		border: none;
 	}
 
 	.services, .account {
 		width: calc(50% - 10px);
+		padding-left: 0;
+		margin-bottom: 3rem;
 	}
 
-	.instagram {
-		width: 100%;
-	}
-
-	.instagramGallery li {
-		// flex: none;
+	.footerContent {
+		display: block;
+		p {
+			width: 100%;
+			&:last-child {
+				text-align: left;
+			}
+		}
 	}
 
 	// INTRO
@@ -97,16 +123,15 @@
 
 	.gallery {
 		flex-wrap: wrap;
-		// height: 50px;
 	}
 
 	.introImageGroup1 {
 		width: 100%;
 		height: 258px;
 		overflow: hidden;
 		position: relative;
+		margin-right: 0;
 		img {
-			// height: 50%;
 			position: absolute;
 			bottom: -210px;
 			width: 100%;
@@ -154,10 +179,6 @@
 }
 
 @media (max-width: $breakpointPhone) {
-	body {
-		background: blue;
-	}
-
 	.wrapper {
 		margin: 0 5%;
 	}
@@ -271,7 +292,7 @@
 
 	.services, .account {
 		text-align: center;
-		margin-bottom: 15px;
+		padding-right: 0;
 	}
 
 	.servicesList, .accountList {
@@ -284,7 +305,6 @@
 	}
 
 	ul.instagramGallery {
-		// justify-content: space-around;
 		li {
 			flex: 0 1 30%;
 			padding-bottom: 10px;

diff --git a/css/partials/_products.scss b/css/partials/_products.scss
@@ -7,7 +7,6 @@
 	flex-direction: row;
 	justify-content: space-around;
 	align-content: space-between;
-	// align-items: center;
 	flex-wrap: wrap;
 	padding: 0;
 	margin: 0;
@@ -23,10 +22,6 @@
 	}
 }
 
-.galleryItem:nth-child(5n) {
-	// margin-right: 0;
-}
-
 .galleryItem img {
 	max-width: 100%;
 }
@@ -46,6 +41,14 @@
 	background: rgba(26, 26, 38, 0.5);
 	z-index: 5;
 	display: none;
+	p {
+		border: 1.5px solid white;
+		&:hover {
+			border: 1.5px solid $darkGrey;
+			color: black;
+			background: $turquoise;
+		}
+	}
 }
 
 // AFTER EFFECT