limp-dark 0.1.1

data/_layouts/page.html

@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+<h1>{{page.title}}</h1>
+
+{{ content }}

data/_layouts/post.html

@@ -0,0 +1,83 @@
+---
+layout: default
+---
+
+{% include views/post-header.html %}
+{{ content }}
+
+{% include views/share-buttons.html %}
+
+<div class="post-nav">
+    {%- if page.previous -%}
+    <a class="previous" href="{{ page.previous.url | relative_url }}" title="{{
+        page.previous.title | escape }}">{{ page.previous.title | escape | truncatewords: 6 }}</a>
+    {%- else -%}
+    <span></span>
+    {%- endif -%}
+
+    {%- if page.next -%}
+    <a class="next" href="{{ page.next.url | relative_url }}" title="{{ page.next.title | escape }}">{{ page.next.title | escape | truncatewords: 6 }}</a>
+    {%- else -%}
+    <span></span>
+    {%- endif -%}
+</div>
+
+
+
+<div class="post-related">
+    <div><h3>Related Articles</h3></div>
+    <ol>
+    {% assign posts = site[page.collection] | sample:4 %}
+    {%- for post in posts -%}
+    <li><a class="post-link" href="{{post.url | relative_url}}" title="{{ page.next.title | escape }}">{{ post.title | escape | truncatewords: 12 }}</a></li>
+    {%- endfor -%}
+    </ol>
+</div>
+
+<div class="post-comments">
+    {%- if page.comments != false -%}
+
+    {%- if site.disqus.shortname -%}
+    {%- include extensions/comments/disqus.html -%}
+    {%- endif -%}
+
+    {%- if site.gitment.username -%}
+    {%- include extensions/comments/gitment.html -%}
+    {%- endif -%}
+
+    {%- endif -%}
+</div>
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/styles/github.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/highlight.min.js"></script>
+<script>
+    // Init highlight js
+    document.addEventListener('DOMContentLoaded', function(event) {
+    var els = document.querySelectorAll('pre code')
+    function handle(block) {
+        var outer = block.parentElement.parentElement.parentElement;
+        var lang = block.getAttribute('data-lang');
+        for (var i = 0; i < outer.classList.length; i++) {
+        var cls = outer.classList[i];
+        if (cls.startsWith('language-')) {
+            lang = cls;
+            break;
+        }
+        }
+        if (!lang) {
+        cls = block.getAttribute('class');
+        lang = cls ? cls.replace('hljs ', '') : '';
+        }
+        if (lang.startsWith('language-')) {
+        lang = lang.substr(9);
+        }
+        block.setAttribute('class', 'hljs ' + lang);
+        block.parentNode.setAttribute('data-lang', lang);
+        hljs.highlightBlock(block);
+    }
+    for (var i = 0; i < els.length; i++) {
+        var el = els[i];
+        handle(el);
+    }
+    });
+</script>

data/_layouts/tags.html

@@ -0,0 +1,26 @@
+---
+layout: page
+---
+
+<style>
+  h2::before { 
+  display: block; 
+  content: " "; 
+  margin-top: -85px; 
+  height: 85px; 
+  visibility: hidden; 
+  pointer-events: none;
+}
+</style>
+
+{%- if site.posts.size > 0 -%}
+
+  {%- include functions.html func='log' level='debug' msg='Get tags value' -%}
+  {%- include functions.html func='get_tags' -%}
+  {% assign tags = return %}
+
+  {% assign keys = tags %}
+  {% assign field = 'tags' %}
+  {%- include views/segments.html -%}
+
+{%- endif -%}

data/_sass/_mixins.sass

@@ -0,0 +1,6 @@
+@mixin media-query($device) 
+  @media screen and (max-width: $device) 
+    @content
+  
+@mixin relative-font-size($ratio)
+  font-size: $base-font-size * $ratio

data/_sass/_veriables.sass

@@ -0,0 +1,19 @@
+
+// colors
+
+$brand_main:    #f09d51 !default
+$brand_sec:     #313638 !default
+$brand_light:   #f5eae1 !default
+
+// device sizes
+
+$on-phone:         430px !default
+$on-palm:          725px !default
+$on-laptop:        992px !default
+
+// base font size
+
+$base-font-size: 16px !default
+$spacing-unit: 30px !default
+
+$table-text-align: left !default

data/_sass/base/_base-dir.sass

@@ -0,0 +1 @@
+@import base.sass

data/_sass/base/_base.sass

@@ -0,0 +1,220 @@
+/* latin */
+@font-face
+  font-family: 'Nerko One'
+  font-style: normal
+  font-weight: 400
+  font-display: swap
+  src: url(https://fonts.gstatic.com/s/nerkoone/v1/m8JQjfZSc7OXlB3ZMOjDd5RA.woff2) format('woff2')
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
+
+@font-face
+  font-family: 'Sansita Swashed'
+  font-style: normal
+  font-weight: 500
+  font-display: swap
+  src: url(https://fonts.gstatic.com/s/sansitaswashed/v1/BXR8vFfZifTZgFlDDLgNkBydPKTt3pVCeYWqJnZSW4ZpXT0few.woff2) format('woff2')
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
+
+@font-face
+  font-family: 'Comfortaa'
+  font-style: normal
+  font-weight: 600
+  font-display: swap
+  src: url(https://fonts.gstatic.com/s/comfortaa/v29/1Pt_g8LJRfWJmhDAuUsSQamb1W0lwk4S4bbLDrMfIA.woff2) format('woff2')
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
+
+body
+  background: $brand_sec
+  color: $brand_main
+  margin: 5rem 0 0 0
+  padding: 0
+  display: flex
+  flex-direction: column
+  justify-content: space-between
+  min-height: calc( 100vh - 13vh )
+  font-family: sans-serif, Arial, Helvetica
+  @include relative-font-size(1.07)
+
+main
+  flex-grow: 1
+
+p
+  line-height: 1.3
+  @include relative-font-size(1.05)
+
+h1, h2, h3, h4, h5, h6
+  font-family: 'Sansita Swashed', sans-serif
+
+h1
+  color: $brand_light
+  @include relative-font-size(2.7)
+
+h2
+  @include relative-font-size(2.4)
+
+h3
+  @include relative-font-size(2.1)
+
+h4
+  @include relative-font-size(1.9)
+
+h5
+  @include relative-font-size(1.7)
+
+h6
+  @include relative-font-size(1.5)
+
+@include media-query($on-phone)
+  h1
+    @include relative-font-size(2.2)
+
+  h2
+    @include relative-font-size(2.05)
+
+  h3
+    @include relative-font-size(1.9)
+
+  h4
+    @include relative-font-size(1.75)
+
+  h5
+    @include relative-font-size(1.6)
+
+  h6
+    @include relative-font-size(1.5)
+
+a
+  text-decoration: none
+  color: $brand_main
+  transition: .3s ease all
+  &:hover
+    color: $brand_light
+    transition: .3s ease all
+
+.svg-icon
+  width: 1.3rem
+  height: 1.3rem
+
+blockquote
+  color: darken($brand_main, 10%)
+  font-style: italic
+  border-left: 5px solid
+  margin-left: 0
+  padding-left: 3rem
+
+/**
+ * Images
+ */
+img
+  max-width: 100%
+  vertical-align: middle
+
+/**
+ * Figures
+ */
+figure
+  margin: 0
+  & > img
+    display: block
+
+figcaption
+  @include relative-font-size(.5)
+
+/**
+ * Lists
+ */
+ul,
+ol
+  margin-left: $spacing-unit
+
+li
+  > ul,
+  > ol
+    margin-bottom: 0
+
+/**
+ * Code formatting
+ */
+pre,
+code
+  color: $brand_sec
+  // @include relative-font-size(0.9375)
+
+*:not(pre) > code
+  padding: 1px 5px
+  border-radius: 3px
+  color: #ffc38b
+  background-color: lighten($brand_sec, 10%)
+  margin: 0 5px
+
+.highlight
+  > pre
+    width: 100%
+    overflow: hidden
+    border-radius: 7px
+    position: relative
+    background-color: $brand_light
+
+    // code language badge
+    &:before
+      content: attr(data-lang)
+      color: #fff
+      background-color: #ff4e00
+      padding: .2rem .5em
+      border-radius: 0 7px
+      text-transform: uppercase
+      text-align: center
+      min-width: 32px
+      min-height: 15px
+      display: inline-block
+      position: absolute
+      right: 0
+
+    > code
+      box-sizing: border-box
+      width: 100%
+      overflow: auto
+      display: inline-block
+      padding: 20px!important
+      background-color: transparent
+      border: 0
+
+    table, pre
+      margin-bottom: 0
+
+      .gutter, .code
+        padding: 6px
+        border: none
+
+/**
+ * Tables
+ */
+table
+  margin-bottom: $spacing-unit
+  width: 100%
+  text-align: $table-text-align
+  color: darken($brand_main, 10%)
+  border-collapse: collapse
+
+  tr
+    &:nth-child(even)
+      background-color: lighten($brand_sec, 6%)
+
+  th,
+  td
+    padding: ($spacing-unit / 3) ($spacing-unit / 2)
+
+  th
+    background-color: lighten($brand_sec, 3%)
+    border: 1px solid darken($brand_main, 4%)
+    border-bottom-color: darken($brand_main, 12%)
+
+  td
+    border: 1px solid $brand_main
+
+// mermaid
+img.mermaid
+  background: lighten($brand_sec, 15%)
+  overflow: hidden
+  border-radius: 7px
+  padding: 7px 0 7px 0

data/_sass/layouts/_footer.sass

@@ -0,0 +1,80 @@
+.footer
+    width: 100%
+    // background: darken($brand_light, 20%)
+    background: $brand_sec
+    box-shadow: 2px 0px 3px rgba($brand_main, 0.5)
+
+    &__section
+        width: 100%
+        display: flex
+        justify-content: space-between
+        padding: 1rem 0 1rem 0
+
+        & > div:first-child
+            width: 60%
+
+        & > div:last-child
+            width: 25%
+
+        & > div
+            width: 15%
+
+        & > div:not(:last-child)
+            padding-right: 1.7rem
+
+    &__extra
+        display: flex
+        align-items: center
+        flex-direction: column
+        padding: 1rem 0 1rem 0
+
+        & > .social > ul
+            list-style: none
+            padding: 0
+            margin: 0
+            display: flex
+
+            & > li:not(:last-child)
+                padding-right: 1.5rem
+
+            & svg
+                width: 30px
+                height: 30px
+                fill: $brand_main
+
+            & svg:hover
+                fill: $brand_light
+                transition: .3s ease all
+
+    &__links
+        list-style: none
+        padding: 0
+        margin-left: 0
+
+        & > li > a
+            color: $brand_main
+            text-decoration: none
+            transition: .3s ease all
+
+            &:hover
+                color: $brand_light
+                transition: .3s ease all
+
+        & > li:not(:last-child)
+            padding-bottom: .5rem
+.copyright
+    text-align: center
+
+@include media-query($on-palm)
+    .footer
+        &__section
+            flex-direction: column
+            align-items: center
+
+            & > div:not(:last-child)
+                padding-bottom: 1rem
+                padding-right: 0
+
+            & > div
+                width: 100% !important
+                text-align: center