From a64aef0800e215492352fd8cc5db203223ef89da Mon Sep 17 00:00:00 2001 From: Rogues Date: Thu, 13 Apr 2017 20:45:20 -0500 Subject: [PATCH 1/6] =?UTF-8?q?[article]=20Add=20=E2=80=9CThe=20Path?= =?UTF-8?q?=E2=80=9D=20post.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _posts/2017-03-21-the-path.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 _posts/2017-03-21-the-path.md diff --git a/_posts/2017-03-21-the-path.md b/_posts/2017-03-21-the-path.md new file mode 100644 index 0000000..4e1eb59 --- /dev/null +++ b/_posts/2017-03-21-the-path.md @@ -0,0 +1,35 @@ +--- +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" +--- + +
+
+
+

The Path

+
+
+
ENES
+

The Story

+

How can I have a space on Internet with a design always up-to-date? 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?

+

I want to help people by teaching them skills, so they can go out there and rock the world.

+

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.

+

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.

+

My technical blog will be an Art Directed Blog. Are you sure? Yes. Really? Technical posts? Yes! Is that even possible? Course yes! That’s my main goal. Create beautiful content to teach technical stuff, also translate everything into spanish.

+

Keep in touch. You have no idea how amazing this gonna be.

+
+
+
+ The Grid Report is a publication by ROGUES. +
+
From ffd41b703769959eb853d4a87ab8e96dda710acb Mon Sep 17 00:00:00 2001 From: Rogues Date: Thu, 13 Apr 2017 21:20:52 -0500 Subject: [PATCH 2/6] =?UTF-8?q?[style]=20Add=20=E2=80=9CCooper=20Hewitt?= =?UTF-8?q?=E2=80=9D=20and=20=E2=80=9CKarla=E2=80=9D=20fonts.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _sass/utils/_cooper-hewitt.scss | 13 +++++++++++++ _sass/utils/_karla.scss | 5 +++++ 2 files changed, 18 insertions(+) create mode 100644 _sass/utils/_cooper-hewitt.scss create mode 100644 _sass/utils/_karla.scss diff --git a/_sass/utils/_cooper-hewitt.scss b/_sass/utils/_cooper-hewitt.scss new file mode 100644 index 0000000..4f6c30b --- /dev/null +++ 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 new file mode 100644 index 0000000..a287458 --- /dev/null +++ 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 From dbadb6f65cf6fc3cdcea960615ad9d6ee090fade Mon Sep 17 00:00:00 2001 From: Rogues Date: Fri, 14 Apr 2017 00:22:33 -0500 Subject: [PATCH 3/6] =?UTF-8?q?[style]=20Add=20=E2=80=9CThe=20Path?= =?UTF-8?q?=E2=80=9D=20styles.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _sass/components/_subsection.scss | 18 +++++++ css/the-path.scss | 90 +++++++++++++++++++++++++++++++ 2 files changed, 108 insertions(+) create mode 100644 _sass/components/_subsection.scss create mode 100644 css/the-path.scss diff --git a/_sass/components/_subsection.scss b/_sass/components/_subsection.scss new file mode 100644 index 0000000..140b153 --- /dev/null +++ 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/css/the-path.scss b/css/the-path.scss new file mode 100644 index 0000000..78e5144 --- /dev/null +++ b/css/the-path.scss @@ -0,0 +1,90 @@ +--- +# 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; + + &__cover { + height: 100vh; + } + + &__heading { + text-transform: uppercase; + font-size: 20px; + text-align: center; + margin: 80px 0; + } + + &__quote { + font-size: 25px; + font-style: italic; + line-height: 1.2; + position: relative; + margin: 55px; + + &::before { + content: '“'; + font-size: 150px; + position: absolute; + left: -50px; + top: -40px; + z-index: -1; + color: lighten($color-venice-blue, 60%); + } + } + + &__title { + font-size: 250px; + line-height: 0.8; + text-transform: uppercase; + text-align: center; + margin: 0; + position: relative; + top: 50%; + transform: translateY(-50%); + -webkit-transform: translateY(-50%); + } +} + +p + p { + text-indent: 20px; +} + +footer { + margin-top: 200px; + text-align: center; + background-color: $color-venice-blue; + color: white; +} From 259cd743b47c700a4705e2766641e1f9bd7401fb Mon Sep 17 00:00:00 2001 From: Rogues Date: Thu, 27 Apr 2017 17:23:45 -0500 Subject: [PATCH 4/6] [feat] Add Mobile First in Post Title. --- css/the-path.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/css/the-path.scss b/css/the-path.scss index 78e5144..cbde053 100644 --- a/css/the-path.scss +++ b/css/the-path.scss @@ -66,7 +66,8 @@ h1, h2 { } &__title { - font-size: 250px; + // font-size: 250px; + font-size: 100px; line-height: 0.8; text-transform: uppercase; text-align: center; @@ -75,6 +76,14 @@ h1, h2 { top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); + + @media screen and (min-width: 768px) { + font-size: 160px; + } + + @media screen and (min-width: 1024px) { + font-size: 250px; + } } } From 38473a8482050bc5a9b2301ed511cb94b94f8f89 Mon Sep 17 00:00:00 2001 From: Rogues Date: Thu, 27 Apr 2017 17:47:55 -0500 Subject: [PATCH 5/6] =?UTF-8?q?[feat]=20Clean=20and=20refactor=20CSS=20cod?= =?UTF-8?q?e=20from=20=E2=80=9CThe=20Path=E2=80=9D=20article.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .scss-lint.yml | 2 +- css/the-path.scss | 26 ++++++++++++++------------ 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/.scss-lint.yml b/.scss-lint.yml index 6c55dac..af3836c 100644 --- 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/css/the-path.scss b/css/the-path.scss index cbde053..2a112ec 100644 --- a/css/the-path.scss +++ b/css/the-path.scss @@ -22,7 +22,8 @@ body { text-rendering: optimizeLegibility; } -h1, h2 { +h1, +h2 { font-family: 'cooper-hewitt'; } @@ -41,41 +42,42 @@ h1, h2 { } &__heading { - text-transform: uppercase; font-size: 20px; - text-align: center; margin: 80px 0; + text-align: center; + text-transform: uppercase; } &__quote { font-size: 25px; font-style: italic; line-height: 1.2; - position: relative; margin: 55px; + position: relative; &::before { + color: lighten($color-venice-blue, 60%); content: '“'; font-size: 150px; - position: absolute; left: -50px; + position: absolute; top: -40px; z-index: -1; - color: lighten($color-venice-blue, 60%); } } &__title { - // font-size: 250px; + // sass-lint:disable no-vendor-prefixes + -webkit-transform: translateY(-50%); + // sass-lint:enable no-vendor-prefixes font-size: 100px; line-height: 0.8; - text-transform: uppercase; - text-align: center; margin: 0; position: relative; + text-align: center; + text-transform: uppercase; top: 50%; transform: translateY(-50%); - -webkit-transform: translateY(-50%); @media screen and (min-width: 768px) { font-size: 160px; @@ -92,8 +94,8 @@ p + p { } footer { + background-color: $color-venice-blue; + color: white(1); margin-top: 200px; text-align: center; - background-color: $color-venice-blue; - color: white; } From 08a0a3e40708e41ddd0dd95ec03c9387c69eaec9 Mon Sep 17 00:00:00 2001 From: Rogues Date: Sun, 18 Jun 2017 22:32:59 -0500 Subject: [PATCH 6/6] [style] Add horizontal space to content in Mobile First. --- _layouts/default.html | 2 +- _posts/2017-03-21-the-path.md | 3 +-- css/the-path.scss | 5 ++++- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index 7dc63d4..78e6927 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -2,7 +2,7 @@ - {% if page.title %}{{ page.title }} | The Grid Report{% else %}{{ site.title }} | An Art–Directed Publication{% endif %} + {% if page.title %}{{ page.title }} – The Grid Report{% else %}{{ site.title }} | An Art–Directed Publication{% endif %} diff --git a/_posts/2017-03-21-the-path.md b/_posts/2017-03-21-the-path.md index 4e1eb59..4dd6e56 100644 --- a/_posts/2017-03-21-the-path.md +++ b/_posts/2017-03-21-the-path.md @@ -19,7 +19,6 @@ custom-css: "the-path"

The Path

-
ENES

The Story

How can I have a space on Internet with a design always up-to-date? 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?

I want to help people by teaching them skills, so they can go out there and rock the world.

@@ -30,6 +29,6 @@ custom-css: "the-path"
diff --git a/css/the-path.scss b/css/the-path.scss index 2a112ec..2affd33 100644 --- a/css/the-path.scss +++ b/css/the-path.scss @@ -36,6 +36,7 @@ h2 { font-size: 87.5%; margin: 0 auto; max-width: 420px; + padding: 0 15px; &__cover { height: 100vh; @@ -94,8 +95,10 @@ p + p { } footer { + // sass-lint:disable no-color-keywords, no-color-literals background-color: $color-venice-blue; - color: white(1); + color: white; margin-top: 200px; text-align: center; + // sass-lint:enable no-color-keywords, no-color-literals }