jekyll-theme-chalk 0.1.1

data/_assets/stylesheets/.scss-lint.yml

@@ -0,0 +1,33 @@
+exclude:
+  - "vendor/*"
+
+linters:
+  StringQuotes:
+    enabled: true
+    style: double_quotes
+
+  UrlFormat:
+    enabled: false
+
+  SelectorDepth:
+    enabled: true
+    max_depth: 4
+
+  PropertySortOrder:
+    enabled: true
+    order: recess
+
+  LeadingZero:
+    enabled: true
+    style: exclude_zero
+
+  NestingDepth:
+    enabled: true
+    max_depth: 5
+
+  EmptyLineBetweenBlocks:
+    enabled: false
+    ignore_single_line_blocks: true
+
+  QualifyingElement:
+    allow_element_with_attribute: true

data/_assets/stylesheets/_base.scss

@@ -0,0 +1,151 @@
+// =============================================================================
+// Base
+// =============================================================================
+
+// Document
+// =============================================================================
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: $base-font-size;
+}
+
+body {
+  margin: 0 auto;
+  font-family: $base-font-family;
+  -webkit-font-smoothing: antialiased;
+  font-weight: $base-font-weight;
+  line-height: $base-line-height;
+  color: $base-font-color;
+  background: $body-background;
+}
+
+// Typography
+// =============================================================================
+
+p {
+  margin: 0;
+  font-weight: $base-font-weight;
+}
+
+b,
+strong {
+  font-weight: $base-font-weight-bold;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  line-height: 1.5;
+  text-rendering: optimizeLegibility;
+}
+
+h1 {
+  font-size: $base-font-size * 1.6;
+  font-weight: 400;
+  letter-spacing: -.03em;
+  color: $article-header-title-color;
+}
+
+h2 {
+  font-size: $base-font-size * 1.5;
+  font-weight: 400;
+}
+
+h3 {
+  font-size: $base-font-size * 1.3;
+  font-weight: 500;
+}
+
+h4 {
+  font-size: $base-font-size * 1.1;
+  font-weight: 500;
+}
+
+h5 {
+  font-size: $base-font-size * 1.17;
+  font-weight: 500;
+}
+
+h6 {
+  font-size: $base-font-size;
+}
+
+@include breakpoint(small) {
+  h1 {
+    font-size: $base-font-size * 1.5;
+  }
+  h2 {
+    font-size: $base-font-size * 1.35;
+  }
+  h3 {
+    font-size: $base-font-size * 1.25;
+  }
+}
+
+a {
+  color: $base-accent-color;
+  text-decoration: underline;
+  transition: color $base-transition-speed linear;
+  &:hover,
+  &:active {
+    color: $base-accent-highlighted-color;
+  }
+  &:focus {
+    color: $base-accent-highlighted-color;
+    outline: none;
+  }
+}
+
+ul,
+ol {
+  padding-left: 40px;
+  margin: 0;
+}
+
+abbr {
+  cursor: help;
+  border-bottom: 1px dotted $base-border-color;
+}
+
+blockquote {
+  padding: 0 0 4px 15px;
+  margin: 0 0 0 -20px;
+  font-family: $sans-serif;
+  font-size: 20px;
+  font-style: italic;
+  line-height: 1.6;
+  color: $gray-light;
+  border-left: 3px solid $gray-dark;
+}
+
+// Other
+// =============================================================================
+
+hr {
+  margin: 0;
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid $base-border-color;
+  border-left: 0;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  margin: 0;
+}
+
+::selection {
+  color: $white;
+  background-color: $gray-darkest;
+}

data/_assets/stylesheets/_mixins.scss

@@ -0,0 +1,28 @@
+// =============================================================================
+// Mixins
+// =============================================================================
+
+// Handling breakpoints for media queries
+// @param {Number} $val the media query specification.
+
+@mixin breakpoint($val) {
+  @if $val == extra-small {
+    @media all and (max-width: 415px) {
+      @content;
+    }
+  } @else if $val == small {
+    @media all and (max-width: 767px) {
+      @content;
+    }
+  } @else if $val == medium {
+    @media all and (max-width: 1024px) {
+      @content;
+    }
+  } @else if $val == large {
+    @media all and (max-width: 1223px) {
+      @content;
+    }
+  } @else {
+    @warn "The parameter #{$val} is not valid";
+  }
+}

data/_assets/stylesheets/_variables.scss

@@ -0,0 +1,47 @@
+// =============================================================================
+// Variables
+// =============================================================================
+
+// Typography
+// =============================================================================
+
+$sans-serif: "Lato", Helvetica, Arial, sans-serif;
+$serif: "Cormorant Garamond", Courier, serif;
+$base-font-family: $sans-serif;
+$base-font-weight: 400;
+$base-font-weight-bold: 700;
+
+// Colors
+// =============================================================================
+
+// Brand colors
+
+$brand-success: #1fbf92;
+$brand-danger: #e74b3c;
+$brand-primary: #3449ed;
+$brand-warning: #f1c90b;
+
+// Sizes
+// =============================================================================
+
+// Grid
+
+$columns: 12;
+$max-width: 650px;
+$gutter: 20px;
+$one-column: 100% / $columns;
+$negative-gutter: 0 - $gutter;
+
+// Font sizes
+
+$base-font-size: 16px;
+$base-line-height: 1.8;
+
+// Box sizes
+
+$base-border-radius: 4px;
+
+// Effects
+// =============================================================================
+
+$base-transition-speed: .2s;

data/_assets/stylesheets/dark.scss

@@ -0,0 +1,71 @@
+// =============================================================================
+// Dark theme
+// =============================================================================
+
+// Variables
+// =============================================================================
+
+// Shades of gray
+
+$black: #000;
+$gray-darkest: #121111;
+$gray-darker: lighten($gray-darkest, 15);
+$gray-dark: lighten($gray-darkest, 30);
+$gray: lighten($gray-darkest, 45);
+$gray-light: lighten($gray-darkest, 60);
+$gray-lighter: lighten($gray-darkest, 75);
+$gray-lightest: lighten($gray-darkest, 85);
+$white: #fff;
+
+// Font colors
+
+$base-font-color: $gray-lighter;
+$base-accent-color: $gray-lighter;
+$base-accent-highlighted-color: darken($base-accent-color, 15);
+
+// Border color
+
+$base-border-color: $gray-darker;
+
+// Page specific colors
+
+$body-background: $gray-darkest;
+$header-logo-color: $white;
+$header-link-color: $gray-light;
+$header-link-color-hover: $white;
+$article-header-title-color: $gray-lightest;
+$article-header-description-color: $gray;
+$article-post-titles-color: $gray-lightest;
+$article-footer-color: $gray-dark;
+$article-footer-link-color: $gray-light;
+$article-footer-link-color-hover: $white;
+$article-paginator-color-hover: $gray-lightest;
+
+// Imports
+// =============================================================================
+
+// Vendors
+
+@import "vendor/normalize";
+@import "../yarn/fluidbox/src/css/_fluidbox.scss";
+
+// Settings
+
+@import "variables";
+@import "mixins";
+@import "base";
+
+// Layouts
+
+@import "layouts/footer";
+@import "layouts/grid";
+
+// Modules
+
+@import "modules/about";
+@import "modules/articles";
+@import "modules/embed";
+@import "modules/header";
+@import "modules/highlights-dark";
+@import "modules/icons";
+@import "modules/scrollappear";

data/_assets/stylesheets/fonts.scss

@@ -0,0 +1,63 @@
+// =============================================================================
+// Fonts
+// =============================================================================
+
+@charset "UTF-8";
+
+// Cormorant Garamond
+// =============================================================================
+
+@font-face {
+  font-family: 'Cormorant Garamond';
+  font-style: normal;
+  font-weight: 700;
+  src: url(font_path('cormorant-garamond/Cormorant-Garamond-700.eot'));
+  src: url(font_path('cormorant-garamond/Cormorant-Garamond-700.eot?#iefix')) format('embedded-opentype'),
+  local('Cormorant Garamond Medium'),
+  local('Cormorant-Garamond-600'),
+  url(font_path('cormorant-garamond/Cormorant-Garamond-700.woff2')) format('woff2'),
+  url(font_path('cormorant-garamond/Cormorant-Garamond-700.woff')) format('woff'),
+  url(font_path('cormorant-garamond/Cormorant-Garamond-700.ttf')) format('truetype'),
+}
+
+// Lato
+// =============================================================================
+
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 300;
+  src: url(font_path('lato/Lato-300.eot'));
+  src: url(font_path('lato/Lato-300.eot?#iefix')) format('embedded-opentype'),
+  local('Lato Light'),
+  local('Lato-300'),
+  url(font_path('lato/Lato-300.woff2')) format('woff2'),
+  url(font_path('lato/Lato-300.woff')) format('woff'),
+  url(font_path('lato/Lato-300.ttf')) format('truetype'),
+}
+
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: url(font_path('lato/Lato-regular.eot'));
+  src: url(font_path('lato/Lato-regular.eot?#iefix')) format('embedded-opentype'),
+  local('Lato Regular'),
+  local('Lato-regular'),
+  url(font_path('lato/Lato-regular.woff2')) format('woff2'),
+  url(font_path('lato/Lato-regular.woff')) format('woff'),
+  url(font_path('lato/Lato-regular.ttf')) format('truetype'),
+}
+
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  src: url(font_path('lato/Lato-700.eot'));
+  src: url(font_path('lato/Lato-700.eot?#iefix')) format('embedded-opentype'),
+  local('Lato Bold'),
+  local('Lato-700'),
+  url(font_path('lato/Lato-700.woff2')) format('woff2'),
+  url(font_path('lato/Lato-700.woff')) format('woff'),
+  url(font_path('lato/Lato-700.ttf')) format('truetype'),
+}

data/_assets/stylesheets/layouts/_footer.scss

@@ -0,0 +1,17 @@
+// =============================================================================
+// Footer
+// =============================================================================
+
+.footer {
+  display: block;
+  padding-top: 35px;
+  margin-bottom: 85px;
+  border-top: 1px solid $base-border-color;
+  p {
+    font-size: 15px;
+    color: $gray-light;
+  }
+  a {
+    text-decoration: none;
+  }
+}

data/_assets/stylesheets/layouts/_grid.scss

@@ -0,0 +1,102 @@
+// =============================================================================
+// Grid
+// =============================================================================
+
+// Settings
+// =============================================================================
+
+// Create widths for each column.
+
+@mixin column-generator() {
+  @for $i from 1 through ($columns - 1) {
+    &.with-#{$i}col {
+      width: $one-column * $i;
+    }
+  }
+}
+
+// Create offsets for columns.
+
+@mixin offset-generator() {
+  @for $i from 1 through ($columns - 1) {
+    &.with-#{$i}off {
+      margin-left: $one-column * $i;
+    }
+  }
+}
+
+// Reset column width to 100%.
+// Reset offsets to a margin-left of 0.
+
+@mixin responsive-grid-generator() {
+  @for $i from 1 through ($columns - 1) {
+    &.with-#{$i}col {
+      width: 100%;
+    }
+    &.with-#{$i}off {
+      margin-left: 0;
+    }
+  }
+}
+
+// Component
+// =============================================================================
+
+.grid {
+  display: block;
+  padding: 0;
+  margin: 0 $negative-gutter;
+  font-size: 0;
+  text-align: left;
+}
+
+// Descendants
+// =============================================================================
+
+// Creates a grid cell. Add `with-[x]co`l to define the number of coloms the
+// cell needs to span. Do not use 'with-[x]col` if you wish to span the entire
+// width.
+
+.grid-cell {
+  @include column-generator();
+  @include offset-generator();
+  display: inline-block;
+  width: 100%;
+  padding: 0 $gutter;
+  margin: 0;
+  font-size: $base-font-size;
+  text-align: left;
+  vertical-align: top;
+  &.is-centered {
+    text-align: center;
+  }
+  &.is-right {
+    text-align: right;
+  }
+  &.is-top {
+    vertical-align: top;
+  }
+  &.is-middle {
+    vertical-align: middle;
+  }
+  &.is-bottom {
+    vertical-align: bottom;
+  }
+}
+
+// Centers your grid container with a max-width.
+
+.grid-centered {
+  max-width: $max-width;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+// Responsive
+// =============================================================================
+
+@include breakpoint(small) {
+  .grid-cell {
+    @include responsive-grid-generator();
+  }
+}