Merge tag 'v1.0.0'

Version 1.0.0, initial

.editorconfig

+# Check http://editorconfig.org for more information
+# This is the main config file for this project:
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+trim_trailing_whitespace = true
+end_of_line = lf
+insert_final_newline = true
+
+[*.html]
+indent_size = 2
+
+[*.scss]
+indent_size = 2

.gitignore

+#### joe made this: http://goel.io/joe
+
+#####=== Jekyll ===#####
+
+_site/
+.sass-cache/
+
+#####=== Sass ===#####
+
+.sass-cache
+*.css.map
+
+#####=== OSX ===#####
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear on external disk
+.Spotlight-V100
+.Trashes
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+#####=== Windows ===#####
+# Windows image file caches
+Thumbs.db
+ehthumbs.db
+
+# Folder config file
+Desktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+#####=== Linux ===#####
+*~
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+#####=== JetBrains ===#####
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm
+
+*.iml
+
+## Directory-based project format:
+.idea/
+# if you remove the above rule, at least ignore the following:
+
+# User-specific stuff:
+# .idea/workspace.xml
+# .idea/tasks.xml
+# .idea/dictionaries
+
+# Sensitive or high-churn files:
+# .idea/dataSources.ids
+# .idea/dataSources.xml
+# .idea/sqlDataSources.xml
+# .idea/dynamic.xml
+# .idea/uiDesigner.xml
+
+# Gradle:
+# .idea/gradle.xml
+# .idea/libraries
+
+# Mongo Explorer plugin:
+# .idea/mongoSettings.xml
+
+## File-based project format:
+*.ipr
+*.iws
+
+## Plugin-specific files:
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties

.ruby-version

+ruby-2.3.0

README.md

+# jekyll-theme-hackcss
+
+[Dead simple CSS framework](http://hackcss.com/) now with Jekyll.
+
+Mobile-ready, modern, stylish, simple.
+
+## Theme modes
+
+This theme comes in three modes, which could be configured in `_config.yml`.
+
+![Standard](https://raw.githubusercontent.com/wemake-services/jekyll-theme-hackcss/3cbe97b71a56a19eba386dd928e125b71e50c71e/images/standard.png)
+
+![Dark](https://raw.githubusercontent.com/wemake-services/jekyll-theme-hackcss/3cbe97b71a56a19eba386dd928e125b71e50c71e/images/dark.png)
+
+![Markdown](https://raw.githubusercontent.com/wemake-services/jekyll-theme-hackcss/3cbe97b71a56a19eba386dd928e125b71e50c71e/images/markdown.png)
+
+## Installation
+
+Clone this repo. Create your own website. Easy.
+
+## Configuration
+
+See [docs](https://github.com/wemake-services/jekyll-theme-hackcss/blob/master/docs.md).
+
+## License
+
+GNU PGL 3. See [LICENSE](https://github.com/wemake-services/jekyll-theme-hackcss/blob/3cbe97b71a56a19eba386dd928e125b71e50c71e/LICENSE) for more information.

_config.yml

+# Welcome to Jekyll!
+#
+# This config file is meant for settings that affect your whole blog, values
+# which you are expected to set up once and rarely need to edit after that.
+# For technical reasons, this file is *NOT* reloaded automatically when you use
+# 'jekyll serve'. If you change this file, please restart the server process.
+
+# Site settings
+title: jekyll-theme-hackcss
+description: > # this means to ignore newlines until "baseurl:"
+  A minimalistic theme for Jekyll, based on hack.css
+repository: https://github.com/wemake-services/jekyll-theme-hackcss
+baseurl: ""  # the subpath of your site, e.g. /blog
+url: http://sobolevn.github.io  # the base hostname & protocol for your site
+
+# Build settings
+markdown: kramdown
+
+# Sass settings
+sass:
+  style: compressed
+
+# Theme settings
+theme_mode: standard  # choices are: 'dark', 'standard', 'markdown'
+
+# Customizations
+your_name: wemake.services
+email: mail@sobolevn.me
+
+navigation:
+  - text: Home
+    url: /
+  - text: Docs
+    url: /docs
+  - text: Examples
+    url: /examples
+
+projects:
+  - name: git-secret
+    description: A bash-tool to store your private data inside a git repository.
+    link: https://sobolevn.github.io/git-secret
+    image: https://github.com/sobolevn/git-secret/blob/7c9ae0b1853d4c15549027524121b9e40219fe47/images/git-secret-sm.png?raw=true
+  - name: awesome-cryptography
+    description: A curated list of cryptography resources and links.
+    link: https://github.com/sobolevn/awesome-cryptography
+    image: https://pbs.twimg.com/profile_images/751426570607271937/vGxpniun_400x400.jpg
+  - name: ecto_autoslug_field
+    description: Automatically creates slugs for your Ecto models.
+    link: https://github.com/sobolevn/ecto_autoslug_field
+  - name: django-split-settings
+    description: Organize Django settings into multiple files and directories. Easily override and modify settings. Use wildcards and optional settings files.
+    link: https://github.com/sobolevn/django-split-settings
+
+social:
+  - service: github
+    username: sobolevn
+    link: https://github.com/sobolevn
+  - service: twitter
+    username: sobolevn
+    link: https://twitter.com/sobolevn

_includes/footer.html

+<footer>
+  <hr />
+
+  <h3 class="footer-heading">{{ site.title }}</h3>
+
+  <div class="grid t-hackcss-sm-reversed-grid">
+
+    <div class="cell -5of12">
+      <div class="contact-list">
+        <p>
+          {{ site.your_name }},
+          <a href="mailto:{{ site.email }}">{{ site.email }}</a>
+        </p>
+
+        {% for social in site.social %}
+          {% assign template = social.service|prepend:"icon-"|append:".html" %}
+          <span class="t-hackcss-social">
+            <i class="t-hackcss-icon">{% include {{ template }} %}</i>
+            <a href="{{ social.link }}">{{ social.username }}</a>
+          </span>
+        {% endfor %}
+      </div>
+    </div>
+
+    <div id="footer-spacer" class="cell -1of12"></div>
+
+    <div class="cell -6of12">
+      <p>{{ site.description }}</p>
+    </div>
+  </div>
+
+</footer>

_includes/github-ribbon.html

+<a href="{{ site.repository }}" class="github-corner">
+
+{% if site.theme_mode != 'dark' %}
+  <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
+{% else %}
+  <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#151513; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
+{% endif %}
+
+</a>
+
+<style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

_includes/head.html

+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link rel="stylesheet" href="http://hackcss.com/prism.css">
+
+  <!-- Meta information -->
+  <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
+  <meta name="description"
+        content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+  <link rel="canonical"
+        href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}" />
+
+  <!-- hack.css -->
+  <link rel="stylesheet" href="https://npmcdn.com/hack/dist/hack.css" />
+  {% if site.theme_mode == 'standard' %}
+  <link rel="stylesheet" href="https://npmcdn.com/hack/dist/standard.css" />
+  {% elsif site.theme_mode == 'dark' %}
+  <link rel="stylesheet" href="https://npmcdn.com/hack/dist/dark.css" />
+  {% endif %}
+
+  <!-- Custom style -->
+  <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}" />
+
+  <!-- Feed -->
+  <link rel="alternate" type="application/rss+xml" title="{{ site.title }}"
+        href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
+
+  <!-- Add seo with 'jekyll-seo' plugin! -->
+</head>

_includes/icon-github.html

+<svg viewBox="0 0 16 16"><path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"></path></svg>

_includes/icon-twitter.html

+<svg viewBox="0 0 16 16"><path fill="#828282" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg>

_includes/navigation.html

+<div class="t-hackcss-navigation">
+  <h2>Menu</h2>
+
+  <nav class="menu" role="menubar">
+    {% assign url = page.url|remove:'index.html' %}
+    {% for link in site.navigation %}
+      <a class="menu-item {% if url == link.url %}active{% endif %}"
+        role="menuitem" href="{{ link.url }}" title="{{ link.title }}">
+        {{ link.text }} <div class="pull-right">»</div>
+      </a>
+    {% endfor %}
+  </nav>
+
+</div>

_layouts/default.html

+<!DOCTYPE html>
+<html>
+
+  {% include head.html %}
+
+
+  {% if site.theme_mode == 'markdown' %}
+  <body class="hack">
+  {% elsif site.theme_mode == 'standard' %}
+  <body class="standard">
+  {% elsif site.theme_mode == 'dark' %}
+  <body class="hack dark">
+  {% endif %}
+
+    {% include github-ribbon.html %}
+
+    <div class="container">
+      <div class="grid">
+        <aside class="cell -3of12" role="navigation">
+          {% include navigation.html %}
+        </aside>
+
+        <main class="cell -9of12">
+          {{ content }}
+        </main>
+      </div>
+
+    {% include footer.html %}
+
+    </div>
+  </body>
+
+</html>

_layouts/post.html

+---
+layout: default
+---
+<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
+
+  <header class="post-header">
+    <h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
+    <p class="post-meta">
+      <time datetime="{{ page.date | date_to_xmlschema }}"
+            itemprop="datePublished"
+            class="media-heading">
+        {{ page.date | date: "%b %-d, %Y" }}
+      </time>
+
+      {% if page.author %}
+        <span itemprop="author" itemscope itemtype="http://schema.org/Person">
+          <span itemprop="name">{{ page.author }}</span>
+        </span>
+      {% endif %}
+    </p>
+  </header>
+
+  <div class="post-content" itemprop="articleBody">
+    {{ content }}
+  </div>
+
+</article>

_posts/2013-12-23-helloworld.md

+---
+layout: post
+title: Creating Python wrapper around C++ API
+date: 2013-12-23 00:18:23
+categories: ruby
+short_description: This post will cover all the process of parsing JSON with Ruby.
+image_preview: https://avatars2.githubusercontent.com/u/4660275?v=3&s=460
+---
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacus est, sollicitudin sit amet molestie et, sodales vel ex. Vivamus lobortis blandit nibh, eu cursus justo ultrices ultricies. Nunc vitae ipsum imperdiet, mattis elit nec, sollicitudin nulla. Phasellus magna tortor, accumsan sit amet sapien eu, rhoncus consectetur est. Nunc pellentesque quam odio, eu cursus ex porttitor at. Sed ut neque dolor. Morbi ut rhoncus lectus. Ut luctus, enim ac interdum tempor, eros erat feugiat ante, sit amet feugiat magna quam non dolor. Pellentesque fermentum quam in justo mollis facilisis. Integer et tortor urna. Proin aliquam purus auctor sagittis mollis. Proin a sollicitudin turpis. In rhoncus eget massa id feugiat. Duis rutrum ligula eget erat feugiat, nec placerat ante facilisis. Suspendisse iaculis neque eu elementum mollis. Ut tempus libero sed congue iaculis.
+
+Nullam molestie at risus vel aliquam. Morbi ornare cursus facilisis. Praesent tristique lobortis mi in ornare. Donec placerat arcu at ultricies ultricies. Proin ut iaculis erat. Nulla nec erat rutrum, blandit nunc volutpat, faucibus justo. Nam vel consectetur nunc.

_posts/2014-01-15-xml.md

+---
+layout: post
+title: Parsing XML with Ruby
+date: 2014-01-15 00:18:23
+author: sobolevn
+categories: ruby
+short_description: This post will cover all the process of parsing XML with Ruby.
+image_preview: https://avatars2.githubusercontent.com/u/4660275?v=3&s=460
+---
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacus est, sollicitudin sit amet molestie et, sodales vel ex. Vivamus lobortis blandit nibh, eu cursus justo ultrices ultricies. Nunc vitae ipsum imperdiet, mattis elit nec, sollicitudin nulla. Phasellus magna tortor, accumsan sit amet sapien eu, rhoncus consectetur est. Nunc pellentesque quam odio, eu cursus ex porttitor at. Sed ut neque dolor. Morbi ut rhoncus lectus. Ut luctus, enim ac interdum tempor, eros erat feugiat ante, sit amet feugiat magna quam non dolor. Pellentesque fermentum quam in justo mollis facilisis. Integer et tortor urna. Proin aliquam purus auctor sagittis mollis. Proin a sollicitudin turpis. In rhoncus eget massa id feugiat. Duis rutrum ligula eget erat feugiat, nec placerat ante facilisis. Suspendisse iaculis neque eu elementum mollis. Ut tempus libero sed congue iaculis.
+
+Nullam molestie at risus vel aliquam. Morbi ornare cursus facilisis. Praesent tristique lobortis mi in ornare. Donec placerat arcu at ultricies ultricies. Proin ut iaculis erat. Nulla nec erat rutrum, blandit nunc volutpat, faucibus justo. Nam vel consectetur nunc.
+
+Aliquam luctus eros et ligula auctor dictum. Donec sagittis dictum libero bibendum placerat. Duis non cursus sapien, ut bibendum urna. Donec ultricies nulla sit amet viverra congue. Proin pretium, mauris id euismod sagittis, nisi metus volutpat nibh, et imperdiet felis justo eget dui. Nunc facilisis ac urna id vehicula. Sed tempor turpis a consequat eleifend. Sed eleifend auctor est, id euismod massa volutpat sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam rhoncus purus nec purus interdum, id mattis lectus facilisis. Cras hendrerit maximus rutrum.
+
+Nulla nec libero lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at quam nisl. Etiam ante enim, semper eget risus fringilla, mollis scelerisque nisi. Maecenas sed arcu imperdiet, blandit odio quis, finibus lacus. Curabitur et nunc enim. Aliquam sed mi efficitur, venenatis tellus id, suscipit turpis. In venenatis libero lacus, pretium aliquet quam imperdiet ac. In porttitor, urna ut rhoncus aliquet, mauris tellus rutrum enim, id aliquam ligula felis ac dui. Nullam diam ante, luctus at erat a, pretium fringilla lectus. Cras nec enim diam. Praesent commodo mi non risus viverra bibendum. Pellentesque eu tristique magna. Vestibulum id est erat. Nunc in blandit velit, ut suscipit sem.
+
+Suspendisse quis ante sed metus tristique tristique. Curabitur blandit diam at facilisis efficitur. Curabitur malesuada semper diam, nec fermentum metus tincidunt et. Nulla nec orci pretium turpis sodales efficitur suscipit euismod ligula. Sed iaculis sed nisi pulvinar efficitur. Curabitur at faucibus lectus. Etiam non cursus arcu. Phasellus urna eros, elementum vitae sodales quis, mollis a metus. Donec ultrices elementum turpis, eu aliquam leo maximus eu.

_posts/2014-12-23-foreign-link.md

+---
+layout: post
+title: Testing bash applications
+date: 2014-01-15 00:18:23
+author: sobolevn
+categories: bash
+short_description: This is an overview post about testing frameworks in bash.
+image_preview: https://habracdn.net/habr/images/1469788235/logo.svg?r=2
+external_url: https://habrahabr.ru/post/278937/
+---

_sass/_highlight.scss

+// This file only deal with code highlighting
+
+code.highlighter-rouge {
+  padding: 0;
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+  margin: 0;
+  font-size: 85%;
+  background-color: rgba(0,0,0,0.04);
+  border-radius: 3px;
+}

_sass/_styles.scss

+// This file contains custom (non hack.css) styles
+
+.t-hackcss {  // Main prefix
+
+  // navigation.html
+
+  &-navigation {
+    padding-right: $spacing-unit;
+  }
+
+  &-social {
+    display: inline-block;
+  }
+
+  &-social + &-social {
+    padding-left: $spacing-unit;
+  }
+
+  &-sm-reversed-grid.grid {
+    @include media-query($on-palm) {
+      flex-direction: column-reverse;
+    }
+  }
+
+  &-icon {
+    display: inline-block;
+    vertical-align: middle;
+    width: $icon-size;
+    height: $icon-size;
+
+    > svg {
+      width: $icon-size;
+    }
+  }
+
+  // examples.html
+
+  &-media-shift {
+    max-width: $image-size;
+  }
+
+  &-media-image {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+
+  &-cards {
+    flex-wrap: wrap;
+    @include media-query($on-palm) {
+      flex-wrap: nowrap;
+    }
+  }
+
+  &-cards-cell {
+    padding-bottom: $spacing-unit;
+    padding-right: $spacing-unit;
+  }
+
+  &-cards-text {
+    margin: 0
+  }
+
+  &-cards-image {
+    display: block;
+    max-width: 50%;
+    height: auto;
+    margin: 0 auto;
+  }
+
+  &-cards-link {
+    text-align: center;
+  }
+}

css/main.scss

+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+@charset "utf-8";
+
+
+
+// Our variables
+$spacing-unit:     10px;
+$image-size:       50px;
+$icon-size:        15px;
+
+
+// Sizes
+$on-palm:          768px;
+
+
+
+// Use media queries like this:
+// @include media-query($on-palm) {
+//     .wrapper {
+//         padding-right: $spacing-unit / 2;
+//         padding-left: $spacing-unit / 2;
+//     }
+// }
+@mixin media-query($device) {
+    @media screen and (max-width: $device) {
+        @content;
+    }
+}
+
+
+
+// Import partials from `sass_dir` (defaults to `_sass`)
+@import
+        "styles",
+        "highlight"
+;