working on new pricing table and blogging system

23 files changed, 357 insertions, 179 deletions

diff --git a/.prettierrc b/.prettierrc
index a1f4f2e..439d411 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,8 +1,11 @@
 {
-  "overrides": [
-    {
-      "files": "*.liquid",
-      "options": { "parser": "html" }
-    }
-  ]
+	"proseWrap": "always",
+	"overrides": [
+		{
+			"files": "*.liquid",
+				"options": {
+					"parser": "html" ,
+				}
+		}
+	]
 }
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..6230dd7
--- /dev/null
+++ b/README.md
@@ -0,0 +1,47 @@
+# Getting Started
+
+## Serving the site locally for development work
+
+In the root directory of the repository:
+
+```sh
+$ cobalt serve
+```
+
+## Building the site for produciton
+
+In the root directory of the repository:
+
+```sh
+$ cobalt build
+```
+
+## Updating pages and posts
+
+There is a git-hook on the origin server that rebuilds and publishes the site
+every time a push is made to the master branch. Site contributors need only make
+changes to the text of the pages and posts, publish them with `cobalt`, commit
+them, and then push them to master to see them go live.
+
+Below is a step-by-step guide
+
+### Adding a new post or page
+
+Enter the folder where you want new content to go. Tell `cobalt` to template a
+new post for you. Don't forget to provide a name for the post! You can verify
+the contents if you wish.
+
+```sh
+$ cd posts
+$ cobalt new "A New Tutoring Business"
+[info] Created new posts "posts/a-new-tutoring-business.md"
+$ cat a-new-tutoring-business.md
+---
+title: A New Tutoring Business
+categories:
+  - blog
+layout: post.liquid
+is_draft: true
+---
+(Post text goes here)
+```
diff --git a/TODO.md b/TODO.md
deleted file mode 100644
index 22c4289..0000000
--- a/TODO.md
+++ /dev/null
@@ -1,3 +0,0 @@
-- change figure image of Amy to a media card with social links and caption
-- import only needed components for bulma
-- need to minify scss, js on prod build
diff --git a/_cobalt.yml b/_cobalt.yml
index 107b61a..84cadbf 100644
--- a/_cobalt.yml
+++ b/_cobalt.yml
@@ -5,4 +5,4 @@ site:
 ignore:
   - .prettierrc.yml
   - package.json
-  - TODO.md
+  - README.md
diff --git a/_data/content/blurb.yml b/_data/content/blurb.yml
index 86cdf6f..13bbd9d 100644
--- a/_data/content/blurb.yml
+++ b/_data/content/blurb.yml
@@ -1,15 +1,4 @@
 - Welcome, and thank you for your interest in Carpenter Tutoring!
-- Carpenter Tutoring is a private tutoring service based in Suffolk, Virginia.
-  I offer in-person sessions throughout the Hampton Roads area and remote
-  sessions anywhere in the country.  Most of my offerings are one-on-one, and
-  group sessions and classes are also available.
-- Prices vary based on content area and delivery method but typically range
-  around $30 per hour for group sessions and $50-60 per hour for one-on-one
-  sessions. That being said, I never want cost to be a prohibitive factor. All
-  prices are negotiable, and I offer flexible payment arrangements when needed.
-  No matter your budget, I am confident that we can find an arrangement that
-  will provide your student services without creating financial strain.
-- I invite you to scroll down to learn more about the services I offer, my
-  background, and some of my policies. Thank you for visiting, and please do
-  not hesitate to reach out with any questions. I would be thrilled to assist
-  you!
+- Carpenter Tutoring is a private tutoring service based in Suffolk, Virginia. I offer in-person sessions throughout the Hampton Roads area and remote sessions anywhere in the country. Most of my offerings are one-on-one, and group sessions and classes are also available. No matter your budget, I am confident that we can find an arrangement that will provide your student services without creating financial strain.
+- I invite you to scroll down to learn more about the services I offer, my background, and some of my policies. Thank you for visiting, and please do not hesitate to reach out with any questions. I would be thrilled to assist you!
+- -- Amy Carpenter
diff --git a/_data/offerings.yml b/_data/offerings.yml
index 06a05b5..2f48c81 100644
--- a/_data/offerings.yml
+++ b/_data/offerings.yml
@@ -42,7 +42,7 @@
     and assessments and help craft a schedule week to week for them to
     accomplish their goals. Students come away as more independent and
     confident planners and self-advocates.
-- name: College Prep.
+- name: College Prep
   id: 5
   color: green
   highlight: >
diff --git a/_data/prices.yml b/_data/prices.yml
new file mode 100644
index 0000000..66777c3
--- /dev/null
+++ b/_data/prices.yml
@@ -0,0 +1,16 @@
+- name: "Subject, Time Management, and Study Skills Tutoring"
+  cost:
+    inperson: 60
+    remote: 50
+- name: "Academic Coaching and College Prep"
+  cost:
+    inperson: 70
+    remote: 60
+- name: "Parent Consultations"
+  cost:
+    inperson: 30
+    remote: 25
+- name: "Group Webinars"
+  cost:
+    inperson: 30
+    remote: 30
diff --git a/_defaults/pages.md b/_defaults/pages.md
index ad063cb..7803a97 100644
--- a/_defaults/pages.md
+++ b/_defaults/pages.md
@@ -1,10 +1,5 @@
 ---
 layout: default.liquid
 ---
-## Blog!
+## Page!
 
-{% for post in collections.posts.pages %}
-#### {{post.title}}
-
-[{{ post.title }}]({{ post.permalink }})
-{% endfor %}
diff --git a/_defaults/posts.md b/_defaults/posts.md
index cf88955..0a9825f 100644
--- a/_defaults/posts.md
+++ b/_defaults/posts.md
@@ -1,10 +1,9 @@
 ---
-layout: default.liquid
+layout: post.liquid
+categories: ["blog"]
 
-title: First Post
+title: Post title
 is_draft: true
 ---
 
-# This is our first Post!
-
-Welcome to the first post ever on cobalt.rs!
+(Post text goes here)
diff --git a/_includes/contact-form.liquid b/_includes/contact-form.liquid
index 52f696d..6df4028 100644
--- a/_includes/contact-form.liquid
+++ b/_includes/contact-form.liquid
@@ -1,63 +1,60 @@
-              <form name="inquiry">
-                <div class="field">
-                  <div class="control has-icons-left">
-                    <span class="icon">
-                      <i class="iconify" data-icon="mdi-account"></i>
-                    </span>
-                    <input
-                      name="name"
-                      class="input is-rounded"
-                      type="text"
-                      placeholder="name"
-                    />
-                  </div>
-                </div>
-                <div class="field">
-                  <div class="control has-icons-left">
-                    <span class="icon">
-                      <i class="iconify" data-icon="mdi-email"></i>
-                    </span>
-                    <input
-                      name="from"
-                      class="input is-rounded"
-                      type="text"
-                      placeholder="email address"
-                    />
-                  </div>
-                </div>
-                <div class="field">
-                  <div class="control">
-                    <textarea
-                      name="body"
-                      class="textarea"
-                      placeholder="question/comment"
-                      spellcheck="true"
-                    ></textarea>
-                  </div>
-                </div>
-                <div class="field is-grouped is-grouped-right">
-                  <div class="control">
-                    <button class="button is-rounded is-primary" type="submit">
-                      <span class="icon">
-                        <i class="iconify" data-icon="mdi-check"></i>
-                      </span>
-                      <span>
-                        Submit
-                      </span>
-                    </button>
-                  </div>
-                </div>
+<!DOCTYPE html>
+<form name="inquiry">
+  <div class="field">
+    <div class="control has-icons-left">
+      <span class="icon">
+        <i class="iconify" data-icon="mdi-account"></i>
+      </span>
+      <input
+        name="name"
+        class="input is-rounded"
+        type="text"
+        placeholder="name"
+      />
+    </div>
+  </div>
+  <div class="field">
+    <div class="control has-icons-left">
+      <span class="icon">
+        <i class="iconify" data-icon="mdi-email"></i>
+      </span>
+      <input
+        name="from"
+        class="input is-rounded"
+        type="text"
+        placeholder="email address"
+      />
+    </div>
+  </div>
+  <div class="field">
+    <div class="control">
+      <textarea
+        name="body"
+        class="textarea"
+        placeholder="question/comment"
+        spellcheck="true"
+      ></textarea>
+    </div>
+  </div>
+  <div class="field is-grouped is-grouped-right">
+    <div class="control">
+      <button class="button is-rounded is-primary" type="submit">
+        <span class="icon">
+          <i class="iconify" data-icon="mdi-check"></i>
+        </span>
+        <span>
+          Submit
+        </span>
+      </button>
+    </div>
+  </div>
 
-                <div
-                  id="errorBox"
-                  class="notification is-danger"
-                  style="display: none;"
-                ></div>
-                <div
-                  id="successBox"
-                  class="notification is-success"
-                  style="display: none;"
-                >
-                  Message sent!
-                </div>
-              </form>
+  <div
+    id="errorBox"
+    class="notification is-danger"
+    style="display: none;"
+  ></div>
+  <div id="successBox" class="notification is-success" style="display: none;">
+    Message sent!
+  </div>
+</form>
diff --git a/_includes/footer.liquid b/_includes/footer.liquid
index c086a98..c895449 100644
--- a/_includes/footer.liquid
+++ b/_includes/footer.liquid
@@ -1,13 +1,20 @@
+<!DOCTYPE html>
 <footer class="footer">
-	<div class="content has-text-centered">
-		<p>
-		&copy; 2020 Carpenter Tutoring, LLC. All rights reserved.
-		</p>
-		<p>
-		Something wrong?
-		<a href="mailto:webmaster@carpentertutoring.com">
-			Tell the webmaster.
-		</a>
-		</p>
-	</div>
+  <div class="content has-text-centered">
+    <div class="level">
+      <div class="level-item">
+        <p>
+          &copy; {{ "now" | date: "%Y" }} Carpenter Tutoring. All rights
+          reserved.
+        </p>
+      </div>
+      <div class="level-item">
+        <p>
+          <a href="mailto:webmaster@carpentertutoring.com">
+            Questions, Comments, Feedback
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
 </footer>
diff --git a/_includes/head.liquid b/_includes/meta.liquid
index 17245e8..6f0cf4b 100644
--- a/_includes/head.liquid
+++ b/_includes/meta.liquid
@@ -1,10 +1,9 @@
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
-<meta property="og:type" content="website" />
+<meta property="og:description" content="Tutoring Excellence in Hampton Roads." />
+<meta property="og:image" content="" />
 <meta property="og:site_name" content="Carpenter Tutoring" />
 <meta property="og:title" content="Carpenter Tutoring" />
-<meta property="og:description" content="" />
-<meta property="og:url" content="" />
-<meta property="og:image" content="" />
-<link rel="stylesheet" href="index.css" />
+<meta property="og:type" content="website" />
+<meta property="og:url" content="https://carpentertutoring.com" />
diff --git a/_includes/nav.liquid b/_includes/nav.liquid
index 982660b..8d3f9cb 100644
--- a/_includes/nav.liquid
+++ b/_includes/nav.liquid
@@ -1,26 +1,30 @@
+<!DOCTYPE html>
 <nav class="navbar is-fixed-top">
-	<div class="navbar-brand">
-		<a class="navbar-item" href="/#">
-			<img src="/assets/logo-simple.png" />
-		</a>
-		<a role="button" class="navbar-burger" data-target="navMenu">
-			<span></span>
-			<span></span>
-			<span></span>
-		</a>
-	</div>
-	<div class="navbar-menu" id="navMenu">
-		<div class="navbar-start"></div>
-		<div class="navbar-end">
-			<a class="navbar-item" href="/#offerings">
-				Offerings
-			</a>
-			<a class="navbar-item" href="/#about">
-				About
-			</a>
-			<a class="navbar-item" href="/#contact">
-				Contact Me
-			</a>
-		</div>
-	</div>
+  <div class="navbar-brand">
+    <a class="navbar-item" href="/#">
+      <img src="/assets/logo-simple.png" />
+    </a>
+    <a role="button" class="navbar-burger" data-target="navMenu">
+      <span></span>
+      <span></span>
+      <span></span>
+    </a>
+  </div>
+  <div class="navbar-menu" id="navMenu">
+    <div class="navbar-start"></div>
+    <div class="navbar-end">
+      <a class="navbar-item" href="/blog">
+        Blog
+      </a>
+      <a class="navbar-item" href="/#offerings">
+        Offerings
+      </a>
+      <a class="navbar-item" href="/#about">
+        About
+      </a>
+      <a class="navbar-item" href="/#contact">
+        Contact Me
+      </a>
+    </div>
+  </div>
 </nav>
diff --git a/_includes/pricing-table.liquid b/_includes/pricing-table.liquid
new file mode 100644
index 0000000..3772847
--- /dev/null
+++ b/_includes/pricing-table.liquid
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+{% for each in site.data.prices %}
+<table class="table is-striped is-bordered">
+  <thead>
+    <tr>
+      <th colspan="3" class="has-text-centered">
+        {{ each.name }}
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    {% if each.cost.inperson != each.cost.remote %}
+    <tr>
+      <th style="text-align: right;">
+        In-Person
+      </th>
+      <td>
+        ${{ each.cost.inperson}}/hr
+      </td>
+    </tr>
+    {% endif %}
+    <tr>
+      <th style="text-align: right;">
+        Remote
+      </th>
+
+      <td>
+        ${{ each.cost.remote }}/hr
+      </td>
+    </tr>
+  </tbody>
+</table>
+{% endfor %}
diff --git a/_includes/social-sidebar.liquid b/_includes/social-sidebar.liquid
new file mode 100644
index 0000000..8cb2c15
--- /dev/null
+++ b/_includes/social-sidebar.liquid
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<h1 class="title">
+  Social
+</h1>
+
+<i class="iconify" data-icon="mdi-rss"></i>
+<i class="iconify" data-icon="mdi-facebook"></i>
+<i class="iconify" data-icon="mdi-linkedin"></i>
diff --git a/_layouts/blog.liquid b/_layouts/blog.liquid
new file mode 100644
index 0000000..3f94bd8
--- /dev/null
+++ b/_layouts/blog.liquid
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>{{ page.title }}</title>
+    <link rel="stylesheet" href="/styles/main.css" />
+    {% include "meta.liquid" %}
+  </head>
+  <body class="has-navbar-fixed-top is-size-4-desktop">
+    {% include "nav.liquid" %}
+
+    <section class="section">
+      <div class="container">
+        <div class="columns">
+          <div class="column">
+            <div class="columns is-multiline is-centered">
+              {% for post in collections.posts.pages %}
+              <div class="column">
+                {{ post.title }}
+              </div>
+              {% endfor %}
+            </div>
+          </div>
+          <div class="column is-narrow">
+            {% include "social-sidebar.liquid" %}
+          </div>
+        </div>
+      </div>
+    </section>
+    <script src="/scripts/iconify.min.js" type="text/javascript"></script>
+  </body>
+</html>
diff --git a/_layouts/index.liquid b/_layouts/index.liquid
index 80483bb..2c944b8 100644
--- a/_layouts/index.liquid
+++ b/_layouts/index.liquid
@@ -2,7 +2,8 @@
 <html lang="en">
   <head>
     <title>{{ page.title }}</title>
-    {% include "head.liquid" %} {% include "style.liquid" %}
+    <link rel="stylesheet" href="/styles/index.css" />
+    {% include "meta.liquid" %}
   </head>
 
   <body class="has-navbar-fixed-top is-size-4-desktop">
@@ -38,11 +39,15 @@
       <div class="container">
         <div class="columns">
           <div class="column">
+            <!-- intro blurb -->
             <div class="content">
               {% for line in site.data.content.blurb %}
               <p>{{ line }}</p>
               {% endfor %}
             </div>
+            <hr />
+            <!-- pricing table -->
+            {% include "pricing-table.liquid" %}
           </div>
           <div class="column is-one-third">
             <div class="box">
diff --git a/_layouts/post.liquid b/_layouts/post.liquid
new file mode 100644
index 0000000..8b79e63
--- /dev/null
+++ b/_layouts/post.liquid
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>{{ page.title }}</title>
+    </head>
+    <body>
+    <div>
+      <h2>{{ page.title }}</h2>
+      {{ page.content }}
+    </div>
+  </body>
+</html>
diff --git a/pages/blog.md b/pages/blog.md
new file mode 100644
index 0000000..9fa813c
--- /dev/null
+++ b/pages/blog.md
@@ -0,0 +1,13 @@
+---
+title: Blog
+layout: blog.liquid
+permalink: "/{{slug}}"
+---
+
+## Blog!
+
+{% for post in collections.posts.pages %}
+
+#### {{post.title}}
+
+[{{ post.title }}](/{{ post.permalink }}) {% endfor %}
diff --git a/posts/2020-06-05-a-new-tutoring-business.md b/posts/2020-06-05-a-new-tutoring-business.md
new file mode 100644
index 0000000..06da162
--- /dev/null
+++ b/posts/2020-06-05-a-new-tutoring-business.md
@@ -0,0 +1,9 @@
+---
+title: A New Tutoring Business
+categories:
+  - blog
+published_date: "2020-06-05 01:46:56 +0000"
+layout: post.liquid
+is_draft: false
+---
+(Post text goes here)
diff --git a/posts/2020-06-05-introduction-post.md b/posts/2020-06-05-introduction-post.md
new file mode 100644
index 0000000..cd563b6
--- /dev/null
+++ b/posts/2020-06-05-introduction-post.md
@@ -0,0 +1,9 @@
+---
+title: Introduction Post
+categories:
+  - blog
+published_date: "2020-06-05 01:47:01 +0000"
+layout: post.liquid
+is_draft: false
+---
+(Post text goes here)
diff --git a/styles/index.scss b/styles/index.scss
index ee298cc..ba30ea2 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -1,45 +1,7 @@
 @charset "utf-8";
 
-// Google Fonts
-@import url("https://fonts.googleapis.com/css?family=Architects+Daughter|Indie+Flower|PT+Sans&display=swap");
-
-// Palette
-$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: $teal;
-$link: $darkteal;
-// $info: $cyan
-$success: $green;
-// $warning: $yellow
-// $danger: $red
-// $dark: $grey-darker
-// $text: $grey-dark
-$family-sans-serif: "PT Sans", sans-serif;
-// $hr-background-color: $primary;
-$title-color: $darkteal;
-$title-family: "Architects Daughter", cursive;
-$subtitle-color: $darkteal;
-$subtitle-family: "Indie Flower", cursive;
-//$body-font-size: 1.8rem;
-// $body-background-color: $isabelline;
-
-// Import only what you need from Bulma
-@import "../_bulma/node_modules/bulma/sass/utilities/_all.sass";
-@import "../_bulma/node_modules/bulma/sass/base/_all.sass";
-@import "../_bulma/node_modules/bulma/sass/elements/_all.sass";
-@import "../_bulma/node_modules/bulma/sass/form/_all.sass";
-@import "../_bulma/node_modules/bulma/sass/components/_all.sass";
-@import "../_bulma/node_modules/bulma/sass/layout/_all.sass";
-@import "../_bulma/node_modules/bulma/sass/grid/_all.sass";
+// Import main
+@import "./main.scss";
 
 .offering {
   color: white;
diff --git a/styles/main.scss b/styles/main.scss
new file mode 100644
index 0000000..3aca98a
--- /dev/null
+++ b/styles/main.scss
@@ -0,0 +1,42 @@
+@charset "utf-8";
+
+// Google Fonts
+@import url("https://fonts.googleapis.com/css?family=Architects+Daughter|Indie+Flower|PT+Sans&display=swap");
+
+// Palette
+$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: $teal;
+$link: $darkteal;
+// $info: $cyan
+$success: $green;
+// $warning: $yellow
+// $danger: $red
+// $dark: $grey-darker
+// $text: $grey-dark
+$family-sans-serif: "PT Sans", sans-serif;
+// $hr-background-color: $primary;
+$title-color: $darkteal;
+$title-family: "Architects Daughter", cursive;
+$subtitle-color: $darkteal;
+$subtitle-family: "Indie Flower", cursive;
+//$body-font-size: 1.8rem;
+// $body-background-color: $isabelline;
+
+// Import only what you need from Bulma
+@import "../_bulma/node_modules/bulma/sass/utilities/_all.sass";
+@import "../_bulma/node_modules/bulma/sass/base/_all.sass";
+@import "../_bulma/node_modules/bulma/sass/elements/_all.sass";
+@import "../_bulma/node_modules/bulma/sass/form/_all.sass";
+@import "../_bulma/node_modules/bulma/sass/components/_all.sass";
+@import "../_bulma/node_modules/bulma/sass/layout/_all.sass";
+@import "../_bulma/node_modules/bulma/sass/grid/_all.sass";