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/_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 new file mode 100644 index 0000000..4dd6e56 --- /dev/null +++ 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" +--- + +
+
+
+

The Path

+
+
+

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.

+
+
+ +
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/_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 diff --git a/css/the-path.scss b/css/the-path.scss new file mode 100644 index 0000000..2affd33 --- /dev/null +++ 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 +}