jekyll-theme-chalk 0.1.1

data/_assets/stylesheets/light.scss

@@ -0,0 +1,71 @@
+// =============================================================================
+// Light 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-dark;
+$base-accent-color: $gray-dark;
+$base-accent-highlighted-color: darken($base-accent-color, 15);
+
+// Border color
+
+$base-border-color: $gray-lightest;
+
+// Page specific colors
+
+$body-background: $white;
+$header-logo-color: $black;
+$header-link-color: $gray-darker;
+$header-link-color-hover: $gray-darkest;
+$article-header-title-color: $gray-darkest;
+$article-header-description-color: $gray-dark;
+$article-post-titles-color: $gray-darkest;
+$article-footer-color: $gray-light;
+$article-footer-link-color: $gray-dark;
+$article-footer-link-color-hover: $gray-darkest;
+$article-paginator-color-hover: $gray-darkest;
+
+// 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-light";
+@import "modules/icons";
+@import "modules/scrollappear";

data/_assets/stylesheets/modules/_about.scss

@@ -0,0 +1,10 @@
+// =============================================================================
+// About
+// =============================================================================
+
+.about {
+  padding: 100px 0;
+  h1 {
+    margin: 50px 0 15px;
+  }
+}

data/_assets/stylesheets/modules/_articles.scss

@@ -0,0 +1,213 @@
+// =============================================================================
+// Articles
+// =============================================================================
+
+.article {
+  display: block;
+  margin: 100px 0;
+}
+
+.article-list {
+  display: block;
+  padding: 0;
+  margin: 50px 0;
+  list-style: none;
+  li {
+    position: relative;
+    display: block;
+    padding: 50px 0;
+    border-bottom: 1px solid $base-border-color;
+    &:last-child {
+      border-bottom: 0;
+    }
+    &.article-pagination {
+      display: block;
+      height: 93px;
+      padding: 15px 0 50px;
+      a {
+        display: inline-block;
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: .1em;
+        color: $gray;
+        text-decoration: none;
+        text-transform: uppercase;
+        transition: color $base-transition-speed linear;
+        .icon {
+          display: inline-block;
+          margin-top: -2px;
+          font-size: 20px;
+          vertical-align: middle;
+        }
+        &:hover {
+          color: $article-paginator-color-hover;
+        }
+      }
+    }
+  }
+}
+
+.article-list-item {
+  h5 {
+    position: relative;
+    display: block;
+    padding-right: 25px;
+    color: $article-header-title-color;
+    border-bottom: 1px solid transparent;
+    .icon {
+      display: inline-block;
+      margin-top: -2px;
+      vertical-align: middle;
+      opacity: 0;
+      transition: opacity $base-transition-speed linear;
+    }
+    &:hover .icon {
+      opacity: 1;
+    }
+  }
+  a {
+    text-decoration: none;
+  }
+  p {
+    display: block;
+    margin: 12px 0 10px;
+    font-size: 15px;
+    color: $article-header-description-color;
+  }
+}
+
+.article-list-footer {
+  display: block;
+  span,
+  a {
+    display: inline-block;
+    font-size: 12px;
+    color: $article-footer-color;
+    text-transform: uppercase;
+    vertical-align: middle;
+  }
+  a {
+    margin-right: 7.5px;
+    color: $article-footer-link-color;
+    &:hover {
+      color: $article-footer-link-color-hover;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.article-list-divider {
+  margin: 0 15px;
+}
+
+.article-list-tags {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.article-empty {
+  display: block;
+  margin: 100px 0;
+  font-style: italic;
+  color: $gray-light;
+  text-align: center;
+}
+
+// Paginator
+// =============================================================================
+
+.article-pagination-right {
+  float: right;
+}
+
+// Article page
+// =============================================================================
+
+.article-header {
+  display: block;
+  padding-bottom: 30px;
+  margin-bottom: 30px;
+  border-bottom: 1px solid $base-border-color;
+  p {
+    display: block;
+    margin: 12px 0 10px;
+    font-size: 15px;
+    color: $article-header-description-color;
+  }
+  a {
+    text-decoration: none;
+  }
+}
+
+.article-content {
+  display: block;
+  p,
+  ul,
+  ol,
+  img,
+  blockquote {
+    display: block;
+    margin-bottom: 30px;
+  }
+  h2,
+  h3,
+  h4 {
+    display: block;
+    margin-bottom: 10px;
+    font-family: $sans-serif;
+    color: $article-post-titles-color;
+  }
+  blockquote p {
+    margin-bottom: 0;
+  }
+  img.emoji {
+    display: inline-block;
+    margin-top: -4px;
+    margin-bottom: 0;
+    vertical-align: middle;
+  }
+}
+
+.article-comments {
+  display: block;
+  padding-top: 20px;
+  margin-top: 30px;
+  border-top: 1px solid $base-border-color;
+}
+
+.article-share {
+  display: block;
+  margin-top: -4px;
+  a {
+    display: inline-block;
+    margin-right: 12px;
+    vertical-align: middle;
+    svg {
+      vertical-align: middle;
+      transition: fill $base-transition-speed linear;
+      fill: $gray-light;
+      width: 20px;
+    }
+    &:hover svg {
+      fill: $gray-dark;
+    }
+  }
+}
+
+// Responsive
+// =============================================================================
+
+@include breakpoint(small) {
+  .article-list-footer {
+    display: block;
+  }
+  .article-list-divider:last-of-type {
+    display: none;
+  }
+  .article-list-tags {
+    display: block;
+    margin-top: -7px;
+  }
+}

data/_assets/stylesheets/modules/_embed.scss

@@ -0,0 +1,31 @@
+// =============================================================================
+// Embed
+// =============================================================================
+
+.embed-responsive {
+  position: relative;
+  display: block;
+  height: 0;
+  padding: 0;
+  padding-bottom: 75%;
+  margin-bottom: 30px;
+  overflow: hidden;
+  iframe,
+  embed,
+  object,
+  video {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+}
+
+// Modifier class for 16:9 aspect ratio
+
+.embed-responsive-16by9 {
+  padding-bottom: 56.25%;
+}

data/_assets/stylesheets/modules/_header.scss

@@ -0,0 +1,57 @@
+// =============================================================================
+// Header
+// =============================================================================
+
+.header-nav {
+  display: block;
+  padding: 75px 0 20px;
+  border-bottom: 1px solid $base-border-color;
+}
+
+.header-logo {
+  display: inline-block;
+  font-family: $serif;
+  font-size: 36px;
+  font-weight: 700;
+  color: $header-logo-color;
+  text-decoration: none;
+}
+
+.header-links {
+  float: right;
+  padding: 0;
+  margin: 15px 0 0;
+  list-style: none;
+  li {
+    display: inline-block;
+    margin-left: 20px;
+    vertical-align: middle;
+    &:first-child {
+      margin-left: 0;
+    }
+    a {
+      font-size: 18px;
+      color: $header-link-color;
+      &:hover {
+        color: $header-link-color-hover;
+      }
+    }
+  }
+}
+
+@include breakpoint(extra-small) {
+  .header-nav {
+    text-align: center;
+  }
+  .header-links {
+    display: block;
+    float: none;
+    text-align: center;
+    li {
+      margin: 0 10px;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}

data/_assets/stylesheets/modules/_highlights-dark.scss

@@ -0,0 +1,415 @@
+// =============================================================================
+// Highlights dark
+// =============================================================================
+
+.highlight {
+  padding: 50px;
+  margin: 0;
+  margin: 30px 0;
+  overflow: auto;
+  font-weight: 400;
+  background-color: darken($gray-darkest, 5);
+  border-radius: $base-border-radius;
+  pre {
+    margin: 0;
+  }
+}
+
+// Inline highlighting
+
+.highlighter-rouge {
+  padding: 2px 4px;
+  font-size: 14px;
+  color: #f92672;
+  background: darken($gray-darkest, 5);
+  border: 1px solid $base-border-color;
+  border-radius: 1px;
+}
+
+// Responsive
+// =============================================================================
+
+@include breakpoint(small) {
+  .highlight {
+    padding: 50px 25px;
+    font-size: 14px;
+  }
+}
+
+// Highlighting types
+// =============================================================================
+
+.highlight pre {
+  background-color: darken($gray-darkest, 5);
+}
+
+.highlight .hll {
+  background-color: darken($gray-darkest, 5);
+}
+
+// Comment
+
+.highlight .c {
+  color: #75715e;
+}
+
+// Error
+
+.highlight .err {
+  color: #960050;
+  background-color: #1e0010;
+}
+
+// Keyword
+
+.highlight .k {
+  color: #66d9ef;
+}
+
+// Literal
+
+.highlight .l {
+  color: #ae81ff;
+}
+
+// Name
+
+.highlight .n {
+  color: #f8f8f2;
+}
+
+// Operator
+
+.highlight .o {
+  color: #f92672;
+}
+
+// Punctuation
+
+.highlight .p {
+  color: #f8f8f2;
+}
+
+// Comment.Multiline
+
+.highlight .cm {
+  color: #75715e;
+}
+
+// Comment.Preproc
+
+.highlight .cp {
+  color: #75715e;
+}
+
+// Comment.Single
+
+.highlight .c1 {
+  color: #75715e;
+}
+
+// Comment.Special
+
+.highlight .cs {
+  color: #75715e;
+}
+
+// Generic.Emph
+
+.highlight .ge {
+  font-style: italic;
+}
+
+// Generic.Strong
+
+.highlight .gs {
+  font-weight: bold;
+}
+
+// Keyword.Constant
+
+.highlight .kc {
+  color: #66d9ef;
+}
+
+// Keyword.Declaration
+
+.highlight .kd {
+  color: #66d9ef;
+}
+
+// Keyword.Namespace
+
+.highlight .kn {
+  color: #f92672;
+}
+
+// Keyword.Pseudo
+
+.highlight .kp {
+  color: #66d9ef;
+}
+
+// Keyword.Reserved
+
+.highlight .kr {
+  color: #66d9ef;
+}
+
+// Keyword.Type
+
+.highlight .kt {
+  color: #66d9ef;
+}
+
+// Literal.Date
+
+.highlight .ld {
+  color: #e6db74;
+}
+
+// Literal.Number
+
+.highlight .m {
+  color: #ae81ff;
+}
+
+// Literal.String
+
+.highlight .s {
+  color: #e6db74;
+}
+
+// Name.Attribute
+
+.highlight .na {
+  color: #a6e22e;
+}
+
+// Name.Builtin
+
+.highlight .nb {
+  color: #f8f8f2;
+}
+
+// Name.Class
+
+.highlight .nc {
+  color: #a6e22e;
+}
+
+// Name.Constant
+
+.highlight .no {
+  color: #66d9ef;
+}
+
+// Name.Decorator
+
+.highlight .nd {
+  color: #a6e22e;
+}
+
+// Name.Entity
+
+.highlight .ni {
+  color: #f8f8f2;
+}
+
+// Name.Exception
+
+.highlight .ne {
+  color: #a6e22e;
+}
+
+// Name.Function
+
+.highlight .nf {
+  color: #a6e22e;
+}
+
+// Name.Label
+
+.highlight .nl {
+  color: #f8f8f2;
+}
+
+// Name.Namespace
+
+.highlight .nn {
+  color: #f8f8f2;
+}
+
+// Name.Other
+
+.highlight .nx {
+  color: #a6e22e;
+}
+
+// Name.Property
+
+.highlight .py {
+  color: #f8f8f2;
+}
+
+// Name.Tag
+
+.highlight .nt {
+  color: #f92672;
+}
+
+// Name.Variable
+
+.highlight .nv {
+  color: #f8f8f2;
+}
+
+// Operator.Word
+
+.highlight .ow {
+  color: #f92672;
+}
+
+// Text.Whitespace
+
+.highlight .w {
+  color: #f8f8f2;
+}
+
+// Literal.Number.Float
+
+.highlight .mf {
+  color: #ae81ff;
+}
+
+// Literal.Number.Hex
+
+.highlight .mh {
+  color: #ae81ff;
+}
+
+// Literal.Number.Integer
+
+.highlight .mi {
+  color: #ae81ff;
+}
+
+// Literal.Number.Oct
+
+.highlight .mo {
+  color: #ae81ff;
+}
+
+// Literal.String.Backtick
+
+.highlight .sb {
+  color: #e6db74;
+}
+
+// Literal.String.Char
+
+.highlight .sc {
+  color: #e6db74;
+}
+
+// Literal.String.Doc
+
+.highlight .sd {
+  color: #e6db74;
+}
+
+// Literal.String.Double
+
+.highlight .s2 {
+  color: #e6db74;
+}
+
+// Literal.String.Escape
+
+.highlight .se {
+  color: #ae81ff;
+}
+
+// Literal.String.Heredoc
+
+.highlight .sh {
+  color: #e6db74;
+}
+
+// Literal.String.Interpol
+
+.highlight .si {
+  color: #e6db74;
+}
+
+// Literal.String.Other
+
+.highlight .sx {
+  color: #e6db74;
+}
+
+// Literal.String.Regex
+
+.highlight .sr {
+  color: #e6db74;
+}
+
+// Literal.String.Single
+
+.highlight .s1 {
+  color: #e6db74;
+}
+
+// Literal.String.Symbol
+
+.highlight .ss {
+  color: #e6db74;
+}
+
+// Name.Builtin.Pseudo
+
+.highlight .bp {
+  color: #f8f8f2;
+}
+
+// Name.Variable.Class
+
+.highlight .vc {
+  color: #f8f8f2;
+}
+
+// Name.Variable.Global
+
+.highlight .vg {
+  color: #f8f8f2;
+}
+
+// Name.Variable.Instance
+
+.highlight .vi {
+  color: #f8f8f2;
+}
+
+// Literal.Number.Integer.Long
+
+.highlight .il {
+  color: #ae81ff;
+}
+
+// Generic.Subheading & Diff Unified/Comment?
+
+.highlight .gu {
+  color: #75715e;
+}
+
+// Generic.Deleted & Diff Deleted
+
+.highlight .gd {
+  color: #f92672;
+}
+
+// Generic.Inserted & Diff Inserted
+
+.highlight .gi {
+  color: #a6e22e;
+}