lifenode 0.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 803d397e5778f6825a97921b7e394421f9fe3b99
+  data.tar.gz: 7c3706137d8f09542f5f8f1894b4a874f5b20921
+SHA512:
+  metadata.gz: 54096685b173a8e61a379187a4d7919232b4d647dadcae2c48a1ffcf601d9d3cd6451a801806e05177b8e5daddc34ed7550e3f4cbe32381347d8af9c4417e20b
+  data.tar.gz: 32e1a5e00ca9610902996d3023bcda9b8170e921ecb12c4b04e62c0378a1212192b1231cdb4ab26d9939bc854d8eb5d8315693a8336f7a3abcdaf31a11d83b7f

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 nukosuke
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,57 @@
+# lifenode
+
+Welcome to your new Jekyll theme! In this directory, you'll find the files you need to be able to package up your theme into a gem. Put your layouts in `_layouts`, your includes in `_includes`, your sass files in `_sass` and any other assets in `assets`.
+
+To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
+
+TODO: Delete this and the text above, and describe your gem
+
+
+## Installation
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "lifenode"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: lifenode
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install lifenode
+
+## Usage
+
+configure these variables.
+
+- title
+- description
+- disqus.shortname (option)
+- google_analytics (option)
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/nukosuke/lifenode. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+## Development
+
+To set up your environment to develop this theme, run `bundle install`.
+
+Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+
+When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
+To add a custom directory to your theme-gem, please edit the regexp in `lifenode.gemspec` accordingly.
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+

data/_includes/disqus_comments.html

@@ -0,0 +1,16 @@
+{% if page.comments != false and jekyll.environment == 'production' %}
+  <div id="disqus_thread"></div>
+  <script>
+    var disqus_config = function () {
+      this.page.url = '{{ page.url | absolute_url }}';
+      this.page.identifier = '{{ page.url | absolute_url }}';
+    };
+    (function() {
+      var d = document, s = d.createElement('script');
+      s.src = 'https://{{ site.disqus_shortname }}.disqus.com/embed.js';
+      s.setAttribute('data-timestamp', +new Date());
+      (d.head || d.body).appendChild(s);
+    })();
+  </script>
+  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
+{% endif %}

data/_includes/google_analytics.html

@@ -0,0 +1,10 @@
+{% if jekyll.environment == 'production' and site.google_analytics %}
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', '{{ site.google_analytics }}');
+  </script>
+{% endif %}

data/_includes/head.html

@@ -0,0 +1,8 @@
+<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="{{ '/assets/css/style.css' | relative_url }}">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/sawarabigothic.css" />
+    {% include google_analytics.html %}
+</head>

data/_layouts/default.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+    {% include head.html %}
+    <body>
+        <div class="ln-container">
+            <div class="ln-column-content">
+                {{ content }}
+            </div>
+        </div>
+    </body>
+</html>

data/_layouts/home.html

@@ -0,0 +1,31 @@
+---
+layout: default
+---
+
+<div class="home">
+  {% if site.title %}
+    <div class="ln-header">
+      {% if site.description %}
+        <p class="ln-header-description">{{ site.description }}</p>
+      {% endif %}
+      <h1 class="ln-header-title">{{ site.title }}</h1>
+    </div>
+  {% endif %}
+
+  <ul class="ln-timeline">
+    {% if site.posts.size > 0 %}
+      {% for post in site.posts %}
+        <li class="ln-timeline-item">
+          <div class="ln-timeline-item-tail"></div>
+          <div class="ln-timeline-item-head ln-timeline-item-head-red"></div>
+            <!--TODO: switch ln-timeline-item-head-* by post.type using case-when -->
+          <div class="ln-timeline-item-content">
+            <a href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
+            <br/>
+            <div class="ln-timeline-item-content-date">{{ post.date | date_to_string }}</div>
+          </div>
+        </li>
+      {% endfor %}
+    {% endif %}
+  </ul>
+</div>

data/_layouts/page.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{{ content }}

data/_layouts/post.html

@@ -0,0 +1,11 @@
+---
+layout: default
+---
+
+<div class="post">
+  <a href="{{ '/' | relative_url }}" title="Home">&laquo;&nbsp;Home</a>
+  <h1 class="ln-post-title">{{ page.title }}</h1>
+  <div class="ln-slash-stripe"></div>
+  {{ content }}
+  {% include disqus_comments.html %}
+</div>

data/_sass/lifenode.scss

@@ -0,0 +1,40 @@
+@charset "utf-8";
+@import
+  "lifenode/_grid",
+  "lifenode/_header",
+  "lifenode/_syntax-highlight",
+  "lifenode/_timeline";
+
+html { font-family: $font-family; }
+
+a {
+    color: $link-color;
+    text-decoration: $link-decoration;
+
+    &:hover {
+        color: $link-hover-color;
+        text-decoration: $link-hover-decoration;
+    }
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+$grid-media: (
+    columns: 12,
+    gutter: 50px,
+    media: 960px,
+);
+
+.home {
+    @include grid-media($grid-media) {
+        @include grid-column(4);
+        @include grid-shift(4);
+    }
+}
+
+.post {
+    @include grid-media($grid-media) {
+        @include grid-column(8);
+        @include grid-shift(2);
+    }
+}

data/_sass/lifenode/_base.scss

@@ -0,0 +1,32 @@
+// _base.scss
+// entire style settings
+
+$lifenode-prefix: "ln";
+
+// color
+$primary-color: #00BFFF;
+$error-color: #ea222d;
+$success-color: #9AC846;
+
+$primary-6: $primary-color;
+$primary-7: lighten($primary-color, 15%);
+
+
+$text-color: #333;
+$text-disabled-color: lighten($text-color, 40%);
+
+// link
+$link-color: $primary-6;
+$link-hover-color: $primary-7;
+$link-decoration: none;
+$link-hover-decoration: none;
+
+$border-color-split: lighten(black, 91%);
+$component-background: white;
+
+// font & line
+$font-family: "Sawarabi Gothic";
+$font-size-base: 14px;
+$font-size-lg: $font-size-base + 2px;
+$font-size-sm: $font-size-base - 2px;
+$line-height-base: 1.5;

data/_sass/lifenode/_grid.scss

@@ -0,0 +1,15 @@
+// _grid.scss
+// style for grid system
+
+@import "neat/_neat";
+@import "_base";
+
+.#{$lifenode-prefix} {
+    &-column-content {
+        @include grid-column(12);
+    }
+
+    &-container {
+        @include grid-container;
+    }
+}

data/_sass/lifenode/_header.scss

@@ -0,0 +1,38 @@
+// _header.scss
+// style for header
+
+@import "neat/_neat";
+@import "_base";
+
+$header-line-width: 8px;
+$header-vertical-margin: $header-line-width * 2;
+
+.#{$lifenode-prefix}-header {
+    border-top: solid $header-line-width $text-color;
+    border-bottom: solid $header-line-width $text-color;
+    margin: $header-vertical-margin 0;
+    
+    &-title {
+    }
+
+    &-description {
+        font-size: $font-size-sm;
+    }
+}
+
+.#{$lifenode-prefix}-post-title {
+    color: $error-color;
+}
+
+.#{$lifenode-prefix}-slash-stripe {
+    width: 150px;
+    height: 16px;
+    background-image: linear-gradient(
+        -45deg,
+        #fff 25%,
+        #000 25%, #000 50%,
+        #fff 50%, #fff 75%,
+        #000 75%, #000
+    );
+    background-size: 30px 30px;
+}

data/_sass/lifenode/_mixins.scss

@@ -0,0 +1,15 @@
+// _mixins.scss
+// mixin definitions
+
+@import "_base";
+
+@mixin reset-component() {
+    font-family: $font-family;
+    font-size: $font-size-base;
+    line-height: $line-height-base;
+    color: $text-color;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}

data/_sass/lifenode/_syntax-highlight.scss

@@ -0,0 +1,86 @@
+// _syntax-highlight.scss
+// style for code syntax highlight
+
+@import "_base";
+
+pre, code, var, samp, kbd, .highlight {
+    font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
+    font-size: $font-size-base;
+    line-height: 1.2;
+}
+
+.highlight {
+    pre {
+        background-color: #333;
+        padding: 8px;
+    }
+    .hll { background-color: #333333 }
+    .c { color: #008800; font-style: italic; background-color: #0f140f } /* Comment */
+    .err { color: #ffffff } /* Error */
+    .g { color: #ffffff } /* Generic */
+    .k { color: #fb660a; font-weight: bold } /* Keyword */
+    .l { color: #ffffff } /* Literal */
+    .n { color: #ffffff } /* Name */
+    .o { color: #ffffff } /* Operator */
+    .x { color: #ffffff } /* Other */
+    .p { color: #ffffff } /* Punctuation */
+    .cm { color: #008800; font-style: italic; background-color: #0f140f } /* Comment.Multiline */
+    .cp { color: #ff0007; font-weight: bold; font-style: italic; background-color: #0f140f } /* Comment.Preproc */
+    .c1 { color: #008800; font-style: italic; background-color: #0f140f } /* Comment.Single */
+    .cs { color: #008800; font-style: italic; background-color: #0f140f } /* Comment.Special */
+    .gd { color: #ffffff } /* Generic.Deleted */
+    .ge { color: #ffffff } /* Generic.Emph */
+    .gr { color: #ffffff } /* Generic.Error */
+    .gh { color: #ffffff; font-weight: bold } /* Generic.Heading */
+    .gi { color: #ffffff } /* Generic.Inserted */
+    .go { color: #444444; background-color: #222222 } /* Generic.Output */
+    .gp { color: #ffffff } /* Generic.Prompt */
+    .gs { color: #ffffff } /* Generic.Strong */
+    .gu { color: #ffffff; font-weight: bold } /* Generic.Subheading */
+    .gt { color: #ffffff } /* Generic.Traceback */
+    .kc { color: #fb660a; font-weight: bold } /* Keyword.Constant */
+    .kd { color: #fb660a; font-weight: bold } /* Keyword.Declaration */
+    .kn { color: #fb660a; font-weight: bold } /* Keyword.Namespace */
+    .kp { color: #fb660a } /* Keyword.Pseudo */
+    .kr { color: #fb660a; font-weight: bold } /* Keyword.Reserved */
+    .kt { color: #cdcaa9; font-weight: bold } /* Keyword.Type */
+    .ld { color: #ffffff } /* Literal.Date */
+    .m { color: #0086f7; font-weight: bold } /* Literal.Number */
+    .s { color: #0086d2 } /* Literal.String */
+    .na { color: #ff0086; font-weight: bold } /* Name.Attribute */
+    .nb { color: #ffffff } /* Name.Builtin */
+    .nc { color: #ffffff } /* Name.Class */
+    .no { color: #0086d2 } /* Name.Constant */
+    .nd { color: #ffffff } /* Name.Decorator */
+    .ni { color: #ffffff } /* Name.Entity */
+    .ne { color: #ffffff } /* Name.Exception */
+    .nf { color: #ff0086; font-weight: bold } /* Name.Function */
+    .nl { color: #ffffff } /* Name.Label */
+    .nn { color: #ffffff } /* Name.Namespace */
+    .nx { color: #ffffff } /* Name.Other */
+    .py { color: #ffffff } /* Name.Property */
+    .nt { color: #fb660a; font-weight: bold } /* Name.Tag */
+    .nv { color: #fb660a } /* Name.Variable */
+    .ow { color: #ffffff } /* Operator.Word */
+    .w { color: #888888 } /* Text.Whitespace */
+    .mf { color: #0086f7; font-weight: bold } /* Literal.Number.Float */
+    .mh { color: #0086f7; font-weight: bold } /* Literal.Number.Hex */
+    .mi { color: #0086f7; font-weight: bold } /* Literal.Number.Integer */
+    .mo { color: #0086f7; font-weight: bold } /* Literal.Number.Oct */
+    .sb { color: #0086d2 } /* Literal.String.Backtick */
+    .sc { color: #0086d2 } /* Literal.String.Char */
+    .sd { color: #0086d2 } /* Literal.String.Doc */
+    .s2 { color: #0086d2 } /* Literal.String.Double */
+    .se { color: #0086d2 } /* Literal.String.Escape */
+    .sh { color: #0086d2 } /* Literal.String.Heredoc */
+    .si { color: #0086d2 } /* Literal.String.Interpol */
+    .sx { color: #0086d2 } /* Literal.String.Other */
+    .sr { color: #0086d2 } /* Literal.String.Regex */
+    .s1 { color: #0086d2 } /* Literal.String.Single */
+    .ss { color: #0086d2 } /* Literal.String.Symbol */
+    .bp { color: #ffffff } /* Name.Builtin.Pseudo */
+    .vc { color: #fb660a } /* Name.Variable.Class */
+    .vg { color: #fb660a } /* Name.Variable.Global */
+    .vi { color: #fb660a } /* Name.Variable.Instance */
+    .il { color: #0086f7; font-weight: bold } /* Literal.Number.Integer.Long */
+}

data/_sass/lifenode/_timeline.scss

@@ -0,0 +1,81 @@
+// _timeline.scss
+// style for timeline component
+
+@import "_base";
+@import "_mixins";
+
+$timeline-color: $border-color-split;
+
+.#{$lifenode-prefix}-timeline {
+    @include reset-component();
+    
+    &-item {
+        position: relative;
+        padding: 0 0 20px;
+        list-style: none;
+        margin: 0;
+        font-size: $font-size-base;
+
+        &-tail {
+            position: absolute;
+            left: 4px;
+            top: 0.75em;
+            height: 100%;
+            border-left: 2px solid $timeline-color;
+        }
+
+        &-pending &-head {
+            font-size: $font-size-sm;
+        }
+
+        &-pending &-tail {
+            display: none;
+        }
+
+        &-head {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: $component-background;
+            border-radius: 100px;
+            border: 2px solid transparent;
+
+            &-blue {
+                border-color: $primary-color;
+                color: $primary-color;
+            }
+            &-red {
+                border-color: $error-color;
+                color: $error-color;
+            }
+            &-green {
+                border-color: $success-color;
+                color: $success-color;
+            }
+        }
+
+        &-content {
+            padding: 0 0 0 18px;
+            position: relative;
+            top: -($font-size-base * $line-height-base - $font-size-base) + 1px;
+            &-date {
+                font-size: $font-size-sm;
+                color: $text-disabled-color;
+            }
+        }
+
+        &:last-child {
+            .#{$lifenode-prefix}-timeline-item-tail {
+                border-left: 2px dotted $timeline-color;
+                display: none;
+            }
+            .#{$lifenode-prefix}-timeline-item-content {
+                min-height: 48px;
+            }
+        }
+    }
+
+    &-item:last-child &-item-tail {
+        display: block;
+    }
+}

data/_sass/lifenode/neat/_neat.scss

@@ -0,0 +1,26 @@
+@charset "UTF-8";
+// Neat 2.1.0
+// http://neat.bourbon.io
+// Copyright 2012 thoughtbot, inc.
+// MIT License
+
+@import "neat/settings/settings";
+
+@import "neat/functions/retrieve-neat-settings";
+@import "neat/functions/neat-column-default";
+@import "neat/functions/neat-column-width";
+@import "neat/functions/neat-column-ratio";
+@import "neat/functions/neat-float-direction";
+@import "neat/functions/neat-merge-defaults";
+@import "neat/functions/neat-opposite-direction";
+@import "neat/functions/neat-parse-columns";
+@import "neat/functions/neat-parse-media";
+@import "neat/functions/neat-append-grid-visual";
+
+@import "neat/mixins/grid-collapse";
+@import "neat/mixins/grid-column";
+@import "neat/mixins/grid-container";
+@import "neat/mixins/grid-media";
+@import "neat/mixins/grid-push";
+@import "neat/mixins/grid-shift";
+@import "neat/mixins/grid-visual";

data/_sass/lifenode/neat/neat/functions/_neat-append-grid-visual.scss

@@ -0,0 +1,21 @@
+@charset "UTF-8";
+/// Append attributes to a the `$_grid-visual` variable in `grid-visual` mixin
+///
+/// @argument {map} $grid
+///
+/// @argument {number (unitless) | null} $columns
+///
+/// @return {number}
+///
+/// @example scss
+///   _neat-column-default($neat-grid, 4)
+///
+/// @access private
+
+@function _neat-append-grid-visual($grid-visual-list, $attributes) {
+  @each $attribute in $attributes {
+    $grid-visual-list: append($grid-visual-list, $attribute, comma);
+  }
+
+  @return $grid-visual-list;
+}

data/_sass/lifenode/neat/neat/functions/_neat-column-default.scss

@@ -0,0 +1,23 @@
+@charset "UTF-8";
+/// Determine if a column count has been given.
+/// If no columns have been given return the grid's total column count.
+///
+/// @argument {map} $grid
+///
+/// @argument {number (unitless) | null} $columns
+///
+/// @return {number}
+///
+/// @example scss
+///   _neat-column-default($neat-grid, 4)
+///
+/// @access private
+
+@function _neat-column-default($grid, $columns) {
+  @if $columns == null {
+    $_grid-columns: _retrieve-neat-setting($grid, columns);
+    @return $_grid-columns;
+  } @else {
+    @return $columns;
+  }
+}

data/_sass/lifenode/neat/neat/functions/_neat-column-ratio.scss

@@ -0,0 +1,24 @@
+@charset "UTF-8";
+/// Determine the ratio of `$columns` to the total column count.
+/// If `$columns` is more than one value, they are handed to
+/// `_neat-parse-columns()` which will determine the total columns and use this
+/// value instead of `total-columns`.
+///
+/// @argument {map} $grid
+///
+/// @argument {number | list} $columns
+///
+/// @return {number}
+///
+/// @example scss
+///   _neat-column-ratio($grid, 3)
+///
+/// @access private
+
+@function _neat-column-ratio($grid, $columns) {
+  @if length($columns) > 1 {
+    @return nth($columns, 1) / _neat-parse-columns($columns);
+  } @else if $columns {
+    @return $columns / _retrieve-neat-setting($grid, columns);
+  }
+}

data/_sass/lifenode/neat/neat/functions/_neat-column-width.scss

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+/// Return a calulated column width that can then be passed in to a `calc()`.
+///
+/// @argument {map} $grid
+///
+/// @argument {number} $columns
+///
+/// @return {string}
+///
+/// @example scss
+///   _neat-column-width($neat-grid, 4)
+///
+/// @access private
+
+@function _neat-column-width($grid, $columns) {
+  $_column-ratio: _neat-column-ratio($grid, $columns);
+  $_gutter: _retrieve-neat-setting($grid, gutter);
+
+  @if $_gutter == 0 {
+    @return unquote("#{percentage($_column-ratio)}");
+  } @else {
+    $_gutter-affordance: $_gutter + ($_gutter * $_column-ratio);
+    @return unquote("#{percentage($_column-ratio)} - #{$_gutter-affordance}");
+  }
+}

data/_sass/lifenode/neat/neat/functions/_neat-float-direction.scss

@@ -0,0 +1,22 @@
+@charset "UTF-8";
+/// Return the float direction of the grid.
+///
+/// @argument {map} $grid
+///
+/// @return {string}
+///
+/// @example scss
+///   _neat-float-direction($neat-grid)
+///
+/// @access private
+
+@function _neat-float-direction($grid) {
+  $_direction: _retrieve-neat-setting($grid, direction);
+  $_float-direction: null;
+  @if $_direction == "ltr" {
+      $_float-direction: left;
+  } @else if $_direction == "rtl" {
+    $_float-direction: right;
+  }
+  @return $_float-direction;
+}

data/_sass/lifenode/neat/neat/functions/_neat-merge-defaults.scss

@@ -0,0 +1,23 @@
+@charset "UTF-8";
+/// Apply Neat's default properties to undefined values within a map.
+///
+/// @argument {map} $grid
+///
+/// @return {map}
+///
+/// @example scss
+///   _retrieve-neat-setting($neat-grid)
+///
+/// @access private
+
+@function _neat-merge-defaults($grid) {
+  $_merged-grid: map-merge((
+    columns: 12,
+    gutter: 20px,
+    media: null,
+    color: rgba(#00d4ff, 0.25),
+    direction: ltr,
+  ), $grid);
+
+  @return $_merged-grid;
+}

data/_sass/lifenode/neat/neat/functions/_neat-opposite-direction.scss

@@ -0,0 +1,22 @@
+@charset "UTF-8";
+/// Return the oppoite of the float direction of the grid.
+///
+/// @argument {map} $grid
+///
+/// @return {string}
+///
+/// @example scss
+///   _neat-opposite-direction($neat-grid)
+///
+/// @access private
+
+@function _neat-opposite-direction($grid) {
+  $_direction: _retrieve-neat-setting($grid, direction);
+  $_float-direction: null;
+  @if $_direction == "ltr" {
+      $_float-direction: right;
+  } @else if $_direction == "rtl" {
+    $_float-direction: left;
+  }
+  @return $_float-direction;
+}

data/_sass/lifenode/neat/neat/functions/_neat-parse-columns.scss

@@ -0,0 +1,22 @@
+@charset "UTF-8";
+/// Parse a column count like `3 of 5` and retur the total coloumn count.
+/// This is to allow a shorthand for custom grids without using a settings map.
+///
+///
+/// @argument {list} $span
+///
+/// @return {number}
+///
+/// @example scss
+///   _neat-parse-columns(3 of 5)
+///
+/// @access private
+
+@function _neat-parse-columns($span) {
+  @if length($span) == 3 {
+    $_total-columns: nth($span, 3);
+    @return $_total-columns;
+  } @else if length($span) == 2 or if length($span) >= 3 {
+    @error "`$column` should contain 2 values, seperated by an `of`";
+  }
+}

data/_sass/lifenode/neat/neat/functions/_neat-parse-media.scss

@@ -0,0 +1,20 @@
+@charset "UTF-8";
+/// Parse media types. If the property is a string then return it, otherwise
+/// assume screen and min-width.
+///
+/// @argument {string | number (with unit)} $media
+///
+/// @return {number}
+///
+/// @example scss
+///   _neat-parse-media($grid, 1000px)
+///
+/// @access private
+
+@function _neat-parse-media($media) {
+  @if type-of($media) == number {
+    @return "only screen and (min-width: #{$media})";
+  } @else if type-of($media) == string {
+    @return "#{$media}";
+  }
+}

data/_sass/lifenode/neat/neat/functions/_retrieve-neat-settings.scss

@@ -0,0 +1,19 @@
+@charset "UTF-8";
+/// This function recives a grid map and merges it with Neat's defauls.
+/// It then returns the value of the property that has been passed to it.
+///
+/// @argument {map} $grid
+///
+/// @argument {string} $setting
+///
+/// @return {boolean | color | list | number | string}
+///
+/// @example scss
+///   _retrieve-neat-setting($neat-grid, columns)
+///
+/// @access private
+
+@function _retrieve-neat-setting($grid, $setting) {
+  $_grid-settings: map-merge(_neat-merge-defaults($neat-grid), $grid);
+  @return map-get($_grid-settings, $setting);
+}

data/_sass/lifenode/neat/neat/mixins/_grid-collapse.scss

@@ -0,0 +1,35 @@
+@charset "UTF-8";
+/// Creates collapsed grid object that consumes the gutters of its container,
+/// for use in nested layouts.
+///
+/// @group features
+///
+/// @name Grid collapse
+///
+/// @argument {map} $grid [$neat-grid]
+///   The grid to be used to generate the collapsed container.
+///   By default, the global `$neat-grid` will be used.
+///
+/// @example scss
+///   .element {
+///     @include grid-collapse;
+///   }
+///
+/// @example css
+///   .element {
+///     margin-left: -20px;
+///     margin-right: -20px;
+///     width: calc(100% + 40px);
+///   }
+
+@mixin grid-collapse($grid: $neat-grid) {
+  $_grid-gutter: _retrieve-neat-setting($grid, gutter);
+
+  @if unit($_grid-gutter) == "%" {
+    @warn "`grid-collapse` is not compatible with percentage based gutters.";
+  }
+
+  margin-#{_neat-float-direction($grid)}: -($_grid-gutter);
+  margin-#{_neat-opposite-direction($grid)}: -($_grid-gutter);
+  width: calc(100% + #{($_grid-gutter * 2)});
+}

data/_sass/lifenode/neat/neat/mixins/_grid-column.scss

@@ -0,0 +1,39 @@
+@charset "UTF-8";
+/// Creates a grid column of requested size.
+///
+/// @group features
+///
+/// @name Grid column
+///
+/// @argument {number (unitless)} $columns [null]
+///   Specifies the number of columns an element should span based on the total
+///   columns of the grid.
+///
+///   This can also be defined in a shorthand syntaxt which also contains the
+///   total column count such as `3 of 5`.
+///
+/// @argument {map} $grid [$neat-grid]
+///   The grid to be used to generate the column.
+///   By default, the global `$neat-grid` will be used.
+///
+/// @example scss
+///   .element {
+///     @include grid-column(3);
+///   }
+///
+/// @example css
+///   .element {
+///     width: calc(25% - 25px);
+///     float: left;
+///     margin-left: 20px;
+///   }
+
+@mixin grid-column($columns: null, $grid: $neat-grid) {
+  $columns: _neat-column-default($grid, $columns);
+  $_grid-columns: _retrieve-neat-setting($grid, columns);
+  $_grid-gutter: _retrieve-neat-setting($grid, gutter);
+
+  width: calc(#{_neat-column-width($grid, $columns)});
+  float: _neat-float-direction($grid);
+  margin-#{_neat-float-direction($grid)}: $_grid-gutter;
+}

data/_sass/lifenode/neat/neat/mixins/_grid-container.scss

@@ -0,0 +1,31 @@
+@charset "UTF-8";
+/// Creates a grid container with clearfix.
+///
+/// @group features
+///
+/// @name Grid container
+///
+/// @example scss
+///   .element {
+///     @include grid-container;
+///   }
+///
+/// @example css
+///   .element::after {
+///     clear: both;
+///     content: "";
+///     display: block;
+///   }
+
+@mixin grid-container($grid: $neat-grid) {
+  @if $grid != $neat-grid {
+    @warn "`grid-container` does not use grid propertes.
+      Custom grids do not need to be passed in to this mixin.";
+  }
+
+  &::after {
+    clear: both;
+    content: "";
+    display: block;
+  }
+}

data/_sass/lifenode/neat/neat/mixins/_grid-media.scss

@@ -0,0 +1,67 @@
+@charset "UTF-8";
+/// `grid-media` allows you to change your layout based on a media query.
+/// For example, an object can span 3 columns on small screens and 6 columns
+/// on large screens.
+///
+/// You can take this a step further and set different grid attributes like
+/// gutter size and total column count for each media query. So, for example,
+/// you can have a `1rem` gutter on small screens, and a `2rem` gutter on large
+/// screens.
+///
+/// @group features
+///
+/// @name Grid media
+///
+/// @argument {map} $grid
+///   The grid to be used within the scope of the block.
+///   This grid should include the `media` property to determine the expression
+///   for the media query.
+///
+/// @content
+///   Grid media will temporarily the override the default grid with the
+///   attributes of the custom grid. This change is scoped to within the mixin
+///   block, and once the mixin has ended the default grid will revert to its
+///   original state as defined by `$neat-grid`. This allows for different
+///   gutter width and column count based on screen size or other properties.
+///
+/// @example scss
+///   $custom-neat-grid: (
+///     columns: 12,
+///     gutter: 50px,
+///     media: 1000px,
+///   );
+///
+///   .element {
+///     @include grid-column(3);
+///
+///     @include grid-media($custom-neat-grid){
+///       @include grid-column(6);
+///     }
+///   }
+///
+/// @example css
+///   .element {
+///     width: calc(25% - 25px);
+///     float: left;
+///     margin-left: 20px;
+///   }
+///
+///   @media only screen and (min-width: 1000px) {
+///     .element {
+///       width: calc(50% - 75px);
+///       float: left;
+///       margin-left: 50px;
+///     }
+///   }
+
+@mixin grid-media($grid) {
+  $_media: _retrieve-neat-setting($grid, media);
+  $_query: _neat-parse-media($_media);
+
+  @media #{$_query} {
+    $_default-neat-grid: $neat-grid;
+    $neat-grid: map-merge($neat-grid, $grid) !global;
+    @content;
+    $neat-grid: $_default-neat-grid !global;
+  }
+}

data/_sass/lifenode/neat/neat/mixins/_grid-push.scss

@@ -0,0 +1,37 @@
+@charset "UTF-8";
+/// Push or pull a grid column by manipulating its left margin.
+///
+/// @group features
+///
+/// @name Grid push
+///
+/// @argument {number (unitless)} $push [false]
+///   The number of columns to push the column.
+///
+/// @argument {map} $grid [$neat-grid]
+///   The grid to be used to determine how far to push the column.
+///   By default, the global `$neat-grid` will be used.
+///
+/// @example scss
+///   .element {
+///     @include grid-push(3);
+///   }
+///
+/// @example css
+///   .element {
+///     margin-left: calc(25% - 25px + 40px);
+///   }
+
+@mixin grid-push($push: false, $grid: $neat-grid) {
+  $_grid-columns: _retrieve-neat-setting($grid, columns);
+  $_grid-gutter: _retrieve-neat-setting($grid, gutter);
+
+  @if $push {
+    $_gutter-affordance: $_grid-gutter * 2;
+    $_margin-value: calc(#{_neat-column-width($grid, $push)} + #{$_gutter-affordance});
+    margin-#{_neat-float-direction($grid)}: $_margin-value;
+  } @else {
+    $_margin-value: _retrieve-neat-setting($grid, gutter);
+    margin-#{_neat-float-direction($grid)}: $_margin-value;
+  }
+}

data/_sass/lifenode/neat/neat/mixins/_grid-shift.scss

@@ -0,0 +1,36 @@
+@charset "UTF-8";
+/// Shift columns and reorder them within their container using relative
+/// positioning.
+///
+/// @group features
+///
+/// @name Grid shift
+///
+/// @argument {number (unitless)} $shift [false]
+///   The number of columns to shift the column.
+///
+/// @argument {map} $grid [$neat-grid]
+///   The grid to be used to determine how far to shift the column.
+///   By default, the global `$neat-grid` will be used.
+///
+/// @example scss
+///   .element {
+///     @include grid-shift(3);
+///   }
+///
+/// @example css
+///   .element {
+///     left: calc(25% - 25px + 20px);
+///     position: relative;
+///   }
+
+@mixin grid-shift($shift: false, $grid: $neat-grid) {
+  @if $shift {
+    $_shift-value: calc(#{_neat-column-width($grid, $shift)} + #{_retrieve-neat-setting($grid, gutter)});
+    #{_neat-float-direction($grid)}: $_shift-value;
+  } @else {
+    #{_neat-float-direction($grid)}: auto;
+  }
+
+  position: relative;
+}

data/_sass/lifenode/neat/neat/mixins/_grid-visual.scss

@@ -0,0 +1,41 @@
+@charset "UTF-8";
+/// Creates a series of guide lines using the `background-image` property on a
+/// grid container to visualise the columns and gutters of the grid.
+///
+/// @group features
+///
+/// @name Grid visual
+///
+/// @argument {color} $color
+///   The color of the guide lines created.
+///
+/// @argument {map} $grid [$neat-grid]
+///   The grid used to determine the guides
+///
+/// @example scss
+///   .element {
+///     @include grid-visual;
+///   }
+///
+/// @example css
+///   .element {
+///     background-image: repeating-linear-gradient( … ) ;
+///   }
+
+@mixin grid-visual($color: null, $grid: $neat-grid) {
+  @if not $color {
+    $color: _retrieve-neat-setting($grid, color);
+  }
+
+  $_grid-columns: _retrieve-neat-setting($grid, columns);
+  $_grid-gutter: _retrieve-neat-setting($grid, gutter);
+  $_grid-visual-column: "#{_neat-column-width($grid, 1)} + #{$_grid-gutter}";
+  $_grid-visual:
+    transparent,
+    transparent $_grid-gutter,
+    $color $_grid-gutter,
+    $color calc(#{$_grid-visual-column}),
+  ;
+
+  background-image: repeating-linear-gradient(to right, $_grid-visual);
+}

data/_sass/lifenode/neat/neat/settings/_settings.scss

@@ -0,0 +1,74 @@
+@charset "UTF-8";
+/// This variable is a sass map that overrides Neat's default grid settings.
+/// Use this to define your project's grid properties including gutters and
+/// total column count.
+///
+/// @type map
+///
+/// @group settings
+///
+/// @name Neat grid
+///
+/// @property {number (unitless)} columns [12]
+///   Default number of the total grid columns.
+///
+/// @property {number (with unit)} gutter [20px]
+///   Default grid gutter width between columns.
+///
+/// @example scss
+///   $neat-grid: (
+///     columns: 12,
+///     gutter: 20px,
+///   );
+
+$neat-grid: () !default;
+
+/// If you need multiple grids in a single project, you can do
+/// this by defining a new map stored within a variable of your choosing. This
+/// variable can then be passed directly in to any of Neat's mixins like
+/// [`grid-column(12, $my-custom-grid)`](#grid-column).
+///
+/// Custom grids are especially useful with [`grid-media`](#grid-media). By
+/// defining a `media` attribute within your custom grid, you are able to easily
+/// define gutter width and total column count as well the breakpoint at which
+/// they should activate.
+///
+/// @type map
+///
+/// @group settings
+///
+/// @name Custom grids
+///
+/// @property {number (unitless)} columns [12]
+///   Number of the total grid columns.
+///
+/// @property {number (with unit)} gutter [20px]
+///   Grid gutter width between columns.
+///
+/// @property {number (with unit) | string | null} media [null]
+///   The `@media` definition that is used by the [`grid-media`](#grid-media)
+///   mixin to determine the media properties.
+///
+/// @property {color} color [null]
+///   The color used by [`grid-visual`](#grid-visual) to create the guides.
+///
+/// @property {string} direction [ltr]
+///   The float direction used throughout the grid.
+///
+/// @example scss
+///   $my-custom-grid: (
+///     columns: 12,
+///     gutter: 20px,
+///     media: 1200px,
+///     color: rgba(#00d4ff, 0.25),
+///     direction: ltr,
+///   );
+///
+///   $other-custom-grid-for-print: (
+///     columns: 14,
+///     gutter: 1.5rem,
+///     media: print,
+///   );
+///
+
+$neat-custom-grid: () !default;

data/assets/css/style.scss

@@ -0,0 +1,5 @@
+---
+# main Sass file
+---
+
+@import "lifenode";

metadata

@@ -0,0 +1,123 @@
+--- !ruby/object:Gem::Specification
+name: lifenode
+version: !ruby/object:Gem::Version
+  version: 0.0.0
+platform: ruby
+authors:
+- nukosuke
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2018-03-09 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.7'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.7'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.16'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.16'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '12.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '12.0'
+description: 
+email:
+- nukosuke@lavabit.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE.txt
+- README.md
+- _includes/disqus_comments.html
+- _includes/google_analytics.html
+- _includes/head.html
+- _layouts/default.html
+- _layouts/home.html
+- _layouts/page.html
+- _layouts/post.html
+- _sass/lifenode.scss
+- _sass/lifenode/_base.scss
+- _sass/lifenode/_grid.scss
+- _sass/lifenode/_header.scss
+- _sass/lifenode/_mixins.scss
+- _sass/lifenode/_syntax-highlight.scss
+- _sass/lifenode/_timeline.scss
+- _sass/lifenode/neat/_neat.scss
+- _sass/lifenode/neat/neat/functions/_neat-append-grid-visual.scss
+- _sass/lifenode/neat/neat/functions/_neat-column-default.scss
+- _sass/lifenode/neat/neat/functions/_neat-column-ratio.scss
+- _sass/lifenode/neat/neat/functions/_neat-column-width.scss
+- _sass/lifenode/neat/neat/functions/_neat-float-direction.scss
+- _sass/lifenode/neat/neat/functions/_neat-merge-defaults.scss
+- _sass/lifenode/neat/neat/functions/_neat-opposite-direction.scss
+- _sass/lifenode/neat/neat/functions/_neat-parse-columns.scss
+- _sass/lifenode/neat/neat/functions/_neat-parse-media.scss
+- _sass/lifenode/neat/neat/functions/_retrieve-neat-settings.scss
+- _sass/lifenode/neat/neat/mixins/_grid-collapse.scss
+- _sass/lifenode/neat/neat/mixins/_grid-column.scss
+- _sass/lifenode/neat/neat/mixins/_grid-container.scss
+- _sass/lifenode/neat/neat/mixins/_grid-media.scss
+- _sass/lifenode/neat/neat/mixins/_grid-push.scss
+- _sass/lifenode/neat/neat/mixins/_grid-shift.scss
+- _sass/lifenode/neat/neat/mixins/_grid-visual.scss
+- _sass/lifenode/neat/neat/settings/_settings.scss
+- assets/css/style.scss
+homepage: https://github.com/nukosuke/lifenode
+licenses:
+- MIT
+metadata:
+  plugin_type: theme
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.1
+signing_key: 
+specification_version: 4
+summary: Simple theme for Jekyll.
+test_files: []