📱 Fixed #3, Now fully supports tablet mode

Author: ajitzero

index.html

@@ -75,7 +75,7 @@
 
 		<div id="Home" class="container-fluid">
 			<div class="row">
-				<div class="intro-content col-sm-10 offset-sm-1 col-md-4 offset-md-1 d-flex justify-content-center align-items-center flex-column">
+				<div class="intro-content col-sm-10 offset-sm-1 col-lg-4 offset-lg-1 d-flex justify-content-center align-items-center flex-column">
 					<div>
 						<img id="landing-logo" src="./assets/brand/main-logo-sq.png" alt="CSI Logo">
 					</div>
@@ -91,7 +91,7 @@ <h3>We are a team of students in GITAM that aim to promote coding as being fun,
 						</p>
 					</div>
 				</div>
-				<div class="intro-content col-sm-10 offset-sm-1 col-md-5 offset-md-1 d-flex justify-content-center align-items-center flex-column">
+				<div class="intro-content col-sm-10 offset-sm-1 col-lg-5 offset-lg-1 d-flex justify-content-center align-items-center flex-column">
 					<h3>You just missed Week #8 🤭</h3>
 					<br />
 					<img style="background: #353b32;" class="poster old-pic" src="assets/poster/w8.png" alt="Rookie Hour #2 Poster">

sass/navbar.sass

@@ -21,7 +21,7 @@
 			.nav-link
 				border-right: 6px $primary-light double
 				color: $primary-light
-				@media( #{$bp-md})
+				@media( #{$bp-lg})
 					border-bottom: 6px $primary-light double
 					border-right: none
 	.navbar-nav, .nav-item:hover

sass/style.sass

@@ -57,6 +57,8 @@ h1, h2, h3, h4, h5, h6
 		padding: 40px 0 0
 	h1
 		font-size: 4rem
+		@media( #{$bp-sm})
+			font-size: 3.5rem
 	p
 		color: $off-light
 		padding: 20px 0
@@ -84,6 +86,7 @@ h1, h2, h3, h4, h5, h6
 #landing-logo
 	box-shadow: 0 0 100px rgba($off-light, 0.5)
 	max-width: 150px
+	margin-top: 70px
 
 #About
 	margin-top: 4rem
@@ -132,25 +135,31 @@ h1, h2, h3, h4, h5, h6
 		box-sizing: border-box
 		display: block
 		float: left
-		margin: 1rem 1.666666%
+		margin: 1rem auto
 		padding: 4rem 0
 		text-align: center
 		transition: all .3s ease-in-out
-		width: 30%
+		width: 100%
 		&:hover
 			background: #FFF
 			box-shadow: 0 10px 30px rgba($off-dark, 0.4)
-		@media( #{$bp-sm})
-			margin: 1rem auto
-			width: 100%
+		@media( #{$bp-md})
+			width: 48%
+			margin: 1rem 1%
+		@media( #{$bp-lg})
+			width: 30%
+			margin: 1rem 1.666666%
 	#suggest-one
-		margin: 1rem 35%
+		margin: 1rem auto
 		padding: 4rem 0
 		text-align: center
-		width: 30%
-		@media( #{$bp-sm})
-			margin: 1rem auto
-			width: 100%
+		width: 100%
+		@media( #{$bp-md})
+			margin: 1rem 25%
+			width: 50%
+		@media( #{$bp-lg})
+			margin: 1rem 20%
+			width: 60%
 
 .primary-card
 	color: #FFF
@@ -205,13 +214,14 @@ h1, h2, h3, h4, h5, h6
 	overflow: hidden
 	transition: all .3s ease-in-out
 	width: 100%
-	&.old-pic
-		filter: grayscale(1)
-		&:hover
-			filter: grayscale(0)
 	@media( #{$bp-md})
 		border-radius: .5rem
 
+.old-pic
+	filter: grayscale(1)
+	&:hover
+		filter: grayscale(0)
+
 #FAQ
 	h1
 		color: $primary-dark
@@ -227,17 +237,16 @@ h1, h2, h3, h4, h5, h6
 	box-sizing: border-box
 	border-radius: 1.2rem
 	border: none
-	// display: block
 	float: left
-	margin: 1rem 1%
-	padding: 2rem 0
+	margin: 1rem auto
+	padding: 2rem .5rem
 	text-align: center
-	width: 48%
+	width: 100%
 	&:hover
 		box-shadow: 0 10px 30px rgba($off-dark, 0.4)
-	@media( #{$bp-sm})
-		margin: 1rem auto
-		width: 100%
+	@media( #{$bp-lg})
+		margin: 1rem 1%
+		width: 48%
 	a.badge
 		color: $off-light
 		box-shadow: 0 2px 10px rgba($off-dark, 0.3)