meliora 0.2.0

data/_includes/styles/deeppurple.scss

@@ -0,0 +1,16 @@
+// matthewgraybosch.com
+// uses ITCSS architecture.
+// See https://medium.com/@jordankoschei/how-i-shrank-my-css-by-84kb-by-refactoring-with-itcss-2e8dafee123a#.dm4sr8ywt for details.
+
+// Material design colors for a consistent look. 
+// All color schemes live in _sass/material-colors.
+// To change color scheme, change this import statement.
+@import "material-colors/deeppurple";
+// Everything else.
+@import "settings";
+@import "tools";
+@import "generic";
+@import "base";
+@import "objects";
+@import "components";
+@import "trumps";

data/_includes/styles/green.scss

@@ -0,0 +1,16 @@
+// matthewgraybosch.com
+// uses ITCSS architecture.
+// See https://medium.com/@jordankoschei/how-i-shrank-my-css-by-84kb-by-refactoring-with-itcss-2e8dafee123a#.dm4sr8ywt for details.
+
+// Material design colors for a consistent look. 
+// All color schemes live in _sass/material-colors.
+// To change color scheme, change this import statement.
+@import "material-colors/green";
+// Everything else.
+@import "settings";
+@import "tools";
+@import "generic";
+@import "base";
+@import "objects";
+@import "components";
+@import "trumps";

data/_includes/styles/indigo.scss

@@ -0,0 +1,16 @@
+// matthewgraybosch.com
+// uses ITCSS architecture.
+// See https://medium.com/@jordankoschei/how-i-shrank-my-css-by-84kb-by-refactoring-with-itcss-2e8dafee123a#.dm4sr8ywt for details.
+
+// Material design colors for a consistent look. 
+// All color schemes live in _sass/material-colors.
+// To change color scheme, change this import statement.
+@import "material-colors/indigo";
+// Everything else.
+@import "settings";
+@import "tools";
+@import "generic";
+@import "base";
+@import "objects";
+@import "components";
+@import "trumps";

data/_includes/styles/lightblue.scss

@@ -0,0 +1,16 @@
+// matthewgraybosch.com
+// uses ITCSS architecture.
+// See https://medium.com/@jordankoschei/how-i-shrank-my-css-by-84kb-by-refactoring-with-itcss-2e8dafee123a#.dm4sr8ywt for details.
+
+// Material design colors for a consistent look. 
+// All color schemes live in _sass/material-colors.
+// To change color scheme, change this import statement.
+@import "material-colors/lightblue";
+// Everything else.
+@import "settings";
+@import "tools";
+@import "generic";
+@import "base";
+@import "objects";
+@import "components";
+@import "trumps";

data/_includes/styles/orange.scss

@@ -0,0 +1,16 @@
+// matthewgraybosch.com
+// uses ITCSS architecture.
+// See https://medium.com/@jordankoschei/how-i-shrank-my-css-by-84kb-by-refactoring-with-itcss-2e8dafee123a#.dm4sr8ywt for details.
+
+// Material design colors for a consistent look. 
+// All color schemes live in _sass/material-colors.
+// To change color scheme, change this import statement.
+@import "material-colors/orange";
+// Everything else.
+@import "settings";
+@import "tools";
+@import "generic";
+@import "base";
+@import "objects";
+@import "components";
+@import "trumps";

data/_includes/styles/pink.scss

@@ -0,0 +1,16 @@
+// matthewgraybosch.com
+// uses ITCSS architecture.
+// See https://medium.com/@jordankoschei/how-i-shrank-my-css-by-84kb-by-refactoring-with-itcss-2e8dafee123a#.dm4sr8ywt for details.
+
+// Material design colors for a consistent look. 
+// All color schemes live in _sass/material-colors.
+// To change color scheme, change this import statement.
+@import "material-colors/pink";
+// Everything else.
+@import "settings";
+@import "tools";
+@import "generic";
+@import "base";
+@import "objects";
+@import "components";
+@import "trumps";

data/_includes/styles/purple.scss

@@ -0,0 +1,16 @@
+// matthewgraybosch.com
+// uses ITCSS architecture.
+// See https://medium.com/@jordankoschei/how-i-shrank-my-css-by-84kb-by-refactoring-with-itcss-2e8dafee123a#.dm4sr8ywt for details.
+
+// Material design colors for a consistent look. 
+// All color schemes live in _sass/material-colors.
+// To change color scheme, change this import statement.
+@import "material-colors/purple";
+// Everything else.
+@import "settings";
+@import "tools";
+@import "generic";
+@import "base";
+@import "objects";
+@import "components";
+@import "trumps";

data/_includes/styles/red.scss

@@ -0,0 +1,16 @@
+// matthewgraybosch.com
+// uses ITCSS architecture.
+// See https://medium.com/@jordankoschei/how-i-shrank-my-css-by-84kb-by-refactoring-with-itcss-2e8dafee123a#.dm4sr8ywt for details.
+
+// Material design colors for a consistent look. 
+// All color schemes live in _sass/material-colors.
+// To change color scheme, change this import statement.
+@import "material-colors/red";
+// Everything else.
+@import "settings";
+@import "tools";
+@import "generic";
+@import "base";
+@import "objects";
+@import "components";
+@import "trumps";

data/_includes/styles/teal.scss

@@ -0,0 +1,16 @@
+// matthewgraybosch.com
+// uses ITCSS architecture.
+// See https://medium.com/@jordankoschei/how-i-shrank-my-css-by-84kb-by-refactoring-with-itcss-2e8dafee123a#.dm4sr8ywt for details.
+
+// Material design colors for a consistent look. 
+// All color schemes live in _sass/material-colors.
+// To change color scheme, change this import statement.
+@import "material-colors/teal";
+// Everything else.
+@import "settings";
+@import "tools";
+@import "generic";
+@import "base";
+@import "objects";
+@import "components";
+@import "trumps";

data/_includes/thanks-for-reading.html

@@ -0,0 +1,4 @@
+<section id="article_footer_thanks">
+  <h2>Thanks For Reading</h2>
+  <p>If you enjoyed this post and want to continue the conversation, I'd love it if you linked to my post and quoted it in your own blog or timeline. Thanks!</p>
+</section>

data/_includes/top-link.html

@@ -0,0 +1 @@
+<div id="top_link"><a href="#page_header" class="link">Back to Top &uarr;</a></div>

data/_includes/youtube.html

@@ -0,0 +1,6 @@
+<figure class="bg-material50 border-material400">
+  <iframe class="video-embed" width="560" height="315" src="{{ include.src }}" frameborder="0" allowfullscreen> </iframe>
+  {% if include.caption %}
+  <figcaption>{{ include.caption | markdownify }}</figcaption>
+  {% endif %}
+</figure>

data/_layouts/archive.html

@@ -0,0 +1,11 @@
+---
+layout: default
+---
+<header id="page_header">
+  {% include skip-nav.html %}
+  {% include nav-menu.html id="page_nav" aria_label="Page Menu" class="flat_nav_menu" menu="archive" %}
+</header>
+<main id="main_content">
+  {{ content }}
+</main>
+{% include footer.html %}

data/_layouts/default.html

@@ -0,0 +1,13 @@
+---
+---
+<!doctype html>
+<html lang="{{ site.locale | slice: 0,2 | default: "en" }}">
+  <head>
+    {% include head.html %}
+    {% include styles.html %}
+  </head>
+  <body>
+    {{ content }}
+    {% include scripts.html %}
+  </body>
+</html>

data/_layouts/home.html

@@ -0,0 +1,12 @@
+---
+layout: default
+---
+<header id="page_header">
+  {% include skip-nav.html %}
+  {% include nav-menu.html id="page_nav" aria_label="Page Menu" class="flat_nav_menu" menu="home" %}
+</header>
+{% include noscript.html %}
+<main id="main_content">
+  {{ content }}
+</main>
+{% include footer.html %}

data/_layouts/page.html

@@ -0,0 +1,12 @@
+---
+layout: default
+---
+<header id="page_header">
+  {% include skip-nav.html %}
+  {% include nav-menu.html id="page_nav" aria_label="Page Menu" class="flat_nav_menu" menu="page" %}
+</header>
+{% include noscript.html %}
+<main id="main_content">
+  {{ content }}
+</main>
+{% include footer.html %}

data/_layouts/post.html

@@ -0,0 +1,24 @@
+---
+layout: default
+---
+<header id="page_header">
+  {% include skip-nav.html %}
+  {% include nav-menu.html id="page_nav" aria_label="Page Menu" class="flat_nav_menu" menu="blog" %}
+</header>
+{% include noscript.html %}
+<main id="main_content">
+  <article>
+    <header id="article_header">
+      <h1>{% unless page.altTitle %}{{ page.title }}{% else %}{{ page.altTitle | markdownify | remove: '<p>' | remove: '</p>' | strip }}{% endunless %}</h1>
+      {% include post-meta.html %}
+    </header>
+    <section id="article_content">
+      {{ content }}
+    </section>
+    <footer id="article_footer">
+      {% include thanks-for-reading.html %}
+      {% include post-info.html %}
+    </footer>
+  </article>
+</main>
+{% include footer.html %}

data/_sass/meliora.scss

@@ -0,0 +1,11 @@
+// matthewgraybosch.com
+// uses ITCSS architecture.
+// See https://medium.com/@jordankoschei/how-i-shrank-my-css-by-84kb-by-refactoring-with-itcss-2e8dafee123a#.dm4sr8ywt for details.
+
+@import "meliora/settings";
+@import "meliora/tools";
+@import "meliora/generic";
+@import "meliora/base";
+@import "meliora/objects";
+@import "meliora/components";
+@import "meliora/trumps";

data/_sass/meliora/_base.scss

@@ -0,0 +1,120 @@
+/*
+ * Base. These are element styles — no classes or IDs. Base typography styles go here, as well as anything needed to style raw elements.
+ * See https://medium.com/@jordankoschei/how-i-shrank-my-css-by-84kb-by-refactoring-with-itcss-2e8dafee123a#.tbp9yocm3 for details.
+ */
+
+html {
+  font-size: $fontSize;
+
+  // body-border shenanigans from https://css-tricks.com/body-border/
+  body:before, body:after {
+    content: "";
+    position: fixed;
+    background: $material500;
+    left: 0;
+    right: 0;
+    height: 5px;
+  }
+
+  body:before {
+      top: 0;
+  }
+
+  body:after {
+      bottom: 0;
+  }
+
+  body {
+    font-family: $systemSansSerif;
+    line-height: $lineHeight;
+    max-width: $maxWidth;
+    margin: $margin;
+    padding: $padding;
+    color: $materialGray900;
+    background-color: $materialWhite;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-feature-settings: "kern" 1;
+    -moz-font-feature-settings: "kern" 1;
+    -o-font-feature-settings: "kern" 1;
+    font-feature-settings: "kern" 1;
+    font-kerning: normal;
+
+    h1, h2, h3, h4, h5, h6 {
+      color: $material900;
+      line-height: $headingLineHeight;
+      font-family: $systemSerif;
+    }
+
+    code, pre {
+      font-family: $systemMonospace;
+    }
+
+    h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, %vertical-rhythm {
+      margin-bottom: $spacing-unit / 2;
+    }
+
+    /**
+    * Blockquotes
+    */
+    blockquote {
+      color: $material700;
+      border-left: 4px solid $material200;
+      padding-left: $spacing-unit / 2;
+      font-style: italic;
+
+      > :last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    footer {
+      font-size: .75rem;
+    }
+
+    /**
+      * Code formatting
+      */
+    pre {
+      margin-left: 0;
+      margin-right: 0;
+      padding: .25rem;
+      width: 100%;
+      max-width: 100%;
+      border: 1px solid $material200;
+      background-color: $materialWhite;
+      overflow: auto;
+    }
+
+    form, figure {
+      margin-left: 0;
+      margin-right: 0;
+      border-width: 1px; 
+      border-style: solid;
+      padding: .5rem;
+      max-width: 100%;
+    }
+
+    figcaption {
+      font-size: .85rem;
+      text-align: right;
+    }
+  
+    img, iframe {
+      max-width: 100%;
+      vertical-align: middle;
+      border: 1px solid $material300;
+    }
+
+    nav {
+      width: 100%;
+      ul { 
+        list-style: none; 
+        padding: 0px; 
+        margin: 0px;
+        li {
+          line-height: 2;
+        }
+      }
+    }
+  }
+}

data/_sass/meliora/_components.scss

@@ -0,0 +1,87 @@
+/*
+ * Components. This is mostly a cosmetic layer — this is where I included more specific styling instructions for objects. Without the components layer, the site would still have its structure, but would look like a gray-box wireframe.
+ * See https://medium.com/@jordankoschei/how-i-shrank-my-css-by-84kb-by-refactoring-with-itcss-2e8dafee123a#.tbp9yocm3 for details.
+ */
+ 
+.small, .reading_time {
+  font-size: .75rem;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.normal_font_size {
+  font-size: $fontSize;
+}
+
+.hidden {
+  display: none;
+}
+
+.float_right {
+  float: right;
+}
+
+.container::before, .container::after {
+    content:"";
+    display:table;
+}
+.container::after {
+    clear:both;
+}
+.container {
+    zoom:1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+.form_row {
+  width: 100%;
+  
+  label {
+    font-weight: bold;
+    font-size: .9rem;
+  }
+
+  label, input, textarea {
+    width: 100%;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
+  button {
+    width: 120px;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+}
+
+.right_align_contents, .form_row_right_align {
+  text-align: right;
+}
+
+.center_contents {
+  text-align: center;
+}
+
+.post_list {
+  margin-bottom: 2.5rem;
+}
+
+#article_footer {
+  margin-top: 1rem;
+  border-top: 1px solid $material800;
+
+  h2 {
+    font-size: $fontSize;
+  }
+}
+
+#page_footer {
+  margin-top: 1.5rem;
+  border-top: 2px solid $material500;
+  text-align: center;
+}