changed up theming, added fonts, logo, etc

5 files changed, 203 insertions, 127 deletions

diff --git a/package.json b/package.json
index ea756c1..6313564 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
 	"scripts": {
 		"start": "run-p serve watch",
 		"css:dev": "node-sass src/scss/index.scss dist/css/index.css",
-		"js:dev": "cp -r src/js dist/js",
+		"js:dev": "cp -r src/js/* dist/js",
 		"clean": "rm -rf dist/",
 		"mkdirs": "mkdir -p dist/js && mkdir -p dist/css",
 		"copy:assets": "cp -r src/assets/* dist/",
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..da51050
--- /dev/null
+++ b/src/assets/logo.png
diff --git a/src/html/index.html b/src/html/index.html
index 777d1ef..08a7c84 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -19,7 +19,7 @@
 		<nav class="navbar is-fixed-top">
 			<div class="navbar-brand">
 				<a class="navbar-item" href="#">
-					Carpenter Tutoring
+					<img src="/logo.png">
 				</a>
 				<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
 					<span aria-hidden="true"></span>
@@ -37,12 +37,12 @@
 					<a class="navbar-item" href="#about">
 						About
 					</a>
-					<a class="navbar-item" href="#testimonials">
-						Testimonials
-					</a>
-					<a class="navbar-item" href="#contact">
-						Contact Me
-					</a>
+					<!--<a class="navbar-item" href="#testimonials">
+			 Testimonials
+			 </a>-->
+			 <a class="navbar-item" href="#contact">
+				 Contact Me
+			 </a>
 				</div>
 			</div>
 		</nav>
@@ -50,7 +50,7 @@
 		<!-- title, slogan, phone -->
 		<section class="section">
 			<div class="container">
-				<div class="box has-text-right banner">
+				<div class="box has-text-right banner darkteal">
 					<h1 class="title">
 						Carpenter Tutoring
 					</h1>
@@ -67,12 +67,11 @@
 		</section>
 
 		<!-- intro blurb, logo -->
-		<section class="section">
+		<section class="section quiet">
 			<div class="container">
 				<div class="columns">
 					<div class="column">
-						<div class="box">
-							<p>
+							<h2 class="subtitle">
 							Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 							Mauris eget lobortis erat. Vivamus venenatis nec quam vitae
 							vulputate. Class aptent taciti sociosqu ad litora torquent
@@ -82,12 +81,13 @@
 							Phasellus accumsan vitae elit sed fringilla. Nulla
 							porttitor magna eget ipsum ultricies malesuada quis a
 							ipsum.
-							</p>
-						</div>
+							</h2>
 					</div>
-					<div class="column is-narrow">
-						<div class="box translucent">
-							LOGO
+					<div class="column is-one-third">
+						<div class="box">
+							<figure class="image">
+								<img src="/amy.jpg">
+							</figure>
 						</div>
 					</div>
 				</div>
@@ -96,125 +96,140 @@
 
 		<!-- offerings tiles -->
 		<section class="section" id="offerings">
-			<div class="tile is-ancestor">
+			<div class="container">
+				<div class="tile is-ancestor">
 
-				<div class="tile is-parent is-vertical">
-					<div class="tile is-child">
-						<div class="box">
-							<p>
-							Subject Tutoring
-							</p>
-							<p>
-							Tutoring for specific courses or disciplines. Click
-							here for a full list of courses covered.
-							</p>
+					<div class="tile is-parent is-vertical">
+						<div class="tile is-child">
+							<div class="box darkgray">
+								<div class="box darkteal">
+									<p>
+									Subject Tutoring
+									</p>
+									<p>
+									Tutoring for specific courses or disciplines. Click
+									here for a full list of courses covered.
+									</p>
+								</div>
+							</div>
 						</div>
-					</div>
-					<div class="tile is-child">
-						<div class="box">
-							<p>
-							Time Management
-							</p>
-							<p>
-							Personalized plans for managing academics,
-							extracurriculars, and other commitments.
-							</p>
+						<div class="tile is-child">
+							<div class="box darkgray">
+								<div class="box green">
+									<p>
+									Time Management
+									</p>
+									<p>
+									Personalized plans for managing academics,
+									extracurriculars, and other commitments.
+									</p>
+								</div>
+							</div>
 						</div>
 					</div>
-				</div>
 
 
-				<div class="tile is-parent is-vertical">
-					<div class="tile is-child">
-						<div class="box">
-							<p>
-							Study Skills
-							</p>
-							<p>
-							Learn how to make the most of your study time.
-							</p>
+					<div class="tile is-parent is-vertical">
+						<div class="tile is-child">
+							<div class="box darkgray">
+								<div class="box darkgreen">
+									<p>
+									Study Skills
+									</p>
+									<p>
+									Learn how to make the most of your study time.
+									</p>
+								</div>
+							</div>
 						</div>
-					</div>
-					<div class="tile is-child">
-						<div class="box">
-							<p>
-							Academic Coaching
-							</p>
-							<p>
-							Time management and study skills blended with
-							continuing accountability.
-							</p>
+						<div class="tile is-child">
+							<div class="box darkgray">
+								<div class="box darkerteal">
+									<p>
+									Academic Coaching
+									</p>
+									<p>
+									Time management and study skills blended with
+									continuing accountability.
+									</p>
+								</div>
+							</div>
 						</div>
 					</div>
-				</div>
 
 
-				<div class="tile is-parent is-vertical">
-					<div class="tile is-child">
-						<div class="box">
-							<p>
-							College Prep
-							</p>
-							<p>
-							ACT &amp; SAT preparation and assistance with
-							college application essays.
-							</p>
+					<div class="tile is-parent is-vertical">
+						<div class="tile is-child">
+							<div class="box darkgray">
+								<div class="box darkteal">
+									<p>
+									College Prep
+									</p>
+									<p>
+									ACT &amp; SAT preparation and assistance with
+									college application essays.
+									</p>
+								</div>
+							</div>
 						</div>
-					</div>
-					<div class="tile is-child">
-						<div class="box">
-							<p>
-							College-Level Writing
-							</p>
-							<p>
-							Get a head start on meeting professors'
-							expectations.
-							</p>
+						<div class="tile is-child">
+							<div class="box darkgray">
+								<div class="box green">
+									<p>
+									College-Level Writing
+									</p>
+									<p>
+									Get a head start on meeting professors'
+									expectations.
+									</p>
+								</div>
+							</div>
 						</div>
 					</div>
-				</div>
 
 
-				<div class="tile is-parent is-vertical">
-					<div class="tile is-child">
-						<div class="box">
-							<p>
-							Group Webinars
-							</p>
-							<p>
-							Participate in general workshops and pre-planned
-							courses from the comfort of home.
-							</p>
+					<div class="tile is-parent is-vertical">
+						<div class="tile is-child">
+							<div class="box darkgray">
+								<div class="box darkgreen">
+									<p>
+									Group Webinars
+									</p>
+									<p>
+									Participate in general workshops and pre-planned
+									courses from the comfort of home.
+									</p>
+								</div>
+							</div>
 						</div>
-					</div>
-					<div class="tile is-child">
-						<div class="box">
-							<p>
-							Parent Consultations
-							</p>
-							<p>
-							For parents seeking advice for facilitating their child's learning.
-							</p>
+						<div class="tile is-child">
+							<div class="box darkgray">
+								<div class="box darkerteal">
+									<p>
+									Parent Consultations
+									</p>
+									<p>
+									For parents seeking advice for facilitating their child's learning.
+									</p>
+								</div>
+							</div>
 						</div>
 					</div>
-				</div>
 
+				</div>
 			</div>
 		</section>
 
 		<!-- about pic and text -->
-		<section class="section" id="about">
+		<section class="section quiet" id="about">
 			<div class="container">
 				<div class="columns">
 					<div class="column is-one-third">
-						<div class="box">
 							<figure class="image">
-								<img src="/amy.jpg">
+								<img src="/logo.png">
 							</figure>
-						</div>
 					</div>
 					<div class="column">
-						<div class="box">
 							<div class="content">
 								<p>
 								School is tricky, and there is no universal pathway
@@ -256,25 +271,24 @@
 								<p>
 								-- Amy Carpenter
 								</p>
-							</div>
 						</div>
 					</div>
 				</div>
 		</section>
 
 		<!-- testimonial bubbles -->
-		<section class="section" id="testimonials">
-			<div class="container">
-				<div class="blurb">
-					<p>
-					Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-					Mauris eget lobortis erat. Vivamus venenatis nec quam vitae
-					vulputate. Class aptent taciti sociosqu ad litora torquent
-					per conubia nostra, per inceptos himenaeos. 
-					</p>
-				</div>
-			</div>
-		</section>
+		<!--<section class="section" id="testimonials">
+		<div class="container">
+		<div class="blurb">
+		<p>
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+		Mauris eget lobortis erat. Vivamus venenatis nec quam vitae
+		vulputate. Class aptent taciti sociosqu ad litora torquent
+		per conubia nostra, per inceptos himenaeos. 
+		</p>
+		</div>
+		</div>
+		</section>-->
 
 		<!-- contact box, additional contact and tutoring info -->
 		<section class="section" id="contact">
@@ -334,6 +348,6 @@
 			</div>
 		</footer>
 
-		<script src="js/nav-toggle.js"></script>
+		<script src="/js/nav-toggle.js"></script>
 	</body>
 </html>
diff --git a/src/scss/index.scss b/src/scss/index.scss
index ac1ab6d..596993e 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -1,14 +1,24 @@
 @charset "utf-8";
 
 // Import Google Fonts
-@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
+//@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
+@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700&display=swap');
 
-// Set brand colors
-$pine-green: #01646d;
-$midnight-green: #114b5f;
-$eton-blue: #88d498;
-$pastel-gray: #c6dabf;
-$isabelline: #f7f4ea;
+// Palette
+//$pine-green: #01646d;
+//$midnight-green: #114b5f;
+//$eton-blue: #88d498;
+//$pastel-gray: #c6dabf;
+//$isabelline: #f7f4ea;
+$darkteal: rgb(0, 100, 108);
+$green: rgb(88, 169, 143);
+$darkerteal: rgb(29, 133, 137);
+$gray: rgb(157, 210, 211);
+$teal: rgb(58, 165, 166);
+$cyan: rgb(156, 210, 210);
+$darkgray: rgb(127, 177, 181);
+$darkgreen: rgb(59, 136, 114);
+$yellow: rgb(186, 214, 187);
 
 // Update Bulma's global variables
 // $primary: $pine-green;
@@ -19,8 +29,10 @@ $isabelline: #f7f4ea;
 // $danger: $red
 // $dark: $grey-darker
 // $text: $grey-dark
-// $family-sans-serif: "Nunito", sans-serif;
+$family-sans-serif: "PT Sans", sans-serif;
 // $hr-background-color: $primary;
+$title-color: white;
+//$subtitle-color: white;
 
 // $body-background-color: $isabelline;
 
@@ -33,6 +45,43 @@ $isabelline: #f7f4ea;
 @import "../../node_modules/bulma/sass/layout/_all.sass";
 @import "../../node_modules/bulma/sass/grid/_all.sass";
 
+.darkteal {
+	background-color: $darkteal;
+	color: white;
+}
+.green {
+	background-color: $green;
+	color: white;
+}
+.darkerteal {
+	background-color: $darkerteal;
+	color: white;
+}
+.gray {
+	background-color: $gray;
+	color: white;
+}
+.teal {
+	background-color: $teal;
+	color: white;
+}
+.cyan {
+	background-color: $cyan;
+	color: white;
+}
+.darkgray {
+	background-color: $darkgray;
+	color: white;
+}
+.darkgreen {
+	background-color: $darkgreen;
+	color: white;
+}
+.yellow {
+	background-color: $yellow;
+	color: white;
+}
+
 .blurb {
 	background-color: white;
 	clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
@@ -43,6 +92,10 @@ $isabelline: #f7f4ea;
 	clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%);
 }
 
+.quiet {
+	background-color: white;
+}
+
 body {
 	background-image: url("/bg.png");
 }
diff --git a/src/scss/palette.css b/src/scss/palette.css
new file mode 100644
index 0000000..66799cd
--- /dev/null
+++ b/src/scss/palette.css
@@ -0,0 +1,9 @@
+/* Generated with GIMP Palette Export */
+.darkteal { color: rgb(0, 100, 108) }
+.green { color: rgb(88, 169, 143) }
+.darkerteal { color: rgb(29, 133, 137) }
+.gray { color: rgb(157, 210, 211) }
+.teal { color: rgb(58, 165, 166) }
+.cyan { color: rgb(156, 210, 210) }
+.darkgray { color: rgb(127, 177, 181) }
+.darkgreen { color: rgb(59, 136, 114) }