Added sass partials folder for more modular styles

src/sass/main.scss

@@ -17,73 +17,9 @@ html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
 	background-repeat: no-repeat;
 }
 
-header {
+@import 'partials/header';
-	width: 100%;
+@import 'partials/footer';
-	height: 64px;
+@import 'partials/modal';
-	line-height: 64px;
-	text-align: center;
-	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-}
-
-#header-home {
-	width: 100%;
-	height: 100%;
-	background-color: #424242;
-
-	.title {
-		float: left;
-		height: 100%;
-		color: white;
-		padding: 0 16px 0 16px;
-		font-weight: 300;
-		font-size: 32px;
-		cursor: pointer;
-	}
-
-	.link {
-		z-index: 101;
-		position: relative;
-		float: right;
-		height: 100%;
-		color: white;
-		padding: 0 16px 0 16px;
-		cursor: pointer;
-	}
-
-	.title:hover, .link:hover {
-		cursor: pointer;
-		background-color: #393939;
-	}
-}
-
-#header-room {
-	width: 100%;
-	height: 100%;
-	background-color: #0091ea;
-
-	.left-link, .right-link {
-		float: left;
-		width: 64px;
-		color: white;
-		text-decoration: none;
-		font-weight: 300;
-		font-size: 28px;
-
-		&:hover {
-			cursor: pointer;
-			background-color: #0083d3;
-		}
-	}
-
-	.center-link {
-		display: inline-block;
-		margin: 0 auto;
-		color: white;
-		text-decoration: none;
-		font-weight: 300;
-		font-size: 32px;
-	}
-}
 
 main {
 
@@ -188,173 +124,4 @@ main {
 		cursor: pointer;
 	}
 
-	.modal {
+}
-		position: fixed;
-		display: block;
-		box-shadow: 0 1px 6px 2px rgba(0, 0, 0, 0.25);
-		background-color: white;
-		z-index: 90001;
-		padding: 12px;
-		transition: top 0.5s ease;
-		overflow: hidden;
-
-		.modal-title {
-			text-align: center;
-			font-size: 32px;
-			margin: 0 12px;
-			height: 42px;
-			line-height: 42px;
-			display: inline-block;
-			width: calc(100% - 24px);
-		}
-
-		.modal-exit {
-			cursor: pointer;
-			position: absolute;
-			right: 8px;
-			top: 8px;
-			font-size: 24px;
-		}
-
-		.modal-input {
-			outline: none;
-			border: 1px solid #d3d3d3;
-			padding-left: 8px;
-			font-size: 16px;
-			height: 42px;
-			line-height: 42px;
-			margin: 8px 12px;
-			display: inline-block;
-			width: calc(100% - 24px);
-		}
-
-		.modal-recaptcha {
-			display: block;
-			height: 76px;
-			overflow: hidden;
-			margin: 8px 12px;
-			display: inline-block;
-			width: calc(100% - 24px);
-		}
-
-		.modal-submit {
-			cursor: pointer;
-			color: white;
-			background-color: #1976d2;
-			font-size: 24px;
-			text-align: center;
-			box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
-			display: inline-block;
-			width: calc(100% - 24px);
-			height: 42px;
-			line-height: 42px;
-			margin: 8px 12px;
-
-			&:hover {
-				box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
-			}
-		}
-
-		.modal-account-btn {
-			float: left;
-			width: 144px;
-			height: 144px;
-			line-height: 144px;
-			text-align: center;
-			background-color: #e9e9e9;
-			border: 1px solid #d3d3d3;
-			border-radius: 5px;
-			margin: 12px;
-			color: #3a3a3a;
-			cursor: pointer;
-
-			&:hover {
-				background-color: #dfdfdf;
-			}
-		}
-	}
-}
-
-footer {
-	width: 100%;
-	height: 200px;
-	background-color: #e0e0e0;
-	padding-top: 26px;
-
-	.footer-left {
-		float: left;
-		width: 50%;
-		height: 150px;
-		padding-left: 64px;
-
-		.left-title {
-			font-size: 25px;
-			color: #616161;
-			margin-bottom: 16px;
-		}
-
-		.left-message {
-			font-size: 15px;
-			color: #757575;
-			margin-bottom: 16px;
-		}
-
-		.left-icons {
-			.icon {
-				float: left;
-				font-size: 32px;
-				padding-right: 16px;
-				color: #757575;
-
-				&:hover {
-					cursor: pointer;
-					color: #222222;
-				}
-			}
-		}
-	}
-
-	.footer-right {
-		float: right;
-		width: 50%;
-		height: 150px;
-		padding-left: 64px;
-
-		.right-links {
-			float: right;
-			width: 200px;
-		}
-
-		.links-title {
-			float: right;
-			width: 200px;
-			font-size: 25px;
-			color: #616161;
-			margin-bottom: 8px;
-		}
-
-		.link {
-			float: right;
-			width: 200px;
-			clear: both;
-			font-size: 15px;
-			color: #757575;
-			margin-bottom: 2px;
-
-			&:hover {
-				cursor: pointer;
-				color: #222222;
-			}
-		}
-	}
-
-	.footer-message {
-		float: left;
-		width: 100%;
-		height: 50px;
-		line-height: 50px;
-		padding-left: 128px;
-		background-color: #d3d3d3;
-		color: #757575;
-	}
-}

src/sass/partials/footer.scss

@@ -0,0 +1,83 @@
+footer {
+  width: 100%;
+  height: 200px;
+  background-color: #e0e0e0;
+  padding-top: 26px;
+
+  .footer-left {
+    float: left;
+    width: 50%;
+    height: 150px;
+    padding-left: 64px;
+
+    .left-title {
+      font-size: 25px;
+      color: #616161;
+      margin-bottom: 16px;
+    }
+
+    .left-message {
+      font-size: 15px;
+      color: #757575;
+      margin-bottom: 16px;
+    }
+
+    .left-icons {
+      .icon {
+        float: left;
+        font-size: 32px;
+        padding-right: 16px;
+        color: #757575;
+
+        &:hover {
+          cursor: pointer;
+          color: #222222;
+        }
+      }
+    }
+  }
+
+  .footer-right {
+    float: right;
+    width: 50%;
+    height: 150px;
+    padding-left: 64px;
+
+    .right-links {
+      float: right;
+      width: 200px;
+    }
+
+    .links-title {
+      float: right;
+      width: 200px;
+      font-size: 25px;
+      color: #616161;
+      margin-bottom: 8px;
+    }
+
+    .link {
+      float: right;
+      width: 200px;
+      clear: both;
+      font-size: 15px;
+      color: #757575;
+      margin-bottom: 2px;
+
+      &:hover {
+        cursor: pointer;
+        color: #222222;
+      }
+    }
+  }
+
+  .footer-message {
+    float: left;
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    padding-left: 128px;
+    background-color: #d3d3d3;
+    color: #757575;
+  }
+}

src/sass/partials/header.scss

@@ -0,0 +1,67 @@
+header {
+  width: 100%;
+  height: 64px;
+  line-height: 64px;
+  text-align: center;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+}
+
+#header-home {
+  width: 100%;
+  height: 100%;
+  background-color: #424242;
+
+  .title {
+    float: left;
+    height: 100%;
+    color: white;
+    padding: 0 16px 0 16px;
+    font-weight: 300;
+    font-size: 32px;
+    cursor: pointer;
+  }
+
+  .link {
+    z-index: 101;
+    position: relative;
+    float: right;
+    height: 100%;
+    color: white;
+    padding: 0 16px 0 16px;
+    cursor: pointer;
+  }
+
+  .title:hover, .link:hover {
+    cursor: pointer;
+    background-color: #393939;
+  }
+}
+
+#header-room {
+  width: 100%;
+  height: 100%;
+  background-color: #0091ea;
+
+  .left-link, .right-link {
+    float: left;
+    width: 64px;
+    color: white;
+    text-decoration: none;
+    font-weight: 300;
+    font-size: 28px;
+
+    &:hover {
+      cursor: pointer;
+      background-color: #0083d3;
+    }
+  }
+
+  .center-link {
+    display: inline-block;
+    margin: 0 auto;
+    color: white;
+    text-decoration: none;
+    font-weight: 300;
+    font-size: 32px;
+  }
+}

src/sass/partials/modal.scss

@@ -0,0 +1,87 @@
+main {
+  .modal {
+    position: fixed;
+    display: block;
+    box-shadow: 0 1px 6px 2px rgba(0, 0, 0, 0.25);
+    background-color: white;
+    z-index: 90001;
+    padding: 12px;
+    transition: top 0.5s ease;
+    overflow: hidden;
+
+    .modal-title {
+      text-align: center;
+      font-size: 32px;
+      margin: 0 12px;
+      height: 42px;
+      line-height: 42px;
+      display: inline-block;
+      width: calc(100% - 24px);
+    }
+
+    .modal-exit {
+      cursor: pointer;
+      position: absolute;
+      right: 8px;
+      top: 8px;
+      font-size: 24px;
+    }
+
+    .modal-input {
+      outline: none;
+      border: 1px solid #d3d3d3;
+      padding-left: 8px;
+      font-size: 16px;
+      height: 42px;
+      line-height: 42px;
+      margin: 8px 12px;
+      display: inline-block;
+      width: calc(100% - 24px);
+    }
+
+    .modal-recaptcha {
+      display: block;
+      height: 76px;
+      overflow: hidden;
+      margin: 8px 12px;
+      display: inline-block;
+      width: calc(100% - 24px);
+    }
+
+    .modal-submit {
+      cursor: pointer;
+      color: white;
+      background-color: #1976d2;
+      font-size: 24px;
+      text-align: center;
+      box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
+      display: inline-block;
+      width: calc(100% - 24px);
+      height: 42px;
+      line-height: 42px;
+      margin: 8px 12px;
+
+      &:hover {
+        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
+      }
+    }
+
+    .modal-account-btn {
+      float: left;
+      width: 144px;
+      height: 144px;
+      line-height: 144px;
+      text-align: center;
+      background-color: #e9e9e9;
+      border: 1px solid #d3d3d3;
+      border-radius: 5px;
+      margin: 12px;
+      color: #3a3a3a;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #dfdfdf;
+      }
+    }
+  }
+}