jekyll-theme-so-simple 3.0.0

data/_layouts/posts.html

@@ -0,0 +1,29 @@
+---
+layout: page
+---
+
+{{ content }}
+
+<ul class="taxonomy-index">
+  {% assign postsInYear = site.posts | group_by_exp: 'post', 'post.date | date: "%Y"' %}
+  {% for year in postsInYear %}
+    <li>
+      <a href="#{{ year.name }}">
+        <strong>{{ year.name }}</strong> <span class="taxonomy-count">{{ year.items | size }}</span>
+      </a>
+    </li>
+  {% endfor %}
+</ul>
+
+{% assign postsByYear = site.posts | group_by_exp: 'post', 'post.date | date: "%Y"' %}
+{% for year in postsByYear %}
+  <section id="{{ year.name }}" class="taxonomy-section">
+    <h2 class="taxonomy-title">{{ year.name }}</h2>
+    <div class="entries-{{ page.entries_layout | default: 'list' }}">
+      {% for entry in year.items %}
+        {% include entry.html %}
+      {% endfor %}
+    </div>
+    <a href="#page-title" class="back-to-top">{{ site.data.text[site.locale].back_to_top | default: 'Back to Top' }} &uarr;</a>
+  </section>
+{% endfor %}

data/_layouts/search.html

@@ -0,0 +1,11 @@
+---
+layout: page
+---
+
+{{ content }}
+
+<form>
+  <input type="input" id="search" class="search-input" placeholder="{{ site.data.text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
+</form>
+
+<div id="results"></div>

data/_layouts/tag.html

@@ -0,0 +1,9 @@
+---
+layout: page
+---
+
+{{ content }}
+
+<div class="entries-{{ page.entries_layout | default: 'list' }}">
+  {% include posts-tag.html taxonomy=page.taxonomy %}
+</div>

data/_layouts/tags.html

@@ -0,0 +1,48 @@
+---
+layout: page
+---
+
+{{ content }}
+
+<ul class="taxonomy-index">
+  {% assign tags_max = 0 %}
+  {% for tag in site.tags %}
+    {% if tag[1].size > tags_max %}
+      {% assign tags_max = tag[1].size %}
+    {% endif %}
+  {% endfor %}
+  {% for i in (1..tags_max) reversed %}
+    {% for tag in site.tags %}
+      {% if tag[1].size == i %}
+        <li>
+          <a href="#{{ tag[0] | slugify }}">
+            <strong>{{ tag[0] }}</strong> <span class="taxonomy-count">{{ i }}</span>
+          </a>
+        </li>
+      {% endif %}
+    {% endfor %}
+  {% endfor %}
+</ul>
+
+{% assign tags_max = 0 %}
+{% for tag in site.tags %}
+  {% if tag[1].size > tags_max %}
+    {% assign tags_max = tag[1].size %}
+  {% endif %}
+{% endfor %}
+
+{% for i in (1..tags_max) reversed %}
+  {% for tag in site.tags %}
+    {% if tag[1].size == i %}
+      <section id="{{ tag[0] | slugify | downcase }}" class="taxonomy-section">
+        <h2 class="taxonomy-title">{{ tag[0] }}</h2>
+        <div class="entries-{{ page.entries_layout | default: 'list' }}">
+          {% for entry in tag.last %}
+            {% include entry.html %}
+          {% endfor %}
+        </div>
+        <a href="#page-title" class="back-to-top">{{ site.data.text[site.locale].back_to_top | default: 'Back to Top' }} &uarr;</a>
+      </section>
+    {% endif %}
+  {% endfor %}
+{% endfor %}

data/_sass/so-simple.scss

@@ -0,0 +1,31 @@
+/*!
+ * So Simple Jekyll Theme 3.0.0
+ * Copyright 2013-2018 Michael Rose - mademistakes.com | @mmistakes
+ * Free for personal and commercial use under the MIT license
+ * https://github.com/mmistakes/so-simple-theme/blob/master/LICENSE
+*/
+
+@import "so-simple/functions";
+@import "so-simple/variables";
+@import "so-simple/mixins";
+@import "so-simple/vendor/breakpoint/breakpoint";
+@include breakpoint-set("to ems", true);
+@import "so-simple/vendor/lity/lity";
+
+/* Core Styles */
+@import "so-simple/reset";
+@import "so-simple/base";
+@import "so-simple/tables";
+
+/* Components */
+@import "so-simple/global";
+@import "so-simple/page";
+@import "so-simple/author";
+@import "so-simple/entries";
+@import "so-simple/buttons";
+@import "so-simple/icons";
+@import "so-simple/notices";
+@import "so-simple/syntax-highlighting";
+
+/* Utility Clases */
+@import "so-simple/utilities";

data/_sass/so-simple/_author.scss

@@ -0,0 +1,45 @@
+/* ==========================================================================
+   Author
+   ========================================================================== */
+
+.author-avatar {
+  display: none;
+
+  @include breakpoint($large) {
+    display: inline;
+    margin-bottom: 1em;
+    width: 100px;
+    height: 100px;
+    border-radius: 100px;
+  }
+}
+
+.author-name {
+  @include breakpoint($large) {
+    margin-bottom: 0.5em;
+  }
+}
+
+.author-links {
+  display: none;
+  margin: 0 0 1.5em;
+  padding: 0;
+  list-style: none;
+
+  @include breakpoint($large) {
+    display: block;
+  }
+}
+
+.author-link {
+  display: inline;
+  padding-right: 0.5em;
+
+  @include breakpoint($large) {
+    padding: 0.25em;
+  }
+
+  a {
+    text-decoration: none;
+  }
+}

data/_sass/so-simple/_base.scss

@@ -0,0 +1,112 @@
+/* ==========================================================================
+   Base elements
+   ========================================================================== */
+
+html {
+  @include fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size);
+}
+
+body {
+  background: $background-color;
+  color: $text-color;
+  border-top: solid 0.25em $nav-background-color;
+}
+
+blockquote,
+q {
+
+  footer {
+    font-size: 80%;
+    font-style: normal;
+
+    &::before {
+      padding-right: 0.25rem;
+      content: "\2014";
+    }
+  }
+}
+
+code,
+kbd,
+samp,
+pre {
+  font-family: $monospace-font-family;
+}
+
+kbd {
+  display: inline-block;
+  margin: 0 0.125em;
+  padding: 0.125em 0.5em;
+  border: 1px solid rgb(204, 204, 204);
+  border-radius: 3px;
+  background-color: rgb(247, 247, 247);
+  font-size: 85%;
+  text-shadow: 0 1px 0 #fff;
+  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 2px #fff;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 2px #fff;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $headline-font-family;
+  text-rendering: optimizeLegibility; /* enable common ligatures and kerning */
+}
+
+h1 {
+  @include fluid-type($min-vw, $max-vw, $h1-min, $h1-max);
+}
+
+h2 {
+  @include fluid-type($min-vw, $max-vw, $h2-min, $h2-max);
+}
+
+h3 {
+  @include fluid-type($min-vw, $max-vw, $h3-min, $h3-max);
+}
+
+h4 {
+  @include fluid-type($min-vw, $max-vw, $h4-min, $h4-max);
+}
+
+h5 {
+  @include fluid-type($min-vw, $max-vw, $h5-min, $h5-max);
+}
+
+h6 {
+  @include fluid-type($min-vw, $max-vw, $h6-min, $h6-max);
+}
+
+dt {
+  font-weight: bold;
+
+  &:not(:first-child) {
+    margin-top: 1rem;
+  }
+}
+
+dd {
+  margin: 0;
+}
+
+pre {
+  @include fluid-type($min-vw, $max-vw, 12px, 14px);
+}
+
+figcaption {
+  margin: 0.5rem 0;
+  font-size: 80%;
+}
+
+a {
+  color: $accent-color;
+  -webkit-transition: $global-transition;
+  transition: $global-transition;
+
+  &:hover {
+    color: shade($accent-color, 25%);
+  }
+}

data/_sass/so-simple/_buttons.scss

@@ -0,0 +1,92 @@
+/* ==========================================================================
+   BUTTONS
+   ========================================================================== */
+
+/*
+   Default button
+   ========================================================================== */
+
+.btn {
+  /* default */
+  display: inline-block;
+  margin-bottom: 0.25em;
+  padding: 0.5em 1em;
+  font-family: $sans-serif-font-family;
+  font-size: 1em;
+  font-weight: bold;
+  text-align: center;
+  text-decoration: none;
+  border-width: 0;
+  border-radius: $border-radius;
+  cursor: pointer;
+
+  .icon {
+    margin-right: 0.5em;
+  }
+
+  .icon + .hidden {
+    margin-left: -0.5em; /* override for hidden text*/
+  }
+
+  /* button colors */
+  $buttoncolors: (primary, $primary-color),  (inverse, #fff),
+     (light-outline, transparent),  (success, $success-color),
+     (warning, $warning-color),  (danger, $danger-color),  (info, $info-color),
+     (facebook, $facebook-color),  (twitter, $twitter-color),
+     (google-plus, $google-plus-color),  (linkedin, $linkedin-color),
+     (reddit, $reddit-color);
+
+  @each $buttoncolor, $color in $buttoncolors {
+    &--#{$buttoncolor} {
+      @include yiq-contrasted($color);
+      @if ($buttoncolor == inverse) {
+        border: 1px solid $border-color;
+      }
+      @if ($buttoncolor == light-outline) {
+        border: 1px solid #fff;
+      }
+
+      &:hover {
+        @include yiq-contrasted(mix(#000, $color, 20%));
+      }
+
+      &:visited {
+        @include yiq-contrasted($color);
+      }
+    }
+  }
+
+  /* fills width of parent container */
+  &--block {
+    display: block;
+    width: 100%;
+
+    + .btn--block {
+      margin-top: 0.25em;
+    }
+  }
+
+  /* disabled */
+  &--disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+    filter: alpha(opacity=65);
+    box-shadow: none;
+    opacity: 0.65;
+  }
+
+  /* extra large button */
+  &--x-large {
+    font-size: 2em;
+  }
+
+  /* large button */
+  &--large {
+    font-size: 1.5em;
+  }
+
+  /* small button */
+  &--small {
+    font-size: 0.75em;
+  }
+}

data/_sass/so-simple/_entries.scss

@@ -0,0 +1,182 @@
+/* ==========================================================================
+   Entries (Posts, collection documents, etc.)
+   ========================================================================== */
+
+.entry {
+  @include clearfix();
+
+  a {
+    color: inherit;
+
+    &:hover {
+      color: $accent-color;
+    }
+  }
+}
+
+.entry-header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.entry-title {
+  margin-bottom: 0.5rem;
+  font-family: $title-font-family;
+  font-weight: $entry-title-weight;
+  font-style: italic;
+  letter-spacing: -1px;
+  word-wrap: break-word; /* break long words that could overflow */
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.entry-image {
+  -webkit-box-ordinal-group: 0;
+  -ms-flex-order: -1;
+  order: -1;
+  width: 100%;
+  margin-bottom: 0.5rem;
+}
+
+.entry-meta {
+  .entry-date,
+  .read-time {
+    font-family: $meta-font-family;
+    font-style: italic;
+    white-space: nowrap;
+  }
+
+  .read-time + .entry-date::before {
+    content: "\2022";
+    padding: 0 0.5em;
+  }
+}
+
+/*
+   Entries List Layout
+   ========================================================================== */
+
+.entries-list {
+  .entry {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    margin-bottom: 2rem;
+  }
+
+  .entry-title {
+    @include fluid-type($min-vw, $max-vw, 24px, 36px);
+    -webkit-box-ordinal-group: 2;
+    -ms-flex-order: 1;
+    order: 1;
+  }
+
+  .entry-excerpt,
+  .entry-content {
+    -webkit-box-ordinal-group: 4;
+    -ms-flex-order: 3;
+    order: 3;
+
+    /* remove space after last child element */
+    > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .entry-excerpt {
+    /* normalize font sizes */
+    > * {
+      font-size: 1em;
+    }
+  }
+
+  .entry-meta {
+    -webkit-box-ordinal-group: 3;
+    -ms-flex-order: 2;
+    order: 2;
+    margin-bottom: 1em;
+    font-size: 0.75em;
+  }
+
+  .more-link {
+    margin-top: -1em;
+
+    a {
+      text-decoration: none;
+    }
+  }
+}
+
+/*
+   Entries Grid Layout
+   ========================================================================== */
+
+.entries-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-gap: 2em;
+
+  .entry {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    padding-bottom: 2rem;
+  }
+
+  .entry-title {
+    @include fluid-type($min-vw, $max-vw, 18px, 24px);
+    -webkit-box-ordinal-group: 2;
+    -ms-flex-order: 1;
+    order: 1;
+  }
+
+  .entry-excerpt,
+  .entry-content {
+    -webkit-box-ordinal-group: 4;
+    -ms-flex-order: 3;
+    order: 3;
+
+    /* remove space after last child element */
+    > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .entry-excerpt {
+    /* normalize font sizes */
+    > * {
+      font-size: 1em;
+    }
+  }
+
+  .entry-meta {
+    -webkit-box-ordinal-group: 3;
+    -ms-flex-order: 2;
+    order: 2;
+    margin-bottom: 1em;
+    font-size: 0.75em;
+  }
+
+  .more-link {
+    margin-top: -1em;
+
+    a {
+      text-decoration: none;
+    }
+  }
+}