ipotro · ipotro · Apr 14, 2017 · Apr 14, 2017 · Apr 14, 2017 · Apr 27, 2017
diff --git a/.scss-lint.yml b/.scss-lint.yml
@@ -2,7 +2,7 @@ options:
   formatter: stylish
 files:
   ignore: ''
-  include: ['_sass/**/*.s+(a|c)ss', 'tests/**/*.s+(a|c)ss']
+  include: ['_sass/**/*.s+(a|c)ss', 'css/**/*.s+(a|c)ss', 'tests/**/*.s+(a|c)ss']
 rules:
   extends-before-mixins: 2
   extends-before-declarations: 2

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -2,7 +2,7 @@
 <html lang="{% if page.language %}{{ page.language }}{% else %}en{% endif %}" itemscope itemtype='http://schema.org/WebSite' itemid='{{ site.url | append: page.url }}'>
 <head>
   <meta charset='utf-8' />
-  <title>{% if page.title %}{{ page.title }} | The Grid Report{% else %}{{ site.title }} | An Art–Directed Publication{% endif %}</title>
+  <title>{% if page.title %}{{ page.title }} – The Grid Report{% else %}{{ site.title }} | An Art–Directed Publication{% endif %}</title>
   <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
   <meta name='viewport' content='width=device-width,minimum-scale=1,initial-scale=1' />
   <meta name='mobile-web-app-capable' content='yes'>

diff --git a/_posts/2017-03-21-the-path.md b/_posts/2017-03-21-the-path.md
@@ -0,0 +1,34 @@
+---
+layout: default
+language: "en"
+title:  "The Path"
+date:   2017-03-21 10:57:01 -0600
+description: "From “Why?” to “Why not?” to “The Path”. See how I ended choosing Art Direction."
+keywords: art-direction design
+permalink: /the-path/
+image:
+  cover: "thepath.cover.png"
+  height: 1425
+  width: 2430
+custom-css: "the-path"
+---
+
+<main>
+  <article class='content'>
+    <section class='post__cover'>
+      <h1 class='post__title'>The Path</h1>
+    </section>
+    <section class='post'>
+      <h2 class='post__heading'>The Story</h2>
+      <p>How can I have a space on Internet with a design always <em>up-to-date</em>? No, you can’t. I would like to make just one design to my blog and never have the neccesity to do a redesign. Serious, what are you talking about? Why people who write technical blog posts doesn’t care about design? Because content is the king, I know. I would like to write about everything I know and help people to understand difficult topics. If I want to be a great designer how can I communicate my ideas?</p>
+      <blockquote class='post__quote'><p>I want to help people by teaching them skills, so they can go out there and rock the world.</p></blockquote>
+      <p>When I was learning on the web I felt in love with people who write technical posts, and I wanted to have my own space. I started designing everything, the “archive page”, the “about section”, and the “article page” as mainly sections. Once it was finished I was so proud of my work and start coding. Well, that process took a long. And, when I was done with the design, something in my head replied: “Really? That bullshit?”. And process started over. And over. And over. Seriously, I designed my blog like 30 times, and coded like 20 times in the past two years. Even some designs didn’t made it.</p>
+      <p>I was so frustrated that my design–feeling doesn’t convinced me at all. So, one day I found a guy who didn’t have a regular post design —yes, he sometimes wrote shitty articles, but other times, well designed beautiful articles— and he call it “Art Direction”. First impression was: “What. The. Hell.” Therefore, I realized that I was looking for something like that to improve my blog. Immediately I deeped into “Art Direction”. I had no idea I needed it but as soon as I started reading I knew it was love at first time. I have to confess, I had A LOT pillow talks. And so, one night, the idea came to me, finally. Insecurity was stopping me. But Art Direction saved me.</p>
+      <p>My technical blog will be an Art Directed Blog. Are you sure? <em>Yes.</em> Really? Technical posts? <em>Yes!</em> Is that even possible? <em>Course yes!</em> That’s my main goal. Create beautiful content to teach technical stuff, also translate everything into spanish.</p>
+      <p>Keep in touch. You have no idea how amazing this gonna be.</p>
+    </section>
+  </article>
+  <footer>
+    <small>The Grid Report is a publication by Yair.</small>
+  </footer>
+</main>
diff --git a/_sass/components/_subsection.scss b/_sass/components/_subsection.scss
@@ -0,0 +1,18 @@
+@charset 'utf-8';
+
+.language {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 13px;
+
+  &__link {
+    text-decoration: none;
+
+    &:not(:last-of-type) {
+      margin-right: 5px;
+    }
+  }
+
+  &--active {
+    font-weight: bold;
+  }
+}
diff --git a/_sass/utils/_cooper-hewitt.scss b/_sass/utils/_cooper-hewitt.scss
@@ -0,0 +1,13 @@
+@charset 'utf-8';
+
+@font-face {
+  // sass-lint:disable no-url-protocols, no-url-domains, no-duplicate-properties, indentation
+  font-family: 'cooper-hewitt';
+  font-style: normal;
+  font-weight: 600;
+  src: url('https://storage.googleapis.com/ro9ues/fonts/cooper-hewitt/cooperhewitt-bold.eot');
+  src: url('https://storage.googleapis.com/ro9ues/fonts/cooper-hewitt/cooperhewitt-bold.eot?#iefix') format('embedded-opentype'),
+       url('https://storage.googleapis.com/ro9ues/fonts/cooper-hewitt/cooperhewitt-bold.woff') format('woff'),
+       url('https://storage.googleapis.com/ro9ues/fonts/cooper-hewitt/cooperhewitt-bold.svg') format('svg');
+  // sass-lint:enable no-url-protocols, no-url-domains, no-duplicate-properties, indentation
+}
diff --git a/_sass/utils/_karla.scss b/_sass/utils/_karla.scss
@@ -0,0 +1,5 @@
+@charset 'utf-8';
+
+// sass-lint:disable no-url-domains, no-url-protocols
+@import url('https://fonts.googleapis.com/css?family=Karla:400,400i');
+// sass-lint:enable no-url-domains, no-url-protocols
diff --git a/css/the-path.scss b/css/the-path.scss
@@ -0,0 +1,104 @@
+---
+# The Path stylesheet
+---
+
+$color-venice-blue: #0D5287;
+
+@import 'utils/cooper-hewitt';
+@import 'utils/karla';
+@import 'components/subsection';
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  color: $color-venice-blue;
+  font-family: 'Karla';
+  font-size: 100%;
+  font-weight: 400;
+  line-height: 1.5;
+  text-rendering: optimizeLegibility;
+}
+
+h1,
+h2 {
+  font-family: 'cooper-hewitt';
+}
+
+.content {
+  margin: 0 auto;
+  max-width: 1000px;
+}
+
+.post {
+  font-size: 87.5%;
+  margin: 0 auto;
+  max-width: 420px;
+  padding: 0 15px;
+
+  &__cover {
+    height: 100vh;
+  }
+
+  &__heading {
+    font-size: 20px;
+    margin: 80px 0;
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  &__quote {
+    font-size: 25px;
+    font-style: italic;
+    line-height: 1.2;
+    margin: 55px;
+    position: relative;
+
+    &::before {
+      color: lighten($color-venice-blue, 60%);
+      content: '“';
+      font-size: 150px;
+      left: -50px;
+      position: absolute;
+      top: -40px;
+      z-index: -1;
+    }
+  }
+
+  &__title {
+    // sass-lint:disable no-vendor-prefixes
+    -webkit-transform: translateY(-50%);
+    // sass-lint:enable no-vendor-prefixes
+    font-size: 100px;
+    line-height: 0.8;
+    margin: 0;
+    position: relative;
+    text-align: center;
+    text-transform: uppercase;
+    top: 50%;
+    transform: translateY(-50%);
+
+    @media screen and (min-width: 768px) {
+      font-size: 160px;
+    }
+
+    @media screen and (min-width: 1024px) {
+      font-size: 250px;
+    }
+  }
+}
+
+p + p {
+  text-indent: 20px;
+}
+
+footer {
+  // sass-lint:disable no-color-keywords, no-color-literals
+  background-color: $color-venice-blue;
+  color: white;
+  margin-top: 200px;
+  text-align: center;
+  // sass-lint:enable no-color-keywords, no-color-literals
+}