move to sass

.gitignore

@@ -2,6 +2,7 @@
 _gh_pages
 _site
 .ruby-version
+.sass-cache
 
 # Numerous always-ignore extensions
 *.diff

_config.yml

@@ -2,3 +2,5 @@ name: Code Guide by @mdo
 description: Standards for developing flexible, durable, and sustainable HTML and CSS.
 url: https://codeguide.co
 permalink: pretty
+sass:
+  style: compressed

_includes/header.html

@@ -1,18 +1,16 @@
 <header class="masthead">
-  <div class="container">
-    <span class="icon">&#9997;</span>
-    <h1>{{ site.name }}</h1>
-    <p class="lead">{{ site.description }}</p>
+  <span class="icon">&#9703;</span>
+  <h1>{{ site.name }}</h1>
+  <p class="lead">{{ site.description }}</p>
 
-    <p class="masthead-links">
-      <a href="https://github.com/mdo/code-guide">
-        <span class="icon icon-github-circled"></span>
-      </a>
-      <a href="https://twitter.com/mdo">
-        <span class="icon icon-twitter"></span>
-      </a>
-    </p>
+  <p class="masthead-links">
+    <a href="https://github.com/mdo/code-guide">
+      <span class="icon icon-github-circled"></span>
+    </a>
+    <a href="https://twitter.com/mdo">
+      <span class="icon icon-twitter"></span>
+    </a>
+  </p>
 
-    <script type="text/javascript" src="//cdn.fusionads.net/fusion.js?zoneid=1332&serve=C6SDP2Y&placement=codeguide" id="_fusionads_js"></script>
-  </div>
+  <script type="text/javascript" src="//cdn.fusionads.net/fusion.js?zoneid=1332&serve=C6SDP2Y&placement=codeguide" id="_fusionads_js"></script>
 </header>

_layouts/default.html

@@ -10,8 +10,8 @@
       {{ site.name }}
     </title>
 
-    <link rel="stylesheet" href="code-guide.css">
-    
+    <link rel="stylesheet" href="cg.css">
+
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

_sass/_inter.scss

@@ -0,0 +1,196 @@
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 100;
+  src: url("https://rsms.me/inter/font-files/Inter-Thin.woff2?v=3.6") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-Thin.woff?v=3.6") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 100;
+  src: url("https://rsms.me/inter/font-files/Inter-ThinItalic.woff2?v=3.6") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-ThinItalic.woff?v=3.6") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 200;
+  src: url("https://rsms.me/inter/font-files/Inter-ExtraLight.woff2?v=3.6") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-ExtraLight.woff?v=3.6") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 200;
+  src: url("https://rsms.me/inter/font-files/Inter-ExtraLightItalic.woff2?v=3.6") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-ExtraLightItalic.woff?v=3.6") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 300;
+  src: url("https://rsms.me/inter/font-files/Inter-Light.woff2?v=3.6") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-Light.woff?v=3.6") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 300;
+  src: url("https://rsms.me/inter/font-files/Inter-LightItalic.woff2?v=3.6") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-LightItalic.woff?v=3.6") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  src: url("https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.6") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.6") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  src: url("https://rsms.me/inter/font-files/Inter-Italic.woff2?v=3.6") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-Italic.woff?v=3.6") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 500;
+  src: url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.6") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-Medium.woff?v=3.6") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 500;
+  src: url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff2?v=3.6") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff?v=3.6") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 600;
+  src: url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.6") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-SemiBold.woff?v=3.6") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 600;
+  src: url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff2?v=3.6") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff?v=3.6") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 700;
+  src: url("https://rsms.me/inter/font-files/Inter-Bold.woff2?v=3.6") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-Bold.woff?v=3.6") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 700;
+  src: url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff2?v=3.6") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff?v=3.6") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 800;
+  src: url("https://rsms.me/inter/font-files/Inter-ExtraBold.woff2?v=3.6") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-ExtraBold.woff?v=3.6") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 800;
+  src: url("https://rsms.me/inter/font-files/Inter-ExtraBoldItalic.woff2?v=3.6") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-ExtraBoldItalic.woff?v=3.6") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 900;
+  src: url("https://rsms.me/inter/font-files/Inter-Black.woff2?v=3.6") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-Black.woff?v=3.6") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 900;
+  src: url("https://rsms.me/inter/font-files/Inter-BlackItalic.woff2?v=3.6") format("woff2"),
+       url("https://rsms.me/inter/font-files/Inter-BlackItalic.woff?v=3.6") format("woff");
+}
+
+/* -------------------------------------------------------
+Variable font.
+Usage:
+
+  html { font-family: 'Inter', sans-serif; }
+  @supports (font-variation-settings: normal) {
+    html { font-family: 'Inter var', sans-serif; }
+  }
+*/
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url("https://rsms.me/inter/font-files/Inter-upright.var.woff2?v=3.6") format("woff2");
+}
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url("https://rsms.me/inter/font-files/Inter-italic.var.woff2?v=3.6") format("woff2");
+}
+
+/* Legacy naming compatibility */
+@font-face {
+  font-family: 'Inter var alt';
+  font-weight: 100 900;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url("https://rsms.me/inter/font-files/Inter-upright.var.woff2?v=3.6") format("woff2");
+}
+@font-face {
+  font-family: 'Inter var alt';
+  font-weight: 100 900;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url("https://rsms.me/inter/font-files/Inter-italic.var.woff2?v=3.6") format("woff2");
+}
+
+
+/* --------------------------------------------------------------------------
+[EXPERIMENTAL] Multi-axis, single variable font.
+
+Slant axis is not yet widely supported (as of February 2019) and thus this
+multi-axis single variable font is opt-in rather than the default.
+
+When using this, you will probably need to set font-variation-settings
+explicitly, e.g.
+
+  * { font-variation-settings: "slnt" 0deg }
+  .italic { font-variation-settings: "slnt" 10deg }
+
+*/
+@font-face {
+  font-family: 'Inter var experimental';
+  font-weight: 100 900;
+  font-style: oblique 0deg 10deg;
+  src: url("https://rsms.me/inter/font-files/Inter.var.woff2?v=3.6") format("woff2");
+}

code-guide.css → _sass/_og.scss

@@ -1,8 +1,5 @@
----
-layout: nil
----
 
-@import url("https://rsms.me/inter/inter.css");
+/* @import url("https://rsms.me/inter/inter.css"); */
 
 html { font-family: 'Inter', sans-serif; }
 
@@ -201,13 +198,8 @@ pre code {
  */
 
 .masthead {
-  padding: 3rem 1rem;
-  color: rgba(255,255,255,.5);
-  text-align: center;
-  background-color: #2a3440;
 }
 .masthead h1 {
-  color: #fff;
   margin-bottom: .25rem;
 }
 .masthead .icon {
@@ -281,5 +273,5 @@ pre code {
  * Syntax highlighting
  */
 
-{% include syntax.css %}
-{% include ads.css %}
+// {% include syntax.css %}
+// {% include ads.css %}

cg.scss

@@ -0,0 +1,14 @@
+---
+# Front matter comment to ensure Jekyll properly reads file.
+---
+
+/*
+ * Code Guide by @mdo
+ * Licensed MIT
+ * https://codeguide.co
+ */
+
+@import "inter";
+@import "ads";
+@import "syntax";
+@import "og";